├── assets ├── client.jpg ├── header.png ├── story.png ├── arrival-1.png ├── arrival-2.png ├── arrival-3.png ├── arrival-4.png ├── client-1.jpg ├── client-2.jpg ├── client-3.jpg ├── feature-1.png ├── feature-2.png ├── feature-3.png ├── logo-dark.png └── logo-white.png ├── README.md ├── main.js ├── index.html └── styles.css /assets/client.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Watch_20-05-24/HEAD/assets/client.jpg -------------------------------------------------------------------------------- /assets/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Watch_20-05-24/HEAD/assets/header.png -------------------------------------------------------------------------------- /assets/story.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Watch_20-05-24/HEAD/assets/story.png -------------------------------------------------------------------------------- /assets/arrival-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Watch_20-05-24/HEAD/assets/arrival-1.png -------------------------------------------------------------------------------- /assets/arrival-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Watch_20-05-24/HEAD/assets/arrival-2.png -------------------------------------------------------------------------------- /assets/arrival-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Watch_20-05-24/HEAD/assets/arrival-3.png -------------------------------------------------------------------------------- /assets/arrival-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Watch_20-05-24/HEAD/assets/arrival-4.png -------------------------------------------------------------------------------- /assets/client-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Watch_20-05-24/HEAD/assets/client-1.jpg -------------------------------------------------------------------------------- /assets/client-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Watch_20-05-24/HEAD/assets/client-2.jpg -------------------------------------------------------------------------------- /assets/client-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Watch_20-05-24/HEAD/assets/client-3.jpg -------------------------------------------------------------------------------- /assets/feature-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Watch_20-05-24/HEAD/assets/feature-1.png -------------------------------------------------------------------------------- /assets/feature-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Watch_20-05-24/HEAD/assets/feature-2.png -------------------------------------------------------------------------------- /assets/feature-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Watch_20-05-24/HEAD/assets/feature-3.png -------------------------------------------------------------------------------- /assets/logo-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Watch_20-05-24/HEAD/assets/logo-dark.png -------------------------------------------------------------------------------- /assets/logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Watch_20-05-24/HEAD/assets/logo-white.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Watch_20-05-24 2 | Learn how to build a stunning, responsive watch website from scratch using HTML, CSS, and JavaScript. 3 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const menuBtn = document.getElementById("menu-btn"); 2 | const navLinks = document.getElementById("nav-links"); 3 | const menuBtnIcon = menuBtn.querySelector("i"); 4 | 5 | menuBtn.addEventListener("click", (e) => { 6 | navLinks.classList.toggle("open"); 7 | 8 | const isOpen = navLinks.classList.contains("open"); 9 | menuBtnIcon.setAttribute("class", isOpen ? "ri-close-line" : "ri-menu-line"); 10 | }); 11 | 12 | navLinks.addEventListener("click", (e) => { 13 | navLinks.classList.remove("open"); 14 | menuBtnIcon.setAttribute("class", "ri-menu-line"); 15 | }); 16 | 17 | const scrollRevealOption = { 18 | distance: "50px", 19 | origin: "bottom", 20 | duration: 1000, 21 | }; 22 | 23 | ScrollReveal().reveal(".header__image img", { 24 | ...scrollRevealOption, 25 | origin: "right", 26 | }); 27 | ScrollReveal().reveal(".header__content h1", { 28 | ...scrollRevealOption, 29 | delay: 500, 30 | }); 31 | ScrollReveal().reveal(".header__content p", { 32 | ...scrollRevealOption, 33 | delay: 1000, 34 | }); 35 | ScrollReveal().reveal(".header__content h4", { 36 | ...scrollRevealOption, 37 | delay: 1500, 38 | }); 39 | ScrollReveal().reveal(".header__content .header__btns", { 40 | ...scrollRevealOption, 41 | delay: 2000, 42 | }); 43 | 44 | ScrollReveal().reveal(".story__image img", { 45 | ...scrollRevealOption, 46 | origin: "left", 47 | }); 48 | ScrollReveal().reveal(".story__content .section__header", { 49 | ...scrollRevealOption, 50 | delay: 500, 51 | }); 52 | ScrollReveal().reveal(".story__content h4", { 53 | ...scrollRevealOption, 54 | delay: 1000, 55 | }); 56 | ScrollReveal().reveal(".story__content p", { 57 | ...scrollRevealOption, 58 | delay: 1500, 59 | }); 60 | ScrollReveal().reveal(".story__content .story__btn", { 61 | ...scrollRevealOption, 62 | delay: 2000, 63 | }); 64 | 65 | ScrollReveal().reveal(".client__image img", { 66 | ...scrollRevealOption, 67 | origin: "right", 68 | }); 69 | 70 | const swiper = new Swiper(".swiper", { 71 | loop: true, 72 | }); 73 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 14 | 15 | Web Design Mastery | Watch 16 | 17 | 18 |
19 | 45 |
46 | header 47 |
48 |
49 |

