├── Img ├── IMG_1.png └── IMG_2.png ├── assets ├── img │ ├── mmm.png │ ├── Ishant.png │ ├── preee.png │ ├── rope.png │ ├── Sanskar.png │ ├── Priyanshu.png │ ├── tech Stack.png │ ├── android-chrome-192x192.png │ └── mainssss-removebg-preview.png ├── js │ └── main.js └── css │ └── styles.css ├── index.html └── style.css /Img/IMG_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Priyanshu1303d/IPS-Coders/HEAD/Img/IMG_1.png -------------------------------------------------------------------------------- /Img/IMG_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Priyanshu1303d/IPS-Coders/HEAD/Img/IMG_2.png -------------------------------------------------------------------------------- /assets/img/mmm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Priyanshu1303d/IPS-Coders/HEAD/assets/img/mmm.png -------------------------------------------------------------------------------- /assets/img/Ishant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Priyanshu1303d/IPS-Coders/HEAD/assets/img/Ishant.png -------------------------------------------------------------------------------- /assets/img/preee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Priyanshu1303d/IPS-Coders/HEAD/assets/img/preee.png -------------------------------------------------------------------------------- /assets/img/rope.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Priyanshu1303d/IPS-Coders/HEAD/assets/img/rope.png -------------------------------------------------------------------------------- /assets/img/Sanskar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Priyanshu1303d/IPS-Coders/HEAD/assets/img/Sanskar.png -------------------------------------------------------------------------------- /assets/img/Priyanshu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Priyanshu1303d/IPS-Coders/HEAD/assets/img/Priyanshu.png -------------------------------------------------------------------------------- /assets/img/tech Stack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Priyanshu1303d/IPS-Coders/HEAD/assets/img/tech Stack.png -------------------------------------------------------------------------------- /assets/img/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Priyanshu1303d/IPS-Coders/HEAD/assets/img/android-chrome-192x192.png -------------------------------------------------------------------------------- /assets/img/mainssss-removebg-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Priyanshu1303d/IPS-Coders/HEAD/assets/img/mainssss-removebg-preview.png -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /*=============== SHOW MENU ===============*/ 6 | const navMenu = document.getElementById('nav-menu'), 7 | navToggle = document.getElementById('nav-toggle'), 8 | navClose = document.getElementById('nav-close') 9 | 10 | /*===== MENU SHOW =====*/ 11 | /* Validate if constant exists */ 12 | if(navToggle){ 13 | navToggle.addEventListener('click', () =>{ 14 | navMenu.classList.add('show-menu') 15 | }) 16 | } 17 | 18 | /*===== MENU HIDDEN =====*/ 19 | /* Validate if constant exists */ 20 | if(navClose){ 21 | navClose.addEventListener('click', () =>{ 22 | navMenu.classList.remove('show-menu') 23 | }) 24 | } 25 | 26 | /*=============== REMOVE MENU MOBILE ===============*/ 27 | const navLink = document.querySelectorAll('.nav__link') 28 | 29 | function linkAction(){ 30 | const navMenu = document.getElementById('nav-menu') 31 | // When we click on each nav__link, we remove the show-menu class 32 | navMenu.classList.remove('show-menu') 33 | } 34 | navLink.forEach(n => n.addEventListener('click', linkAction)) 35 | 36 | /*=============== CHANGE BACKGROUND HEADER ===============*/ 37 | function scrollHeader(){ 38 | const header = document.getElementById('header') 39 | // When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag 40 | if(this.scrollY >= 50) header.classList.add('scroll-header'); else header.classList.remove('scroll-header') 41 | } 42 | window.addEventListener('scroll', scrollHeader) 43 | 44 | /*=============== SHOW SCROLL UP ===============*/ 45 | function scrollUp(){ 46 | const scrollUp = document.getElementById('scroll-up'); 47 | // When the scroll is higher than 200 viewport height, add the show-scroll class to the a tag with the scroll-top class 48 | if(this.scrollY >= 200) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll') 49 | } 50 | window.addEventListener('scroll', scrollUp) 51 | 52 | /*=============== SCROLL SECTIONS ACTIVE LINK ===============*/ 53 | const sections = document.querySelectorAll('section[id]') 54 | 55 | function scrollActive(){ 56 | const scrollY = window.pageYOffset 57 | 58 | sections.forEach(current =>{ 59 | const sectionHeight = current.offsetHeight 60 | const sectionTop = current.offsetTop - 50; 61 | sectionId = current.getAttribute('id') 62 | 63 | if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){ 64 | document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link') 65 | }else{ 66 | document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link') 67 | } 68 | }) 69 | } 70 | window.addEventListener('scroll', scrollActive) 71 | 72 | /*=============== SCROLL REVEAL ANIMATION ===============*/ 73 | const sr = ScrollReveal({ 74 | distance: '60px', 75 | duration: 2500, 76 | delay: 400, 77 | // reset: true 78 | }) 79 | 80 | sr.reveal(`.home__header, .section__title`,{delay: 600}) 81 | sr.reveal(`.home__footer`,{delay: 700}) 82 | sr.reveal(`.home__img`,{delay: 900, origin: 'top'}) 83 | 84 | sr.reveal(`.sponsor__img, .products__card, .footer__logo, .footer__content, .footer__copy`,{origin: 'top', interval: 100}) 85 | sr.reveal(`.specs__data, .discount__animate`,{origin: 'left', interval: 100}) 86 | sr.reveal(`.specs__img, .discount__img`,{origin: 'right'}) 87 | sr.reveal(`.case__img`,{origin: 'top'}) 88 | sr.reveal(`.case__data`) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IPS Coders 7 | 8 | 9 | 10 | 11 |
12 | IPS Coders 13 | Error 14 |
15 | 16 | 17 | 49 | 50 |
51 | 52 | 59 | 60 | 61 | 62 | 63 |
64 |

65 | Choose
Your Game 66 |

67 | 68 |
69 |
70 |
71 | 72 | 73 | HANGMAN 74 |
75 |
76 |
77 |
78 | 79 | 80 | KBC QUIZ 81 | 82 | 83 |
84 |
85 |
86 |
87 | 88 | 89 | GUESS NO. 90 | 91 | 92 |
93 |
94 |
95 |
96 | 97 |
98 |

Tech Stack

99 | 100 |
101 |
102 | 103 |
104 | 105 |
106 |

The tech stack for this project utilizes a combination of server-side and client-side technologies. Flask, a Python web framework, serves as the backend, handling server logic and API endpoints. HTML and CSS, while JavaScript enhances interactivity and dynamic content on the client side. 107 |

108 |
109 |
110 |
111 | 112 | 113 | 114 |
115 |

116 | Thank
You 117 |

118 | 119 |
120 |
121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); 3 | /*=============== VARIABLES CSS ===============*/ 4 | :root { 5 | --header-height: 3rem; 6 | /*========== Colors ==========*/ 7 | --hue-color: 206; 8 | --black-color: hsl(var(--hue-color), 4%, 4%); 9 | --black-color-alt: hsl(var(--hue-color), 4%, 8%); 10 | --title-color: hsl(var(--hue-color), 4%, 95%); 11 | --text-color: hsl(var(--hue-color), 4%, 75%); 12 | --text-color-light: hsl(var(--hue-color), 4%, 65%); 13 | --white-color: #FFF; 14 | --body-color: hsl(var(--hue-color), 4%, 6%); 15 | --container-color: hsl(var(--hue-color), 4%, 10%); 16 | --text-gradient: linear-gradient(hsl(var(--hue-color), 4%, 24%), hsl(var(--hue-color), 4%, 8%)); 17 | --scroll-thumb-color: hsl(var(--hue-color), 4%, 16%); 18 | --scroll-thumb-color-alt: hsl(var(--hue-color), 4%, 20%); 19 | /*========== Font and typography ==========*/ 20 | --body-font: 'Poppins', sans-serif; 21 | --biggest-font-size: 5rem; 22 | --bigger-font-size: 3.5rem; 23 | --big-font-size: 2.5rem; 24 | --h2-font-size: 1.25rem; 25 | --h3-font-size: 1.125rem; 26 | --normal-font-size: .938rem; 27 | --small-font-size: .813rem; 28 | --smaller-font-size: .75rem; 29 | --text-line-height: 2rem; 30 | /*========== Font weight ==========*/ 31 | --font-medium: 500; 32 | --font-semi-bold: 600; 33 | /*========== Margenes Bottom ==========*/ 34 | --mb-0-5: .5rem; 35 | --mb-0-75: .75rem; 36 | --mb-1: 1rem; 37 | --mb-1-5: 1.5rem; 38 | --mb-2: 2rem; 39 | --mb-2-5: 2.5rem; 40 | /*========== z index ==========*/ 41 | --z-tooltip: 10; 42 | --z-fixed: 100; 43 | } 44 | 45 | @media screen and (min-width: 968px) { 46 | :root { 47 | --biggest-font-size: 7.5rem; 48 | --bigger-font-size: 4.5rem; 49 | --big-font-size: 4rem; 50 | --h2-font-size: 1.5rem; 51 | --h3-font-size: 1.25rem; 52 | --normal-font-size: 1rem; 53 | --small-font-size: .875rem; 54 | --smaller-font-size: .813rem; 55 | } 56 | } 57 | 58 | /*=============== BASE ===============*/ 59 | * { 60 | box-sizing: border-box; 61 | padding: 0; 62 | margin: 0; 63 | } 64 | 65 | html { 66 | scroll-behavior: smooth; 67 | } 68 | 69 | body { 70 | margin: var(--header-height) 0 0 0; 71 | font-family: var(--body-font); 72 | font-size: var(--normal-font-size); 73 | background-color: var(--body-color); 74 | color: var(--text-color); 75 | } 76 | 77 | h1, h2, h3 { 78 | color: var(--title-color); 79 | } 80 | 81 | ul { 82 | list-style: none; 83 | } 84 | 85 | a { 86 | text-decoration: none; 87 | } 88 | 89 | button, 90 | input { 91 | border: none; 92 | outline: none; 93 | } 94 | 95 | button { 96 | cursor: pointer; 97 | } 98 | 99 | img { 100 | max-width: 100%; 101 | height: auto; 102 | } 103 | 104 | /*=============== REUSABLE CSS CLASSES ===============*/ 105 | .section { 106 | padding: 4rem 0 2rem; 107 | } 108 | 109 | .section__title { 110 | font-size: var(--bigger-font-size); 111 | text-align: center; 112 | margin-bottom: var(--mb-2-5); 113 | } 114 | 115 | .section__title-gradient { 116 | background: var(--text-gradient); 117 | color: transparent; 118 | -webkit-background-clip: text; 119 | background-clip: text; 120 | } 121 | 122 | /*=============== LAYOUT ===============*/ 123 | .main { 124 | overflow: hidden; 125 | } 126 | 127 | .container { 128 | max-width: 968px; 129 | margin-left: var(--mb-1-5); 130 | margin-right: var(--mb-1-5); 131 | } 132 | 133 | .grid { 134 | display: grid; 135 | } 136 | 137 | /*=============== HEADER ===============*/ 138 | .header { 139 | width: 100%; 140 | position: fixed; 141 | top: 0; 142 | left: 0; 143 | z-index: var(--z-fixed); 144 | background: transparent; 145 | } 146 | 147 | /*=============== NAV ===============*/ 148 | .nav { 149 | height: var(--header-height); 150 | display: flex; 151 | justify-content: space-between; 152 | align-items: center; 153 | } 154 | 155 | .nav__logo { 156 | display: flex; 157 | width: 1.5rem; 158 | } 159 | 160 | .nav__toggle { 161 | font-size: 1.2rem; 162 | color: var(--white-color); 163 | cursor: pointer; 164 | } 165 | 166 | @media screen and (max-width: 767px) { 167 | .nav__menu { 168 | position: fixed; 169 | background-color: var(--body-color); 170 | top: -100%; 171 | left: 0; 172 | width: 100%; 173 | padding: 4rem 0 3rem; 174 | transition: .4s; 175 | } 176 | } 177 | 178 | .nav__list { 179 | display: flex; 180 | flex-direction: column; 181 | align-items: center; 182 | row-gap: 1rem; 183 | } 184 | 185 | .nav__link { 186 | color: var(--white-color); 187 | font-size: var(--h2-font-size); 188 | text-transform: uppercase; 189 | font-weight: var(--font-semi-bold); 190 | background: var(--text-gradient); 191 | color: transparent; 192 | -webkit-background-clip: text; 193 | background-clip: text; 194 | transition: .4s; 195 | } 196 | 197 | .nav__link:hover { 198 | background: var(--white-color); 199 | color: transparent; 200 | -webkit-background-clip: text; 201 | background-clip: text; 202 | } 203 | 204 | .nav__close { 205 | position: absolute; 206 | font-size: 1.5rem; 207 | top: 1rem; 208 | right: 1rem; 209 | color: var(--white-color); 210 | cursor: pointer; 211 | } 212 | 213 | /* show menu */ 214 | .show-menu { 215 | top: 0; 216 | } 217 | 218 | /* Change background header */ 219 | .scroll-header { 220 | background-color: var(--body-color); 221 | } 222 | 223 | /* Active link */ 224 | .active-link { 225 | background: var(--white-color); 226 | color: transparent; 227 | -webkit-background-clip: text; 228 | background-clip: text; 229 | } 230 | 231 | /*=============== HOME ===============*/ 232 | .home__img { 233 | width: 250px; 234 | position: absolute; 235 | top: -16rem; 236 | right: 1.5rem; 237 | } 238 | 239 | .home__data { 240 | padding-top: 5rem; 241 | } 242 | 243 | .home__header { 244 | position: relative; 245 | } 246 | 247 | .home__title { 248 | position: absolute; 249 | top: -4rem; 250 | left: 1rem; 251 | line-height: 6rem; 252 | font-size: var(--biggest-font-size); 253 | background: var(--text-gradient); 254 | color: transparent; 255 | -webkit-background-clip: text; 256 | background-clip: text; 257 | } 258 | 259 | .home__subtitle { 260 | font-size: var(--big-font-size); 261 | margin-bottom: var(--mb-2-5); 262 | } 263 | 264 | .home__title-description { 265 | font-size: var(--h3-font-size); 266 | font-weight: var(--font-medium); 267 | margin-bottom: var(--mb-1); 268 | } 269 | 270 | .home__description { 271 | margin-bottom: var(--mb-2-5); 272 | line-height: var(--text-line-height); 273 | } 274 | 275 | .home__price { 276 | font-size: var(--h3-font-size); 277 | font-weight: var(--font-semi-bold); 278 | margin-left: var(--mb-0-75); 279 | } 280 | 281 | /*=============== BUTTONS ===============*/ 282 | .button { 283 | display: inline-block; 284 | background-color: var(--black-color); 285 | color: var(--white-color); 286 | padding: 1rem 1.25rem; 287 | border-radius: .5rem; 288 | transition: .3s; 289 | } 290 | 291 | .button:hover { 292 | background-color: var(--black-color-alt); 293 | } 294 | 295 | .button__icon { 296 | font-size: 1.2rem; 297 | } 298 | 299 | .button--flex { 300 | display: inline-flex; 301 | align-items: center; 302 | column-gap: .75rem; 303 | } 304 | 305 | /*=============== SPONSOR ===============*/ 306 | .sponsor__img { 307 | width: 90px; 308 | } 309 | 310 | .sponsor__container { 311 | grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); 312 | row-gap: 5rem; 313 | justify-items: center; 314 | align-items: center; 315 | } 316 | 317 | /*=============== SPECS ===============*/ 318 | .specs__container { 319 | position: relative; 320 | } 321 | 322 | .specs__content { 323 | row-gap: 1.5rem; 324 | } 325 | 326 | .specs__data { 327 | display: grid; 328 | row-gap: .25rem; 329 | } 330 | 331 | .specs__icon { 332 | font-size: 1.2rem; 333 | color: var(--white-color); 334 | } 335 | 336 | .specs__title { 337 | font-size: var(--normal-font-size); 338 | font-weight: var(--font-medium); 339 | } 340 | 341 | .specs__subtitle { 342 | font-size: var(--smaller-font-size); 343 | } 344 | 345 | .specs__data:nth-child(1), .specs__data:nth-child(4) { 346 | margin-left: 1.5rem; 347 | } 348 | 349 | .specs__img { 350 | width: 250px; 351 | position: absolute; 352 | top: 2rem; 353 | right: -4rem; 354 | } 355 | 356 | /*=============== CASE ===============*/ 357 | .case__container { 358 | position: relative; 359 | grid-template-columns: repeat(2, 1fr); 360 | } 361 | 362 | .case__data { 363 | padding: 5rem 0 3rem; 364 | } 365 | 366 | .case__img { 367 | width: 250px; 368 | position: absolute; 369 | left: -7rem; 370 | } 371 | 372 | .case__description { 373 | margin-bottom: var(--mb-1-5); 374 | line-height: var(--text-line-height); 375 | } 376 | 377 | /*=============== DISCOUNT ===============*/ 378 | .discount__container { 379 | position: relative; 380 | background-color: var(--container-color); 381 | padding: 2rem 1.5rem; 382 | border-radius: .75rem; 383 | } 384 | 385 | .discount__title { 386 | font-size: var(--h3-font-size); 387 | margin-bottom: var(--mb-0-75); 388 | } 389 | 390 | .discount__description { 391 | margin-bottom: var(--mb-1); 392 | } 393 | 394 | .discount__img { 395 | width: 300px; 396 | position: absolute; 397 | top: 4rem; 398 | right: -11rem; 399 | } 400 | 401 | /*=============== PRODUCTS ===============*/ 402 | .products__line { 403 | line-height: 4rem; 404 | } 405 | 406 | .products__container { 407 | grid-template-columns: repeat(2, 1fr); 408 | gap: 5rem 1.5rem; 409 | padding-top: 3rem; 410 | } 411 | 412 | .products__card { 413 | position: relative; 414 | height: 132px; 415 | background-color: var(--container-color); 416 | padding: .75rem; 417 | border-radius: .5rem; 418 | display: grid; 419 | } 420 | 421 | .products__img { 422 | width: 80px; 423 | position: absolute; 424 | inset: 0; 425 | margin-right: auto; 426 | margin-left: auto; 427 | top: -3rem; 428 | } 429 | 430 | .products__content { 431 | align-self: flex-end; 432 | } 433 | 434 | .products__title, .products__price { 435 | font-size: var(--small-font-size); 436 | } 437 | 438 | .products__price { 439 | font-weight: var(--font-semi-bold); 440 | } 441 | 442 | .products__button { 443 | position: absolute; 444 | right: .5rem; 445 | bottom: .5rem; 446 | padding: .5rem; 447 | border-radius: .35rem; 448 | } 449 | 450 | /*=============== FOOTER ===============*/ 451 | .footer__container { 452 | grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 453 | row-gap: 2rem; 454 | } 455 | 456 | .footer__logo { 457 | width: 2rem; 458 | } 459 | 460 | .footer__title { 461 | font-size: var(--h3-font-size); 462 | font-weight: var(--font-medium); 463 | margin-bottom: var(--mb-1); 464 | } 465 | 466 | .footer__links { 467 | display: flex; 468 | flex-direction: column; 469 | row-gap: .5rem; 470 | } 471 | 472 | .footer__link { 473 | color: var(--text-color); 474 | } 475 | 476 | .footer__link:hover { 477 | color: var(--white-color); 478 | } 479 | 480 | .footer__form { 481 | display: flex; 482 | column-gap: .5rem; 483 | background-color: var(--container-color); 484 | padding: .5rem .75rem; 485 | border-radius: .5rem; 486 | margin-bottom: var(--mb-2); 487 | } 488 | 489 | .footer__input { 490 | background-color: var(--container-color); 491 | width: 90%; 492 | color: var(--white-color); 493 | } 494 | 495 | .footer__input::placeholder { 496 | color: var(--text-color); 497 | font-size: var(--normal-font-size); 498 | font-family: var(--body-font); 499 | } 500 | 501 | .footer__social { 502 | display: flex; 503 | column-gap: 1.25rem; 504 | } 505 | 506 | .footer__social-link { 507 | display: inline-flex; 508 | color: var(--white-color); 509 | background-color: var(--container-color); 510 | padding: .5rem; 511 | border-radius: .25rem; 512 | font-size: 1rem; 513 | } 514 | 515 | .footer__social-link:hover { 516 | background-color: var(--black-color); 517 | } 518 | 519 | .footer__copy { 520 | margin-top: 5rem; 521 | text-align: center; 522 | } 523 | 524 | .footer__copy-link { 525 | font-size: var(--smaller-font-size); 526 | color: var(--text-color-light); 527 | } 528 | 529 | /*=============== SCROLL UP ===============*/ 530 | .scrollup { 531 | position: fixed; 532 | right: 1rem; 533 | bottom: -20%; 534 | display: flex; 535 | background-color: var(--container-color); 536 | border-radius: .25rem; 537 | padding: .45rem; 538 | opacity: 9; 539 | z-index: var(--z-tooltip); 540 | transition: .4s; 541 | } 542 | 543 | .scrollup:hover { 544 | background-color: var(--black-color); 545 | opacity: 1; 546 | } 547 | 548 | .scrollup__icon { 549 | color: var(--white-color); 550 | font-size: 1.35rem; 551 | } 552 | 553 | /* Show Scroll Up*/ 554 | .show-scroll { 555 | bottom: 5rem; 556 | } 557 | 558 | /*=============== SCROLL BAR ===============*/ 559 | ::-webkit-scrollbar { 560 | width: .60rem; 561 | border-radius: .5rem; 562 | } 563 | 564 | ::-webkit-scrollbar-thumb { 565 | background-color: var(--scroll-thumb-color); 566 | border-radius: .5rem; 567 | } 568 | 569 | ::-webkit-scrollbar-thumb:hover { 570 | background-color: var(--scroll-thumb-color-alt); 571 | } 572 | 573 | /*=============== MEDIA QUERIES ===============*/ 574 | /* For small devices */ 575 | @media screen and (max-width: 340px) { 576 | .container { 577 | margin-left: var(--mb-1); 578 | margin-right: var(--mb-1); 579 | } 580 | .section__title { 581 | font-size: var(--big-font-size); 582 | } 583 | .home__img { 584 | width: 200px; 585 | top: -13rem; 586 | } 587 | .home__title { 588 | top: -4rem; 589 | font-size: var(--bigger-font-size); 590 | } 591 | .home__data { 592 | padding-top: 1rem; 593 | } 594 | .home__description { 595 | font-size: var(--small-font-size); 596 | } 597 | .specs__img { 598 | width: 200px; 599 | } 600 | .case__container { 601 | grid-template-columns: .6fr 1fr; 602 | } 603 | .case__img { 604 | width: 220px; 605 | top: -2rem; 606 | left: -9rem; 607 | } 608 | .case__data { 609 | padding: 0; 610 | } 611 | .products__container { 612 | grid-template-columns: 142px; 613 | justify-content: center; 614 | } 615 | } 616 | 617 | /* For medium devices */ 618 | @media screen and (min-width: 576px) { 619 | .home__container { 620 | grid-template-columns: .8fr 1fr; 621 | } 622 | .home__data { 623 | padding-top: 2rem; 624 | } 625 | .home__img { 626 | top: -7rem; 627 | left: 0; 628 | } 629 | .specs__img { 630 | position: initial; 631 | } 632 | .specs__container { 633 | grid-template-columns: repeat(2, 1fr); 634 | justify-items: center; 635 | align-items: center; 636 | } 637 | .case__img { 638 | position: initial; 639 | } 640 | .case__data { 641 | padding: 0; 642 | } 643 | .case__container { 644 | grid-template-columns: max-content 250px; 645 | justify-content: center; 646 | align-items: center; 647 | column-gap: 2rem; 648 | } 649 | .discount__img { 650 | position: initial; 651 | } 652 | .discount__container { 653 | grid-template-columns: repeat(2, 1fr); 654 | justify-items: center; 655 | align-items: center; 656 | } 657 | .products__container { 658 | grid-template-columns: repeat(3, 142px); 659 | justify-content: center; 660 | } 661 | } 662 | 663 | @media screen and (min-width: 767px) { 664 | body { 665 | margin: 0; 666 | } 667 | .section { 668 | padding: 6rem 0 2rem; 669 | } 670 | .nav { 671 | height: calc(var(--header-height) + 1.5rem); 672 | } 673 | .nav__logo { 674 | width: 2rem; 675 | } 676 | .nav__list { 677 | flex-direction: row; 678 | column-gap: 3.5rem; 679 | } 680 | .nav__link { 681 | font-size: var(--normal-font-size); 682 | text-transform: initial; 683 | } 684 | .nav__toggle, .nav__close { 685 | display: none; 686 | } 687 | .home__container { 688 | position: relative; 689 | grid-template-columns: repeat(2, 1fr); 690 | } 691 | .home__img { 692 | top: -9rem; 693 | left: 4rem; 694 | } 695 | .home__data { 696 | padding-top: 8rem; 697 | } 698 | .specs__img { 699 | width: 300px; 700 | } 701 | .case__container { 702 | column-gap: 5rem; 703 | } 704 | .case__img { 705 | width: 300px; 706 | } 707 | .case__description { 708 | margin-bottom: var(--mb-2); 709 | } 710 | .discount__container { 711 | grid-template-columns: 250px max-content; 712 | justify-content: center; 713 | column-gap: 5rem; 714 | padding: 3rem 0; 715 | } 716 | .discount__title { 717 | font-size: var(--h2-font-size); 718 | margin-bottom: var(--mb-1); 719 | } 720 | .discount__description { 721 | margin-bottom: var(--mb-2); 722 | } 723 | .products__container { 724 | grid-template-columns: repeat(3, 162px); 725 | gap: 6rem 3rem; 726 | padding-top: 5rem; 727 | } 728 | .products__card { 729 | height: 152px; 730 | padding: .85rem; 731 | } 732 | .products__img { 733 | width: 95px; 734 | } 735 | .footer__container { 736 | grid-template-columns: .4fr .7fr .7fr 1fr; 737 | } 738 | } 739 | 740 | /* For large devices */ 741 | @media screen and (min-width: 1024px) { 742 | .container { 743 | margin-left: auto; 744 | margin-right: auto; 745 | } 746 | .home__img { 747 | width: 300px; 748 | top: -15rem; 749 | } 750 | .home__title { 751 | top: -5rem; 752 | left: 3.5rem; 753 | } 754 | .home__description { 755 | padding-right: 5rem; 756 | } 757 | .sponsor__img { 758 | width: 100px; 759 | } 760 | .discount__img { 761 | width: 350px; 762 | } 763 | .footer__container { 764 | padding-top: 3rem; 765 | } 766 | .footer__copy { 767 | margin-top: 9rem; 768 | } 769 | } 770 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding:0; 4 | box-sizing: border-box; 5 | } 6 | 7 | 8 | /* ================================================================== */ 9 | /*=============== GOOGLE FONTS ===============*/ 10 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); 11 | /*=============== VARIABLES CSS ===============*/ 12 | :root { 13 | --header-height: 3rem; 14 | /*========== Colors ==========*/ 15 | --hue-color: 206; 16 | --black-color: hsl(var(--hue-color), 4%, 4%); 17 | --black-color-alt: hsl(var(--hue-color), 4%, 8%); 18 | --title-color: hsl(var(--hue-color), 4%, 95%); 19 | --text-color: hsl(var(--hue-color), 4%, 75%); 20 | --text-color-light: hsl(var(--hue-color), 4%, 65%); 21 | --white-color: #FFF; 22 | --body-color: hsl(var(--hue-color), 4%, 6%); 23 | --container-color: hsl(var(--hue-color), 4%, 10%); 24 | --text-gradient: linear-gradient(hsl(var(--hue-color), 4%, 24%), hsl(var(--hue-color), 4%, 8%)); 25 | --scroll-thumb-color: hsl(var(--hue-color), 4%, 16%); 26 | --scroll-thumb-color-alt: hsl(var(--hue-color), 4%, 20%); 27 | /*========== Font and typography ==========*/ 28 | --body-font: 'Poppins', sans-serif; 29 | --biggest-font-size: 5rem; 30 | --bigger-font-size: 3.5rem; 31 | --big-font-size: 2.5rem; 32 | --h2-font-size: 1.25rem; 33 | --h3-font-size: 1.125rem; 34 | --normal-font-size: .938rem; 35 | --small-font-size: .813rem; 36 | --smaller-font-size: .75rem; 37 | --text-line-height: 2rem; 38 | /*========== Font weight ==========*/ 39 | --font-medium: 500; 40 | --font-semi-bold: 600; 41 | /*========== z index ==========*/ 42 | --z-tooltip: 10; 43 | --z-fixed: 100; 44 | } 45 | 46 | @media screen and (min-width: 968px) { 47 | :root { 48 | --biggest-font-size: 7.5rem; 49 | --bigger-font-size: 4.5rem; 50 | --big-font-size: 4rem; 51 | --h2-font-size: 1.5rem; 52 | --h3-font-size: 1.25rem; 53 | --normal-font-size: 1rem; 54 | --small-font-size: .875rem; 55 | --smaller-font-size: .813rem; 56 | } 57 | } 58 | 59 | /*=============== BASE ===============*/ 60 | * { 61 | box-sizing: border-box; 62 | padding: 0; 63 | margin: 0; 64 | } 65 | 66 | html { 67 | scroll-behavior: smooth; 68 | } 69 | 70 | body { 71 | margin: var(--header-height) 0 0 0; 72 | font-family: var(--body-font); 73 | font-size: var(--normal-font-size); 74 | background-color: var(--body-color); 75 | color: var(--text-color); 76 | } 77 | 78 | h1, h2, h3 { 79 | color: var(--title-color); 80 | } 81 | 82 | ul { 83 | list-style: none; 84 | } 85 | 86 | a { 87 | text-decoration: none; 88 | } 89 | 90 | button, 91 | input { 92 | border: none; 93 | outline: none; 94 | } 95 | 96 | button { 97 | cursor: pointer; 98 | } 99 | 100 | img { 101 | max-width: 100%; 102 | height: auto; 103 | } 104 | 105 | /*=============== REUSABLE CSS CLASSES ===============*/ 106 | .section { 107 | padding: 4rem 0 2rem; 108 | } 109 | 110 | .section__title { 111 | font-size: var(--bigger-font-size); 112 | text-align: center; 113 | margin-bottom: var(--mb-2-5); 114 | } 115 | 116 | .section__title-gradient { 117 | background: var(--text-gradient); 118 | color: transparent; 119 | -webkit-background-clip: text; 120 | background-clip: text; 121 | } 122 | 123 | /*=============== LAYOUT ===============*/ 124 | .main { 125 | overflow: hidden; 126 | } 127 | 128 | .container { 129 | max-width: 968px; 130 | margin-left: var(--mb-1-5); 131 | margin-right: var(--mb-1-5); 132 | } 133 | 134 | .grid { 135 | display: grid; 136 | } 137 | 138 | /*=============== HEADER ===============*/ 139 | .header { 140 | width: 100%; 141 | position: fixed; 142 | top: 0; 143 | left: 0; 144 | z-index: var(--z-fixed); 145 | background: transparent; 146 | } 147 | 148 | /*=============== NAV ===============*/ 149 | .nav { 150 | height: var(--header-height); 151 | display: flex; 152 | justify-content: space-between; 153 | align-items: center; 154 | } 155 | 156 | .nav__logo { 157 | display: flex; 158 | width: 1.5rem; 159 | } 160 | 161 | .nav__toggle { 162 | font-size: 1.2rem; 163 | color: var(--white-color); 164 | cursor: pointer; 165 | } 166 | /* ======RESPONSIVE==================================================== */ 167 | @media screen and (max-width: 767px) { 168 | .nav__menu { 169 | position: fixed; 170 | background-color: var(--body-color); 171 | top: -100%; 172 | left: 0; 173 | width: 100%; 174 | padding: 4rem 0 3rem; 175 | transition: .4s; 176 | } 177 | } 178 | 179 | .nav__list { 180 | display: flex; 181 | flex-direction: column; 182 | align-items: center; 183 | row-gap: 1rem; 184 | } 185 | 186 | .nav__link { 187 | color: var(--white-color); 188 | font-size: var(--h2-font-size); 189 | text-transform: uppercase; 190 | font-weight: var(--font-semi-bold); 191 | background: var(--text-gradient); 192 | color: transparent; 193 | -webkit-background-clip: text; 194 | background-clip: text; 195 | transition: .4s; 196 | } 197 | 198 | .nav__link:hover { 199 | background: var(--white-color); 200 | color: transparent; 201 | -webkit-background-clip: text; 202 | background-clip: text; 203 | } 204 | 205 | .nav__close { 206 | position: absolute; 207 | font-size: 1.5rem; 208 | top: 1rem; 209 | right: 1rem; 210 | color: var(--white-color); 211 | cursor: pointer; 212 | } 213 | 214 | /* show menu */ 215 | .show-menu { 216 | top: 0; 217 | } 218 | 219 | /* Change background header */ 220 | .scroll-header { 221 | background-color: var(--body-color); 222 | } 223 | 224 | /* Active link */ 225 | .active-link { 226 | background: var(--white-color); 227 | color: transparent; 228 | -webkit-background-clip: text; 229 | background-clip: text; 230 | } 231 | 232 | /*=============== HOME ===============*/ 233 | .home__img { 234 | width: 250px; 235 | position: absolute; 236 | top: -16rem; 237 | right: 1.5rem; 238 | } 239 | 240 | .home__data { 241 | padding-top: 5rem; 242 | } 243 | 244 | .home__header { 245 | position: relative; 246 | } 247 | 248 | .home__title { 249 | position: absolute; 250 | top: -4rem; 251 | left: 1rem; 252 | line-height: 6rem; 253 | font-size: var(--biggest-font-size); 254 | background: var(--text-gradient); 255 | color: transparent; 256 | -webkit-background-clip: text; 257 | background-clip: text; 258 | } 259 | 260 | .home__subtitle { 261 | font-size: var(--big-font-size); 262 | margin-bottom: var(--mb-2-5); 263 | } 264 | 265 | .home__title-description { 266 | font-size: var(--h3-font-size); 267 | font-weight: var(--font-medium); 268 | margin-bottom: var(--mb-1); 269 | } 270 | 271 | .home__description { 272 | margin-bottom: var(--mb-2-5); 273 | line-height: var(--text-line-height); 274 | } 275 | 276 | .home__price { 277 | font-size: var(--h3-font-size); 278 | font-weight: var(--font-semi-bold); 279 | margin-left: var(--mb-0-75); 280 | } 281 | 282 | /*=============== BUTTONS ===============*/ 283 | .button { 284 | display: inline-block; 285 | background-color: var(--black-color); 286 | color: var(--white-color); 287 | padding: 1rem 1.25rem; 288 | border-radius: .5rem; 289 | transition: .3s; 290 | } 291 | 292 | .button:hover { 293 | background-color: var(--black-color-alt); 294 | } 295 | 296 | .button__icon { 297 | font-size: 1.2rem; 298 | } 299 | 300 | .button--flex { 301 | display: inline-flex; 302 | align-items: center; 303 | column-gap: .75rem; 304 | } 305 | 306 | /*=============== NAMES ===============*/ 307 | .__img { 308 | width: 100px; 309 | } 310 | .__img1 { 311 | width: 145px; 312 | } 313 | .__img2 { 314 | width: 125px; 315 | } 316 | 317 | .sponsor__container { 318 | grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); 319 | row-gap: 5rem; 320 | justify-items: center; 321 | align-items: center; 322 | } 323 | 324 | /*=============== SPECS ===============*/ 325 | 326 | /*=============== CASE ===============*/ 327 | .case__container { 328 | position: relative; 329 | grid-template-columns: repeat(2, 1fr); 330 | } 331 | 332 | .case__data { 333 | padding: 5rem 0 3rem; 334 | } 335 | 336 | .case__img { 337 | width: 250px; 338 | position: absolute; 339 | left: -7rem; 340 | } 341 | 342 | .case__description { 343 | margin-bottom: var(--mb-1-5); 344 | line-height: var(--text-line-height); 345 | } 346 | 347 | /*=============== DISCOUNT ===============*/ 348 | .discount__container { 349 | position: relative; 350 | background-color: var(--container-color); 351 | padding: 2rem 1.5rem; 352 | border-radius: .75rem; 353 | } 354 | 355 | .discount__title { 356 | font-size: var(--h3-font-size); 357 | margin-bottom: var(--mb-0-75); 358 | } 359 | 360 | .discount__description { 361 | margin-bottom: var(--mb-1); 362 | } 363 | 364 | .discount__img { 365 | width: 300px; 366 | position: absolute; 367 | top: 4rem; 368 | right: -11rem; 369 | } 370 | 371 | /*=============== PRODUCTS ===============*/ 372 | .products__line { 373 | line-height: 4rem; 374 | } 375 | 376 | .products__container { 377 | grid-template-columns: repeat(2, 1fr); 378 | gap: 5rem 1.5rem; 379 | padding-top: 3rem; 380 | } 381 | 382 | .products__card { 383 | position: relative; 384 | height: 132px; 385 | background-color: var(--container-color); 386 | padding: .75rem; 387 | border-radius: .5rem; 388 | display: grid; 389 | } 390 | 391 | .products__img { 392 | width: 80px; 393 | position: absolute; 394 | inset: 0; 395 | padding: 12px; 396 | margin-right: auto; 397 | margin-left: auto; 398 | top: 0rem; 399 | } 400 | 401 | .products__content { 402 | align-self: flex-end; 403 | } 404 | 405 | .products__title, .products__price { 406 | font-size: var(--small-font-size); 407 | } 408 | 409 | .products__price { 410 | font-weight: var(--font-semi-bold); 411 | } 412 | 413 | .products__button { 414 | position: absolute; 415 | right: .5rem; 416 | bottom: .5rem; 417 | padding: .5rem; 418 | border-radius: .35rem; 419 | } 420 | 421 | /*=============== FOOTER ===============*/ 422 | .footer__container { 423 | grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 424 | row-gap: 2rem; 425 | } 426 | 427 | .footer__logo { 428 | width: 2rem; 429 | } 430 | 431 | .footer__title { 432 | font-size: var(--h3-font-size); 433 | font-weight: var(--font-medium); 434 | margin-bottom: var(--mb-1); 435 | } 436 | 437 | .footer__links { 438 | display: flex; 439 | flex-direction: column; 440 | row-gap: .5rem; 441 | } 442 | 443 | .footer__link { 444 | color: var(--text-color); 445 | } 446 | 447 | .footer__link:hover { 448 | color: var(--white-color); 449 | } 450 | 451 | .footer__form { 452 | display: flex; 453 | column-gap: .5rem; 454 | background-color: var(--container-color); 455 | padding: .5rem .75rem; 456 | border-radius: .5rem; 457 | margin-bottom: var(--mb-2); 458 | } 459 | 460 | .footer__input { 461 | background-color: var(--container-color); 462 | width: 90%; 463 | color: var(--white-color); 464 | } 465 | 466 | .footer__input::placeholder { 467 | color: var(--text-color); 468 | font-size: var(--normal-font-size); 469 | font-family: var(--body-font); 470 | } 471 | 472 | .footer__social { 473 | display: flex; 474 | column-gap: 1.25rem; 475 | } 476 | 477 | .footer__social-link { 478 | display: inline-flex; 479 | color: var(--white-color); 480 | background-color: var(--container-color); 481 | padding: .5rem; 482 | border-radius: .25rem; 483 | font-size: 1rem; 484 | } 485 | 486 | .footer__social-link:hover { 487 | background-color: var(--black-color); 488 | } 489 | 490 | .footer__copy { 491 | margin-top: 5rem; 492 | text-align: center; 493 | } 494 | 495 | .footer__copy-link { 496 | font-size: var(--smaller-font-size); 497 | color: var(--text-color-light); 498 | } 499 | 500 | /*=============== SCROLL UP ===============*/ 501 | .scrollup { 502 | position: fixed; 503 | right: 1rem; 504 | bottom: -20%; 505 | display: flex; 506 | background-color: var(--container-color); 507 | border-radius: .25rem; 508 | padding: .45rem; 509 | opacity: 9; 510 | z-index: var(--z-tooltip); 511 | transition: .4s; 512 | } 513 | 514 | /* .scrollup:hover { 515 | background-color: var(--black-color); 516 | opacity: 1; 517 | } 518 | 519 | .scrollup__icon { 520 | color: var(--white-color); 521 | font-size: 1.35rem; 522 | } */ 523 | 524 | /* Show Scroll Up*/ 525 | .show-scroll { 526 | bottom: 5rem; 527 | } 528 | 529 | /*=============== SCROLL BAR ===============*/ 530 | ::-webkit-scrollbar { 531 | width: .60rem; 532 | border-radius: .5rem; 533 | } 534 | 535 | ::-webkit-scrollbar-thumb { 536 | background-color: var(--scroll-thumb-color); 537 | border-radius: .5rem; 538 | } 539 | 540 | ::-webkit-scrollbar-thumb:hover { 541 | background-color: var(--scroll-thumb-color-alt); 542 | } 543 | 544 | /*=============== MEDIA QUERIES ===============*/ 545 | /* For small devices */ 546 | @media screen and (max-width: 340px) { 547 | .container { 548 | margin-left: var(--mb-1); 549 | margin-right: var(--mb-1); 550 | } 551 | .section__title { 552 | font-size: var(--big-font-size); 553 | } 554 | .home__img { 555 | width: 200px; 556 | top: -13rem; 557 | } 558 | .home__title { 559 | top: -4rem; 560 | font-size: var(--bigger-font-size); 561 | } 562 | .home__data { 563 | padding-top: 1rem; 564 | } 565 | .home__description { 566 | font-size: var(--small-font-size); 567 | } 568 | .specs__img { 569 | width: 200px; 570 | } 571 | .case__container { 572 | grid-template-columns: .6fr 1fr; 573 | } 574 | .case__img { 575 | width: 220px; 576 | top: -2rem; 577 | left: -9rem; 578 | } 579 | .case__data { 580 | padding: 0; 581 | } 582 | .products__container { 583 | grid-template-columns: 142px; 584 | justify-content: center; 585 | } 586 | } 587 | 588 | /* For medium devices */ 589 | @media screen and (min-width: 576px) { 590 | .home__container { 591 | grid-template-columns: .8fr 1fr; 592 | } 593 | .home__data { 594 | padding-top: 2rem; 595 | } 596 | .home__img { 597 | top: -7rem; 598 | left: 0; 599 | } 600 | .specs__img { 601 | position: initial; 602 | } 603 | .specs__container { 604 | grid-template-columns: repeat(2, 1fr); 605 | justify-items: center; 606 | align-items: center; 607 | } 608 | .case__img { 609 | position: initial; 610 | } 611 | .case__data { 612 | padding: 0; 613 | } 614 | .case__container { 615 | grid-template-columns: max-content 250px; 616 | justify-content: center; 617 | align-items: center; 618 | column-gap: 2rem; 619 | } 620 | .discount__img { 621 | position: initial; 622 | } 623 | .discount__container { 624 | grid-template-columns: repeat(2, 1fr); 625 | justify-items: center; 626 | align-items: center; 627 | } 628 | .products__container { 629 | grid-template-columns: repeat(3, 142px); 630 | justify-content: center; 631 | } 632 | } 633 | 634 | @media screen and (min-width: 767px) { 635 | body { 636 | margin: 0; 637 | } 638 | .section { 639 | padding: 6rem 0 2rem; 640 | } 641 | .nav { 642 | height: calc(var(--header-height) + 1.5rem); 643 | } 644 | .nav__logo { 645 | width: 2rem; 646 | } 647 | .nav__list { 648 | flex-direction: row; 649 | column-gap: 3.5rem; 650 | } 651 | .nav__link { 652 | font-size: var(--normal-font-size); 653 | text-transform: initial; 654 | } 655 | .nav__toggle, .nav__close { 656 | display: none; 657 | } 658 | .home__container { 659 | position: relative; 660 | grid-template-columns: repeat(2, 1fr); 661 | } 662 | .home__img { 663 | top: -9rem; 664 | left: 4rem; 665 | } 666 | .home__data { 667 | padding-top: 8rem; 668 | } 669 | .specs__img { 670 | width: 300px; 671 | } 672 | .case__container { 673 | column-gap: 5rem; 674 | } 675 | .case__img { 676 | width: 300px; 677 | } 678 | .case__description { 679 | margin-bottom: var(--mb-2); 680 | } 681 | .discount__container { 682 | grid-template-columns: 250px max-content; 683 | justify-content: center; 684 | column-gap: 5rem; 685 | padding: 3rem 0; 686 | } 687 | .discount__title { 688 | font-size: var(--h2-font-size); 689 | margin-bottom: var(--mb-1); 690 | } 691 | .discount__description { 692 | margin-bottom: var(--mb-2); 693 | } 694 | .products__container { 695 | grid-template-columns: repeat(3, 162px); 696 | gap: 6rem 3rem; 697 | padding-top: 5rem; 698 | } 699 | .products__card { 700 | height: 152px; 701 | padding: .85rem; 702 | display: flex; 703 | justify-content: center; 704 | align-items: center; 705 | } 706 | .products__img { 707 | width: 85px; 708 | } 709 | .products__content a{ 710 | 711 | text-decoration: none; 712 | color: white; 713 | font-size: 20px; 714 | } 715 | .footer__container { 716 | grid-template-columns: .4fr .7fr .7fr 1fr; 717 | } 718 | } 719 | 720 | /* For large devices */ 721 | @media screen and (min-width: 1024px) { 722 | .container { 723 | margin-left: auto; 724 | margin-right: auto; 725 | } 726 | .home__img { 727 | width: 300px; 728 | top: -15rem; 729 | } 730 | .home__title { 731 | top: -5rem; 732 | left: 3.5rem; 733 | } 734 | .home__description { 735 | padding-right: 5rem; 736 | } 737 | .sponsor__img { 738 | width: 100px; 739 | } 740 | .discount__img { 741 | width: 350px; 742 | } 743 | .footer__container { 744 | padding-top: 3rem; 745 | } 746 | .footer__copy { 747 | margin-top: 9rem; 748 | } 749 | } 750 | 751 | /* =================================================================== */ 752 | 753 | .conta{ 754 | width: 100%; 755 | height: 100vh; 756 | margin: 0; 757 | background-color:var(--body-color); 758 | display:flex; 759 | justify-content: center; 760 | align-items: center; 761 | padding: 80px 0; 762 | } 763 | 764 | .parallex-text{ 765 | position: absolute; 766 | font-family: 'Nanum Gothic', sans-serif; 767 | font-size: 15vw; 768 | font-style: italic; 769 | 770 | } 771 | 772 | .parallex-text::after{ 773 | content: attr(text); 774 | position: absolute; 775 | top: 0; 776 | left: 0; 777 | color: transparent; 778 | z-index: 100; 779 | -webkit-text-stroke: 0.15vw black; 780 | 781 | } 782 | 783 | .HHH{ 784 | width: 40vw; 785 | margin-top: 7rem; 786 | height: 96%; 787 | animation: animate 5s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate; 788 | 789 | } 790 | 791 | @keyframes animate { 792 | 0%,10%{ 793 | transform: translate(100vw,0) ; 794 | } 795 | 90%,100%{ 796 | transform: translate(-3vw,-4vw); 797 | } 798 | 799 | } --------------------------------------------------------------------------------