style.css

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

html{
 scroll-behavior: smooth;
}

body{
 font-family: 'Lato', sans-serif;
 margin: 0;
 padding: 0;
}

nav{
 background-color: #111;
 color: white;
 padding: 20px 50px;
}

.navTop{
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.search{
 display: flex;
 align-items: center;
 background-color: gray;
 padding: 10px 20px;
 border-radius: 10px;
}

.searchInput{
 border: none;
 background-color: transparent;
}

.searchInput::placeholder{
 color: lightgray;
}

.limitedOffer{
 font-size: 20px;
 border-bottom: 2px solid green;
 cursor: pointer;
}

.navBottom{
 display: flex;
 align-items: center;
 justify-content: center;
}

.menuItem{
 margin-right: 50px;
 color: lightgray;
 cursor: pointer;
 font-weight: 400;
}

/* SLIDER */
.slider{
 background: url("https://images.unsplash.com/photo-1604147495798-57beb5d6af73?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80");
 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
 overflow: hidden;
}

.sliderWrapper{
 display: flex;
 width: 500vw;
 transition: all 1s ease-in-out;
}

.sliderItem{
 width: 100vw;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
}

.slideBg{
 width: 750px;
 height: 750px;
 position: absolute;
 border-radius: 50%;
}

.sliderImg{
 z-index: 1;
}

.sliderTitle{
 position: absolute;
 top: 10%;
 right: 10%;
 color: white;
 font-size: 60px;
 font-weight: 900;
 text-align: center;
 z-index: 1;
}

.sliderPrice{
 position: absolute;
 top: 10%;
 left: 10%;
 color: white;
 font-size: 60px;
 font-weight: 300;
 text-align: center;
 border: 1px solid gray;
 z-index: 1;
}

.buyButton{
 position: absolute;
 top: 50%;
 right: 10%;
 color: white;
 font-size: 30px;
 font-weight: 900;
 background-color: black;
 border: 1px solid gray;
 z-index: 1;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

.buyButton:hover{
 background-color: white;
 color: black;
}

/* SLIDER BACKGROUND COLOR */
.sliderItem:nth-child(1) .slideBg{
 background-color: #369e62;
}

.sliderItem:nth-child(2) .slideBg{
 background-color: rebeccapurple;
}

.sliderItem:nth-child(3) .slideBg{
 background-color: teal;
}

.sliderItem:nth-child(4) .slideBg{
 background-color: cornflowerblue;
}

.sliderItem:nth-child(5) .slideBg{
 background-color: rgba(124, 115, 80);
}

/* PRICE COLOR */
.sliderItem:nth-child(1) .sliderPrice{
 color: #369e62;
}

.sliderItem:nth-child(2) .sliderPrice{
 color: rebeccapurple;
}

.sliderItem:nth-child(3) .sliderPrice{
 color: teal;
}

.sliderItem:nth-child(4) .sliderPrice{
 color: cornflowerblue;
}

.sliderItem:nth-child(5) .sliderPrice{
 color: rgba(124, 115, 80);
}


/* FEATURES */
.features{
 display: flex;
 align-items: center;
 justify-content: space-evenly;
 padding: 50px;
}

.featureIcon{
 width: 50px;
 height: 50px;
}

.feature{
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
}

.featureTitle{
 font-size: 20px;
 font-weight: 600;
 margin: 20px;
}

.featureDesc{
 color: gray;
 width: 50%;
 height: 100px;
}


/* PRODUCT */
.product{
 height: 100vh;
 background-color: whitesmoke;
 position: relative;
 clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
}

.payment{
 width: 500px;
 height: 500px;
 background-color: white;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 margin: auto;
 padding: 10px 50px;
 display: none;
 flex-direction: column;
 -webkit-box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.3);
}

.payTitle{
 font-size: 20px;
 color: lightgray;
}

label {
 font-size: 14px;
 font-weight: 300;
}

.payInput {
 padding: 10px;
 margin: 10px 0px;
 border: none;
 border-bottom: 1px solid gray;
}

.payInput::placeholder {
 color: rgb(163, 163, 163);
}

.cardIcons {
 display: flex;
}

.cardIcon {
 margin-right: 10px;
}

.cardInfo {
 display: flex;
 justify-content: space-between;
}

.sm {
 width: 30%;
}

.payButton {
 position: absolute;
 height: 40px;
 bottom: -40px;
 width: 100%;
 left: 0;
 -webkit-box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.3);
 box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.3);
 background-color: #369e62;
 color: white;
 border: none;
 cursor: pointer;
}

