├── README.md └── project 1 └── First steps ├── amazon-logo.png ├── amazon_logo.png ├── download.png ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /project 1/First steps/amazon-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HridyeshKumar/html-project/19480e4521437b4340738bc4202ec30933f0f912/project 1/First steps/amazon-logo.png -------------------------------------------------------------------------------- /project 1/First steps/amazon_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HridyeshKumar/html-project/19480e4521437b4340738bc4202ec30933f0f912/project 1/First steps/amazon_logo.png -------------------------------------------------------------------------------- /project 1/First steps/download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HridyeshKumar/html-project/19480e4521437b4340738bc4202ec30933f0f912/project 1/First steps/download.png -------------------------------------------------------------------------------- /project 1/First steps/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Amazon 8 | 9 | 10 | 11 | 12 |
13 |
14 | 19 |
20 |

Deliver to

21 |
22 | 23 |

India

24 |
25 |
26 |
27 | 30 | 31 |
32 | 33 |
34 |
35 | 39 | 40 |
41 |

Returns

42 |

& Orders

43 |
44 | 45 |
46 | 47 | cart 48 |
49 | 50 |
51 | 52 |
53 |
54 | 55 | All 56 |
57 |
58 |

Today's deals

59 |

Customer Service

60 |

Registry

61 |

Gift Cards

62 |

Sell

63 |
64 |
65 | Shop deals in Electronics 66 |
67 |
68 |
69 | 70 |
71 |
72 |

You are on amazon.com. You can also shop on Amazon India for millions of products with fast local delivery.Click here to go to amazon.in

73 |
74 |
75 | 76 |
77 |
78 |
79 |

Gift for every Mom

80 |
81 |

See more

82 |
83 |
84 |
85 |
86 |

Beauty steals under $25

87 |
88 |

See more

89 |
90 |
91 |
92 |
93 |

Deals in PCs

94 |
95 |

See more

96 |
97 |
98 |
99 |
100 |

Personal care under $25

101 |
102 |

See more

103 |
104 |
105 |
106 |
107 |

Upgrade your office furniture

108 |
109 |

See more

110 |
111 |
112 |
113 |
114 |

A whole new way to work

115 |
116 |

See more

117 |
118 |
119 |
120 |
121 |

Creating bussiness solution

122 |
123 |

See more

124 |
125 |
126 |
127 |
128 |

Shop trackers & smartwatches

129 |
130 |

See more

