├── assets ├── gallery │ ├── img1.png │ ├── image1.jpg │ ├── image2.jpg │ └── image3.jpg ├── products │ ├── img1.png │ ├── img2.png │ ├── img3.png │ ├── img4.png │ ├── img5.png │ └── img6.png ├── socials │ ├── DiscordLogo.png │ ├── InstagramLogo.png │ ├── TwitterLogo.png │ └── YoutubeLogo.png └── json │ ├── gallery.json │ └── products.json ├── index.html └── main.css /assets/gallery/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daweb-Schools/javascript-in-a-hurry-initial/HEAD/assets/gallery/img1.png -------------------------------------------------------------------------------- /assets/products/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daweb-Schools/javascript-in-a-hurry-initial/HEAD/assets/products/img1.png -------------------------------------------------------------------------------- /assets/products/img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daweb-Schools/javascript-in-a-hurry-initial/HEAD/assets/products/img2.png -------------------------------------------------------------------------------- /assets/products/img3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daweb-Schools/javascript-in-a-hurry-initial/HEAD/assets/products/img3.png -------------------------------------------------------------------------------- /assets/products/img4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daweb-Schools/javascript-in-a-hurry-initial/HEAD/assets/products/img4.png -------------------------------------------------------------------------------- /assets/products/img5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daweb-Schools/javascript-in-a-hurry-initial/HEAD/assets/products/img5.png -------------------------------------------------------------------------------- /assets/products/img6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daweb-Schools/javascript-in-a-hurry-initial/HEAD/assets/products/img6.png -------------------------------------------------------------------------------- /assets/gallery/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daweb-Schools/javascript-in-a-hurry-initial/HEAD/assets/gallery/image1.jpg -------------------------------------------------------------------------------- /assets/gallery/image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daweb-Schools/javascript-in-a-hurry-initial/HEAD/assets/gallery/image2.jpg -------------------------------------------------------------------------------- /assets/gallery/image3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daweb-Schools/javascript-in-a-hurry-initial/HEAD/assets/gallery/image3.jpg -------------------------------------------------------------------------------- /assets/socials/DiscordLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daweb-Schools/javascript-in-a-hurry-initial/HEAD/assets/socials/DiscordLogo.png -------------------------------------------------------------------------------- /assets/socials/InstagramLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daweb-Schools/javascript-in-a-hurry-initial/HEAD/assets/socials/InstagramLogo.png -------------------------------------------------------------------------------- /assets/socials/TwitterLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daweb-Schools/javascript-in-a-hurry-initial/HEAD/assets/socials/TwitterLogo.png -------------------------------------------------------------------------------- /assets/socials/YoutubeLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daweb-Schools/javascript-in-a-hurry-initial/HEAD/assets/socials/YoutubeLogo.png -------------------------------------------------------------------------------- /assets/json/gallery.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | src: "./assets/gallery/image1.jpg", 4 | alt: "Image 1" 5 | }, 6 | { 7 | src: "./assets/gallery/image2.jpg", 8 | alt: "Image 2" 9 | }, 10 | { 11 | src: "./assets/gallery/image3.jpg", 12 | alt: "Image 3" 13 | } 14 | ] -------------------------------------------------------------------------------- /assets/json/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | title: "AstroFiction", 4 | author: "John Doe", 5 | price: 49.9, 6 | image: "./assets/products/img6.png" 7 | }, 8 | { 9 | title: "Space Odissey", 10 | author: "Marie Anne", 11 | price: 35, 12 | image: "./assets/products/img1.png" 13 | }, 14 | { 15 | title: "Doomed City", 16 | author: "Jason Cobert", 17 | price: 0, 18 | image: "./assets/products/img2.png" 19 | }, 20 | { 21 | title: "Black Dog", 22 | author: "John Doe", 23 | price: 85.35, 24 | image: "./assets/products/img3.png" 25 | }, 26 | { 27 | title: "My Little Robot", 28 | author: "Pedro Paulo", 29 | price: 0, 30 | image: "./assets/products/img5.png" 31 | }, 32 | { 33 | title: "Garden Girl", 34 | author: "Ankit Patel", 35 | price: 45, 36 | image: "./assets/products/img4.png" 37 | } 38 | ] -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Javascript Flash Course 8 | 9 | 10 | 11 | 15 | 16 | 17 | 18 |
19 | 129 |
130 | 131 |
132 |
133 |
134 |