NEW WATCH COLLECTION 2024

50 |

51 | Discover the perfect blend of innovation, craftsmanship, and elegance 52 | as you browse through our meticulously curated collection. 53 |

54 |

$1245

55 |
56 | 57 | 58 |
59 |
60 |
61 | 62 |
63 |

FEATURED

64 |
65 |
66 | SALE 67 | feature 68 |

ADERTICA

69 |

$780

70 | 71 |
72 |
73 | SALE 74 | feature 75 |

KERAKATCHI

76 |

$950

77 | 78 |
79 |
80 | SALE 81 | feature 82 |

CITIZEN

83 |

$678

84 | 85 |
86 |
87 |
88 | 89 | 90 |
91 |
92 | story 93 |
94 |
95 |

OUR STORY

96 |

Inspirational Watch Of This Year

97 |

98 | Each timepiece featured in this collection embodies the pinnacle of 99 | horological artistry, blending cutting-edge design with unparalleled 100 | functionality. 101 |

102 |
103 | 104 |
105 |
106 |
107 | 108 | 109 |
110 |

NEW ARRIVALS

111 |
112 |
113 | NEW 114 | arrival 115 |

TERJAN GOLD

116 |

$890

117 | 118 | 119 |
120 |
121 | arrival 122 |

SHEPARD PINK

123 |

$589

124 | 125 | 126 |
127 |
128 | NEW 129 | arrival 130 |

TITAN BLACK

131 |

$678

132 | 133 | 134 |
135 |
136 | arrival 137 |

ADERTICA WHITE

138 |

$570

139 | 140 | 141 |
142 |
143 |
144 | 145 |
146 |
147 |
148 | client 149 |
150 |
151 | 152 |
153 | 154 |
155 | 156 |
157 |
158 | 159 |

160 | I never expected such an extensive range of watches catered 161 | to various tastes and preferences. It was challenging to 162 | choose just one! The service was impeccable, making my 163 | shopping experience truly enjoyable. I'll definitely be back 164 | for more. 165 |

166 |
167 | client 168 |
169 |

Michael Chen

170 |
Financial Analyst
171 |
172 |
173 |
174 |
175 |
176 |
177 | 178 |

179 | As an avid watch collector, I've scoured countless websites, 180 | but none match the caliber of this one. The selection is 181 | unparalleled, and the attention to detail is evident in 182 | every piece. Customer service was prompt and knowledgeable, 183 | ensuring a seamless experience. 184 |

185 |
186 | client 187 |
188 |

Sarah Johnson

189 |
Marketing Executive
190 |
191 |
192 |
193 |
194 |
195 |
196 | 197 |

198 | From casual elegance to sophisticated luxury, this website 199 | has it all. I've been a loyal customer for years, and their 200 | consistency in delivering exceptional service and products 201 | never ceases to amaze me. Whether it's a special occasion or 202 | a personal treat, I trust this site to deliver. 203 |

204 |
205 | client 206 |
207 |

David Lee

208 |
Business Owner
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 | 219 |
220 |
221 |
222 |

