├── README.md
├── assets
    ├── css
    │   └── styles.css
    ├── img
    │   ├── about.png
    │   ├── card1.png
    │   ├── card2.png
    │   ├── card3.png
    │   ├── card4.png
    │   ├── favicon.png
    │   ├── home.png
    │   ├── product1.png
    │   ├── product2.png
    │   ├── product3.png
    │   ├── product4.png
    │   ├── product5.png
    │   └── product6.png
    ├── js
    │   ├── main.js
    │   └── scrollreveal.min.js
    └── scss
    │   ├── base
    │       └── _base.scss
    │   ├── components
    │       ├── _about.scss
    │       ├── _breakpoints.scss
    │       ├── _buttons.scss
    │       ├── _contact.scss
    │       ├── _footer.scss
    │       ├── _header.scss
    │       ├── _home.scss
    │       ├── _products.scss
    │       ├── _questions.scss
    │       ├── _scroll.scss
    │       └── _steps.scss
    │   ├── config
    │       └── _variables.scss
    │   ├── layout
    │       └── _layout.scss
    │   ├── styles.scss
    │   └── theme
    │       └── _theme.scss
├── index.html
└── preview.png


/README.md:
--------------------------------------------------------------------------------
 1 | # Responsive Plants Website 🎍 
 2 | ## [Watch it on youtube](https://youtu.be/lpzExNZDizI)
 3 | ### Responsive Plants Website 🎍
 4 | 
 5 | - Responsive Plants Website Using HTML, CSS and JavaScript.
 6 | - Contains animations when scrolling.
 7 | - Includes a dark and light mode.
 8 | - Developed first with the Mobile First methodology, then for desktop.
 9 | - Compatible with all mobile devices and with a beautiful and pleasant user interface.
10 | 
11 | Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/c/Bedimcode)
12 | 
13 | ![plants website](/preview.png)
14 | 