.close{
 width: 20px;
 height: 20px;
 position: absolute;
 top: 10px;
 right: 10px;
 background-color: gray;
 color: white;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 padding: 2px;
}


.productImg{
 width: 50%;
}

.productDeatils{
 position: absolute;
 top: 10%;
 right: 0;
 width: 40%;
 padding: 50px;
}


.productTitle{
 font-size: 75px;
 font-weight: 900;
}

.productDesc{
 font-style: 24px;
 color: gray;
}

.colors,
.sizes{
 display: flex;
 margin-bottom: 20px;
}

.color{
 width: 32px;
 height: 32px;
 border-radius: 5px;
 background-color: black;
 margin-right: 10px;
 cursor: pointer;
}

.color:last-child{
 background-color: darkblue;
}

.size{
 padding: 5px 20px;
 border: 1px solid black;
 margin-right: 10px;
 cursor: pointer;
 font-size: 20px;
}

.productButton{
 float: right;
 padding: 10px 20px;
 background-color: black;
 color: white;
 font-weight: 600;
 cursor: pointer;
}

.productButton:hover{
 background-color: white;
 color: black;
}


.gallery{
  padding: 50px;
  display: flex;
}

.galleryItem{
  flex: 1;
  padding: 50px;
}

.galleryImg{
  width: 100%;
}

.newSeason{
  display: flex;
}

.nsItem{
  flex: 1;
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nsImg{
  width: 100%;
  height: 800px;
}

.nsTitle{
  font-size: 40px;
}

.nsButton{
  padding: 15px;
  font-weight: 600;
  cursor: pointer;
}


/* FOOTER */
footer{
  display: flex;
}

.footerLeft{
  display: flex;
  justify-content: space-between;
  padding: 50px;
  flex: 2;
}

.fMenuTitle{
  font-size: 16px;
}

.fList{
  padding: 0;
  list-style: none;
}

.fListItem{
  margin-bottom: 10px;
  color: gray;
  cursor: pointer;
}

.footerRight{
  flex: 1;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fInput{
  padding: 5px;
}

.fButton{
  padding: 5px;
  background-color: black;
  color: white;
}

.fIcons{
  display: flex;
}

.fIcon{
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.copyright{
  font-weight: 300;
}


/* Responsiveness */
@media  screen and (max-width:480px) {
    nav{
      padding: 20px;
    }

    .search{
      display: none;
    }

    .menuItem{
      margin: 20px;
      font-weight: 700;
      font-size: 20px;
    }

    .navBottom{
      flex-wrap: wrap;
    }

    .slider{
      clip-path: none;
    }

    .sliderImg{
      width: 90%;
    }

    .slideBg{
      width: 100%;
      height: 100%;
    }

    .sliderTitle{
      display: none;
    }

    .sliderPrice{
      top: unset;
      left: 0;
      bottom: 0;
      background-color: lightgray;
      margin: 0;
    }

    .buyButton{
      top: 0;
      right: 0;
    }

    .features{
      flex-direction: column;
    }

    .product{
      clip-path: none;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .productImg{
      width: 80%;
    }

    .productDeatils{
      position: relative;
      top: 0;
      width: 100%;
      padding: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      text-align: center;
    }

    .productTitle{
      font-size: 50px;
      margin: 0;
    }

    .gallery{
      display: none;
    }

    .newSeason{
     flex-direction: column;
    }

    .nsImg{
      height: 600px;
    }

    .nsItem:nth-child(2){
      padding: 50px;
    }

    footer{
      flex-direction: column;
      align-items: center;
    }

    .footerLeft{
      padding: 20px;
      width: 90%;
    }

    .footerRight{
      padding: 20px;
      width: 90%;
      align-items: center;
      background-color: whitesmoke;
    }

    .payment{
      width: 90%;
      padding: 20px;
    }
}