├── images ├── a1.png ├── bg.jpg ├── c1.png ├── c2.png ├── c3.png ├── c4.png ├── c5.png ├── h1.png ├── p6.png ├── t1.png ├── w1.png ├── ac1.png ├── arrow.png ├── menu.png ├── pcm1.png ├── pr1.png ├── pr10.png ├── pr11.png ├── pr12.png ├── pr2.png ├── pr3.png ├── pr4.png ├── pr5.png ├── pr6.png ├── pr7.png ├── pr8.png ├── pr9.png ├── fridge1.png ├── image1.png ├── laptop2.png ├── phone1.png ├── phone2.png ├── background.png ├── left-arrow.png ├── register.png ├── controller-1.png ├── controller-2.png ├── controller-3.png ├── dslr camera.png ├── right-arrow.png └── iphone 13 pro.png ├── README.md ├── register.html ├── login.html ├── contact.html ├── about.html ├── style.css └── index.html /images/a1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/a1.png -------------------------------------------------------------------------------- /images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/bg.jpg -------------------------------------------------------------------------------- /images/c1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/c1.png -------------------------------------------------------------------------------- /images/c2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/c2.png -------------------------------------------------------------------------------- /images/c3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/c3.png -------------------------------------------------------------------------------- /images/c4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/c4.png -------------------------------------------------------------------------------- /images/c5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/c5.png -------------------------------------------------------------------------------- /images/h1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/h1.png -------------------------------------------------------------------------------- /images/p6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/p6.png -------------------------------------------------------------------------------- /images/t1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/t1.png -------------------------------------------------------------------------------- /images/w1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/w1.png -------------------------------------------------------------------------------- /images/ac1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/ac1.png -------------------------------------------------------------------------------- /images/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/arrow.png -------------------------------------------------------------------------------- /images/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/menu.png -------------------------------------------------------------------------------- /images/pcm1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/pcm1.png -------------------------------------------------------------------------------- /images/pr1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/pr1.png -------------------------------------------------------------------------------- /images/pr10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/pr10.png -------------------------------------------------------------------------------- /images/pr11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/pr11.png -------------------------------------------------------------------------------- /images/pr12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/pr12.png -------------------------------------------------------------------------------- /images/pr2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/pr2.png -------------------------------------------------------------------------------- /images/pr3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/pr3.png -------------------------------------------------------------------------------- /images/pr4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/pr4.png -------------------------------------------------------------------------------- /images/pr5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/pr5.png -------------------------------------------------------------------------------- /images/pr6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/pr6.png -------------------------------------------------------------------------------- /images/pr7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/pr7.png -------------------------------------------------------------------------------- /images/pr8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/pr8.png -------------------------------------------------------------------------------- /images/pr9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/pr9.png -------------------------------------------------------------------------------- /images/fridge1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/fridge1.png -------------------------------------------------------------------------------- /images/image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/image1.png -------------------------------------------------------------------------------- /images/laptop2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/laptop2.png -------------------------------------------------------------------------------- /images/phone1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/phone1.png -------------------------------------------------------------------------------- /images/phone2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/phone2.png -------------------------------------------------------------------------------- /images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/background.png -------------------------------------------------------------------------------- /images/left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/left-arrow.png -------------------------------------------------------------------------------- /images/register.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/register.png -------------------------------------------------------------------------------- /images/controller-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/controller-1.png -------------------------------------------------------------------------------- /images/controller-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/controller-2.png -------------------------------------------------------------------------------- /images/controller-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/controller-3.png -------------------------------------------------------------------------------- /images/dslr camera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/dslr camera.png -------------------------------------------------------------------------------- /images/right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/right-arrow.png -------------------------------------------------------------------------------- /images/iphone 13 pro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Electronic-Shop/HEAD/images/iphone 13 pro.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Electronic-Shop 2 | An Electronic Shop Responsive Website using HTML & CSS. 3 | 4 | 🎧💻🖥️🖨️🔌💽💾📽📽️🖨🎤🎙️📻📱📠📲🔋💿📡📺📹📸📷💡🖱️ 5 | -------------------------------------------------------------------------------- /register.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CODE AASHU | Electronic Shop 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |

WELCOME TO OUR SHOP

24 |
25 | Login 26 | Register 27 |
28 |
29 | 30 | 31 | 32 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 |
86 |
87 |
88 |

Register

89 |
90 |
91 |

Create Account

92 |
93 | 94 | 95 | 96 | 97 | 98 |
99 |

SIGN UP

100 |
101 | 102 |
103 |
104 | 105 | 106 | 107 | 108 | 109 | 110 |
111 |

Subscribe To The Electronic Shop For Latest upload.