--------------------------------------------------------------------------------
/assets/css/styles.css:
--------------------------------------------------------------------------------
   1 | /*=============== GOOGLE FONTS ===============*/
   2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
   3 | 
   4 | /*=============== VARIABLES CSS ===============*/
   5 | :root {
   6 |   --header-height: 3.5rem; /*56px*/
   7 | 
   8 |   /*========== Colors ==========*/
   9 |   /*Color mode HSL(hue, saturation, lightness)*/
  10 |   --hue: 152;
  11 |   --first-color: hsl(var(--hue), 24%, 32%);
  12 |   --first-color-alt: hsl(var(--hue), 24%, 28%);
  13 |   --first-color-light: hsl(var(--hue), 24%, 66%);
  14 |   --first-color-lighten: hsl(var(--hue), 24%, 92%);
  15 |   --title-color: hsl(var(--hue), 4%, 15%);
  16 |   --text-color: hsl(var(--hue), 4%, 35%);
  17 |   --text-color-light: hsl(var(--hue), 4%, 55%);
  18 |   --body-color: hsl(var(--hue), 0%, 100%);
  19 |   --container-color: #FFF;
  20 | 
  21 |   /*========== Font and typography ==========*/
  22 |   /*.5rem = 8px | 1rem = 16px ...*/
  23 |   --body-font: 'Poppins', sans-serif;
  24 |   --big-font-size: 2rem;
  25 |   --h1-font-size: 1.5rem;
  26 |   --h2-font-size: 1.25rem;
  27 |   --h3-font-size: 1rem;
  28 |   --normal-font-size: .938rem;
  29 |   --small-font-size: .813rem;
  30 |   --smaller-font-size: .75rem;
  31 | 
  32 |   /*========== Font weight ==========*/
  33 |   --font-medium: 500;
  34 |   --font-semi-bold: 600;
  35 | 
  36 |   /*========== Margenes Bottom ==========*/
  37 |   /*.5rem = 8px | 1rem = 16px ...*/
  38 |   --mb-0-5: .5rem;
  39 |   --mb-0-75: .75rem;
  40 |   --mb-1: 1rem;
  41 |   --mb-1-5: 1.5rem;
  42 |   --mb-2: 2rem;
  43 |   --mb-2-5: 2.5rem;
  44 | 
  45 |   /*========== z index ==========*/
  46 |   --z-tooltip: 10;
  47 |   --z-fixed: 100;
  48 | }
  49 | 
  50 | /* Responsive typography */
  51 | @media screen and (min-width: 968px) {
  52 |   :root {
  53 |     --big-font-size: 3.5rem;
  54 |     --h1-font-size: 2.25rem;
  55 |     --h2-font-size: 1.5rem;
  56 |     --h3-font-size: 1.25rem;
  57 |     --normal-font-size: 1rem;
  58 |     --small-font-size: .875rem;
  59 |     --smaller-font-size: .813rem;
  60 |   }
  61 | }
  62 | 
  63 | /*=============== BASE ===============*/
  64 | *{
  65 |   box-sizing: border-box;
  66 |   padding: 0;
  67 |   margin: 0;
  68 | }
  69 | 
  70 | html{
  71 |   scroll-behavior: smooth;
  72 | }
  73 | 
  74 | body,
  75 | button,
  76 | input,
  77 | textarea{
  78 |   font-family: var(--body-font);
  79 |   font-size: var(--normal-font-size);
  80 | }
  81 | 
  82 | body{
  83 |   margin: var(--header-height) 0 0 0;
  84 |   background-color: var(--body-color);
  85 |   color: var(--text-color);
  86 |   transition: .4s; /*For animation dark mode*/
  87 | }
  88 | 
  89 | button{
  90 |   cursor: pointer;
  91 |   border: none;
  92 |   outline: none;
  93 | }
  94 | 
  95 | h1,h2,h3{
  96 |   color: var(--title-color);
  97 |   font-weight: var(--font-semi-bold);
  98 | }
  99 | 
 100 | ul{
 101 |   list-style: none;
 102 | }
 103 | 
 104 | a{
 105 |   text-decoration: none;
 106 | }
 107 | 
 108 | img{
 109 |   max-width: 100%;
 110 |   height: auto;
 111 | }
 112 | 
 113 | /*=============== THEME ===============*/
 114 | /*========== Variables Dark theme ==========*/
 115 | body.dark-theme{
 116 |   --first-color-dark: hsl(var(--hue), 8%, 20%);
 117 |   --title-color: hsl(var(--hue), 4%, 95%);
 118 |   --text-color: hsl(var(--hue), 4%, 75%);
 119 |   --body-color: hsl(var(--hue), 8%, 12%);
 120 |   --container-color: hsl(var(--hue), 8%, 16%);
 121 | }
 122 | 
 123 | /*========== Button Dark/Light ==========*/
 124 | .change-theme{
 125 |   color: var(--title-color);
 126 |   font-size: 1.15rem;
 127 |   cursor: pointer;
 128 | }
 129 | 
 130 | .nav__btns{
 131 |   display: inline-flex;
 132 |   align-items: center;
 133 |   column-gap: 1rem;
 134 | }
 135 | 
 136 | /*========== 
 137 | Color changes in some parts of 
 138 | the website, in dark theme 
 139 | ==========*/
 140 | 
 141 | .dark-theme .steps__bg,
 142 | .dark-theme .questions{
 143 |   background-color: var(--first-color-dark);
 144 | }
 145 | 
 146 | .dark-theme .product__circle,
 147 | .dark-theme .footer__subscribe{
 148 |   background-color: var(--container-color);
 149 | }
 150 | 
 151 | .dark-theme .scroll-header{
 152 |   box-shadow: 0 1px 4px hsla(var(--hue), 4%, 4%, .3);
 153 | }
 154 | 
 155 | /*=============== REUSABLE CSS CLASSES ===============*/
 156 | .section{
 157 |   padding: 5.5rem 0 1rem;
 158 | }
 159 | 
 160 | .section__title,
 161 | .section__title-center{
 162 |   font-size: var(--h2-font-size);
 163 |   margin-bottom: var(--mb-2);
 164 |   line-height: 140%;
 165 | }
 166 | 
 167 | .section__title-center{
 168 |   text-align: center;
 169 | }
 170 | 
 171 | .container{
 172 |   max-width: 968px;
 173 |   margin-left: var(--mb-1-5);
 174 |   margin-right: var(--mb-1-5);
 175 | }
 176 | 
 177 | .grid{
 178 |   display: grid;
 179 | }
 180 | 
 181 | .main{
 182 |   overflow: hidden; /*For animation*/
 183 | }
 184 | 
 185 | /*=============== HEADER ===============*/
 186 | .header{
 187 |   width: 100%;
 188 |   background-color: var(--body-color);
 189 |   position: fixed;
 190 |   top: 0;
 191 |   left: 0;
 192 |   z-index: var(--z-fixed);
 193 |   transition: .4s; /*For animation dark mode*/
 194 | }
 195 | 
 196 | /*=============== NAV ===============*/
 197 | .nav{
 198 |   height: var(--header-height);
 199 |   display: flex;
 200 |   justify-content: space-between;
 201 |   align-items: center;
 202 | }
 203 | 
 204 | .nav__logo,
 205 | .nav__toggle,
 206 | .nav__close{
 207 |   color: var(--title-color);
 208 | }
 209 | 
 210 | .nav__logo{
 211 |   text-transform: uppercase;
 212 |   font-weight: 700;
 213 |   letter-spacing: -1px;
 214 |   display: inline-flex;
 215 |   align-items: center;
 216 |   column-gap: .5rem;
 217 |   transition: .3s;
 218 | }
 219 | 
 220 | .nav__logo-icon{
 221 |   font-size: 1.15rem;
 222 |   color: var(--first-color);
 223 | }
 224 | 
 225 | .nav__logo:hover{
 226 |   color: var(--first-color);
 227 | }
 228 | 
 229 | .nav__toggle{
 230 |   display: inline-flex;
 231 |   font-size: 1.25rem;
 232 |   cursor: pointer;
 233 | }
 234 | 
 235 | @media screen and (max-width: 767px){
 236 |   .nav__menu{
 237 |     position: fixed;
 238 |     background-color: var(--container-color);
 239 |     width: 80%;
 240 |     height: 100%;
 241 |     top: 0;
 242 |     right: -100%;
 243 |     box-shadow: -2px 0 4px hsla(var(--hue), 24%, 15%, .1);
 244 |     padding: 4rem 0 0 3rem;
 245 |     border-radius: 1rem 0 0 1rem;
 246 |     transition: .3s;
 247 |     z-index: var(--z-fixed);
 248 |   }
 249 | }
 250 | 
 251 | .nav__close{
 252 |   font-size: 1.5rem;
 253 |   position: absolute;
 254 |   top: 1rem;
 255 |   right: 1.25rem;
 256 |   cursor: pointer;
 257 | }
 258 | 
 259 | .nav__list{
 260 |   display: flex;
 261 |   flex-direction: column;
 262 |   row-gap: 1.5rem;
 263 | }
 264 | 
 265 | .nav__link{
 266 |   color: var(--title-color);
 267 |   font-weight: var(--font-medium);
 268 |   transition: .3s;
 269 | }
 270 | 
 271 | .nav__link:hover{
 272 |   color: var(--first-color);
 273 | }
 274 | 
 275 | /* Show menu */
 276 | .show-menu{
 277 |   right: 0;
 278 | }
 279 | 
 280 | /* Change background header */
 281 | .scroll-header{
 282 |   box-shadow: 0 1px 4px hsla(var(--hue), 4%, 15%, .1);
 283 | }
 284 | 
 285 | /* Active link */
 286 | .active-link{
 287 |   position: relative;
 288 |   color: var(--first-color);
 289 | }
 290 | 
 291 | .active-link::after{
 292 |   content: '';
 293 |   position: absolute;
 294 |   bottom: -.5rem;
 295 |   left: 0;
 296 |   width: 50%;
 297 |   height: 2px;
 298 |   background-color: var(--first-color);
 299 | }
 300 | 
 301 | /*=============== HOME ===============*/
 302 | .home{
 303 |   padding: 3.5rem 0 2rem;
 304 | }
 305 | 
 306 | .home__container{
 307 |   position: relative;
 308 |   row-gap: 2rem;
 309 | }
 310 | 
 311 | .home__img{
 312 |   width: 200px;
 313 |   justify-self: center;
 314 | }
 315 | 
 316 | .home__title{
 317 |   font-size: var(--big-font-size);
 318 |   line-height: 140%;
 319 |   margin-bottom: var(--mb-1);
 320 | }
 321 | 
 322 | .home__description{
 323 |   margin-bottom: var(--mb-2-5);
 324 | }
 325 | 
 326 | .home__social{
 327 |   position: absolute;
 328 |   top: 2rem;
 329 |   right: -1rem;
 330 |   display: grid;
 331 |   justify-items: center;
 332 |   row-gap: 3.5rem;
 333 | }
 334 | 
 335 | .home__social-follow{
 336 |   font-weight: var(--font-medium);
 337 |   font-size: var(--smaller-font-size);
 338 |   color: var(--first-color);
 339 |   position: relative;
 340 |   transform: rotate(90deg);
 341 | }
 342 | 
 343 | .home__social-follow::after{
 344 |   content: '';
 345 |   position: absolute;
 346 |   width: 1rem;
 347 |   height: 2px;
 348 |   background-color: var(--first-color);
 349 |   right: -45%;
 350 |   top: 50%;
 351 | }
 352 | 
 353 | .home__social-links{
 354 |   display: inline-flex;
 355 |   flex-direction: column;
 356 |   row-gap: .25rem;
 357 | }
 358 | 
 359 | .home__social-link{
 360 |   font-size: 1rem;
 361 |   color: var(--first-color);
 362 |   transition: .3s;
 363 | }
 364 | 
 365 | .home__social-link:hover{
 366 |   transform: translateX(.25rem);
 367 | }
 368 | 
 369 | /*=============== BUTTONS ===============*/
 370 | .button{
 371 |   display: inline-block;
 372 |   background-color: var(--first-color);
 373 |   color: #FFF;
 374 |   padding: 1rem 1.75rem;
 375 |   border-radius: .5rem;
 376 |   font-weight: var(--font-medium);
 377 |   transition: .3s;
 378 | }
 379 | 
 380 | .button:hover{
 381 |   background-color: var(--first-color-alt);
 382 | }
 383 | 
 384 | .button__icon{
 385 |   transition: .3s;
 386 | }
 387 | 
 388 | .button:hover .button__icon{
 389 |   transform: translateX(.25rem);
 390 | }
 391 | 
 392 | .button--flex{
 393 |   display: inline-flex;
 394 |   align-items: center;
 395 |   column-gap: .5rem;
 396 | }
 397 | 
 398 | .button--link{
 399 |   color: var(--first-color);
 400 |   font-weight: var(--font-medium);
 401 | }
 402 | 
 403 | .button--link:hover .button__icon{
 404 |   transform: translateX(.25rem);
 405 | }
 406 | 
 407 | /*=============== ABOUT ===============*/
 408 | .about__container{
 409 |   row-gap: 2rem;
 410 | }
 411 | 
 412 | .about__img{
 413 |   width: 280px;
 414 |   justify-self: center;
 415 | }
 416 | 
 417 | .about__title{
 418 |   margin-bottom: var(--mb-1);
 419 | }
 420 | 
 421 | .about__description{
 422 |   margin-bottom: var(--mb-2);
 423 | }
 424 | 
 425 | .about__details{
 426 |   display: grid;
 427 |   row-gap: 1rem;
 428 |   margin-bottom: var(--mb-2-5);
 429 | }
 430 | 
 431 | .about__details-description{
 432 |   display: inline-flex;
 433 |   column-gap: .5rem;
 434 |   font-size: var(--small-font-size);
 435 | }
 436 | 
 437 | .about__details-icon{
 438 |   font-size: 1rem;
 439 |   color: var(--first-color);
 440 |   margin-top: .15rem;
 441 | }
 442 | 
 443 | /*=============== STEPS ===============*/
 444 | .steps__bg{
 445 |   background-color: var(--first-color);
 446 |   padding: 3rem 2rem 2rem;
 447 |   border-radius: 1rem;
 448 | }
 449 | 
 450 | .steps__container{
 451 |   gap: 2rem;
 452 |   padding-top: 1rem;
 453 | }
 454 | 
 455 | .steps__title{
 456 |   color: #FFF;
 457 | }
 458 | 
 459 | .steps__card{
 460 |   background-color: var(--container-color);
 461 |   padding: 2.5rem 3rem 2rem 1.5rem;
 462 |   border-radius: 1rem;
 463 | }
 464 | 
 465 | .steps__card-number{
 466 |   display: inline-block;
 467 |   background-color: var(--first-color-alt);
 468 |   color: #FFF;
 469 |   padding: .5rem .75rem;
 470 |   border-radius: .25rem;
 471 |   font-size: var(--h2-font-size);
 472 |   margin-bottom: var(--mb-1-5);
 473 |   transition: .3s;
 474 | }
 475 | 
 476 | .steps__card-title{
 477 |   font-size: var(--h3-font-size);
 478 |   margin-bottom: var(--mb-0-5);
 479 | }
 480 | 
 481 | .steps__card-description{
 482 |   font-size: var(--small-font-size);
 483 | }
 484 | 
 485 | .steps__card:hover .steps__card-number{
 486 |   transform: translateY(-.25rem);
 487 | }
 488 | 
 489 | /*=============== PRODUCTS ===============*/
 490 | .product__description{
 491 |   text-align: center;
 492 | }
 493 | 
 494 | .product__container{
 495 |   padding: 3rem 0;
 496 |   grid-template-columns: repeat(2, 1fr);
 497 |   gap: 2.5rem 3rem;
 498 | }
 499 | 
 500 | .product__card{
 501 |   display: grid;
 502 |   position: relative;
 503 | }
 504 | 
 505 | .product__img{
 506 |   position: relative;
 507 |   width: 120px;
 508 |   justify-self: center;
 509 |   margin-bottom: var(--mb-0-75);
 510 |   transition: .3s;
 511 | }
 512 | 
 513 | .product__title,
 514 | .product__price{
 515 |   font-size: var(--small-font-size);
 516 |   font-weight: var(--font-semi-bold);
 517 |   color: var(--title-color);
 518 | }
 519 | 
 520 | .product__title{
 521 |   margin-bottom: .25rem;
 522 | }
 523 | 
 524 | .product__button{
 525 |   position: absolute;
 526 |   right: 0;
 527 |   bottom: 0;
 528 |   background-color: var(--first-color);
 529 |   color: #FFF;
 530 |   padding: .25rem;
 531 |   border-radius: .35rem;
 532 |   font-size: 1.15rem;
 533 | }
 534 | 
 535 | .product__button:hover{
 536 |   background-color: var(--first-color-alt);
 537 | }
 538 | 
 539 | .product__circle{
 540 |   width: 90px;
 541 |   height: 90px;
 542 |   background-color: var(--first-color-lighten);
 543 |   border-radius: 50%;
 544 |   position: absolute;
 545 |   top: 18%;
 546 |   left: 5%;
 547 | }
 548 | 
 549 | .product__card:hover .product__img{
 550 |   transform: translateY(-.5rem);
 551 | }
 552 | 
 553 | /*=============== QUESTIONS ===============*/
 554 | .questions{
 555 |   background-color: var(--first-color-lighten);
 556 | }
 557 | 
 558 | .questions__container{
 559 |   gap: 1.5rem;
 560 |   padding: 1.5rem 0;
 561 | }
 562 | 
 563 | .questions__group{
 564 |   display: grid;
 565 |   row-gap: 1.5rem;
 566 | }
 567 | 
 568 | .questions__item{
 569 |   background-color: var(--container-color);
 570 |   border-radius: .25rem;
 571 | }
 572 | 
 573 | .questions__item-title{
 574 |   font-size: var(--small-font-size);
 575 |   font-weight: var(--font-medium);
 576 | }
 577 | 
 578 | .questions__icon{
 579 |   font-size: 1.25rem;
 580 |   color: var(--title-color);
 581 | }
 582 | 
 583 | .questions__description{
 584 |   font-size: var(--smaller-font-size);
 585 |   padding: 0 1.25rem 1.25rem 2.5rem;
 586 | }
 587 | 
 588 | .questions__header{
 589 |   display: flex;
 590 |   align-items: center;
 591 |   column-gap: .5rem;
 592 |   padding: .75rem .5rem;
 593 |   cursor: pointer;
 594 | }
 595 | 
 596 | .questions__content{
 597 |   overflow: hidden;
 598 |   height: 0;
 599 | }
 600 | 
 601 | .questions__item,
 602 | .questions__header,
 603 | .questions__item-title,
 604 | .questions__icon,
 605 | .questions__description,
 606 | .questions__content{
 607 |   transition: .3s;
 608 | }
 609 | 
 610 | .questions__item:hover{
 611 |   box-shadow: 0 2px 8px hsla(var(--hue), 4%, 15%, .15);
 612 | }
 613 | 
 614 | /*Rotate icon, change color of titles and background*/
 615 | .accordion-open .questions__header,
 616 | .accordion-open .questions__content{
 617 |   background-color: var(--first-color);
 618 | }
 619 | 
 620 | .accordion-open .questions__item-title,
 621 | .accordion-open .questions__description,
 622 | .accordion-open .questions__icon{
 623 |   color: #FFF;
 624 | }
 625 | 
 626 | .accordion-open .questions__icon{
 627 |   transform: rotate(45deg);
 628 | }
 629 | 
 630 | /*=============== CONTACT ===============*/
 631 | .contact__container{
 632 |   row-gap: 3.5rem;
 633 | }
 634 | 
 635 | .contact__data{
 636 |   display: grid;
 637 |   row-gap: 2rem;
 638 | }
 639 | 
 640 | .contact__subtitle{
 641 |   font-size: var(--normal-font-size);
 642 |   font-weight: var(--font-medium);
 643 |   color: var(--text-color);
 644 |   margin-bottom: var(--mb-0-5);
 645 | }
 646 | 
 647 | .contact__description{
 648 |   display: inline-flex;
 649 |   align-items: center;
 650 |   column-gap: .5rem;
 651 |   color: var(--title-color);
 652 |   font-weight: var(--font-medium);
 653 | }
 654 | 
 655 | .contact__icon{
 656 |   font-size: 1.25rem;
 657 | }
 658 | 
 659 | .contact__inputs{
 660 |   display: grid;
 661 |   row-gap: 2rem;
 662 |   margin-bottom: var(--mb-2-5);
 663 | }
 664 | 
 665 | .contact__content{
 666 |   position: relative;
 667 |   height: 3rem;
 668 |   border-bottom: 1px solid var(--text-color-light);
 669 | }
 670 | 
 671 | .contact__input{
 672 |   position: absolute;
 673 |   top: 0;
 674 |   left: 0;
 675 |   width: 100%;
 676 |   height: 100%;
 677 |   padding: 1rem 1rem 1rem 0;
 678 |   background: none;
 679 | 
 680 |   color: var(--text-color);
 681 | 
 682 |   
 683 |   border: none;
 684 |   outline: none;
 685 |   z-index: 1;
 686 | }
 687 | 
 688 | .contact__label{
 689 |   position: absolute;
 690 |   top: .75rem;
 691 |   width: 100%;
 692 |   font-size: var(--small-font-size);
 693 |   color: var(--text-color-light);
 694 |   transition: .3s;
 695 | }
 696 | 
 697 | .contact__area{
 698 |   height: 7rem;
 699 | }
 700 | 
 701 | .contact__area textarea{
 702 |   resize: none;
 703 | }
 704 | 
 705 | /*Input focus move up label*/
 706 | .contact__input:focus + .contact__label{
 707 |   top: -.75rem;
 708 |   left: 0;
 709 |   font-size: var(--smaller-font-size);
 710 |   z-index: 10;
 711 | }
 712 | 
 713 | /*Input focus sticky top label*/
 714 | .contact__input:not(:placeholder-shown).contact__input:not(:focus) + .contact__label{
 715 |   top: -.75rem;
 716 |   font-size: var(--smaller-font-size);
 717 |   z-index: 10;
 718 | }
 719 | 
 720 | /*=============== FOOTER ===============*/
 721 | .footer__container{
 722 |   row-gap: 3rem;
 723 | }
 724 | 
 725 | .footer__logo{
 726 |   display: inline-flex;
 727 |   align-items: center;
 728 |   column-gap: .5rem;
 729 |   color: var(--title-color);
 730 |   text-transform: uppercase;
 731 |   font-weight: 700;
 732 |   letter-spacing: -1px;
 733 |   margin-bottom: var(--mb-2-5);
 734 |   transition: .3s;
 735 | }
 736 | 
 737 | .footer__logo-icon{
 738 |   font-size: 1.15rem;
 739 |   color: var(--first-color);
 740 | }
 741 | 
 742 | .footer__logo:hover{
 743 |   color: var(--first-color);
 744 | }
 745 | 
 746 | .footer__title{
 747 |   font-size: var(--h3-font-size);
 748 |   margin-bottom: var(--mb-1-5);
 749 | }
 750 | 
 751 | .footer__subscribe{
 752 |   background-color: var(--first-color-lighten);
 753 |   padding: .75rem;
 754 |   display: flex;
 755 |   justify-content: space-between;
 756 |   border-radius: .5rem;
 757 | }
 758 | 
 759 | .footer__input{
 760 |   width: 70%;
 761 |   padding: 0 .5rem;
 762 |   background: none;
 763 |   color: var(--text-color);
 764 |   border: none;
 765 |   outline: none;
 766 | }
 767 | 
 768 | .footer__button{
 769 |   padding: 1rem;
 770 | }
 771 | 
 772 | .footer__data{
 773 |   display: grid;
 774 |   row-gap: .75rem;
 775 | }
 776 | 
 777 | .footer__information{
 778 |   font-size: var(--small-font-size);
 779 | }
 780 | 
 781 | .footer__social{
 782 |   display: inline-flex;
 783 |   column-gap: .75rem;
 784 | }
 785 | 
 786 | .footer__social-link{
 787 |   font-size: 1rem;
 788 |   color: var(--text-color);
 789 |   transition: .3s;
 790 | }
 791 | 
 792 | .footer__social-link:hover{
 793 |   transform: translateY(-.25rem);
 794 | }
 795 | 
 796 | .footer__cards{
 797 |   display: inline-flex;
 798 |   align-items: center;
 799 |   column-gap: .5rem;
 800 | }
 801 | .footer__card{
 802 |   width: 35px;
 803 | }
 804 | 
 805 | .footer__copy{
 806 |   text-align: center;
 807 |   font-size: var(--smaller-font-size);
 808 |   color: var(--text-color-light);
 809 |   margin: 5rem 0 1rem;
 810 | }
 811 | 
 812 | /*=============== SCROLL UP ===============*/
 813 | .scrollup{
 814 |   position: fixed;
 815 |   background-color: var(--first-color);
 816 |   right: 1rem;
 817 |   bottom: -30%;
 818 |   display: inline-flex;
 819 |   padding: .5rem;
 820 |   border-radius: .25rem;
 821 |   z-index: var(--z-tooltip);
 822 |   opacity: .8;
 823 |   transition: .4s;
 824 | }
 825 | 
 826 | .scrollup__icon{
 827 |   font-size: 1rem;
 828 |   color: #FFF;
 829 | }
 830 | 
 831 | .scrollup:hover{
 832 |   background-color: var(--first-color-alt);
 833 |   opacity: 1;
 834 | }
 835 | 
 836 | /* Show Scroll Up*/
 837 | .show-scroll{
 838 |   bottom: 3rem;
 839 | }
 840 | 
 841 | /*=============== SCROLL BAR ===============*/
 842 | ::-webkit-scrollbar{
 843 |   width: .6rem;
 844 |   background: hsl(var(--hue), 4%, 53%);
 845 | }
 846 | 
 847 | ::-webkit-scrollbar-thumb{
 848 |   background: hsl(var(--hue), 4%, 29%);
 849 |   border-radius: .5rem;
 850 | }
 851 | 
 852 | /*=============== BREAKPOINTS ===============*/
 853 | /* For small devices */
 854 | @media screen and (max-width: 320px){
 855 |   .container{
 856 |     margin-left: var(--mb-1);
 857 |     margin-right: var(--mb-1);
 858 |   }
 859 | 
 860 |   .home__img{
 861 |     width: 180px;
 862 |   }
 863 |   .home__title{
 864 |     font-size: var(--h1-font-size);
 865 |   }
 866 | 
 867 |   .steps__bg{
 868 |     padding: 2rem 1rem;
 869 |   }
 870 |   .steps__card{
 871 |     padding: 1.5rem;
 872 |   }
 873 | 
 874 |   .product__container{
 875 |     grid-template-columns: .6fr;
 876 |     justify-content: center;
 877 |   }
 878 | }
 879 | 
 880 | /* For medium devices */
 881 | @media screen and (min-width: 576px){
 882 |   .steps__container{
 883 |     grid-template-columns: repeat(2, 1fr);
 884 |   }
 885 | 
 886 |   .product__description{
 887 |     padding: 0 4rem;
 888 |   }
 889 |   .product__container{
 890 |     grid-template-columns: repeat(2, 170px);
 891 |     justify-content: center;
 892 |     column-gap: 5rem;
 893 |   }
 894 | 
 895 |   .footer__subscribe{
 896 |     width: 400px;
 897 |   }
 898 | }
 899 | 
 900 | @media screen and (min-width: 767px){
 901 |   body{
 902 |     margin: 0;
 903 |   }
 904 | 
 905 |   .nav{
 906 |     height: calc(var(--header-height) + 1.5rem);
 907 |     column-gap: 3rem;
 908 |   }
 909 |   .nav__toggle,
 910 |   .nav__close{
 911 |     display: none;
 912 |   }
 913 |   .nav__list{
 914 |     flex-direction: row;
 915 |     column-gap: 3rem;
 916 |   }
 917 |   .nav__menu{
 918 |     margin-left: auto;
 919 |   }
 920 | 
 921 |   .home__container,
 922 |   .about__container,
 923 |   .questions__container,
 924 |   .contact__container,
 925 |   .footer__container{
 926 |     grid-template-columns: repeat(2, 1fr);
 927 |   }
 928 |   
 929 |   .home{
 930 |     padding: 10rem 0 5rem;
 931 |   }
 932 |   .home__container{
 933 |     align-items: center;
 934 |   }
 935 |   .home__img{
 936 |     width: 280px;
 937 |     order: 1;
 938 |   }
 939 |   .home__social{
 940 |     top: 30%;
 941 |   }
 942 | 
 943 |   .questions__container{
 944 |     align-items: flex-start;
 945 |   }
 946 | 
 947 |   .footer__container{
 948 |     column-gap: 3rem;
 949 |   }
 950 |   .footer__subscribe{
 951 |     width: initial;
 952 |   }
 953 | }
 954 | 
 955 | /* For large devices */
 956 | @media screen and (min-width: 992px){
 957 |   .container{
 958 |     margin-left: auto;
 959 |     margin-right: auto;
 960 |   }
 961 | 
 962 |   .section{
 963 |     padding: 8rem 0 1rem;
 964 |   }
 965 |   .section__title,
 966 |   .section__title-center{
 967 |     font-size: var(--h1-font-size);
 968 |   }
 969 | 
 970 |   .home{
 971 |     padding: 13rem 0 5rem;
 972 |   }
 973 |   .home__img{
 974 |     width: 350px;
 975 |   }
 976 |   .home__description{
 977 |     padding-right: 7rem;
 978 |   }
 979 | 
 980 |   .about__img{
 981 |     width: 380px;
 982 |   }
 983 | 
 984 |   .steps__container{
 985 |     grid-template-columns: repeat(3, 1fr);
 986 |   }
 987 |   .steps__bg{
 988 |     padding: 3.5rem 2.5rem;
 989 |   }
 990 |   .steps__card-title{
 991 |     font-size: var(--normal-font-size);
 992 |   }
 993 | 
 994 |   .product__description{
 995 |     padding: 0 16rem;
 996 |   }
 997 |   .product__container{
 998 |     padding: 4rem 0;
 999 |     grid-template-columns: repeat(3, 185px);
1000 |     gap: 4rem 6rem;
1001 |   }
1002 |   .product__img{
1003 |     width: 160px;
1004 |   }
1005 |   .product__circle{
1006 |     width: 110px;
1007 |     height: 110px;
1008 |   }
1009 |   .product__title,
1010 |   .product__price{
1011 |     font-size: var(--normal-font-size);
1012 |   }
1013 | 
1014 |   .questions__container{
1015 |     padding: 1rem 0 4rem;
1016 |   }
1017 |   .questions__title{
1018 |     text-align: initial;
1019 |   }
1020 |   .questions__group{
1021 |     row-gap: 2rem;
1022 |   }
1023 |   .questions__header{
1024 |     padding: 1rem;
1025 |   }
1026 |   .questions__description{
1027 |     padding: 0 3.5rem 2.25rem 2.75rem;
1028 |   }
1029 | 
1030 |   .footer__logo{
1031 |     font-size: var(--h3-font-size);
1032 |   }
1033 |   .footer__container{
1034 |     grid-template-columns: 1fr .5fr .5fr .5fr;
1035 |   }
1036 |   .footer__copy{
1037 |     margin: 7rem 0 2rem;
1038 |   }
1039 | }
1040 | 
1041 | @media screen and (min-width: 1200px){
1042 |   .home__social{
1043 |     right: -3rem;
1044 |     row-gap: 4.5rem;
1045 |   }
1046 |   .home__social-follow{
1047 |     font-size: var(--small-font-size);
1048 |   }
1049 |   .home__social-follow::after{
1050 |     width: 1.5rem;
1051 |     right: -60%;
1052 |   }
1053 |   .home__social-link{
1054 |     font-size: 1.15rem;
1055 |   }
1056 | 
1057 |   .about__container{
1058 |     column-gap: 7rem;
1059 |   }
1060 | 
1061 |   .scrollup{
1062 |     right: 3rem;
1063 |   }
1064 | }