131 |
132 |
133 |
134 | 195 | 196 | 197 | -------------------------------------------------------------------------------- /project 1/First steps/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | font-family: Arial; 4 | border: border-box; 5 | } 6 | 7 | .navbar{ 8 | height: 60px; 9 | background-color: #0f1111; 10 | color: white; 11 | display:flex; 12 | align-items:center; 13 | justify-content: space-evenly; 14 | } 15 | 16 | .nav-logo{ 17 | height: 50px; 18 | width: 100px; 19 | } 20 | 21 | .logo img{ 22 | 23 | background-size: cover; 24 | height: 50px; 25 | width: 100%; 26 | } 27 | 28 | 29 | .border{ 30 | border:1.5px solid transparent; 31 | } 32 | 33 | .border:hover{ 34 | border: 1.5px solid white; 35 | } 36 | 37 | /** box2**/ 38 | 39 | .add-first{ 40 | color:#cccccc ; 41 | font-size: 0.85rem; 42 | margin-left: 15px; 43 | } 44 | 45 | .add-second{ 46 | font-size:1rem; 47 | margin-left:3px; 48 | 49 | } 50 | 51 | .add-icon{ 52 | display:flex; 53 | align-items: center; 54 | } 55 | 56 | /**box3**/ 57 | .nav-search{ 58 | display:flex; 59 | justify-content:space-evenly; 60 | background-color:pink; 61 | width:620px; 62 | height: 30px; 63 | border-radius:4px; 64 | } 65 | 66 | .search-select{ 67 | background-color: #f3f3f3; 68 | width:50px; 69 | text-align:center; 70 | border-top-left-radius:4px; 71 | border-bottom-left-radius:4px; 72 | border:none; 73 | 74 | } 75 | 76 | .search-input{ 77 | width:100%; 78 | font-size:1rem; 79 | border:none; 80 | } 81 | 82 | .search-icon{ 83 | width:45px; 84 | display: flex; 85 | justify-content:center; 86 | align-items:center; 87 | font-size:1.2rem; 88 | background-color: orange; 89 | border-top-right-radius:4px; 90 | border-bottom-right-radius:4px; 91 | color:#0f1111; 92 | } 93 | 94 | .nav-search:hover{ 95 | border:2px solid orange; 96 | } 97 | /**box4**/ 98 | span{ 99 | font-size:0.7rem; 100 | } 101 | 102 | .nav-second{ 103 | font-size: 0.85rem; 104 | font-weight :700;; 105 | } 106 | /**box6**/ 107 | .nav-cart i{ 108 | font-size:30px; 109 | } 110 | 111 | .nav-cart{ 112 | font-size:0.85rem; 113 | font-weight:700; 114 | } 115 | 116 | /**panel**/ 117 | 118 | .panel{ 119 | height:40px; 120 | background-color:#222f3d; 121 | display:flex; 122 | color:white; 123 | align-items:center; 124 | justify-content:space-evenly; 125 | } 126 | 127 | .panel-ops p{ 128 | display:inline; 129 | margin-left:15px; 130 | } 131 | 132 | .panel-ops{ 133 | width:70%; 134 | font-size:0.85rem; 135 | } 136 | 137 | .panel-deals{ 138 | font-size:0.9rem; 139 | font-weight :700; 140 | } 141 | 142 | /**hero section**/ 143 | 144 | .hero-section{ 145 | background-image:url("https://m.media-amazon.com/images/I/61P7hqIHrdL._SX3000_.jpg"); 146 | background-size: cover; 147 | height:350px; 148 | display:flex; 149 | justify-content: center; 150 | align-items: flex-end; 151 | } 152 | 153 | .hero-msg{ 154 | background-color: white; 155 | color:black; 156 | height:40px; 157 | display:flex; 158 | align-items: center; 159 | justify-content: center; 160 | font-size: 0.85rem; 161 | width:80%; 162 | margin-bottom:25px; 163 | } 164 | 165 | .hero-message a{ 166 | color:#007185; 167 | } 168 | 169 | /**shop-section**/ 170 | .shop-section{ 171 | display:flex; 172 | flex-wrap:wrap; 173 | justify-content: space-evenly; 174 | background-color: rgb(248, 217, 222); 175 | } 176 | .box{ 177 | /**border:2px solid black;**/ 178 | height : 350px; 179 | width:23%; 180 | background-color:white ; 181 | padding:5px 0px 15px; 182 | margin-top: 10px; 183 | margin-bottom: 15px; 184 | } 185 | 186 | .box-image{ 187 | height: 290px; 188 | background-image: contain; 189 | margin-top: 0rem; 190 | margin-bottom: 0rem; 191 | } 192 | 193 | .box-content{ 194 | margin-left: 1rem; 195 | margin-right: 1rem; 196 | } 197 | 198 | .box-content p{ 199 | color:#007185; 200 | } 201 | 202 | /**footer**/ 203 | .footer{ 204 | margin-top: 15px; 205 | } 206 | .foot-panel1 { 207 | background-color: #37475a; 208 | color: white; 209 | height: 50px; 210 | display: flex; 211 | justify-content: center; 212 | align-items: center; 213 | font-size: 0.90rem; 214 | } 215 | 216 | .foot-panel2{ 217 | background-color: #222f3d; 218 | color:white; 219 | height:350px; 220 | display:flex; 221 | justify-content: space-evenly; 222 | } 223 | 224 | ul{ 225 | margin-top: 20px; 226 | } 227 | 228 | ul a{ 229 | display:block; 230 | font-size:0.90rem; 231 | margin-top: 10px; 232 | color:#dddddd 233 | } 234 | 235 | .foot-panel3{ 236 | background-color: #222f3d; 237 | color:white; 238 | border-top: 0.5px solid white; 239 | height:70px; 240 | display:flex; 241 | justify-content: center; 242 | align-items: center; 243 | } 244 | 245 | .logo{ 246 | background-image: url("box1a"); 247 | background-size: cover; 248 | height: 50px; 249 | width: 100%; 250 | 251 | } 252 | 253 | .foot-panel4{ 254 | background-color: #0f1111; 255 | color:white; 256 | height:70px; 257 | font-size: 0.7rem; 258 | text-align: center; 259 | } 260 | 261 | .pages{ 262 | padding-top: 25px; 263 | } 264 | 265 | .copyright{ 266 | padding: 5px; 267 | } --------------------------------------------------------------------------------