Good Morning!

135 |

The weather is cloudy in London and it's 22°C outside.

136 |
137 | 143 | 144 | 145 | 146 |
147 |
148 | 149 |
150 |

Local time:

151 |
152 |
153 | 08 154 | Hours 155 |
156 | : 157 |
158 | 25 159 | mins 160 |
161 | : 162 |
163 | 13 164 | secs 165 |
166 |
167 |
168 |
169 | 170 | 179 | 180 |
181 |
182 | 183 | 187 | 188 | 192 | 193 | 197 | 198 | 199 |
200 | 201 |
202 |
203 | AstroFiction 204 |
205 |

AstroFiction

206 |

John Doe

207 |

Price

208 |

$ 49.90

209 |
210 |
211 |
212 | Space Odissey 213 |
214 |

Space Odissey

215 |

Marie Anne

216 |

Price

217 |

$ 35.00

218 |
219 |
220 |
221 | Doomed City 222 |
223 |

Doomed City

224 |

Jason Cobert

225 |

Price

226 |

Free

227 |
228 |
229 | 230 |
231 | 232 |
233 | 234 |
235 |

Frequently Asked Questions

236 | 237 |
238 | FAQ 1 239 | 240 |

241 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione 242 | adipisci illum error, hic expedita numquam impedit explicabo vitae 243 | iure quae vero autem quia quibusdam tempora atque harum perferendis 244 | praesentium dolor! 245 |

246 |
247 | 248 |
249 | FAQ 2 250 | 251 |

252 | Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt 253 | suscipit repudiandae cupiditate in accusantium recusandae tempora 254 | sint eligendi, perferendis aspernatur architecto voluptas laborum 255 | adipisci neque voluptates consequatur. 256 |

257 |
258 | 259 |
260 | FAQ 3 261 | 262 |

263 | Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt 264 | suscipit repudiandae cupiditate in accusantium recusandae tempora 265 | sint eligendi, perferendis aspernatur architecto voluptas laborum 266 | adipisci neque voluptates consequatur. 267 |