112 |
113 | 114 | 115 |
116 |
117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | -------------------------------------------------------------------------------- /login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CODE AASHU | Electronic Shop 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |

WELCOME TO OUR SHOP

24 |
25 | Login 26 | Register 27 |
28 |
29 | 30 | 31 | 32 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 |
86 |
87 |
88 |

Welcome Back!

89 |
90 |
91 |

Account login

92 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, sequi.

93 |
94 | 95 | 96 |
97 |

LOG IN

98 |

Forgot PasswordClick

99 |
100 | 101 |
102 |
103 | 104 | 105 | 106 | 107 | 108 | 109 |
110 |

Subscribe To The Electronic Shop For Latest upload.

111 |
112 | 113 | 114 |
115 |
116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CODE AASHU | Electronic Shop 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |

WELCOME TO OUR SHOP

24 |
25 | Login 26 | Register 27 |
28 |
29 | 30 | 31 | 32 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |
87 |
88 |
89 |
90 | Phone 91 |
+91 6209950346
92 |
93 |
94 |
95 |
96 | Email 97 |
example@gmail.com
98 |
99 |
100 |
101 |
102 | Address 103 |
Patna Bihar India
104 |
105 |
106 |
107 |
108 |
109 | 110 |
111 |
112 | 113 |
114 |
115 | 116 |
117 |
118 | 119 |
120 |
121 |
122 |
123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 |
131 |

Subscribe To The Electronic Shop For Latest upload.

132 |
133 | 134 | 135 |
136 |
137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CODE AASHU | Electronic Shop 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |

WELCOME TO OUR SHOP

24 |
25 | Login 26 | Register 27 |
28 |
29 | 30 | 31 | 32 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 |
86 |

PRODUCT

87 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam odit quae modi cumque, dolorum id quaerat repudiandae tenetur facere veritatis inventore nam sequi. Id ipsam, odio rerum doloremque quam natus perferendis saepe est sapiente optio, ab dolore quaerat temporibus quia non, neque mollitia earum? Ab soluta magnam officiis quasi deleniti, tempora in ex vitae praesentium quaerat facere saepe laudantium temporibus nesciunt recusandae voluptas totam, iste nihil amet et. Fugiat iste eaque provident at omnis. Non asperiores rem fuga id vel ipsum libero corporis? Voluptatem, ullam omnis. Assumenda ipsa sunt sit quidem eligendi reiciendis, deleniti voluptatibus, molestias vel, ab ea quam?

88 |
89 |
90 |
91 |
92 | 93 |
94 |
95 |
96 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima fugit ad impedit libero quis. Ipsam totam accusantium non minima excepturi nemo doloremque, inventore dolores at aperiam voluptates voluptatem maiores odit. Unde dolorum similique facilis veritatis exercitationem excepturi sunt, non at quis deleniti! Mollitia quaerat temporibus reprehenderit neque esse unde minima sed illo, perferendis quidem eum voluptatem ipsam aliquam modi doloremque error. Odit amet veniam necessitatibus quis ad voluptate quidem laudantium, quia vitae quisquam dolorem deleniti temporibus reiciendis, rerum delectus quo cupiditate velit consequuntur neque eum est vero? Perspiciatis architecto provident illo sequi reprehenderit quasi excepturi hic sint perferendis, tempore cupiditate.

97 | 98 |
99 |
100 |
101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 |
111 |
112 |
113 | 114 |

Free Shipping

115 |

On order over $1000

116 |
117 |
118 | 119 |

Free Returns

120 |

Within 30 days

121 |
122 |
123 | 124 |

Fast Delivery

125 |

World Wide

126 |
127 |
128 | 129 |

Big choice

130 |

Of products

131 |
132 |
133 |
134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 |
143 |

Subscribe To The Electronic Shop For Latest upload.