Subscribe Our Newsletter

223 |

224 | Be the first to know about our latest arrivals, exclusive offers, 225 | and insider updates by subscribing to our newsletter. 226 |

227 |
228 |
229 | 230 |
231 |
232 |
233 | 234 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 2 | 3 | :root { 4 | --primary-color: #ffb667; 5 | --text-dark: #2d2b2c; 6 | --text-light: #767268; 7 | --white: #ffffff; 8 | --max-width: 1200px; 9 | } 10 | 11 | * { 12 | padding: 0; 13 | margin: 0; 14 | box-sizing: border-box; 15 | } 16 | 17 | .section__container { 18 | max-width: var(--max-width); 19 | margin: auto; 20 | padding: 5rem 1rem; 21 | } 22 | 23 | .section__header { 24 | position: relative; 25 | isolation: isolate; 26 | padding-top: 1rem; 27 | font-size: 1.5rem; 28 | font-weight: 500; 29 | color: var(--text-dark); 30 | text-align: center; 31 | } 32 | 33 | .section__header::before { 34 | position: absolute; 35 | content: ""; 36 | top: 0; 37 | left: 50%; 38 | transform: translateX(-50%); 39 | width: 100%; 40 | max-width: 4rem; 41 | height: 2px; 42 | background-color: var(--primary-color); 43 | } 44 | 45 | .btn { 46 | max-width: fit-content; 47 | padding: 1rem 2rem; 48 | outline: none; 49 | border: none; 50 | font-size: 0.8rem; 51 | font-weight: 00; 52 | color: var(--white); 53 | background-color: var(--text-dark); 54 | transition: 0.3s; 55 | cursor: pointer; 56 | } 57 | 58 | .btn:hover { 59 | box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2); 60 | } 61 | 62 | img { 63 | display: flex; 64 | width: 100%; 65 | } 66 | 67 | a { 68 | text-decoration: none; 69 | transition: 0.3s; 70 | } 71 | 72 | ul { 73 | list-style: none; 74 | } 75 | 76 | html, 77 | body { 78 | scroll-behavior: smooth; 79 | } 80 | 81 | body { 82 | font-family: "Poppins", sans-serif; 83 | } 84 | 85 | .header__container { 86 | max-width: var(--max-width); 87 | margin-inline: auto; 88 | display: grid; 89 | } 90 | 91 | nav { 92 | position: fixed; 93 | isolation: isolate; 94 | top: 0; 95 | width: 100%; 96 | z-index: 9; 97 | } 98 | 99 | .nav__header { 100 | padding: 1rem; 101 | width: 100%; 102 | display: flex; 103 | align-items: center; 104 | justify-content: space-between; 105 | background-color: var(--text-dark); 106 | } 107 | 108 | .nav__logo img { 109 | max-width: 50px; 110 | } 111 | 112 | .logo-dark { 113 | display: none; 114 | } 115 | 116 | .nav__menu__btn { 117 | font-size: 1.5rem; 118 | color: var(--white); 119 | cursor: pointer; 120 | } 121 | 122 | .nav__links { 123 | position: absolute; 124 | top: 65px; 125 | left: 0; 126 | width: 100%; 127 | padding: 2rem; 128 | display: flex; 129 | align-items: center; 130 | justify-content: center; 131 | flex-direction: column; 132 | gap: 2rem; 133 | background-color: var(--text-dark); 134 | transition: 0.5s; 135 | z-index: -1; 136 | transform: translateY(-100%); 137 | } 138 | 139 | .nav__links.open { 140 | transform: translateY(0); 141 | } 142 | 143 | .nav__links a { 144 | font-weight: 500; 145 | color: var(--white); 146 | } 147 | 148 | .nav__links a:hover { 149 | color: var(--primary-color); 150 | } 151 | 152 | .header__image { 153 | background-color: var(--primary-color); 154 | overflow: hidden; 155 | } 156 | 157 | .header__image img { 158 | padding-block: 5rem; 159 | max-width: 400px; 160 | margin-inline: auto; 161 | } 162 | 163 | .header__content { 164 | padding: 1rem; 165 | } 166 | 167 | .header__content h1 { 168 | margin-bottom: 1rem; 169 | font-size: 3.75rem; 170 | font-weight: 600; 171 | line-height: 4.25rem; 172 | color: var(--text-dark); 173 | } 174 | 175 | .header__content p { 176 | margin-bottom: 1rem; 177 | color: var(--text-light); 178 | } 179 | 180 | .header__content h4 { 181 | margin-bottom: 2rem; 182 | font-size: 1.5rem; 183 | font-weight: 600; 184 | color: var(--primary-color); 185 | } 186 | 187 | .header__btns { 188 | display: flex; 189 | align-items: center; 190 | } 191 | 192 | .header__btns .discover { 193 | background-color: var(--text-light); 194 | } 195 | 196 | .feature__grid { 197 | margin-top: 4rem; 198 | display: grid; 199 | gap: 1rem; 200 | } 201 | 202 | .feature__card { 203 | position: relative; 204 | isolation: isolate; 205 | height: fit-content; 206 | padding: 2rem 1rem; 207 | text-align: center; 208 | border: 1px solid rgba(0, 0, 0, 0.1); 209 | transition: 0.3s; 210 | } 211 | 212 | .feature__card:hover { 213 | box-shadow: 5px 5px 40px rgba(0, 0, 0, 0.2); 214 | } 215 | 216 | .feature__card span { 217 | position: absolute; 218 | left: 0; 219 | transform: translateX(-100%) rotate(-90deg); 220 | transform-origin: top right; 221 | display: inline; 222 | padding: 5px 1.5rem; 223 | font-size: 1rem; 224 | font-weight: 500; 225 | color: var(--white); 226 | background-color: var(--primary-color); 227 | } 228 | 229 | .feature__card img { 230 | width: fit-content; 231 | height: 100%; 232 | max-height: 250px; 233 | margin-inline: auto; 234 | margin-bottom: 1rem; 235 | } 236 | 237 | .feature__card h4 { 238 | margin-bottom: 0.5rem; 239 | font-size: 1.2rem; 240 | font-weight: 600; 241 | color: var(--text-dark); 242 | } 243 | 244 | .feature__card p { 245 | margin-bottom: 1rem; 246 | font-size: 1.2rem; 247 | font-weight: 600; 248 | color: var(--primary-color); 249 | } 250 | 251 | .feature__card .btn { 252 | display: none; 253 | } 254 | 255 | .feature__card:hover .btn { 256 | display: inline-block; 257 | } 258 | 259 | .story { 260 | overflow: hidden; 261 | } 262 | 263 | .story__container { 264 | display: grid; 265 | gap: 4rem; 266 | text-align: center; 267 | } 268 | 269 | .story__image { 270 | position: relative; 271 | isolation: isolate; 272 | } 273 | 274 | .story__image::before { 275 | position: absolute; 276 | content: ""; 277 | top: 5rem; 278 | right: 5rem; 279 | height: 100%; 280 | width: 100vw; 281 | background-color: var(--primary-color); 282 | z-index: -2; 283 | } 284 | 285 | .story__image::after { 286 | position: absolute; 287 | content: ""; 288 | top: 0; 289 | left: 0; 290 | height: 100%; 291 | width: 100%; 292 | background-color: #000000; 293 | z-index: -1; 294 | } 295 | 296 | .story__image img { 297 | max-width: 350px; 298 | margin-inline: auto; 299 | } 300 | 301 | .story__content h4 { 302 | margin-block: 1rem; 303 | font-size: 2.5rem; 304 | font-weight: 600; 305 | line-height: 3.5rem; 306 | color: var(--text-dark); 307 | } 308 | 309 | .story__content p { 310 | margin-bottom: 2rem; 311 | color: var(--text-light); 312 | } 313 | 314 | .arrival__grid { 315 | display: grid; 316 | margin-top: 4rem; 317 | gap: 1rem; 318 | } 319 | 320 | .arrival__card { 321 | position: relative; 322 | isolation: isolate; 323 | height: fit-content; 324 | padding: 2rem 1rem; 325 | text-align: center; 326 | border: 1px solid rgba(0, 0, 0, 0.1); 327 | transition: 0.3s; 328 | } 329 | 330 | .arrival__card:hover { 331 | background-color: var(--primary-color); 332 | box-shadow: 5px 5px 40px rgba(0, 0, 0, 0.2); 333 | } 334 | 335 | .arrival__card span { 336 | position: absolute; 337 | padding: 5px 1rem; 338 | top: 1rem; 339 | right: 1rem; 340 | padding: 5px 1.5rem; 341 | font-size: 1rem; 342 | font-weight: 500; 343 | color: var(--white); 344 | background-color: var(--primary-color); 345 | } 346 | 347 | .arrival__card img { 348 | width: fit-content; 349 | height: 100%; 350 | max-height: 160px; 351 | margin-inline: auto; 352 | margin-bottom: 1rem; 353 | } 354 | 355 | .arrival__card h4 { 356 | margin-bottom: 0.5rem; 357 | font-size: 1.2rem; 358 | font-weight: 600; 359 | color: var(--text-dark); 360 | } 361 | 362 | .arrival__card p { 363 | margin-bottom: 1rem; 364 | font-size: 1.2rem; 365 | font-weight: 600; 366 | color: var(--text-dark); 367 | } 368 | 369 | .arrival__card .read__more { 370 | margin-bottom: 1rem; 371 | padding: calc(1rem - 4px) calc(2rem - 4px); 372 | display: none; 373 | background-color: transparent; 374 | border: 2px solid var(--white); 375 | } 376 | 377 | .arrival__card:hover .read__more { 378 | display: block; 379 | margin-inline: auto; 380 | } 381 | 382 | .client { 383 | overflow: hidden; 384 | } 385 | 386 | .client__container { 387 | display: grid; 388 | gap: 4rem; 389 | } 390 | 391 | .client__image { 392 | position: relative; 393 | isolation: isolate; 394 | } 395 | 396 | .client__image::before { 397 | position: absolute; 398 | content: ""; 399 | top: -5rem; 400 | left: 5rem; 401 | height: 100%; 402 | width: 100vw; 403 | background-color: var(--primary-color); 404 | z-index: -1; 405 | } 406 | 407 | .client__image img { 408 | max-width: 550px; 409 | margin-inline: auto; 410 | } 411 | 412 | .client__content { 413 | overflow: hidden; 414 | } 415 | 416 | .swiper { 417 | width: 100%; 418 | } 419 | 420 | .client__card { 421 | padding: 2rem; 422 | } 423 | 424 | .client__card span { 425 | display: inline-block; 426 | margin-bottom: 2rem; 427 | padding: 10px 15px; 428 | font-size: 2rem; 429 | color: var(--primary-color); 430 | border-radius: 5px; 431 | box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); 432 | } 433 | 434 | .client__card p { 435 | margin-bottom: 2rem; 436 | color: var(--text-light); 437 | } 438 | 439 | .client__card__details { 440 | display: flex; 441 | align-items: center; 442 | gap: 1rem; 443 | } 444 | 445 | .client__card__details img { 446 | max-width: 60px; 447 | border-radius: 100%; 448 | box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); 449 | } 450 | 451 | .client__card__details h4 { 452 | font-size: 1.2rem; 453 | font-weight: 600; 454 | color: var(--text-dark); 455 | } 456 | 457 | .client__card__details h5 { 458 | font-size: 1rem; 459 | font-weight: 500; 460 | color: var(--text-light); 461 | } 462 | 463 | .subscribe { 464 | background-color: var(--primary-color); 465 | } 466 | 467 | .subscribe__container { 468 | display: grid; 469 | gap: 2rem; 470 | } 471 | 472 | .subscribe__container div { 473 | text-align: center; 474 | } 475 | 476 | .subscribe__container h2 { 477 | margin-bottom: 0.5rem; 478 | font-size: 2rem; 479 | font-weight: 00; 480 | color: var(--text-dark); 481 | } 482 | 483 | .subscribe__container p { 484 | color: var(--white); 485 | } 486 | 487 | .footer__container { 488 | display: grid; 489 | gap: 4rem 2rem; 490 | } 491 | 492 | .footer__col h4 { 493 | margin-bottom: 2rem; 494 | font-size: 1.5rem; 495 | font-weight: 500; 496 | color: var(--text-dark); 497 | } 498 | 499 | .footer__links { 500 | display: grid; 501 | gap: 1rem; 502 | } 503 | 504 | .footer__links a { 505 | color: var(--text-light); 506 | } 507 | 508 | .footer__links a:hover { 509 | color: var(--primary-color); 510 | } 511 | 512 | .footer__bar { 513 | padding: 1rem; 514 | font-size: 0.9rem; 515 | color: var(--text-light); 516 | text-align: center; 517 | } 518 | 519 | @media (width > 540px) { 520 | .feature__grid { 521 | grid-template-columns: repeat(2, 1fr); 522 | } 523 | 524 | .arrival__grid { 525 | grid-template-columns: repeat(2, 1fr); 526 | } 527 | 528 | .footer__container { 529 | grid-template-columns: repeat(2, 1fr); 530 | } 531 | } 532 | 533 | @media (width > 768px) { 534 | .header__container { 535 | grid-template-columns: repeat(2, 1fr); 536 | align-items: center; 537 | position: relative; 538 | } 539 | 540 | nav { 541 | padding: 2rem 1rem; 542 | position: absolute; 543 | width: calc(100vw / 2); 544 | max-width: calc(var(--max-width) / 2); 545 | display: flex; 546 | align-items: center; 547 | gap: 2rem; 548 | } 549 | 550 | .nav__header { 551 | padding: 0; 552 | width: unset; 553 | background-color: transparent; 554 | } 555 | 556 | .nav__logo img { 557 | max-width: 75px; 558 | } 559 | 560 | .logo-white { 561 | display: none; 562 | } 563 | 564 | .logo-dark { 565 | display: flex; 566 | } 567 | 568 | .nav__menu__btn { 569 | display: none; 570 | } 571 | 572 | .nav__links { 573 | position: static; 574 | padding: 0; 575 | flex-direction: row; 576 | justify-content: flex-start; 577 | gap: 2rem; 578 | background-color: transparent; 579 | transform: none; 580 | } 581 | 582 | .nav__links a { 583 | color: var(--text-dark); 584 | } 585 | 586 | .header__image { 587 | grid-area: 1/2/2/3; 588 | } 589 | 590 | .feature__grid { 591 | grid-template-columns: repeat(3, 1fr); 592 | } 593 | 594 | .story__container { 595 | grid-template-columns: repeat(2, 1fr); 596 | align-items: center; 597 | text-align: left; 598 | } 599 | 600 | .story__content .section__header { 601 | text-align: left; 602 | max-width: fit-content; 603 | } 604 | 605 | .arrival__grid { 606 | grid-template-columns: repeat(4, 1fr); 607 | } 608 | 609 | .client__container { 610 | grid-template-columns: repeat(2, 1fr); 611 | align-items: center; 612 | } 613 | 614 | .client__image { 615 | grid-area: 1/2/2/3; 616 | } 617 | 618 | .subscribe__container { 619 | grid-template-columns: 2fr 1fr; 620 | align-items: center; 621 | } 622 | 623 | .subscribe__container div:nth-child(1) { 624 | text-align: left; 625 | } 626 | 627 | .subscribe__container div:nth-child(2) { 628 | text-align: right; 629 | } 630 | 631 | .footer__container { 632 | grid-template-columns: repeat(4, 1fr); 633 | } 634 | } 635 | 636 | @media (width > 1024px) { 637 | .feature__grid { 638 | gap: 2rem; 639 | } 640 | } 641 | --------------------------------------------------------------------------------