html {
scroll-behavior: smooth;
}
body {
font-family: "Lato", sans-serif;
padding: 0;
margin: 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;
cursor: pointer;
color: lightgray;
font-weight: 400;
}
.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 1.5s ease-in-out;
}
.sliderItem {
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.sliderBg {
width: 750px;
height: 750px;
border-radius: 50%;
position: absolute;
}
.sliderImg {
z-index: 1;
}
.sliderTitle {
position: absolute;
top: 10%;
right: 10%;
font-size: 60px;
font-weight: 900;
text-align: center;
color: white;
z-index: 1;
}
.sliderPrice {
position: absolute;
top: 10%;
left: 10%;
font-size: 60px;
font-weight: 300;
text-align: center;
color: white;
border: 1px solid gray;
z-index: 1;
}
.buyButton {
position: absolute;
top: 50%;
right: 10%;
font-size: 30px;
font-weight: 900;
color: white;
border: 1px solid gray;
background-color: black;
z-index: 1;
cursor: pointer;
}
.buyButton:hover {
background-color: white;
color: black;
}
.sliderItem:nth-child(1) .sliderBg {
background-color: #369e62;
}
.sliderItem:nth-child(2) .sliderBg {
background-color: rebeccapurple;
}
.sliderItem:nth-child(3) .sliderBg {
background-color: teal;
}
.sliderItem:nth-child(4) .sliderBg {
background-color: cornflowerblue;
}
.sliderItem:nth-child(5) .sliderBg {
background-color: rgb(124, 115, 80);
}
.sliderItem:nth-child(1) .sliderPrice {
color: #369e62;
}
.sliderItem:nth-child(2) .sliderPrice {
color: white;
}
.sliderItem:nth-child(3) .sliderPrice {
color: teal;
}
.sliderItem:nth-child(4) .sliderPrice {
color: cornflowerblue;
}
.sliderItem:nth-child(5) .sliderPrice {
color: cornsilk;
}
.features {
display: flex;
align-items: center;
justify-content: space-between;
padding: 50px;
}
.feature {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.featureIcon {
width: 50px;
height: 50px;
}
.featureTitle {
font-size: 20px;
font-weight: 600;
margin: 20px;
}
.featureDesc {
color: gray;
width: 50%;
height: 100px;
}
.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;
bottom: 0;
left: 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: -40;
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;
background-color: gray;
color: white;
top: 10px;
right: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 2px;
}
.productImg {
width: 50%;
}
.productDetails {
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;
text-align: center;
}
.nsImg {
width: 100%;
height: 500px;
}
.nsTitle {
font-size: 40px;
}
.nsButton {
padding: 15px;
font-weight: 600;
cursor: pointer;
}
footer {
display: flex;
}
.footerLeft {
flex: 2;
display: flex;
justify-content: space-between;
padding: 50px;
}
.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;
font-size: 14px;
}
@media screen and (max-width:480px) {
nav{
padding: 20px;
}
.search{
display: none;
}
.navBottom{
flex-wrap: wrap;
}
.menuItem{
margin: 20px;
font-weight: 700;
font-size: 20px;
}
.slider{
clip-path: none;
}
.sliderImg{
width: 90%;
}
.sliderBg{
width: 100%;
height: 100%;
}
.sliderTitle{
display: none;
}
.sliderPrice{
top: unset;
bottom: -50;
left: 0;
background-color: lightgrey;
}
.buyButton{
right: 0;
top: 0;
}
.features{
flex-direction: column;
}
.product{
clip-path: none ;
display: flex;
flex-direction: column;
align-items: center;
}
.productImg{
width: 80%;
}
.productDetails{
width: 100%;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
top: 0;
}
.productTitle{
font-size: 50px;
margin: 0;
}
.gallery{
display: none;
}
.newSeason{
flex-direction: column;
}
.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;
}
}