144 |
145 | 146 | 147 |
148 |
149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* ===( CODE AASHU )=== */ 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | outline: none; 7 | font-family: 'Merriweather', serif; 8 | } 9 | /* top navbar */ 10 | .top-navbar{ 11 | display: flex; 12 | justify-content: space-between; 13 | } 14 | .top-navbar p{ 15 | margin-top: 13px; 16 | margin-left: 15px; 17 | } 18 | .top-navbar .icons{ 19 | margin-top: 13px; 20 | margin-right: 15px; 21 | } 22 | .top-navbar a{ 23 | text-decoration: none; 24 | color: black; 25 | margin-left: 10px; 26 | } 27 | .top-navbar a img{ 28 | margin-bottom: 3px; 29 | } 30 | .top-navbar a:hover{ 31 | color: black; 32 | } 33 | @media screen and (max-width:400px){ 34 | .top-navbar a{ 35 | font-size: 13px; 36 | } 37 | .top-navbar a img{ 38 | width: 15px; 39 | } 40 | .top-navbar p{ 41 | font-size: 13px; 42 | } 43 | } 44 | @media screen and (max-width:320px){ 45 | .top-navbar a{ 46 | font-size: 10px; 47 | } 48 | .top-navbar a img{ 49 | width: 13px; 50 | } 51 | .top-navbar p{ 52 | font-size: 10px; 53 | } 54 | } 55 | @media screen and (max-width:318px){ 56 | .top-navbar a{ 57 | font-size: 8px; 58 | margin-left: 0; 59 | } 60 | .top-navbar a img{ 61 | width: 10px; 62 | margin-left: 0; 63 | } 64 | .top-navbar p{ 65 | font-size: 10px; 66 | margin-top: 20px; 67 | } 68 | } 69 | /* top navbar */ 70 | 71 | /* navbar */ 72 | #navbar{ 73 | background-color: rgb(67 0 86); 74 | } 75 | #logo{ 76 | margin-left: 15px; 77 | color: white; 78 | font-size: 25px; 79 | font-weight: bold; 80 | margin-bottom: 6px; 81 | } 82 | #logo span{ 83 | color: #ffc800; 84 | } 85 | #logo #span1{ 86 | font-size: 30px; 87 | } 88 | .navbar-nav{ 89 | margin-left: 20px; 90 | } 91 | .nav-item{ 92 | margin-left: 10px; 93 | } 94 | .nav-item .nav-link{ 95 | color: white; 96 | margin-left: 2px; 97 | text-shadow: 0px 0px 1px black; 98 | transition: 0.5s ease; 99 | } 100 | .nav-item .nav-link:hover{ 101 | color: #ffc800; 102 | } 103 | .dropdown-menu li a{ 104 | color: white; 105 | transition: 0.5s ease; 106 | } 107 | .dropdown-menu li a:hover{ 108 | background-color: rgb(67 0 86); 109 | color: #ffc800; 110 | } 111 | #search input{ 112 | border-radius: 50px; 113 | border: none; 114 | } 115 | #search button{ 116 | border-radius: 50px; 117 | color: white; 118 | border: 1px solid #ffc800; 119 | background-color: #ffc800; 120 | } 121 | /* navbar */ 122 | 123 | 124 | 125 | 126 | /* home content */ 127 | .home{ 128 | width: 100%; 129 | height: 80vh; 130 | display: flex; 131 | align-items: center; 132 | justify-content: center; 133 | flex-wrap: wrap; 134 | position: relative; 135 | background-color: #a9a9a92b; 136 | z-index: 0; 137 | } 138 | .home .img{ 139 | flex: 1 1 300px; 140 | } 141 | .home .img img{ 142 | margin-top: 30px; 143 | width: 100%; 144 | } 145 | .home .content{ 146 | flex: 1 1 400px; 147 | margin-top: 20px; 148 | } 149 | .content h1{ 150 | color: rgb(67 0 86); 151 | font-weight: bold; 152 | margin-left: 23px; 153 | font-size: 55px; 154 | text-shadow: -1px 1px 1px black; 155 | } 156 | .content h1 span{ 157 | color: rgb(67 0 86); 158 | text-shadow: 1px 1px 1px black; 159 | } 160 | #span2{ 161 | color: #ffc800; 162 | } 163 | .content p{ 164 | margin-left: 23px; 165 | } 166 | .btn{ 167 | margin-left: 13px; 168 | } 169 | .btn button{ 170 | width: 150px; 171 | height: 32px; 172 | letter-spacing: 3px; 173 | background-color: rgb(67 0 86); 174 | color: white; 175 | border-radius: 5px; 176 | border: none; 177 | transition: 0.5s ease; 178 | cursor: pointer; 179 | } 180 | .btn button:hover{ 181 | background-color: #ffc800; 182 | color: black; 183 | border: none; 184 | } 185 | @media screen and (max-width:1200px){ 186 | .home{ 187 | height: 90vh; 188 | } 189 | } 190 | @media screen and (max-width:799px){ 191 | .home{ 192 | height: 140vh; 193 | } 194 | } 195 | @media screen and (max-width:550px){ 196 | .home{ 197 | height: 110vh; 198 | } 199 | } 200 | @media screen and (max-width:420px){ 201 | .content h1{ 202 | font-size: 45px; 203 | } 204 | } 205 | @media screen and (max-width:320px){ 206 | .content h1{ 207 | font-size: 36px; 208 | } 209 | } 210 | /* home content */ 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | /* product cards */ 220 | #product-cards{ 221 | margin-top: 100px; 222 | } 223 | #product-cards h1{ 224 | color: #ffc800; 225 | text-shadow: 1px 1px 1px black; 226 | border-bottom: 2px solid #ffc800; 227 | } 228 | #product-cards .card h3{ 229 | font-size: 20px; 230 | color: black; 231 | } 232 | #product-cards .card p{ 233 | font-size: 12px; 234 | margin-top: 5px; 235 | color: black; 236 | } 237 | .star i{ 238 | margin-left: 5px; 239 | font-size: 13px; 240 | } 241 | .checked{ 242 | color: #ffc800; 243 | } 244 | #product-cards .card h2{ 245 | font-size: 20px; 246 | color: black; 247 | margin-top: 20px; 248 | } 249 | #product-cards .card h2 span{ 250 | float: right; 251 | color: black; 252 | cursor: pointer; 253 | } 254 | @media screen and (max-width:1000px){ 255 | #product-cards .card h3{ 256 | font-size: 15px; 257 | } 258 | } 259 | /* product cards */ 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | /* other cards */ 269 | #other-cards{ 270 | margin-top: 30px; 271 | } 272 | #other-cards .card{ 273 | background-color: #a9a9a92b; 274 | } 275 | #other-cards .card h3{ 276 | margin-top: 30px; 277 | color: black; 278 | margin-left: 10px; 279 | letter-spacing: 3px; 280 | } 281 | #other-cards .card h5{ 282 | margin-top: 15px; 283 | font-weight: 100; 284 | font-size: 18px; 285 | color: black; 286 | margin-left: 10px; 287 | letter-spacing: 3px; 288 | border-bottom: 2px solid black; 289 | width: 220px; 290 | } 291 | #other-cards .card p{ 292 | margin-top: 10px; 293 | font-weight: 100; 294 | font-size: 15px; 295 | color: black; 296 | margin-left: 10px; 297 | letter-spacing: 3px; 298 | } 299 | #shopnow{ 300 | width: 130px; 301 | height: 30px; 302 | margin-top: 10px; 303 | margin-left: 10px; 304 | letter-spacing: 3px; 305 | color: white; 306 | background-color: black; 307 | font-weight: bold; 308 | border: none; 309 | cursor: pointer; 310 | } 311 | 312 | @media screen and (max-width:1000px){ 313 | #other-cards .card h3{ 314 | margin-top: 5px; 315 | font-size: 20px; 316 | } 317 | #other-cards .card h5{ 318 | margin-top: 5px; 319 | font-size: 15px; 320 | } 321 | #other-cards .card p{ 322 | margin-top: 0px; 323 | } 324 | #shopnow{ 325 | margin-top: 0px; 326 | width: 120px; 327 | height: 30px; 328 | font-size: 16px; 329 | } 330 | } 331 | /* other cards */ 332 | 333 | 334 | 335 | 336 | 337 | 338 | /* banner */ 339 | .banner{ 340 | margin-top: 60px; 341 | width: 100%; 342 | height: 80vh; 343 | display: flex; 344 | align-items: center; 345 | justify-content: center; 346 | flex-wrap: wrap; 347 | position: relative; 348 | background-color: #a9a9a92b; 349 | z-index: 0; 350 | } 351 | .banner .img{ 352 | flex: 1 1 300px; 353 | } 354 | .banner .img img{ 355 | margin-top: 30px; 356 | width: 100%; 357 | } 358 | .banner .content{ 359 | flex: 1 1 400px; 360 | margin-top: 20px; 361 | } 362 | .banner .content h1{ 363 | color: rgb(67 0 86); 364 | font-weight: bold; 365 | margin-left: 23px; 366 | font-size: 55px; 367 | text-shadow: -1px 1px 1px black; 368 | } 369 | .banner .content h1 span{ 370 | color: rgb(67 0 86); 371 | text-shadow: 1px 1px 1px black; 372 | } 373 | #span2{ 374 | color: #ffc800; 375 | } 376 | .banner .content p{ 377 | margin-left: 23px; 378 | } 379 | .btn{ 380 | margin-left: 13px; 381 | } 382 | .btn button{ 383 | width: 150px; 384 | height: 32px; 385 | letter-spacing: 3px; 386 | background-color: rgb(67 0 86); 387 | color: white; 388 | border-radius: 5px; 389 | border: none; 390 | transition: 0.5s ease; 391 | cursor: pointer; 392 | } 393 | .btn button:hover{ 394 | background-color: #ffc800; 395 | color: black; 396 | border: none; 397 | } 398 | @media screen and (max-width:1200px){ 399 | .banner{ 400 | height: 90vh; 401 | } 402 | } 403 | @media screen and (max-width:799px){ 404 | .banner{ 405 | height: 140vh; 406 | } 407 | } 408 | @media screen and (max-width:550px){ 409 | .banner{ 410 | height: 110vh; 411 | } 412 | } 413 | @media screen and (max-width:420px){ 414 | .banner .content h1{ 415 | font-size: 45px; 416 | } 417 | } 418 | @media screen and (max-width:320px){ 419 | .banner .content h1{ 420 | font-size: 36px; 421 | } 422 | } 423 | /* banner */ 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | /* other cards */ 434 | #other{ 435 | margin-top: 50px; 436 | } 437 | #other .card{ 438 | box-shadow: rgba(17,12,46, 0.15) 0px 48px 100px 0px; 439 | } 440 | #other .card h3{ 441 | margin-top: 10px; 442 | color: white; 443 | text-shadow: 1px 1px 1px black; 444 | letter-spacing: 3px; 445 | font-weight: bold; 446 | } 447 | #other .card p{ 448 | margin-top: 10px; 449 | color: white; 450 | text-shadow: 0px 1px 1px black; 451 | letter-spacing: 3px; 452 | font-weight: bold; 453 | } 454 | /* other cards */ 455 | 456 | 457 | 458 | 459 | /* offer */ 460 | #offer{ 461 | margin-top: 100px; 462 | } 463 | #offer i{ 464 | font-size: 32px; 465 | color: black; 466 | } 467 | /* offer */ 468 | 469 | 470 | 471 | 472 | /* newslater */ 473 | #newslater{ 474 | margin-top: 100px; 475 | } 476 | #newslater h3{ 477 | font-size: 25px; 478 | letter-spacing: 3px; 479 | } 480 | .input{ 481 | margin-top: 30px; 482 | } 483 | .input input{ 484 | width: 350px; 485 | height: 36px; 486 | letter-spacing: 2px; 487 | border-radius: 3px; 488 | border: 1px solid black; 489 | padding-left: 5px; 490 | } 491 | #subscribe{ 492 | width: 200px; 493 | height: 36px; 494 | margin-left: 10px; 495 | border-radius: 3px; 496 | border: none; 497 | background-color: #ffc800; 498 | color: white; 499 | letter-spacing: 3px; 500 | font-weight: bold; 501 | text-shadow: 0px 0px 1px black; 502 | } 503 | @media screen and (max-width:465px){ 504 | .input input{ 505 | width: 280px; 506 | } 507 | #subscribe{ 508 | margin-top: 10px; 509 | } 510 | } 511 | @media screen and (max-width:250px){ 512 | .input input{ 513 | width: 150px; 514 | } 515 | #subscribe{ 516 | width: 150px; 517 | } 518 | } 519 | /* newslater */ 520 | 521 | 522 | 523 | 524 | /* footer */ 525 | #footer{ 526 | padding: 0 0 30px 0px; 527 | color: white; 528 | font-size: 14px; 529 | background-color: rgb(67 0 86); 530 | margin-top: 100px; 531 | } 532 | #footer .footer-top{ 533 | padding: 60px 0 30px 0; 534 | background-color: rgb(67 0 86); 535 | color: white; 536 | } 537 | #footer .footer-top .footer-contact{ 538 | margin-bottom: 30px; 539 | } 540 | #footer .footer-top .footer-contact h3{ 541 | color: #ffc800; 542 | } 543 | #footer .footer-top .footer-contact h4{ 544 | font-size: 22px; 545 | margin: 0 0 30px 0; 546 | padding: 2px 0 2px 0; 547 | line-height: 1; 548 | font-weight: 700; 549 | } 550 | #footer .footer-top .footer-contact p{ 551 | font-size: 14px; 552 | line-height: 24px; 553 | margin-bottom: 0; 554 | color: white; 555 | } 556 | #footer .footer-top h4{ 557 | font-size: 16px; 558 | font-weight: bold; 559 | position: relative; 560 | padding-bottom: 12px; 561 | } 562 | #footer .footer-top .footer-links{ 563 | margin-bottom: 30px; 564 | margin-top: 10px; 565 | } 566 | #footer .footer-top .footer-links h4{ 567 | color: #ffc800; 568 | } 569 | #footer .footer-top .footer-links ul{ 570 | list-style: none; 571 | padding: 0; 572 | margin: 0; 573 | } 574 | #footer .footer-top .footer-links ul li{ 575 | padding: 10px 0; 576 | display: flex; 577 | align-items: center; 578 | } 579 | #footer .footer-top .footer-links ul li a{ 580 | text-decoration: none; 581 | color: white; 582 | display: inline-block; 583 | line-height: 1; 584 | font-weight: bold; 585 | transition: 0.5s ease; 586 | } 587 | #footer .footer-top .footer-links ul li a:hover{ 588 | color: #ffc800; 589 | } 590 | #footer .footer-top .socail-links a{ 591 | font-size: 18px; 592 | display: inline-block; 593 | text-decoration: none; 594 | background-color: #373737; 595 | color: white; 596 | line-height: 1; 597 | padding: 8px 0; 598 | margin-right: 4px; 599 | border-radius: 50%; 600 | text-align: center; 601 | width: 36px; 602 | transition: 0.5s ease; 603 | } 604 | #footer .footer-top .socail-links a:hover{ 605 | background-color: #ffc800; 606 | color: white; 607 | } 608 | #footer .copyright{ 609 | text-align: center; 610 | float: left; 611 | } 612 | #footer .credits{ 613 | float: right; 614 | text-align: center; 615 | font-size: 13px; 616 | } 617 | #footer .credits a{ 618 | color: #ffc800; 619 | } 620 | /* footer */ 621 | 622 | 623 | 624 | 625 | html{ 626 | scroll-behavior: smooth; 627 | } 628 | .arrow{ 629 | position: fixed; 630 | width: 50px; 631 | height: 50px; 632 | bottom: 50px; 633 | right: 50px; 634 | text-decoration: none; 635 | text-align: center; 636 | line-height: 50px; 637 | } 638 | 639 | 640 | 641 | 642 | 643 | /* login */ 644 | #login{ 645 | width: 65%; 646 | height: 70vh; 647 | background-color: rgb(67 0 86); 648 | margin-top: 35px; 649 | border-radius: 10px; 650 | box-shadow: rgba(17,12, 46, 0.15) 0px 48px 100px 0px; 651 | } 652 | #side1 h3{ 653 | color: #ffc800; 654 | font-weight: bold; 655 | margin-top: 200px; 656 | } 657 | #side2{ 658 | background-color: white; 659 | height: 70vh; 660 | border-radius: 10px; 661 | } 662 | #side2 h3{ 663 | margin-top: 30px; 664 | color: #ffc800; 665 | font-weight: bold; 666 | text-shadow: 0px 1px 1px black; 667 | } 668 | .input2 input{ 669 | margin-top: 15px; 670 | width: 300px; 671 | border: none; 672 | border-bottom: 2px solid #ffc800; 673 | } 674 | .input2 input ::placeholder{ 675 | font-weight: bold; 676 | } 677 | #btnlogin{ 678 | padding-top: 10px; 679 | } 680 | #btnlogin a{ 681 | padding: 10px; 682 | text-decoration: none; 683 | border-radius: 15px; 684 | background-color: #ffc800; 685 | color: white; 686 | font-weight: bold; 687 | border: none; 688 | text-shadow: 0px 0px 1px black; 689 | } 690 | #side2 p{ 691 | margin-top: 10px; 692 | } 693 | @media screen and (max-width:991px){ 694 | .input2 input{ 695 | width: 250px; 696 | } 697 | } 698 | @media screen and (max-width:765px){ 699 | .input2 input{ 700 | width: 260px; 701 | } 702 | #side2{ 703 | height: 60vh; 704 | } 705 | } 706 | /* login */ 707 | 708 | 709 | 710 | 711 | /* about */ 712 | #about{ 713 | margin-top: 30px; 714 | } 715 | #about h3{ 716 | font-weight: bold; 717 | color: #ffc800; 718 | text-shadow: 0px 1px 1px black; 719 | } 720 | #about button{ 721 | width: 150px; 722 | height: 36px; 723 | color: white; 724 | background-color: rgb(67 0 86); 725 | border-radius: 5px; 726 | cursor: pointer; 727 | } 728 | /* about */ 729 | 730 | 731 | 732 | 733 | 734 | /* contact */ 735 | #contact{ 736 | margin-top: 50px; 737 | } 738 | #contact .card{ 739 | height: 80px; 740 | margin-top: 20px; 741 | box-shadow: rgba(100, 100, 111 ,0.2) 0px 7px 29px 0px; 742 | } 743 | #contact .card i{ 744 | margin-top: 10px; 745 | margin-left: 10px; 746 | font-size: 15px; 747 | color: rgb(67 0 86); 748 | font-weight: bold; 749 | letter-spacing: 3px; 750 | } 751 | #contact .card h6{ 752 | margin-left: 10px; 753 | margin-top: 10px; 754 | letter-spacing: 3px; 755 | font-weight: bold; 756 | color: rgb(67 0 86); 757 | } 758 | .messagebtn button{ 759 | margin-top: 30px; 760 | width: 200px; 761 | height: 33px; 762 | background: transparent; 763 | border: 2px solid rgb(67 0 86); 764 | font-weight: bold; 765 | letter-spacing: 3px; 766 | transition: 0.5s ease; 767 | cursor: pointer; 768 | } 769 | .messagebtn button:hover{ 770 | background-color: rgb(67 0 86); 771 | color: white; 772 | } 773 | /* contact */ 774 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CODE AASHU | Electronic Shop 8 | 9 | 13 | 14 | 20 | 21 | 22 | 23 | 24 | 28 | 29 | 30 | 31 | 32 |
33 |