--------------------------------------------------------------------------------
/assets/img/about.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-plants-website/d92ba83cdab5966072371999729d68f5c44f8cf8/assets/img/about.png


--------------------------------------------------------------------------------
/assets/img/card1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-plants-website/d92ba83cdab5966072371999729d68f5c44f8cf8/assets/img/card1.png


--------------------------------------------------------------------------------
/assets/img/card2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-plants-website/d92ba83cdab5966072371999729d68f5c44f8cf8/assets/img/card2.png


--------------------------------------------------------------------------------
/assets/img/card3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-plants-website/d92ba83cdab5966072371999729d68f5c44f8cf8/assets/img/card3.png


--------------------------------------------------------------------------------
/assets/img/card4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-plants-website/d92ba83cdab5966072371999729d68f5c44f8cf8/assets/img/card4.png


--------------------------------------------------------------------------------
/assets/img/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-plants-website/d92ba83cdab5966072371999729d68f5c44f8cf8/assets/img/favicon.png


--------------------------------------------------------------------------------
/assets/img/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-plants-website/d92ba83cdab5966072371999729d68f5c44f8cf8/assets/img/home.png


--------------------------------------------------------------------------------
/assets/img/product1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-plants-website/d92ba83cdab5966072371999729d68f5c44f8cf8/assets/img/product1.png


--------------------------------------------------------------------------------
/assets/img/product2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-plants-website/d92ba83cdab5966072371999729d68f5c44f8cf8/assets/img/product2.png


--------------------------------------------------------------------------------
/assets/img/product3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-plants-website/d92ba83cdab5966072371999729d68f5c44f8cf8/assets/img/product3.png


--------------------------------------------------------------------------------
/assets/img/product4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-plants-website/d92ba83cdab5966072371999729d68f5c44f8cf8/assets/img/product4.png


--------------------------------------------------------------------------------
/assets/img/product5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-plants-website/d92ba83cdab5966072371999729d68f5c44f8cf8/assets/img/product5.png


--------------------------------------------------------------------------------
/assets/img/product6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-plants-website/d92ba83cdab5966072371999729d68f5c44f8cf8/assets/img/product6.png


--------------------------------------------------------------------------------
/assets/js/main.js:
--------------------------------------------------------------------------------
  1 | /*=============== SHOW MENU ===============*/
  2 | const navMenu = document.getElementById('nav-menu'),
  3 |       navToggle = document.getElementById('nav-toggle'),
  4 |       navClose = document.getElementById('nav-close')
  5 | 
  6 | /*===== MENU SHOW =====*/
  7 | /* Validate if constant exists */
  8 | if(navToggle){
  9 |     navToggle.addEventListener('click', () =>{
 10 |         navMenu.classList.add('show-menu')
 11 |     })
 12 | }
 13 | 
 14 | /*===== MENU HIDDEN =====*/
 15 | /* Validate if constant exists */
 16 | if(navClose){
 17 |     navClose.addEventListener('click', () =>{
 18 |         navMenu.classList.remove('show-menu')
 19 |     })
 20 | }
 21 | 
 22 | /*=============== REMOVE MENU MOBILE ===============*/
 23 | const navLink = document.querySelectorAll('.nav__link')
 24 | 
 25 | function linkAction(){
 26 |     const navMenu = document.getElementById('nav-menu')
 27 |     // When we click on each nav__link, we remove the show-menu class
 28 |     navMenu.classList.remove('show-menu')
 29 | }
 30 | navLink.forEach(n => n.addEventListener('click', linkAction))
 31 | 
 32 | /*=============== CHANGE BACKGROUND HEADER ===============*/
 33 | function scrollHeader(){
 34 |     const header = document.getElementById('header')
 35 |     // When the scroll is greater than 80 viewport height, add the scroll-header class to the header tag
 36 |     if(this.scrollY >= 80) header.classList.add('scroll-header'); else header.classList.remove('scroll-header')
 37 | }
 38 | window.addEventListener('scroll', scrollHeader)
 39 | 
 40 | /*=============== QUESTIONS ACCORDION ===============*/
 41 | const accordionItems = document.querySelectorAll('.questions__item')
 42 | 
 43 | accordionItems.forEach((item) =>{
 44 |     const accordionHeader = item.querySelector('.questions__header')
 45 | 
 46 |     accordionHeader.addEventListener('click', () =>{
 47 |         const openItem = document.querySelector('.accordion-open')
 48 | 
 49 |         toggleItem(item)
 50 | 
 51 |         if(openItem && openItem!== item){
 52 |             toggleItem(openItem)
 53 |         }
 54 |     })
 55 | })
 56 | 
 57 | const toggleItem = (item) =>{
 58 |     const accordionContent = item.querySelector('.questions__content')
 59 | 
 60 |     if(item.classList.contains('accordion-open')){
 61 |         accordionContent.removeAttribute('style')
 62 |         item.classList.remove('accordion-open')
 63 |     }else{
 64 |         accordionContent.style.height = accordionContent.scrollHeight + 'px'
 65 |         item.classList.add('accordion-open')
 66 |     }
 67 | 
 68 | }
 69 | 
 70 | /*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
 71 | const sections = document.querySelectorAll('section[id]')
 72 | 
 73 | function scrollActive(){
 74 |     const scrollY = window.pageYOffset
 75 | 
 76 |     sections.forEach(current =>{
 77 |         const sectionHeight = current.offsetHeight,
 78 |               sectionTop = current.offsetTop - 58,
 79 |               sectionId = current.getAttribute('id')
 80 | 
 81 |         if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
 82 |             document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link')
 83 |         }else{
 84 |             document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link')
 85 |         }
 86 |     })
 87 | }
 88 | window.addEventListener('scroll', scrollActive)
 89 | 
 90 | /*=============== SHOW SCROLL UP ===============*/ 
 91 | function scrollUp(){
 92 |     const scrollUp = document.getElementById('scroll-up');
 93 |     // When the scroll is higher than 400 viewport height, add the show-scroll class to the a tag with the scroll-top class
 94 |     if(this.scrollY >= 400) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll')
 95 | }
 96 | window.addEventListener('scroll', scrollUp)
 97 | 
 98 | /*=============== DARK LIGHT THEME ===============*/ 
 99 | const themeButton = document.getElementById('theme-button')
100 | const darkTheme = 'dark-theme'
101 | const iconTheme = 'ri-sun-line'
102 | 
103 | // Previously selected topic (if user selected)
104 | const selectedTheme = localStorage.getItem('selected-theme')
105 | const selectedIcon = localStorage.getItem('selected-icon')
106 | 
107 | // We obtain the current theme that the interface has by validating the dark-theme class
108 | const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
109 | const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'ri-moon-line' : 'ri-sun-line'
110 | 
111 | // We validate if the user previously chose a topic
112 | if (selectedTheme) {
113 |   // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark
114 |   document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
115 |   themeButton.classList[selectedIcon === 'ri-moon-line' ? 'add' : 'remove'](iconTheme)
116 | }
117 | 
118 | // Activate / deactivate the theme manually with the button
119 | themeButton.addEventListener('click', () => {
120 |     // Add or remove the dark / icon theme
121 |     document.body.classList.toggle(darkTheme)
122 |     themeButton.classList.toggle(iconTheme)
123 |     // We save the theme and the current icon that the user chose
124 |     localStorage.setItem('selected-theme', getCurrentTheme())
125 |     localStorage.setItem('selected-icon', getCurrentIcon())
126 | })
127 | 
128 | /*=============== SCROLL REVEAL ANIMATION ===============*/
129 | const sr = ScrollReveal({
130 |     origin: 'top',
131 |     distance: '60px',
132 |     duration: 2500,
133 |     delay: 400,
134 |     // reset: true
135 | })
136 | 
137 | sr.reveal(`.home__data`)
138 | sr.reveal(`.home__img`, {delay: 500})
139 | sr.reveal(`.home__social`, {delay: 600})
140 | sr.reveal(`.about__img, .contact__box`,{origin: 'left'})
141 | sr.reveal(`.about__data, .contact__form`,{origin: 'right'})
142 | sr.reveal(`.steps__card, .product__card, .questions__group, .footer`,{interval: 100})