268 |
269 |
270 |
271 | 272 | 273 | 274 | 275 | 276 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --background-color: #2b2b2b; 3 | --light-background-color: #3b3b3b; 4 | --gray-color: #cccccc; 5 | --dark-gray-color: #858584; 6 | } 7 | html { 8 | box-sizing: border-box; 9 | font-size: 16px; 10 | background: var(--background-color); 11 | color: white; 12 | font-family: "Work Sans", sans-serif; 13 | scroll-behavior: smooth; 14 | } 15 | *, 16 | *:before, 17 | *:after { 18 | box-sizing: inherit; 19 | } 20 | body, 21 | h1, 22 | h2, 23 | h3, 24 | h4, 25 | h5, 26 | h6, 27 | p, 28 | ol, 29 | ul { 30 | margin: 0; 31 | padding: 0; 32 | font-weight: normal; 33 | } 34 | ol, 35 | ul { 36 | list-style: none; 37 | } 38 | img { 39 | max-width: 100%; 40 | height: auto; 41 | } 42 | button { 43 | background: none; 44 | border: none; 45 | outline: none; 46 | cursor: pointer; 47 | } 48 | a { 49 | text-decoration: none; 50 | color: inherit; 51 | } 52 | .container { 53 | max-width: 1200px; 54 | margin: 0 auto; 55 | padding: 0 20px; 56 | } 57 | @media (min-width: 768px) { 58 | .container { 59 | padding: 0 40px; 60 | } 61 | } 62 | @media (min-width: 1024px) { 63 | .container { 64 | padding: 0 60px; 65 | } 66 | } 67 | @media (min-width: 1280px) { 68 | .container { 69 | padding: 0 80px; 70 | } 71 | } 72 | @media (min-width: 1440px) { 73 | .container { 74 | padding: 0 100px; 75 | } 76 | } 77 | header { 78 | background: var(--light-background-color); 79 | } 80 | header nav { 81 | height: 54px; 82 | display: flex; 83 | justify-content: space-between; 84 | align-items: center; 85 | } 86 | header nav .nav-left-side { 87 | display: flex; 88 | align-items: center; 89 | } 90 | header nav .nav-left-side a { 91 | margin-left: 8px; 92 | font-style: normal; 93 | font-weight: 500; 94 | font-size: 12px; 95 | line-height: 17px; 96 | text-transform: capitalize; 97 | } 98 | header nav .nav-right-side input[type="checkbox"] { 99 | display: none; 100 | } 101 | header nav .nav-right-side label { 102 | cursor: pointer; 103 | } 104 | header nav .wrapper { 105 | position: fixed; 106 | top: 0; 107 | /*left: -100%;*/ 108 | right: -100%; 109 | height: 100%; 110 | width: 100%; 111 | background: var(--background-color); 112 | transition: all 0.6s ease-in-out; 113 | display: flex; 114 | justify-content: center; 115 | align-items: flex-start; 116 | padding: 90px 0; 117 | text-align: center; 118 | z-index: 999; 119 | } 120 | header nav .wrapper.nav-open { 121 | right: 0; 122 | } 123 | header nav .wrapper ul li + li { 124 | margin-top: 60px; 125 | } 126 | header nav .wrapper ul li a { 127 | font-style: normal; 128 | font-weight: 400; 129 | font-size: 32px; 130 | line-height: 22px; 131 | } 132 | header nav .wrapper ul li.socials p { 133 | color: var(--gray-color); 134 | font-style: normal; 135 | font-weight: 400; 136 | font-size: 16px; 137 | line-height: 22px; 138 | margin-bottom: 20px; 139 | } 140 | main .greeting-section { 141 | padding-block: 60px; 142 | display: flex; 143 | justify-content: space-between; 144 | align-items: center; 145 | } 146 | @media (max-width: 767px) { 147 | main .greeting-section { 148 | flex-direction: column; 149 | } 150 | } 151 | main .greeting-section .left-side h1 { 152 | font-style: normal; 153 | font-weight: 600; 154 | font-size: 28px; 155 | line-height: 39px; 156 | text-transform: capitalize; 157 | } 158 | main .greeting-section .left-side p { 159 | font-style: normal; 160 | font-weight: 400; 161 | font-size: 14px; 162 | line-height: 20px; 163 | margin-top: 4px; 164 | } 165 | main .greeting-section .left-side .weather-group { 166 | background: #d9d9d9; 167 | border-radius: 8px; 168 | width: fit-content; 169 | margin-top: 15px; 170 | display: flex; 171 | } 172 | main .greeting-section .left-side .weather-group input[type="radio"] { 173 | position: absolute; 174 | visibility: hidden; 175 | display: none; 176 | } 177 | main 178 | .greeting-section 179 | .left-side 180 | .weather-group 181 | input[type="radio"]:checked 182 | + label { 183 | color: #ffffff; 184 | background: #a259ff; 185 | border-radius: 8px; 186 | } 187 | main .greeting-section .left-side .weather-group label { 188 | font-style: normal; 189 | font-weight: 400; 190 | font-size: 12px; 191 | line-height: 17px; 192 | color: var(--light-background-color); 193 | text-transform: capitalize; 194 | padding: 5px; 195 | width: 55px; 196 | text-align: center; 197 | cursor: pointer; 198 | } 199 | main .greeting-section .right-side { 200 | background: #333333; 201 | border-radius: 20px; 202 | padding: 13px 25px 17px; 203 | display: flex; 204 | align-items: center; 205 | justify-content: center; 206 | flex-direction: column; 207 | } 208 | @media (max-width: 767px) { 209 | main .greeting-section .right-side { 210 | margin-top: 20px; 211 | width: 100%; 212 | } 213 | } 214 | main .greeting-section .right-side p { 215 | font-family: "Space Mono"; 216 | font-style: normal; 217 | font-weight: 400; 218 | font-size: 12px; 219 | line-height: 13px; 220 | margin-bottom: 5px; 221 | } 222 | main .greeting-section .right-side .local-time { 223 | display: flex; 224 | } 225 | main .greeting-section .right-side .local-time .time-divider, 226 | main .greeting-section .right-side .local-time .time-holder .time-number { 227 | font-family: "Space Mono"; 228 | font-style: normal; 229 | font-weight: 700; 230 | font-size: 28px; 231 | line-height: 39px; 232 | } 233 | main .greeting-section .right-side .local-time .time-divider { 234 | margin-inline: 10px; 235 | } 236 | main .greeting-section .right-side .local-time .time-holder { 237 | display: flex; 238 | flex-direction: column; 239 | justify-content: center; 240 | align-items: flex-start; 241 | } 242 | main .greeting-section .right-side .local-time .time-holder .time-letter { 243 | font-family: "Space Mono"; 244 | font-style: normal; 245 | font-weight: 400; 246 | font-size: 10px; 247 | line-height: 11px; 248 | text-transform: capitalize; 249 | } 250 | main .gallery-section { 251 | padding-bottom: 80px; 252 | border-bottom: 1px solid var(--light-background-color); 253 | } 254 | main .gallery-section > img { 255 | width: 100%; 256 | height: 100%; 257 | object-fit: cover; 258 | } 259 | main .gallery-section .thumbnails { 260 | margin-top: 30px; 261 | display: flex; 262 | justify-content: center; 263 | align-items: center; 264 | } 265 | main .gallery-section .thumbnails img { 266 | width: 75px; 267 | height: 75px; 268 | object-fit: cover; 269 | border-radius: 8px; 270 | border: 2px solid transparent; 271 | cursor: pointer; 272 | } 273 | main .gallery-section .thumbnails img[data-selected="true"] { 274 | border: 2px solid #ffffff; 275 | } 276 | main .gallery-section .thumbnails img + img { 277 | margin-left: 20px; 278 | } 279 | main .products-section { 280 | margin-bottom: 80px; 281 | margin-top: 10px; 282 | } 283 | main .products-section .products-filter { 284 | display: flex; 285 | justify-content: center; 286 | align-items: center; 287 | position: relative; 288 | } 289 | main .products-section .products-filter input[id="all"]:checked ~ .glider { 290 | transform: translateX(-100%); 291 | } 292 | main .products-section .products-filter input[id="paid"]:checked ~ .glider { 293 | transform: translateX(0%); 294 | } 295 | main .products-section .products-filter input[id="free"]:checked ~ .glider { 296 | transform: translateX(100%); 297 | } 298 | main .products-section .products-filter .glider { 299 | position: absolute; 300 | display: flex; 301 | height: 2px; 302 | width: calc(100% / 3); 303 | background-color: var(--dark-gray-color); 304 | z-index: 1; 305 | transition: 0.25s ease-out; 306 | bottom: -10px; 307 | } 308 | main .products-section .products-filter input[type="radio"] { 309 | position: absolute; 310 | visibility: hidden; 311 | display: none; 312 | } 313 | main .products-section .products-filter input[type="radio"]:checked + label { 314 | color: #ffffff; 315 | } 316 | main 317 | .products-section 318 | .products-filter 319 | input[type="radio"]:checked 320 | + label 321 | > .product-amount { 322 | background: var(--dark-gray-color); 323 | } 324 | main .products-section .products-filter label { 325 | display: flex; 326 | align-items: center; 327 | justify-content: center; 328 | height: 54px; 329 | width: calc(100% / 3); 330 | cursor: pointer; 331 | font-style: normal; 332 | font-weight: 600; 333 | font-size: 22px; 334 | line-height: 31px; 335 | transition: color 0.15s ease-in; 336 | color: var(--dark-gray-color); 337 | } 338 | main .products-section .products-filter label .product-amount { 339 | font-family: "Space Mono"; 340 | font-style: normal; 341 | font-weight: 400; 342 | font-size: 16px; 343 | line-height: 22px; 344 | color: #fff; 345 | background: var(--light-background-color); 346 | border-radius: 20px; 347 | width: 30px; 348 | height: 30px; 349 | display: flex; 350 | align-items: center; 351 | justify-content: center; 352 | margin-left: 16px; 353 | } 354 | main .products-section .products-area { 355 | margin-top: 60px; 356 | display: grid; 357 | grid-template-columns: repeat(3, 1fr); 358 | row-gap: 35px; 359 | column-gap: 51px; 360 | } 361 | @media (max-width: 767px) { 362 | main .products-section .products-area { 363 | grid-template-columns: repeat(2, 1fr); 364 | } 365 | } 366 | @media (max-width: 575px) { 367 | main .products-section .products-area { 368 | grid-template-columns: repeat(1, 1fr); 369 | } 370 | } 371 | main .products-section .products-area .product-item { 372 | background: var(--light-background-color); 373 | border-radius: 20px; 374 | cursor: pointer; 375 | } 376 | main .products-section .products-area .product-item img { 377 | width: 100%; 378 | height: 295px; 379 | object-fit: cover; 380 | border-radius: 20px 20px 0 0; 381 | } 382 | main .products-section .products-area .product-item .product-details { 383 | padding: 25px 30px; 384 | } 385 | main 386 | .products-section 387 | .products-area 388 | .product-item 389 | .product-details 390 | .product-title { 391 | font-style: normal; 392 | font-weight: 600; 393 | font-size: 22px; 394 | line-height: 31px; 395 | } 396 | main 397 | .products-section 398 | .products-area 399 | .product-item 400 | .product-details 401 | .product-author { 402 | margin-top: 5px; 403 | font-family: "Space Mono"; 404 | font-style: normal; 405 | font-weight: 400; 406 | font-size: 16px; 407 | line-height: 22px; 408 | } 409 | main 410 | .products-section 411 | .products-area 412 | .product-item 413 | .product-details 414 | .price-title { 415 | font-family: "Space Mono"; 416 | font-style: normal; 417 | font-weight: 400; 418 | font-size: 12px; 419 | line-height: 13px; 420 | color: var(--dark-gray-color); 421 | margin-top: 25px; 422 | } 423 | main 424 | .products-section 425 | .products-area 426 | .product-item 427 | .product-details 428 | .product-price { 429 | font-family: "Space Mono"; 430 | font-style: normal; 431 | font-weight: 400; 432 | font-size: 16px; 433 | line-height: 22px; 434 | margin-top: 8px; 435 | } 436 | main .faqs-section { 437 | margin-bottom: 80px; 438 | } 439 | main .faqs-section h3 { 440 | font-style: normal; 441 | font-weight: 600; 442 | font-size: 28px; 443 | line-height: 39px; 444 | margin-bottom: 40px; 445 | } 446 | main .faqs-section details { 447 | border-bottom: 1px solid #4e4e4e; 448 | } 449 | main .faqs-section details[open] { 450 | padding-bottom: 20px; 451 | } 452 | main .faqs-section details[open] summary::after { 453 | content: url("data:image/svg+xml,"); 454 | } 455 | main .faqs-section details summary { 456 | padding: 20px 0; 457 | font-style: normal; 458 | font-weight: 700; 459 | font-size: 14px; 460 | line-height: 20px; 461 | width: 100%; 462 | cursor: pointer; 463 | list-style: none; 464 | } 465 | main .faqs-section details summary::-webkit-details-marker, 466 | main .faqs-section details summary::marker { 467 | display: none; 468 | } 469 | main .faqs-section details summary::after { 470 | content: url("data:image/svg+xml,"); 471 | margin-left: 10px; 472 | } 473 | main .faqs-section details p { 474 | font-style: normal; 475 | font-weight: 400; 476 | font-size: 14px; 477 | line-height: 20px; 478 | } 479 | footer { 480 | padding: 21px; 481 | color: var(--gray-color); 482 | font-style: normal; 483 | font-weight: 400; 484 | font-size: 12px; 485 | line-height: 13px; 486 | text-align: center; 487 | width: 100%; 488 | background-color: var(--light-background-color); 489 | } 490 | --------------------------------------------------------------------------------