WELCOME TO OUR SHOP

34 |
35 | Login 38 | Register 41 |
42 |
43 | 44 | 45 | 46 | 120 | 121 | 122 | 123 |
124 |
125 |

126 | Electronic Products 127 |
128 | Up To 50% Off 129 |

130 |

131 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta, 132 | saepe.
Lorem ipsum dolor sit amet consectetur. 133 |

134 |
135 |
136 |
137 | 138 |
139 |
140 | 141 | 142 | 143 |
144 |

PRODUCTS

145 |
146 |
147 |
148 | 149 |
150 |

Iphone 13 pro

151 |

Lorem ipsum dolor sit amet.

152 |
153 | 154 | 155 | 156 | 157 | 158 |
159 |

160 | $1000
  • 161 |

    162 |
    163 |
    164 |
    165 |
    166 |
    167 | 168 |
    169 |

    Airpods

    170 |

    Lorem ipsum dolor sit amet.

    171 |
    172 | 173 | 174 | 175 | 176 | 177 |
    178 |

    179 | $100
  • 180 |

    181 |
    182 |
    183 |
    184 |
    185 |
    186 | 187 |
    188 |

    Laptop

    189 |

    Lorem ipsum dolor sit amet.

    190 |
    191 | 192 | 193 | 194 | 195 | 196 |
    197 |

    198 | $200
  • 199 |

    200 |
    201 |
    202 |
    203 |
    204 |
    205 | 206 |
    207 |

    Ipad

    208 |

    Lorem ipsum dolor sit amet.

    209 |
    210 | 211 | 212 | 213 | 214 | 215 |
    216 |

    217 | $300
  • 218 |

    219 |
    220 |
    221 |
    222 |
    223 | 224 |
    225 |
    226 |
    227 | 228 |
    229 |

    Smart Watch

    230 |

    Lorem ipsum dolor sit amet.

    231 |
    232 | 233 | 234 | 235 | 236 | 237 |
    238 |

    239 | $50.60
  • 240 |

    241 |
    242 |
    243 |
    244 |
    245 |
    246 | 247 |
    248 |

    PC Moniter

    249 |

    Lorem ipsum dolor sit amet.

    250 |
    251 | 252 | 253 | 254 | 255 | 256 |
    257 |

    258 | $600
  • 259 |

    260 |
    261 |
    262 |
    263 |
    264 |
    265 | 266 |
    267 |

    iPhone x

    268 |

    Lorem ipsum dolor sit amet.

    269 |
    270 | 271 | 272 | 273 | 274 | 275 |
    276 |

    277 | $500
  • 278 |

    279 |
    280 |
    281 |
    282 |
    283 |
    284 | 285 |
    286 |

    Headphone

    287 |

    Lorem ipsum dolor sit amet.

    288 |
    289 | 290 | 291 | 292 | 293 | 294 |
    295 |

    296 | $60
  • 297 |

    298 |
    299 |
    300 |
    301 |
    302 |
    303 | 304 | 305 | 306 |
    307 |
    308 |
    309 |
    310 | 311 |
    312 |

    Best Laptop

    313 |
    Latest Collection
    314 |

    Up To 50% Off

    315 | 316 |
    317 |
    318 |
    319 |
    320 |
    321 | 322 |
    323 |

    Best Headphone

    324 |
    Latest Collection
    325 |

    Up To 50% Off

    326 | 327 |
    328 |
    329 |
    330 |
    331 |
    332 | 333 | 334 | 335 | 352 | 353 | 354 | 355 |
    356 |
    357 |
    358 |
    359 | 360 |
    361 |

    Washion Machine

    362 |

    Lorem ipsum dolor sit amet.

    363 |
    364 | 365 | 366 | 367 | 368 | 369 |
    370 |

    371 | $100.50
  • 372 |

    373 |
    374 |
    375 |
    376 |
    377 |
    378 | 379 |
    380 |

    AC

    381 |

    Lorem ipsum dolor sit amet.

    382 |
    383 | 384 | 385 | 386 | 387 | 388 |
    389 |

    390 | $500
  • 391 |

    392 |
    393 |
    394 |
    395 |
    396 |
    397 | 398 |
    399 |

    Microwave Oven

    400 |

    Lorem ipsum dolor sit amet.

    401 |
    402 | 403 | 404 | 405 | 406 | 407 |
    408 |

    409 | $200.30
  • 410 |

    411 |
    412 |
    413 |
    414 |
    415 |
    416 | 417 |
    418 |

    Fridge

    419 |

    Lorem ipsum dolor sit amet.

    420 |
    421 | 422 | 423 | 424 | 425 | 426 |
    427 |

    428 | $300
  • 429 |

    430 |
    431 |
    432 |
    433 |
    434 | 435 | 436 |
    437 |
    438 |
    439 |
    440 | 441 |
    442 |

    Home Gadget

    443 |

    Latest collection Up To 50% Off

    444 |
    445 |
    446 |
    447 |
    448 |
    449 | 450 |
    451 |

    Gaming Gadget

    452 |

    Latest collection Up To 50% Off

    453 |
    454 |
    455 |
    456 |
    457 |
    458 | 459 |
    460 |

    Electronic Gadget

    461 |

    Latest collection Up To 50% Off

    462 |
    463 |
    464 |
    465 |
    466 |
    467 | 468 | 469 |
    470 |
    471 |
    472 | 473 |
    474 |

    Fan

    475 |

    Lorem ipsum dolor sit amet.

    476 |
    477 | 478 | 479 | 480 | 481 | 482 |
    483 |

    484 | $50.60
  • 485 |

    486 |
    487 |
    488 |
    489 |
    490 |
    491 | 492 |
    493 |

    Fridge

    494 |

    Lorem ipsum dolor sit amet.

    495 |
    496 | 497 | 498 | 499 | 500 | 501 |
    502 |

    503 | $1500
  • 504 |

    505 |
    506 |
    507 |
    508 |
    509 |
    510 | 511 |
    512 |

    Gaming PC

    513 |

    Lorem ipsum dolor sit amet.

    514 |
    515 | 516 | 517 | 518 | 519 | 520 |
    521 |

    522 | 500.60
  • 523 |

    524 |
    525 |
    526 |
    527 |
    528 |
    529 | 530 |
    531 |

    Moniter

    532 |

    Lorem ipsum dolor sit amet.

    533 |
    534 | 535 | 536 | 537 | 538 | 539 |
    540 |

    541 | $250
  • 542 |

    543 |
    544 |
    545 |
    546 |
    547 | 548 |
    549 |
    550 |
    551 | 552 |
    553 |

    Smart Watch

    554 |

    Lorem ipsum dolor sit amet.

    555 |
    556 | 557 | 558 | 559 | 560 | 561 |
    562 |

    563 | $30.20
  • 564 |

    565 |
    566 |
    567 |
    568 |
    569 |
    570 | 571 |
    572 |

    Power Bank

    573 |

    Lorem ipsum dolor sit amet.

    574 |
    575 | 576 | 577 | 578 | 579 | 580 |
    581 |

    582 | $100.50
  • 583 |

    584 |
    585 |
    586 |
    587 |
    588 |
    589 | 590 |
    591 |

    Gaming Mouse

    592 |

    Lorem ipsum dolor sit amet.

    593 |
    594 | 595 | 596 | 597 | 598 | 599 |
    600 |

    601 | $30
  • 602 |

    603 |
    604 |
    605 |
    606 |
    607 |
    608 | 609 |
    610 |

    Joysticks

    611 |

    Lorem ipsum dolor sit amet.

    612 |
    613 | 614 | 615 | 616 | 617 | 618 |
    619 |

    620 | $150
  • 621 |

    622 |
    623 |
    624 |
    625 |
    626 |
    627 | 628 | 629 | 630 |
    631 |
    632 |
    633 | 634 |

    Free Shipping

    635 |

    On order over $1000

    636 |
    637 |
    638 | 639 |

    Free Returns

    640 |

    Within 30 days

    641 |
    642 |
    643 | 644 |

    Fast Delivery

    645 |

    World Wide

    646 |
    647 |
    648 | 649 |

    Big choice

    650 |

    Of products

    651 |
    652 |
    653 |
    654 | 655 | 656 | 657 |
    658 |

    659 | Subscribe To The Electronic Shop For Latest upload. 660 |

    661 |
    662 | 663 | 664 |
    665 |
    666 | 667 | 668 | 669 | 734 | 735 | 736 | 739 | 740 | 745 | 746 | 747 | --------------------------------------------------------------------------------