--------------------------------------------------------------------------------
/assets/js/scrollreveal.min.js:
--------------------------------------------------------------------------------
 1 | /*! @license ScrollReveal v4.0.9
 2 | 
 3 | 	Copyright 2021 Fisssion LLC.
 4 | 
 5 | 	Licensed under the GNU General Public License 3.0 for
 6 | 	compatible open source projects and non-commercial use.
 7 | 
 8 | 	For commercial sites, themes, projects, and applications,
 9 | 	keep your source code private/proprietary by purchasing
10 | 	a commercial license from https://scrollrevealjs.org/
11 | */
12 | var ScrollReveal=function(){"use strict";var r={delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:!1,container:document.documentElement,desktop:!0,mobile:!0,reset:!1,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:function(){},afterReveal:function(){},beforeReset:function(){},beforeReveal:function(){}};var n={success:function(){document.documentElement.classList.add("sr"),document.body?document.body.style.height="100%":document.addEventListener("DOMContentLoaded",function(){document.body.style.height="100%"})},failure:function(){return document.documentElement.classList.remove("sr"),{clean:function(){},destroy:function(){},reveal:function(){},sync:function(){},get noop(){return!0}}}};function o(e){return"object"==typeof window.Node?e instanceof window.Node:null!==e&&"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName}function u(e,t){if(void 0===t&&(t=document),e instanceof Array)return e.filter(o);if(o(e))return[e];if(n=e,i=Object.prototype.toString.call(n),"object"==typeof window.NodeList?n instanceof window.NodeList:null!==n&&"object"==typeof n&&"number"==typeof n.length&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(i)&&(0===n.length||o(n[0])))return Array.prototype.slice.call(e);var n,i;if("string"==typeof e)try{var r=t.querySelectorAll(e);return Array.prototype.slice.call(r)}catch(e){return[]}return[]}function s(e){return null!==e&&e instanceof Object&&(e.constructor===Object||"[object Object]"===Object.prototype.toString.call(e))}function f(n,i){if(s(n))return Object.keys(n).forEach(function(e){return i(n[e],e,n)});if(n instanceof Array)return n.forEach(function(e,t){return i(e,t,n)});throw new TypeError("Expected either an array or object literal.")}function h(e){for(var t=[],n=arguments.length-1;0<n--;)t[n]=arguments[n+1];if(this.constructor.debug&&console){var i="%cScrollReveal: "+e;t.forEach(function(e){return i+="\n — "+e}),console.log(i,"color: #ea654b;")}}function t(){var n=this,i={active:[],stale:[]},t={active:[],stale:[]},r={active:[],stale:[]};try{f(u("[data-sr-id]"),function(e){var t=parseInt(e.getAttribute("data-sr-id"));i.active.push(t)})}catch(e){throw e}f(this.store.elements,function(e){-1===i.active.indexOf(e.id)&&i.stale.push(e.id)}),f(i.stale,function(e){return delete n.store.elements[e]}),f(this.store.elements,function(e){-1===r.active.indexOf(e.containerId)&&r.active.push(e.containerId),e.hasOwnProperty("sequence")&&-1===t.active.indexOf(e.sequence.id)&&t.active.push(e.sequence.id)}),f(this.store.containers,function(e){-1===r.active.indexOf(e.id)&&r.stale.push(e.id)}),f(r.stale,function(e){var t=n.store.containers[e].node;t.removeEventListener("scroll",n.delegate),t.removeEventListener("resize",n.delegate),delete n.store.containers[e]}),f(this.store.sequences,function(e){-1===t.active.indexOf(e.id)&&t.stale.push(e.id)}),f(t.stale,function(e){return delete n.store.sequences[e]})}function N(e){if(e.constructor!==Array)throw new TypeError("Expected array.");if(16===e.length)return e;if(6!==e.length)throw new RangeError("Expected array with either 6 or 16 values.");var t=z();return t[0]=e[0],t[1]=e[1],t[4]=e[2],t[5]=e[3],t[12]=e[4],t[13]=e[5],t}function z(){for(var e=[],t=0;t<16;t++)t%5==0?e.push(1):e.push(0);return e}function F(e,t){for(var n=N(e),i=N(t),r=[],o=0;o<4;o++)for(var s=[n[o],n[o+4],n[o+8],n[o+12]],a=0;a<4;a++){var c=4*a,l=[i[c],i[c+1],i[c+2],i[c+3]],d=s[0]*l[0]+s[1]*l[1]+s[2]*l[2]+s[3]*l[3];r[o+c]=d}return r}function D(e,t){var n=z();return n[0]=e,n[5]="number"==typeof t?t:e,n}var S=function(){var n={},i=document.documentElement.style;function e(e,t){if(void 0===t&&(t=i),e&&"string"==typeof e){if(n[e])return n[e];if("string"==typeof t[e])return n[e]=e;if("string"==typeof t["-webkit-"+e])return n[e]="-webkit-"+e;throw new RangeError('Unable to find "'+e+'" style property.')}throw new TypeError("Expected a string.")}return e.clearCache=function(){return n={}},e}();function p(e){var t=window.getComputedStyle(e.node),n=t.position,i=e.config,r={},o=(e.node.getAttribute("style")||"").match(/[\w-]+\s*:\s*[^;]+\s*/gi)||[];r.computed=o?o.map(function(e){return e.trim()}).join("; ")+";":"",r.generated=o.some(function(e){return e.match(/visibility\s?:\s?visible/i)})?r.computed:o.concat(["visibility: visible"]).map(function(e){return e.trim()}).join("; ")+";";var s,a,c,l,d,u,f,h,p,m,y,v,g,b=parseFloat(t.opacity),w=isNaN(parseFloat(i.opacity))?parseFloat(t.opacity):parseFloat(i.opacity),E={computed:b!==w?"opacity: "+b+";":"",generated:b!==w?"opacity: "+w+";":""},j=[];if(parseFloat(i.distance)){var T="top"===i.origin||"bottom"===i.origin?"Y":"X",k=i.distance;"top"!==i.origin&&"left"!==i.origin||(k=/^-/.test(k)?k.substr(1):"-"+k);var O=k.match(/(^-?\d+\.?\d?)|(em$|px$|%$)/g),x=O[0];switch(O[1]){case"em":k=parseInt(t.fontSize)*x;break;case"px":k=x;break;case"%":k="Y"===T?e.node.getBoundingClientRect().height*x/100:e.node.getBoundingClientRect().width*x/100;break;default:throw new RangeError("Unrecognized or missing distance unit.")}"Y"===T?j.push((c=k,(l=z())[13]=c,l)):j.push((s=k,(a=z())[12]=s,a))}i.rotate.x&&j.push((d=i.rotate.x,u=Math.PI/180*d,(f=z())[5]=f[10]=Math.cos(u),f[6]=f[9]=Math.sin(u),f[9]*=-1,f)),i.rotate.y&&j.push((h=i.rotate.y,p=Math.PI/180*h,(m=z())[0]=m[10]=Math.cos(p),m[2]=m[8]=Math.sin(p),m[2]*=-1,m)),i.rotate.z&&j.push((y=i.rotate.z,v=Math.PI/180*y,(g=z())[0]=g[5]=Math.cos(v),g[1]=g[4]=Math.sin(v),g[4]*=-1,g)),1!==i.scale&&(0===i.scale?j.push(D(2e-4)):j.push(D(i.scale)));var R={};if(j.length){R.property=S("transform"),R.computed={raw:t[R.property],matrix:function(e){if("string"==typeof e){var t=e.match(/matrix(3d)?\(([^)]+)\)/);if(t)return N(t[2].split(", ").map(parseFloat))}return z()}(t[R.property])},j.unshift(R.computed.matrix);var q=j.reduce(F);R.generated={initial:R.property+": matrix3d("+q.join(", ")+");",final:R.property+": matrix3d("+R.computed.matrix.join(", ")+");"}}else R.generated={initial:"",final:""};var A={};if(E.generated||R.generated.initial){A.property=S("transition"),A.computed=t[A.property],A.fragments=[];var P=i.delay,L=i.duration,M=i.easing;E.generated&&A.fragments.push({delayed:"opacity "+L/1e3+"s "+M+" "+P/1e3+"s",instant:"opacity "+L/1e3+"s "+M+" 0s"}),R.generated.initial&&A.fragments.push({delayed:R.property+" "+L/1e3+"s "+M+" "+P/1e3+"s",instant:R.property+" "+L/1e3+"s "+M+" 0s"}),A.computed&&!A.computed.match(/all 0s|none 0s/)&&A.fragments.unshift({delayed:A.computed,instant:A.computed});var I=A.fragments.reduce(function(e,t,n){return e.delayed+=0===n?t.delayed:", "+t.delayed,e.instant+=0===n?t.instant:", "+t.instant,e},{delayed:"",instant:""});A.generated={delayed:A.property+": "+I.delayed+";",instant:A.property+": "+I.instant+";"}}else A.generated={delayed:"",instant:""};return{inline:r,opacity:E,position:n,transform:R,transition:A}}function m(r,e){e.split(";").forEach(function(e){var t=e.split(":"),n=t[0],i=t.slice(1);n&&i&&(r.style[n.trim()]=i.join(":"))})}function y(e){var i,r=this;try{f(u(e),function(e){var t=e.getAttribute("data-sr-id");if(null!==t){i=!0;var n=r.store.elements[t];n.callbackTimer&&window.clearTimeout(n.callbackTimer.clock),m(n.node,n.styles.inline.generated),e.removeAttribute("data-sr-id"),delete r.store.elements[t]}})}catch(e){return h.call(this,"Clean failed.",e.message)}if(i)try{t.call(this)}catch(e){return h.call(this,"Clean failed.",e.message)}}function v(n){for(var e=[],t=arguments.length-1;0<t--;)e[t]=arguments[t+1];if(s(n))return f(e,function(e){f(e,function(e,t){s(e)?(n[t]&&s(n[t])||(n[t]={}),v(n[t],e)):n[t]=e})}),n;throw new TypeError("Target must be an object literal.")}function g(e){return void 0===e&&(e=navigator.userAgent),/Android|iPhone|iPad|iPod/i.test(e)}var e,b=(e=0,function(){return e++});function w(){var n=this;t.call(this),f(this.store.elements,function(e){var t=[e.styles.inline.generated];e.visible?(t.push(e.styles.opacity.computed),t.push(e.styles.transform.generated.final),e.revealed=!0):(t.push(e.styles.opacity.generated),t.push(e.styles.transform.generated.initial),e.revealed=!1),m(e.node,t.filter(function(e){return""!==e}).join(" "))}),f(this.store.containers,function(e){var t=e.node===document.documentElement?window:e.node;t.addEventListener("scroll",n.delegate),t.addEventListener("resize",n.delegate)}),this.delegate(),this.initTimeout=null}function c(e,t){void 0===t&&(t={});var n=t.pristine||this.pristine,i="always"===e.config.useDelay||"onload"===e.config.useDelay&&n||"once"===e.config.useDelay&&!e.seen,r=e.visible&&!e.revealed,o=!e.visible&&e.revealed&&e.config.reset;return t.reveal||r?function(e,t){var n=[e.styles.inline.generated,e.styles.opacity.computed,e.styles.transform.generated.final];t?n.push(e.styles.transition.generated.delayed):n.push(e.styles.transition.generated.instant);e.revealed=e.seen=!0,m(e.node,n.filter(function(e){return""!==e}).join(" ")),a.call(this,e,t)}.call(this,e,i):t.reset||o?function(e){var t=[e.styles.inline.generated,e.styles.opacity.generated,e.styles.transform.generated.initial,e.styles.transition.generated.instant];e.revealed=!1,m(e.node,t.filter(function(e){return""!==e}).join(" ")),a.call(this,e)}.call(this,e):void 0}function a(e,t){var n=this,i=t?e.config.duration+e.config.delay:e.config.duration,r=e.revealed?e.config.beforeReveal:e.config.beforeReset,o=e.revealed?e.config.afterReveal:e.config.afterReset,s=0;e.callbackTimer&&(s=Date.now()-e.callbackTimer.start,window.clearTimeout(e.callbackTimer.clock)),r(e.node),e.callbackTimer={start:Date.now(),clock:window.setTimeout(function(){o(e.node),e.callbackTimer=null,e.revealed&&!e.config.reset&&e.config.cleanup&&y.call(n,e.node)},i-s)}}function l(e,t){if(void 0===t&&(t=this.pristine),!e.visible&&e.revealed&&e.config.reset)return c.call(this,e,{reset:!0});var n=this.store.sequences[e.sequence.id],i=e.sequence.index;if(n){var r=new d(n,"visible",this.store),o=new d(n,"revealed",this.store);if(n.models={visible:r,revealed:o},!o.body.length){var s=n.members[r.body[0]],a=this.store.elements[s];if(a)return j.call(this,n,r.body[0],-1,t),j.call(this,n,r.body[0],1,t),c.call(this,a,{reveal:!0,pristine:t})}if(!n.blocked.head&&i===[].concat(o.head).pop()&&i>=[].concat(r.body).shift())return j.call(this,n,i,-1,t),c.call(this,e,{reveal:!0,pristine:t});if(!n.blocked.foot&&i===[].concat(o.foot).shift()&&i<=[].concat(r.body).pop())return j.call(this,n,i,1,t),c.call(this,e,{reveal:!0,pristine:t})}}function E(e){var t=Math.abs(e);if(isNaN(t))throw new RangeError("Invalid sequence interval.");this.id=b(),this.interval=Math.max(t,16),this.members=[],this.models={},this.blocked={head:!1,foot:!1}}function d(e,i,r){var o=this;this.head=[],this.body=[],this.foot=[],f(e.members,function(e,t){var n=r.elements[e];n&&n[i]&&o.body.push(t)}),this.body.length&&f(e.members,function(e,t){var n=r.elements[e];n&&!n[i]&&(t<o.body[0]?o.head.push(t):o.foot.push(t))})}function j(e,t,n,i){var r=this,o=["head",null,"foot"][1+n],s=e.members[t+n],a=this.store.elements[s];e.blocked[o]=!0,setTimeout(function(){e.blocked[o]=!1,a&&l.call(r,a,i)},e.interval)}function i(e,a,t){var c=this;void 0===a&&(a={}),void 0===t&&(t=!1);var l,d=[],n=a.interval||r.interval;try{n&&(l=new E(n));var i=u(e);if(!i.length)throw new Error("Invalid reveal target.");f(i.reduce(function(e,t){var n={},i=t.getAttribute("data-sr-id");i?(v(n,c.store.elements[i]),m(n.node,n.styles.inline.computed)):(n.id=b(),n.node=t,n.seen=!1,n.revealed=!1,n.visible=!1);var r=v({},n.config||c.defaults,a);if(!r.mobile&&g()||!r.desktop&&!g())return i&&y.call(c,n),e;var o,s=u(r.container)[0];if(!s)throw new Error("Invalid container.");return s.contains(t)&&(null===(o=function(t){var e=[],n=arguments.length-1;for(;0<n--;)e[n]=arguments[n+1];var i=null;return f(e,function(e){f(e,function(e){null===i&&e.node===t&&(i=e.id)})}),i}(s,d,c.store.containers))&&(o=b(),d.push({id:o,node:s})),n.config=r,n.containerId=o,n.styles=p(n),l&&(n.sequence={id:l.id,index:l.members.length},l.members.push(n.id)),e.push(n)),e},[]),function(e){(c.store.elements[e.id]=e).node.setAttribute("data-sr-id",e.id)})}catch(e){return h.call(this,"Reveal failed.",e.message)}f(d,function(e){c.store.containers[e.id]={id:e.id,node:e.node}}),l&&(this.store.sequences[l.id]=l),!0!==t&&(this.store.history.push({target:e,options:a}),this.initTimeout&&window.clearTimeout(this.initTimeout),this.initTimeout=window.setTimeout(w.bind(this),0))}var T,k=Math.sign||function(e){return(0<e)-(e<0)||+e},O=(T=Date.now(),function(e){var t=Date.now();16<t-T?e(T=t):setTimeout(function(){return O(e)},0)}),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||O;function R(e,t){for(var n=t?e.node.clientHeight:e.node.offsetHeight,i=t?e.node.clientWidth:e.node.offsetWidth,r=0,o=0,s=e.node;isNaN(s.offsetTop)||(r+=s.offsetTop),isNaN(s.offsetLeft)||(o+=s.offsetLeft),s=s.offsetParent;);return{bounds:{top:r,right:o+i,bottom:r+n,left:o},height:n,width:i}}function q(e,t){var i=this;void 0===e&&(e={type:"init"}),void 0===t&&(t=this.store.elements),x(function(){var n="init"===e.type||"resize"===e.type;f(i.store.containers,function(e){n&&(e.geometry=R.call(i,e,!0));var t=function(e){var t,n;return n=e.node===document.documentElement?(t=window.pageYOffset,window.pageXOffset):(t=e.node.scrollTop,e.node.scrollLeft),{top:t,left:n}}.call(i,e);e.scroll&&(e.direction={x:k(t.left-e.scroll.left),y:k(t.top-e.scroll.top)}),e.scroll=t}),f(t,function(e){(n||void 0===e.geometry)&&(e.geometry=R.call(i,e)),e.visible=function(e){void 0===e&&(e={});var t=this.store.containers[e.containerId];if(t){var n=Math.max(0,Math.min(1,e.config.viewFactor)),i=e.config.viewOffset,r=e.geometry.bounds.top+e.geometry.height*n,o=e.geometry.bounds.right-e.geometry.width*n,s=e.geometry.bounds.bottom-e.geometry.height*n,a=e.geometry.bounds.left+e.geometry.width*n,c=t.geometry.bounds.top+t.scroll.top+i.top,l=t.geometry.bounds.right+t.scroll.left-i.right,d=t.geometry.bounds.bottom+t.scroll.top-i.bottom,u=t.geometry.bounds.left+t.scroll.left+i.left;return r<d&&u<o&&c<s&&a<l||"fixed"===e.styles.position}}.call(i,e)}),f(t,function(e){e.sequence?l.call(i,e):c.call(i,e)}),i.pristine=!1})}var A,P,L,M,I,C,W,Y,$="4.0.9";function H(e){var t;if(void 0===e&&(e={}),void 0===this||Object.getPrototypeOf(this)!==H.prototype)return new H(e);if(!H.isSupported())return h.call(this,"Instantiation failed.","This browser is not supported."),n.failure();try{t=v({},C||r,e)}catch(e){return h.call(this,"Invalid configuration.",e.message),n.failure()}try{if(!u(t.container)[0])throw new Error("Invalid container.")}catch(e){return h.call(this,e.message),n.failure()}return!(C=t).mobile&&g()||!C.desktop&&!g()?(h.call(this,"This device is disabled.","desktop: "+C.desktop,"mobile: "+C.mobile),n.failure()):(n.success(),this.store={containers:{},elements:{},history:[],sequences:{}},this.pristine=!0,A=A||q.bind(this),P=P||function(){var n=this;f(this.store.elements,function(e){m(e.node,e.styles.inline.generated),e.node.removeAttribute("data-sr-id")}),f(this.store.containers,function(e){var t=e.node===document.documentElement?window:e.node;t.removeEventListener("scroll",n.delegate),t.removeEventListener("resize",n.delegate)}),this.store={containers:{},elements:{},history:[],sequences:{}}}.bind(this),L=L||i.bind(this),M=M||y.bind(this),I=I||function(){var t=this;f(this.store.history,function(e){i.call(t,e.target,e.options,!0)}),w.call(this)}.bind(this),Object.defineProperty(this,"delegate",{get:function(){return A}}),Object.defineProperty(this,"destroy",{get:function(){return P}}),Object.defineProperty(this,"reveal",{get:function(){return L}}),Object.defineProperty(this,"clean",{get:function(){return M}}),Object.defineProperty(this,"sync",{get:function(){return I}}),Object.defineProperty(this,"defaults",{get:function(){return C}}),Object.defineProperty(this,"version",{get:function(){return $}}),Object.defineProperty(this,"noop",{get:function(){return!1}}),Y||(Y=this))}return H.isSupported=function(){return("transform"in(t=document.documentElement.style)||"WebkitTransform"in t)&&("transition"in(e=document.documentElement.style)||"WebkitTransition"in e);var e,t},Object.defineProperty(H,"debug",{get:function(){return W||!1},set:function(e){return W="boolean"==typeof e?e:W}}),H(),H}();
13 | 


--------------------------------------------------------------------------------
/assets/scss/base/_base.scss:
--------------------------------------------------------------------------------
 1 | /*=============== BASE ===============*/
 2 | *{
 3 |     box-sizing: border-box;
 4 |     padding: 0;
 5 |     margin: 0;
 6 | }
 7 | 
 8 | html{
 9 |     scroll-behavior: smooth;
10 | }
11 | 
12 | body,
13 | button,
14 | input,
15 | textarea{
16 |     font-family: var(--body-font);
17 |     font-size: var(--normal-font-size);
18 | }
19 | 
20 | body{
21 |     margin: var(--header-height) 0 0 0;
22 |     background-color: var(--body-color);
23 |     color: var(--text-color);
24 |     transition: .4s; // For animation dark mode
25 | }
26 | 
27 | button{
28 |     cursor: pointer;
29 |     border: none;
30 |     outline: none;
31 | }
32 | 
33 | h1,h2,h3{
34 |     color: var(--title-color);
35 |     font-weight: var(--font-semi-bold);  
36 | }
37 | 
38 | ul{
39 |     list-style: none;
40 | }
41 | a{
42 |     text-decoration: none;
43 | }
44 | 
45 | img{
46 |     max-width: 100%;
47 |     height: auto;
48 | }


--------------------------------------------------------------------------------
/assets/scss/components/_about.scss:
--------------------------------------------------------------------------------
 1 | /*=============== ABOUT ===============*/
 2 | .about{
 3 |     &__container{
 4 |         row-gap: 2rem;
 5 |     }
 6 |     &__img{
 7 |         width: 280px;
 8 |         justify-self: center;
 9 |     }
10 |     &__title{
11 |         margin-bottom: var(--mb-1);
12 |     }
13 |     &__description{
14 |         margin-bottom: var(--mb-2);
15 |     }
16 |     &__details{
17 |         display: grid;
18 |         row-gap: 1rem;
19 |         margin-bottom: var(--mb-2-5);
20 | 
21 |         &-description{
22 |             display: inline-flex;
23 |             column-gap: .5rem;
24 |             font-size: var(--small-font-size);
25 |         }
26 |         &-icon{
27 |             font-size: 1rem;
28 |             color: var(--first-color);
29 |             margin-top: .15rem;
30 |         }
31 |     }
32 | }


--------------------------------------------------------------------------------
/assets/scss/components/_breakpoints.scss:
--------------------------------------------------------------------------------
  1 | /*=============== BREAKPOINTS ===============*/
  2 | /* For small devices */
  3 | @media screen and (max-width: 320px){
  4 |     .container{
  5 |         margin-left: var(--mb-1);
  6 |         margin-right: var(--mb-1);
  7 |     }
  8 | 
  9 |     .home{
 10 |         &__img{
 11 |             width: 180px;
 12 |         }
 13 |         &__title{
 14 |             font-size: var(--h1-font-size);
 15 |         }
 16 |     }
 17 | 
 18 |     .steps{
 19 |         &__bg{
 20 |             padding: 2rem 1rem;
 21 |         }
 22 |         &__card{
 23 |             padding: 1.5rem;
 24 |         }
 25 |     }
 26 | 
 27 |     .product__container{
 28 |         grid-template-columns: .6fr;
 29 |         justify-content: center;
 30 |     }
 31 | }
 32 | 
 33 | /* For medium devices */
 34 | @media screen and (min-width: 576px){
 35 |     .steps{
 36 |         &__container{
 37 |             grid-template-columns: repeat(2, 1fr);
 38 |         }
 39 |     }
 40 |     .product{
 41 |         &__description{
 42 |             padding: 0 4rem;
 43 |         }
 44 |         &__container{
 45 |             grid-template-columns: repeat(2, 170px);
 46 |             justify-content: center;
 47 |             column-gap: 5rem;
 48 |         }
 49 |     }
 50 | 
 51 |     .footer__subscribe{
 52 |         width: 400px;
 53 |     }
 54 | }
 55 | 
 56 | @media screen and (min-width: 767px){
 57 |     body{
 58 |         margin: 0;
 59 |     }
 60 | 
 61 |     .nav{
 62 |         height: calc(var(--header-height) + 1.5rem);
 63 |         column-gap: 3rem;
 64 | 
 65 |         &__toggle,
 66 |         &__close{
 67 |             display: none;
 68 |         }
 69 |         &__menu{
 70 |             margin-left: auto;
 71 |         }
 72 |         &__list{
 73 |             flex-direction: row;
 74 |             column-gap: 3rem;
 75 |         }
 76 |     }
 77 |     
 78 |     .home__container,
 79 |     .about__container,
 80 |     .questions__container,
 81 |     .contact__container,
 82 |     .footer__container{
 83 |         grid-template-columns: repeat(2, 1fr);
 84 |     }
 85 | 
 86 |     .home{
 87 |         padding: 10rem 0 5rem;
 88 |         
 89 |         &__container{
 90 |             align-items: center;
 91 |         }
 92 |         &__img{
 93 |             width: 280px;
 94 |             order: 1;
 95 |         }
 96 |         &__social{
 97 |             top: 30%;
 98 |         }
 99 |     }
100 | 
101 |     .questions__container{
102 |         align-items: flex-start;
103 |     }
104 | 
105 |     .footer{
106 |         &__container{
107 |             column-gap: 3rem;
108 |         }
109 |         &__subscribe{
110 |             width: initial;
111 |         }
112 |     }
113 | }
114 | 
115 | /* For large devices */
116 | @media screen and (min-width: 992px){
117 |     .container{
118 |         margin-left: auto;
119 |         margin-right: auto;
120 |     }
121 | 
122 |     .section{
123 |         padding: 8rem 0 1rem;
124 | 
125 |         &__title, 
126 |         &__title-center{
127 |             font-size: var(--h1-font-size);
128 |         }
129 |     }
130 | 
131 |     .home{
132 |         padding: 13rem 0 5rem;
133 | 
134 |         &__img{
135 |             width: 350px;
136 |         }
137 |         &__description{
138 |             padding-right: 7rem;
139 |         }
140 |     }
141 | 
142 |     .about__img{
143 |         width: 380px;
144 |     }
145 | 
146 |     .steps{
147 |         &__container{
148 |             grid-template-columns: repeat(3, 1fr);
149 |         }
150 |         &__bg{
151 |             padding: 3.5rem 2.5rem;
152 |         }
153 |         &__card-title{
154 |             font-size: var(--normal-font-size);
155 |         }
156 |     }
157 | 
158 |     .product{
159 |         &__description{
160 |             padding: 0 16rem;
161 |         }
162 |         &__container{
163 |             padding: 4rem 0;
164 |             grid-template-columns: repeat(3, 185px);
165 |             gap: 4rem 6rem;
166 |         }
167 |         &__img{
168 |             width: 160px;
169 |         }
170 |         &__circle{
171 |             width: 110px;
172 |             height: 110px;
173 |         }
174 |         &__title,
175 |         &__price{
176 |             font-size: var(--normal-font-size);
177 |         }
178 |     }
179 | 
180 |     .questions{
181 |         &__container{
182 |             padding: 1rem 0 4rem;
183 |         }
184 |         &__title{
185 |             text-align: initial;
186 |         }
187 |         &__group{
188 |             row-gap: 2rem;
189 |         }
190 |         &__header{
191 |             padding: 1rem;
192 |         }
193 |         &__description{
194 |             padding: 0 3.5rem 2.25rem 2.75rem;
195 |         }
196 |     }
197 | 
198 |     .footer{
199 |         &__logo{
200 |             font-size: var(--h3-font-size);
201 |         }
202 |         &__container{
203 |             grid-template-columns: 1fr .5fr .5fr .5fr;
204 |         }
205 |         &__copy{
206 |             margin: 7rem 0 2rem;
207 |         }
208 |     }
209 | }
210 | 
211 | @media screen and (min-width: 1200px){
212 |     .home{
213 |         &__social{
214 |             right: -3rem;
215 |             row-gap: 4.5rem;
216 | 
217 |             &-follow{
218 |                 font-size: var(--small-font-size);
219 | 
220 |                 &::after{
221 |                     width: 1.5rem;
222 |                     right: -60%;
223 |                 }
224 |             }
225 |             &-link{
226 |                 font-size: 1.15rem;
227 |             }
228 |         }
229 |     }
230 | 
231 |     .about__container{
232 |         column-gap: 7rem;
233 |     }
234 | 
235 |     .scrollup{
236 |         right: 3rem;
237 |     }
238 | }


--------------------------------------------------------------------------------
/assets/scss/components/_buttons.scss:
--------------------------------------------------------------------------------
 1 | /*=============== BUTTONS ===============*/
 2 | .button{
 3 |     display: inline-block;
 4 |     background-color: var(--first-color);
 5 |     color: #FFF;
 6 |     padding: 1rem 1.75rem;
 7 |     border-radius: .5rem;
 8 |     font-weight: var(--font-medium);
 9 |     transition: .3s;
10 | 
11 |     &:hover .button__icon{
12 |         transform: translateX(.25rem);
13 |     }
14 | 
15 |     &:hover{
16 |         background-color: var(--first-color-alt);
17 |     }
18 | 
19 |     &__icon{
20 |         transition: .3s;
21 |     }
22 | 
23 |     &--flex{
24 |         display: inline-flex;
25 |         align-items: center;
26 |         column-gap: .5rem;
27 |     }
28 | 
29 |     &--link{
30 |         color: var(--first-color);
31 |         font-weight: var(--font-medium);
32 | 
33 |         &:hover .button__icon{
34 |             transform: translateX(.25rem);
35 |         }
36 |     }
37 | }


--------------------------------------------------------------------------------
/assets/scss/components/_contact.scss:
--------------------------------------------------------------------------------
 1 | /*=============== CONTACT ===============*/
 2 | .contact{
 3 |     &__container{
 4 |         row-gap: 3.5rem;
 5 |     }
 6 |     &__data{
 7 |         display: grid;
 8 |         row-gap: 2rem;
 9 |     }
10 |     &__subtitle{
11 |         font-size: var(--normal-font-size);
12 |         font-weight: var(--font-medium);
13 |         color: var(--text-color);
14 |         margin-bottom: var(--mb-0-5);
15 |     }
16 |     &__description{
17 |         display: inline-flex;
18 |         align-items: center;
19 |         column-gap: .5rem;
20 |         color: var(--title-color);
21 |         font-weight: var(--font-medium);
22 |     }
23 |     &__icon{
24 |         font-size: 1.25rem;
25 |     }
26 |     &__inputs{
27 |         display: grid;
28 |         row-gap: 2rem;
29 |         margin-bottom: var(--mb-2-5);
30 |     }
31 |     &__content{
32 |         position: relative;
33 |         height: 3rem;
34 |         border-bottom: 1px solid var(--text-color-light);
35 |     }
36 |     &__input{
37 |         position: absolute;
38 |         top: 0;
39 |         left: 0;
40 |         width: 100%;
41 |         height: 100%;
42 |         padding: 1rem 1rem 1rem 0;
43 |         background: none;
44 |         color: var(--text-color);
45 |         border: none;
46 |         outline: none;
47 |         z-index: 1;
48 | 
49 |         &:focus + .contact__label{
50 |             top: -.75rem;
51 |             left: 0;
52 |             font-size: var(--smaller-font-size);
53 |             z-index: 10;
54 |         }
55 |         &:not(:placeholder-shown).contact__input:not(:focus) + .contact__label{
56 |             top: -.75rem;
57 |             font-size: var(--smaller-font-size);
58 |             z-index: 10;
59 |         }
60 |     }
61 |     &__label{
62 |         position: absolute;
63 |         top: .75rem;
64 |         width: 100%;
65 |         font-size: var(--small-font-size);
66 |         color: var(--text-color-light);
67 |         transition: .3s;
68 |     }
69 |     &__area{
70 |         height: 7rem;
71 | 
72 |         & textarea{
73 |             resize: none;
74 |         }
75 |     }
76 | }


--------------------------------------------------------------------------------
/assets/scss/components/_footer.scss:
--------------------------------------------------------------------------------
 1 | /*=============== FOOTER ===============*/
 2 | .footer{
 3 |     &__container{
 4 |         row-gap: 3rem;
 5 |     }
 6 |     &__logo{
 7 |         display: inline-flex;
 8 |         align-items: center;
 9 |         column-gap: .5rem;
10 |         color: var(--title-color);
11 |         text-transform: uppercase;
12 |         font-weight: 700;
13 |         letter-spacing: -1px;
14 |         margin-bottom: var(--mb-2-5);
15 |         transition: .3s;
16 | 
17 |         &:hover{
18 |             color: var(--first-color);
19 |         }
20 | 
21 |         &-icon{
22 |             font-size: 1.15rem;
23 |             color: var(--first-color);
24 |         }
25 |     }
26 |     &__title{
27 |         font-size: var(--h3-font-size);
28 |         margin-bottom: var(--mb-1-5);
29 |     }
30 |     &__subscribe{
31 |         background-color: var(--first-color-lighten);
32 |         padding: .75rem;
33 |         display: flex;
34 |         justify-content: space-between;
35 |         border-radius: .5rem;
36 |     }
37 |     &__input{
38 |         width: 70%;
39 |         padding: 0 .5rem;
40 |         background: none;
41 |         color: var(--text-color);
42 |         border: none;
43 |         outline: none;
44 |     }
45 |     &__button{
46 |         padding: 1rem;
47 |     }
48 |     &__data{
49 |         display: grid;
50 |         row-gap: .75rem;
51 |     }
52 |     &__information{
53 |         font-size: var(--small-font-size);
54 |     }
55 |     &__social{
56 |         display: inline-flex;
57 |         column-gap: .75rem;
58 | 
59 |         &-link{
60 |             font-size: 1rem;
61 |             color: var(--text-color);
62 |             transition: .3s;
63 | 
64 |             &:hover {
65 |                 transform: translateY(-.25rem);
66 |             }
67 |         }
68 |     }
69 |     &__cards{
70 |         display: inline-flex;
71 |         align-items: center;
72 |         column-gap: .5rem;
73 |     }
74 |     &__card{
75 |         width: 35px;
76 |     }
77 |     &__copy{
78 |         text-align: center;
79 |         font-size: var(--smaller-font-size);
80 |         color: var(--text-color-light);
81 |         margin: 5rem 0 1rem;
82 |     }
83 | }


--------------------------------------------------------------------------------
/assets/scss/components/_header.scss:
--------------------------------------------------------------------------------
  1 | /*=============== HEADER ===============*/
  2 | .header{
  3 |     width: 100%;
  4 |     background-color: var(--body-color);
  5 |     position: fixed;
  6 |     top: 0;
  7 |     left: 0;
  8 |     z-index: var(--z-fixed);
  9 |     transition: .4s; // For animation dark mode
 10 | }
 11 | 
 12 | /*=============== NAV ===============*/
 13 | .nav{
 14 |     height: var(--header-height);
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     align-items: center;
 18 | 
 19 |     &__logo,
 20 |     &__toggle,
 21 |     &__close{
 22 |         color: var(--title-color);
 23 |     }
 24 |     &__logo{
 25 |         text-transform: uppercase;
 26 |         font-weight: 700;
 27 |         letter-spacing: -1px;
 28 |         display: inline-flex;
 29 |         align-items: center;
 30 |         column-gap: .5rem;
 31 |         transition: .3s;
 32 | 
 33 |         &:hover{
 34 |             color: var(--first-color);
 35 |         }
 36 | 
 37 |         &-icon{
 38 |             font-size: 1.15rem;
 39 |             color: var(--first-color);
 40 |         }
 41 |     }
 42 |     &__toggle{
 43 |         display: inline-flex;
 44 |         font-size: 1.25rem;
 45 |         cursor: pointer;
 46 |     }
 47 | 
 48 |     &__menu{
 49 |         @media screen and (max-width: 767px){
 50 |             position: fixed;
 51 |             background-color: var(--container-color);
 52 |             width: 80%;
 53 |             height: 100%;
 54 |             top: 0;
 55 |             right: -100%;
 56 |             box-shadow: -2px 0 4px hsla(var(--hue), 24%, 15%, .1);
 57 |             padding: 4rem 0 0 3rem;
 58 |             border-radius: 1rem 0 0 1rem;
 59 |             transition: .3s;
 60 |             z-index: var(--z-fixed);
 61 |         }
 62 |     }
 63 |     &__close{
 64 |         font-size: 1.5rem;
 65 |         position: absolute;
 66 |         top: 1rem;
 67 |         right: 1.25rem;
 68 |         cursor: pointer;
 69 |     }
 70 |     &__list{
 71 |         display: flex;
 72 |         flex-direction: column;
 73 |         row-gap: 1.5rem;
 74 |     }
 75 |     &__link{
 76 |         color: var(--title-color);
 77 |         font-weight: var(--font-medium);
 78 | 
 79 |         &:hover{
 80 |             color: var(--first-color);
 81 |         }
 82 |     }
 83 | }
 84 | 
 85 | /* Show menu */
 86 | .show-menu{
 87 |     right: 0;
 88 | }
 89 | 
 90 | /* Change background header */
 91 | .scroll-header{
 92 |     box-shadow: 0 1px 4px hsla(var(--hue), 4%, 15%, .10);;
 93 | }
 94 | 
 95 | /* Active link */
 96 | .active-link{
 97 |     position: relative;
 98 |     color: var(--first-color);
 99 | 
100 |     &::after{
101 |         content: '';
102 |         position: absolute;
103 |         bottom: -.5rem;
104 |         left: 0;
105 |         width: 50%;
106 |         height: 2px;
107 |         background-color: var(--first-color);
108 |     }
109 | }


--------------------------------------------------------------------------------
/assets/scss/components/_home.scss:
--------------------------------------------------------------------------------
 1 | /*=============== HOME ===============*/
 2 | .home{
 3 |     padding: 3.5rem 0 2rem;
 4 | 
 5 |     &__container{
 6 |         position: relative;
 7 |         row-gap: 2rem;
 8 |     }
 9 |     &__img{
10 |         width: 200px;
11 |         justify-self: center;
12 |     }
13 |     &__title{
14 |         font-size: var(--big-font-size);
15 |         line-height: 140%;
16 |         margin-bottom: var(--mb-1);
17 |     }
18 |     &__description{
19 |         margin-bottom: var(--mb-2-5);
20 |     }
21 |     &__social{
22 |         position: absolute;
23 |         top: 2rem;
24 |         right: -1rem;
25 |         display: grid;
26 |         justify-items: center;
27 |         row-gap: 3.5rem;
28 | 
29 |         &-follow{
30 |             font-weight: var(--font-medium);
31 |             font-size: var(--smaller-font-size);
32 |             color: var(--first-color);
33 |             position: relative;
34 |             transform: rotate(90deg);
35 | 
36 |             &::after{
37 |                 content: '';
38 |                 position: absolute;
39 |                 width: 1rem;
40 |                 height: 2px;
41 |                 background-color: var(--first-color);
42 |                 right: -45%;
43 |                 top: 50%;
44 |             }
45 |         }
46 |         &-links{
47 |             display: inline-flex;
48 |             flex-direction: column;
49 |             row-gap: .25rem;
50 |         }
51 |         &-link{
52 |             font-size: 1rem;
53 |             color: var(--first-color);
54 |             transition: .3s;
55 | 
56 |             &:hover {
57 |                 transform: translateX(.25rem);
58 |             }
59 |         }
60 |     }
61 | }


--------------------------------------------------------------------------------
/assets/scss/components/_products.scss:
--------------------------------------------------------------------------------
 1 | /*=============== PRODUCTS ===============*/
 2 | .product{
 3 |     &__description{
 4 |         text-align: center;
 5 |     }
 6 |     &__container{
 7 |         padding: 3rem 0;
 8 |         grid-template-columns: repeat(2, 1fr);
 9 |         gap: 2.5rem 3rem;
10 |     }
11 |     &__card{
12 |         display: grid;
13 |         position: relative;
14 | 
15 |         &:hover .product__img{
16 |             transform: translateY(-.5rem);
17 |         }
18 |     }
19 |     &__img{
20 |         position: relative;
21 |         width: 120px;
22 |         justify-self: center;
23 |         margin-bottom: var(--mb-0-75);
24 |         transition: .3s;
25 |     }
26 |     &__title,
27 |     &__price{
28 |         font-size: var(--small-font-size);
29 |         font-weight: var(--font-semi-bold);
30 |         color: var(--title-color);
31 |     }
32 |     &__title{
33 |         margin-bottom: .25rem;
34 |     }
35 |     &__button{
36 |         position: absolute;
37 |         right: 0;
38 |         bottom: 0;
39 |         background-color: var(--first-color);
40 |         color: #FFF;
41 |         padding: .25rem;
42 |         border-radius: .35rem;
43 |         font-size: 1.15rem;
44 | 
45 |         &:hover{
46 |             background-color: var(--first-color-alt);
47 |         }
48 |     }
49 |     &__circle{
50 |         width: 90px;
51 |         height: 90px;
52 |         background-color: var(--first-color-lighten);
53 |         border-radius: 50%;
54 |         position: absolute;
55 |         top: 18%;
56 |         left: 5%;
57 |     }
58 | }


--------------------------------------------------------------------------------
/assets/scss/components/_questions.scss:
--------------------------------------------------------------------------------
 1 | /*=============== QUESTIONS ===============*/
 2 | .questions{
 3 |     background-color: var(--first-color-lighten);
 4 | 
 5 |     &__container{
 6 |         gap: 1.5rem;
 7 |         padding: 1.5rem 0;
 8 |     }
 9 |     &__group{
10 |         display: grid;
11 |         row-gap: 1.5rem;
12 |     }
13 |     &__item{
14 |         background-color: var(--container-color);
15 |         border-radius: .25rem;
16 | 
17 |         &:hover{
18 |             box-shadow: 0 2px 8px hsla(var(--hue), 4%, 15%, .15);
19 |         }
20 |     }
21 |     &__item-title{
22 |         font-size: var(--small-font-size);
23 |         font-weight: var(--font-medium);
24 |     }
25 |     &__icon{
26 |         font-size: 1.25rem;
27 |         color: var(--title-color);
28 |     }
29 |     &__description{
30 |         font-size: var(--smaller-font-size);
31 |         padding: 0 1.25rem 1.25rem 2.5rem;
32 |     }
33 |     &__header{
34 |         display: flex;
35 |         align-items: center;
36 |         column-gap: .5rem;
37 |         padding: .75rem .5rem;
38 |         cursor: pointer;
39 |     }
40 |     &__content{
41 |         overflow: hidden;
42 |         height: 0;
43 |     }
44 |     &__item,
45 |     &__header,
46 |     &__item-title,
47 |     &__icon,
48 |     &__description,
49 |     &__content{
50 |         transition: .3s;
51 |     }
52 | }
53 | 
54 | /*Rotate icon and add font weight to titles*/
55 | .accordion-open{
56 |     & .questions__header,
57 |     & .questions__content{
58 |         background-color: var(--first-color);
59 |     }
60 |     & .questions__item-title,
61 |     & .questions__description,
62 |     & .questions__icon{
63 |         color: #FFF;
64 |     }
65 |     & .questions__icon{
66 |         transform: rotate(45deg);
67 |     }
68 | }


--------------------------------------------------------------------------------
/assets/scss/components/_scroll.scss:
--------------------------------------------------------------------------------
 1 | /*=============== SCROLL UP ===============*/
 2 | .scrollup{
 3 |     position: fixed;
 4 |     background: var(--first-color);
 5 |     right: 1rem;
 6 |     bottom: -30%;
 7 |     display: inline-flex;
 8 |     padding: .5rem;
 9 |     border-radius: .25rem;
10 |     z-index: var(--z-tooltip);
11 |     opacity: .8;
12 |     transition: .4s;
13 | 
14 |     &:hover{
15 |         background-color: var(--first-color);
16 |         opacity: 1;
17 |     }
18 | 
19 |     &__icon{
20 |         font-size: 1rem;
21 |         color: #FFF;
22 |     }
23 | }
24 | 
25 | /* Show Scroll Up*/
26 | .show-scroll{
27 |     bottom: 3rem;
28 | }
29 | 
30 | /*=============== SCROLL BAR ===============*/
31 | ::-webkit-scrollbar{
32 |     width: .6rem;
33 |     background: hsl(var(--hue), 4%, 53%);
34 | 
35 |     &-thumb{
36 |         background: hsl(var(--hue), 4%, 29%);
37 |         border-radius: .5rem;
38 |     }
39 | }


--------------------------------------------------------------------------------
/assets/scss/components/_steps.scss:
--------------------------------------------------------------------------------
 1 | /*=============== STEPS ===============*/
 2 | .steps{
 3 |     &__bg{
 4 |         background-color: var(--first-color);
 5 |         padding: 3rem 2rem 2rem;
 6 |         border-radius: 1rem;
 7 |     }
 8 |     &__container{
 9 |         gap: 2rem;
10 |         padding-top: 1rem;
11 |     }
12 |     &__title{
13 |         color: #FFF;
14 |     }
15 |     &__card{
16 |         background-color: var(--container-color);
17 |         padding: 2.5rem 3rem 2rem 1.5rem;
18 |         border-radius: 1rem;
19 | 
20 |         &:hover .steps__card-number{
21 |             transform: translateY(-.25rem);
22 |         }
23 | 
24 |         &-number{
25 |             display: inline-block;
26 |             background-color: var(--first-color-alt);
27 |             color: #FFF;
28 |             padding: .5rem .75rem;
29 |             border-radius: .25rem;
30 |             font-size: var(--h2-font-size);
31 |             margin-bottom: var(--mb-1-5);
32 |             transition: .3s;
33 |         }
34 |         &-title{
35 |             font-size: var(--h3-font-size);
36 |             margin-bottom: var(--mb-0-5);
37 |         }
38 |         &-description{
39 |             font-size: var(--small-font-size);
40 |         }
41 |     }
42 | }


--------------------------------------------------------------------------------
/assets/scss/config/_variables.scss:
--------------------------------------------------------------------------------
 1 | /*=============== GOOGLE FONTS ===============*/
 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
 3 | 
 4 | /*=============== VARIABLES CSS ===============*/
 5 | :root{
 6 |     --header-height: 3.5rem; // 56px
 7 | 
 8 |     /*========== Colors ==========*/
 9 |     /*Color mode HSL(hue, saturation, lightness)*/
10 |     --hue: 152;
11 | 
12 |     --first-color: hsl(var(--hue), 24%, 32%);
13 |     --first-color-alt: hsl(var(--hue), 24%, 28%);
14 |     --first-color-light: hsl(var(--hue), 24%, 66%);
15 |     --first-color-lighten: hsl(var(--hue), 24%, 92%);
16 |     --title-color: hsl(var(--hue), 4%, 15%);
17 |     --text-color: hsl(var(--hue), 4%, 35%);
18 |     --text-color-light: hsl(var(--hue), 4%, 55%);
19 |     --body-color: hsl(var(--hue), 0%, 100%);
20 |     --container-color: #FFF;
21 | 
22 |     /*========== Font and typography ==========*/
23 |     /*.5rem = 8px | 1rem = 16px ...*/
24 |     --body-font: 'Poppins', sans-serif;
25 | 
26 |     --big-font-size: 2rem;
27 |     --h1-font-size: 1.5rem;
28 |     --h2-font-size: 1.25rem;
29 |     --h3-font-size: 1rem;
30 |     --normal-font-size: .938rem;
31 |     --small-font-size: .813rem;
32 |     --smaller-font-size: .75rem;
33 | 
34 |     // Responsive typography
35 |     @media screen and (min-width: 968px){
36 |         --big-font-size: 3.5rem;
37 |         --h1-font-size: 2.25rem;
38 |         --h2-font-size: 1.5rem;
39 |         --h3-font-size: 1.25rem;
40 |         --normal-font-size: 1rem;
41 |         --small-font-size: .875rem;
42 |         --smaller-font-size: .813rem;
43 |     }
44 | 
45 |     /*========== Font weight ==========*/
46 |     --font-medium: 500;
47 |     --font-semi-bold: 600;
48 | 
49 |     /*========== Margenes Bottom ==========*/
50 |     /*.5rem = 8px | 1rem = 16px ...*/
51 |     --mb-0-5: .5rem;
52 |     --mb-0-75: .75rem;
53 |     --mb-1: 1rem;
54 |     --mb-1-5: 1.5rem;
55 |     --mb-2: 2rem;
56 |     --mb-2-5: 2.5rem;
57 | 
58 |     /*========== z index ==========*/
59 |     --z-tooltip: 10;
60 |     --z-fixed: 100;
61 | }


--------------------------------------------------------------------------------
/assets/scss/layout/_layout.scss:
--------------------------------------------------------------------------------
 1 | /*=============== REUSABLE CSS CLASSES ===============*/
 2 | .section{
 3 |     padding: 5.5rem 0 1rem;
 4 | 
 5 |     &__title, &__title-center{
 6 |         font-size: var(--h2-font-size);
 7 |         margin-bottom: var(--mb-2);
 8 |         line-height: 140%;
 9 |         
10 |         &-center{
11 |             text-align: center;
12 |         }
13 |     }
14 | }
15 | 
16 | .container{
17 |     max-width: 968px;
18 |     margin-left: var(--mb-1-5);
19 |     margin-right: var(--mb-1-5);
20 | }
21 | 
22 | .grid{
23 |     display: grid;
24 | }
25 | 
26 | .main{
27 |     overflow: hidden; // For animation
28 | }


--------------------------------------------------------------------------------
/assets/scss/styles.scss:
--------------------------------------------------------------------------------
 1 | @import 'config/variables';
 2 | @import 'base/base';
 3 | @import 'theme/theme';
 4 | @import 'layout/layout';
 5 | @import 'components/header';
 6 | @import 'components/home';
 7 | @import 'components/buttons';
 8 | @import 'components/about';
 9 | @import 'components/steps';
10 | @import 'components/products';
11 | @import 'components/questions';
12 | @import 'components/contact';
13 | @import 'components/footer';
14 | @import 'components/scroll';
15 | @import 'components/breakpoints';


--------------------------------------------------------------------------------
/assets/scss/theme/_theme.scss:
--------------------------------------------------------------------------------
 1 | /*=============== THEME ===============*/
 2 | /*========== Variables Dark theme ==========*/
 3 | body.dark-theme{
 4 |     --first-color-dark: hsl(var(--hue), 8%, 20%);
 5 |     --title-color: hsl(var(--hue), 4%, 95%);
 6 |     --text-color: hsl(var(--hue), 4%, 75%);
 7 |     --body-color: hsl(var(--hue), 8%, 12%);
 8 |     --container-color: hsl(var(--hue), 8%, 16%);
 9 | }
10 | 
11 | /*========== Button Dark/Light ==========*/
12 | .change-theme {
13 |     color: var(--title-color);
14 |     font-size: 1.15rem;
15 |     cursor: pointer;
16 | }
17 | 
18 | .nav__btns{
19 |     display: inline-flex;
20 |     align-items: center;
21 |     column-gap: 1rem;
22 | }
23 | 
24 | /*========== 
25 | Color changes in some parts of 
26 | the website, in dark theme 
27 | ==========*/
28 | .dark-theme .steps__bg,
29 | .dark-theme .questions{
30 |     background-color: var(--first-color-dark);
31 | }
32 | 
33 | .dark-theme .product__circle,
34 | .dark-theme .footer__subscribe{
35 |     background-color: var(--container-color);
36 | }
37 | 
38 | .dark-theme .scroll-header{
39 |     box-shadow: 0 1px 4px hsla(var(--hue), 4%, 4%, .3);
40 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 |     <html lang="en">
  3 |     <head>
  4 |         <meta charset="UTF-8">
  5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 | 
  7 |         <!--=============== FAVICON ===============-->
  8 |         <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
  9 | 
 10 |         <!--=============== REMIX ICONS ===============-->
 11 |         <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
 12 | 
 13 |         <!--=============== CSS ===============-->
 14 |         <link rel="stylesheet" href="assets/css/styles.css">
 15 | 
 16 |         <title>Responsive plants website - Bedimcode</title>
 17 |     </head>
 18 |     <body>
 19 |         <!--==================== HEADER ====================-->
 20 |         <header class="header" id="header">
 21 |             <nav class="nav container">
 22 |                 <a href="#" class="nav__logo">
 23 |                     <i class="ri-leaf-line nav__logo-icon"></i> Plantex
 24 |                 </a>
 25 | 
 26 |                 <div class="nav__menu" id="nav-menu">
 27 |                     <ul class="nav__list">
 28 |                         <li class="nav__item">
 29 |                             <a href="#home" class="nav__link active-link">Home</a>
 30 |                         </li>
 31 |                         <li class="nav__item">
 32 |                             <a href="#about" class="nav__link">About</a>
 33 |                         </li>
 34 |                         <li class="nav__item">
 35 |                             <a href="#products" class="nav__link">Products</a>
 36 |                         </li>
 37 |                         <li class="nav__item">
 38 |                             <a href="#faqs" class="nav__link">FAQs</a>
 39 |                         </li>
 40 |                         <li class="nav__item">
 41 |                             <a href="#contact" class="nav__link">Contact Us</a>
 42 |                         </li>
 43 |                     </ul>
 44 | 
 45 |                     <div class="nav__close" id="nav-close">
 46 |                         <i class="ri-close-line"></i>
 47 |                     </div>
 48 |                 </div>
 49 | 
 50 |                 <div class="nav__btns">
 51 |                     <!-- Theme change button -->
 52 |                     <i class="ri-moon-line change-theme" id="theme-button"></i>
 53 | 
 54 |                     <div class="nav__toggle" id="nav-toggle">
 55 |                         <i class="ri-menu-line"></i>
 56 |                     </div>
 57 |                 </div>
 58 |             </nav>
 59 |         </header>
 60 | 
 61 |         <main class="main">
 62 |             <!--==================== HOME ====================-->
 63 |             <section class="home" id="home">
 64 |                 <div class="home__container container grid">
 65 |                     <img src="assets/img/home.png" alt="" class="home__img">
 66 | 
 67 |                     <div class="home__data">
 68 |                         <h1 class="home__title">
 69 |                             Plants will make <br> your life better
 70 |                         </h1>
 71 |                         <p class="home__description">
 72 |                             Create incredible plant design for your offices or apastaments. 
 73 |                             Add fresness to your new ideas.
 74 |                         </p>
 75 |                         <a href="#about" class="button button--flex">
 76 |                             Explore <i class="ri-arrow-right-down-line button__icon"></i>
 77 |                         </a>
 78 |                     </div>
 79 | 
 80 |                     <div class="home__social">
 81 |                         <span class="home__social-follow">Follow Us</span>
 82 | 
 83 |                         <div class="home__social-links">
 84 |                             <a href="https://www.facebook.com/" target="_blank" class="home__social-link">
 85 |                                 <i class="ri-facebook-fill"></i>
 86 |                             </a>
 87 |                             <a href="https://www.instagram.com/" target="_blank" class="home__social-link">
 88 |                                 <i class="ri-instagram-line"></i>
 89 |                             </a>
 90 |                             <a href="https://twitter.com/" target="_blank" class="home__social-link">
 91 |                                 <i class="ri-twitter-fill"></i>
 92 |                             </a>
 93 |                         </div>
 94 |                     </div>
 95 |                 </div>
 96 |             </section>
 97 | 
 98 |             <!--==================== ABOUT ====================-->
 99 |             <section class="about section container" id="about">
100 |                 <div class="about__container grid">
101 |                     <img src="assets/img/about.png" alt="" class="about__img">
102 | 
103 |                     <div class="about__data">
104 |                         <h2 class="section__title about__title">
105 |                             Who we really are & <br> why choose us
106 |                         </h2>
107 | 
108 |                         <p class="about__description">
109 |                             We have over 4000+ unbiased reviews and our customers 
110 |                             trust our plant process and delivery service every time
111 |                         </p>
112 | 
113 |                         <div class="about__details">
114 |                             <p class="about__details-description">
115 |                                 <i class="ri-checkbox-fill about__details-icon"></i>
116 |                                 We always deliver on time.
117 |                             </p>
118 |                             <p class="about__details-description">
119 |                                 <i class="ri-checkbox-fill about__details-icon"></i>
120 |                                 We give you guides to protect and care for your plants.
121 |                             </p>
122 |                             <p class="about__details-description">
123 |                                 <i class="ri-checkbox-fill about__details-icon"></i>
124 |                                 We always come over for a check-up after sale.
125 |                             </p>
126 |                             <p class="about__details-description">
127 |                                 <i class="ri-checkbox-fill about__details-icon"></i>
128 |                                 100% money back guaranteed.
129 |                             </p>
130 |                         </div>
131 | 
132 |                         <a href="#" class="button--link button--flex">
133 |                             Shop Now <i class="ri-arrow-right-down-line button__icon"></i>
134 |                         </a>
135 |                     </div>
136 |                 </div>
137 |             </section>
138 | 
139 |             <!--==================== STEPS ====================-->
140 |             <section class="steps section container">
141 |                 <div class="steps__bg">
142 |                     <h2 class="section__title-center steps__title">
143 |                         Steps to start your <br> plants off right
144 |                     </h2>
145 | 
146 |                     <div class="steps__container grid">
147 |                         <div class="steps__card">
148 |                             <div class="steps__card-number">01</div>
149 |                             <h3 class="steps__card-title">Choose Plant</h3>
150 |                             <p class="steps__card-description">
151 |                                 We have several varieties plants you can choose from.
152 |                             </p>
153 |                         </div>
154 | 
155 |                         <div class="steps__card">
156 |                             <div class="steps__card-number">02</div>
157 |                             <h3 class="steps__card-title">Place an order</h3>
158 |                             <p class="steps__card-description">
159 |                                 Once your order is set, we move to the next step which is the shipping.
160 |                             </p>
161 |                         </div>
162 | 
163 |                         <div class="steps__card">
164 |                             <div class="steps__card-number">03</div>
165 |                             <h3 class="steps__card-title">Get plants delivered</h3>
166 |                             <p class="steps__card-description">
167 |                                 Our delivery process is easy, you receive the plant direct to your door.
168 |                             </p>
169 |                         </div>
170 |                     </div>
171 |                 </div>
172 |             </section>
173 | 
174 |             <!--==================== PRODUCTS ====================-->
175 |             <section class="product section container" id="products">
176 |                 <h2 class="section__title-center">
177 |                     Check out our <br> products
178 |                 </h2>
179 | 
180 |                 <p class="product__description">
181 |                     Here are some selected plants from our showroom, all are in excellent 
182 |                     shape and has a long life span. Buy and enjoy best quality.
183 |                 </p>
184 | 
185 |                 <div class="product__container grid">
186 |                     <article class="product__card">
187 |                         <div class="product__circle"></div>
188 | 
189 |                         <img src="assets/img/product1.png" alt="" class="product__img">
190 | 
191 |                         <h3 class="product__title">Cacti Plant</h3>
192 |                         <span class="product__price">$19.99</span>
193 | 
194 |                         <button class="button--flex product__button">
195 |                             <i class="ri-shopping-bag-line"></i>
196 |                         </button>
197 |                     </article>
198 | 
199 |                     <article class="product__card">
200 |                         <div class="product__circle"></div>
201 | 
202 |                         <img src="assets/img/product2.png" alt="" class="product__img">
203 | 
204 |                         <h3 class="product__title">Cactus Plant</h3>
205 |                         <span class="product__price">$11.99</span>
206 | 
207 |                         <button class="button--flex product__button">
208 |                             <i class="ri-shopping-bag-line"></i>
209 |                         </button>
210 |                     </article>
211 | 
212 |                     <article class="product__card">
213 |                         <div class="product__circle"></div>
214 | 
215 |                         <img src="assets/img/product3.png" alt="" class="product__img">
216 | 
217 |                         <h3 class="product__title">Aloe Vera Plant</h3>
218 |                         <span class="product__price">$7.99</span>
219 | 
220 |                         <button class="button--flex product__button">
221 |                             <i class="ri-shopping-bag-line"></i>
222 |                         </button>
223 |                     </article>
224 | 
225 |                     <article class="product__card">
226 |                         <div class="product__circle"></div>
227 | 
228 |                         <img src="assets/img/product4.png" alt="" class="product__img">
229 | 
230 |                         <h3 class="product__title">Succulent Plant</h3>
231 |                         <span class="product__price">$5.99</span>
232 | 
233 |                         <button class="button--flex product__button">
234 |                             <i class="ri-shopping-bag-line"></i>
235 |                         </button>
236 |                     </article>
237 | 
238 |                     <article class="product__card">
239 |                         <div class="product__circle"></div>
240 | 
241 |                         <img src="assets/img/product5.png" alt="" class="product__img">
242 | 
243 |                         <h3 class="product__title">Succulent Plant</h3>
244 |                         <span class="product__price">$10.99</span>
245 | 
246 |                         <button class="button--flex product__button">
247 |                             <i class="ri-shopping-bag-line"></i>
248 |                         </button>
249 |                     </article>
250 | 
251 |                     <article class="product__card">
252 |                         <div class="product__circle"></div>
253 | 
254 |                         <img src="assets/img/product6.png" alt="" class="product__img">
255 | 
256 |                         <h3 class="product__title">Green Plant</h3>
257 |                         <span class="product__price">$8.99</span>
258 | 
259 |                         <button class="button--flex product__button">
260 |                             <i class="ri-shopping-bag-line"></i>
261 |                         </button>
262 |                     </article>
263 |                 </div>
264 |             </section>
265 | 
266 |             <!--==================== QUESTIONS ====================-->
267 |             <section class="questions section" id="faqs">
268 |                 <h2 class="section__title-center questions__title container">
269 |                     Some common questions <br> were often asked
270 |                 </h2>
271 | 
272 |                 <div class="questions__container container grid">
273 |                     <div class="questions__group">
274 |                         <div class="questions__item">
275 |                             <header class="questions__header">
276 |                                 <i class="ri-add-line questions__icon"></i>
277 |                                 <h3 class="questions__item-title">
278 |                                     My flowers are falling off or dying?
279 |                                 </h3>
280 |                             </header>
281 | 
282 |                             <div class="questions__content">
283 |                                 <p class="questions__description">
284 |                                     Plants are easy way to add color energy and transform your 
285 |                                     space but which planet is for you. Choosing the right plant.
286 |                                 </p>
287 |                             </div>
288 |                         </div>
289 | 
290 |                         <div class="questions__item">
291 |                             <header class="questions__header">
292 |                                 <i class="ri-add-line questions__icon"></i>
293 |                                 <h3 class="questions__item-title">
294 |                                     What causes leaves to become pale?
295 |                                 </h3>
296 |                             </header>
297 | 
298 |                             <div class="questions__content">
299 |                                 <p class="questions__description">
300 |                                     Plants are easy way to add color energy and transform your 
301 |                                     space but which planet is for you. Choosing the right plant.
302 |                                 </p>
303 |                             </div>
304 |                         </div>
305 | 
306 |                         <div class="questions__item">
307 |                             <header class="questions__header">
308 |                                 <i class="ri-add-line questions__icon"></i>
309 |                                 <h3 class="questions__item-title">
310 |                                     What causes brown crispy leaves?
311 |                                 </h3>
312 |                             </header>
313 | 
314 |                             <div class="questions__content">
315 |                                 <p class="questions__description">
316 |                                     Plants are easy way to add color energy and transform your 
317 |                                     space but which planet is for you. Choosing the right plant.
318 |                                 </p>
319 |                             </div>
320 |                         </div>
321 |                     </div>
322 | 
323 |                     <div class="questions__group">
324 |                         <div class="questions__item">
325 |                             <header class="questions__header">
326 |                                 <i class="ri-add-line questions__icon"></i>
327 |                                 <h3 class="questions__item-title">
328 |                                     How do i choose a plant?
329 |                                 </h3>
330 |                             </header>
331 | 
332 |                             <div class="questions__content">
333 |                                 <p class="questions__description">
334 |                                     Plants are easy way to add color energy and transform your 
335 |                                     space but which planet is for you. Choosing the right plant.
336 |                                 </p>
337 |                             </div>
338 |                         </div>
339 | 
340 |                         <div class="questions__item">
341 |                             <header class="questions__header">
342 |                                 <i class="ri-add-line questions__icon"></i>
343 |                                 <h3 class="questions__item-title">
344 |                                     How do I change the pots?
345 |                                 </h3>
346 |                             </header>
347 | 
348 |                             <div class="questions__content">
349 |                                 <p class="questions__description">
350 |                                     Plants are easy way to add color energy and transform your 
351 |                                     space but which planet is for you. Choosing the right plant.
352 |                                 </p>
353 |                             </div>
354 |                         </div>
355 | 
356 |                         <div class="questions__item">
357 |                             <header class="questions__header">
358 |                                 <i class="ri-add-line questions__icon"></i>
359 |                                 <h3 class="questions__item-title">
360 |                                     Why are gnats flying around my plant?
361 |                                 </h3>
362 |                             </header>
363 | 
364 |                             <div class="questions__content">
365 |                                 <p class="questions__description">
366 |                                     Plants are easy way to add color energy and transform your 
367 |                                     space but which planet is for you. Choosing the right plant.
368 |                                 </p>
369 |                             </div>
370 |                         </div>
371 |                     </div>
372 |                 </div>
373 |             </section>
374 | 
375 |             <!--==================== CONTACT ====================-->
376 |             <section class="contact section container" id="contact">                
377 |                 <div class="contact__container grid">
378 |                     <div class="contact__box">
379 |                         <h2 class="section__title">
380 |                             Reach out to us today <br> via any of the given <br> information
381 |                         </h2>
382 | 
383 |                         <div class="contact__data">
384 |                             <div class="contact__information">
385 |                                 <h3 class="contact__subtitle">Call us for instant support</h3>
386 |                                 <span class="contact__description">
387 |                                     <i class="ri-phone-line contact__icon"></i>
388 |                                     +999 888 777
389 |                                 </span>
390 |                             </div>
391 | 
392 |                             <div class="contact__information">
393 |                                 <h3 class="contact__subtitle">Write us by mail</h3>
394 |                                 <span class="contact__description">
395 |                                     <i class="ri-mail-line contact__icon"></i>
396 |                                     user@email.com
397 |                                 </span>
398 |                             </div>
399 |                         </div>
400 |                     </div>
401 | 
402 |                     <form action="" class="contact__form">
403 |                         <div class="contact__inputs">
404 |                             <div class="contact__content">
405 |                                 <input type="email" placeholder=" " class="contact__input">
406 |                                 <label for="" class="contact__label">Email</label>
407 |                             </div>
408 | 
409 |                             <div class="contact__content">
410 |                                 <input type="text" placeholder=" " class="contact__input">
411 |                                 <label for="" class="contact__label">Subject</label>
412 |                             </div>
413 | 
414 |                             <div class="contact__content contact__area">
415 |                                 <textarea name="message" placeholder=" " class="contact__input"></textarea>                              
416 |                                 <label for="" class="contact__label">Message</label>
417 |                             </div>
418 |                         </div>
419 | 
420 |                         <button class="button button--flex">
421 |                             Send Message
422 |                             <i class="ri-arrow-right-up-line button__icon"></i>
423 |                         </button>
424 |                     </form>
425 |                 </div>
426 |             </section>
427 |         </main>
428 | 
429 |         <!--==================== FOOTER ====================-->
430 |         <footer class="footer section">
431 |             <div class="footer__container container grid">
432 |                 <div class="footer__content">
433 |                     <a href="#" class="footer__logo">
434 |                         <i class="ri-leaf-line footer__logo-icon"></i> Plantex
435 |                     </a>
436 | 
437 |                     <h3 class="footer__title">
438 |                         Subscribe to our newsletter <br> to stay update
439 |                     </h3>
440 | 
441 |                     <div class="footer__subscribe">
442 |                         <input type="email" placeholder="Enter your email" class="footer__input">
443 | 
444 |                         <button class="button button--flex footer__button">
445 |                             Subscribe
446 |                             <i class="ri-arrow-right-up-line button__icon"></i>
447 |                         </button>
448 |                     </div>
449 |                 </div>
450 | 
451 |                 <div class="footer__content">
452 |                     <h3 class="footer__title">Our Address</h3>
453 | 
454 |                     <ul class="footer__data">
455 |                         <li class="footer__information">1234 - Peru</li>
456 |                         <li class="footer__information">La Libertad - 43210</li>
457 |                         <li class="footer__information">123-456-789</li>
458 |                     </ul>
459 |                 </div>
460 | 
461 |                 <div class="footer__content">
462 |                     <h3 class="footer__title">Contact Us</h3>
463 | 
464 |                     <ul class="footer__data">
465 |                         <li class="footer__information">+999 888 777</li>
466 |                         
467 |                         <div class="footer__social">
468 |                             <a href="https://www.facebook.com/" class="footer__social-link">
469 |                                 <i class="ri-facebook-fill"></i>
470 |                             </a>
471 |                             <a href="https://www.instagram.com/" class="footer__social-link">
472 |                                 <i class="ri-instagram-line"></i>
473 |                             </a>
474 |                             <a href="https://twitter.com/" class="footer__social-link">
475 |                                 <i class="ri-twitter-fill"></i>
476 |                             </a>
477 |                         </div>
478 |                     </ul>
479 |                 </div>
480 | 
481 |                 <div class="footer__content">
482 |                     <h3 class="footer__title">
483 |                         We accept all credit cards
484 |                     </h3>
485 | 
486 |                     <div class="footer__cards">
487 |                         <img src="assets/img/card1.png" alt="" class="footer__card">
488 |                         <img src="assets/img/card2.png" alt="" class="footer__card">
489 |                         <img src="assets/img/card3.png" alt="" class="footer__card">
490 |                         <img src="assets/img/card4.png" alt="" class="footer__card">
491 |                     </div>
492 |                 </div>
493 |             </div>
494 | 
495 |             <p class="footer__copy">&#169; Bedimcode. All rigths reserved</p>
496 |         </footer>
497 |         
498 |         <!--=============== SCROLL UP ===============-->
499 |         <a href="#" class="scrollup" id="scroll-up"> 
500 |             <i class="ri-arrow-up-fill scrollup__icon"></i>
501 |         </a>
502 | 
503 |         <!--=============== SCROLL REVEAL ===============-->
504 |         <script src="assets/js/scrollreveal.min.js"></script>
505 |         
506 |         <!--=============== MAIN JS ===============-->
507 |         <script src="assets/js/main.js"></script>
508 |     </body>
509 | </html>
510 | 


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-plants-website/d92ba83cdab5966072371999729d68f5c44f8cf8/preview.png


--------------------------------------------------------------------------------