417 lines
6.5 KiB
CSS
417 lines
6.5 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
|
|
|
|
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
.header__section{
|
|
height: 76px;
|
|
background-color: #F6F8FB;
|
|
}
|
|
.martLogo{
|
|
width: 165px;
|
|
height: 34px;
|
|
}
|
|
.martLogo img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.icon{
|
|
color: #1071FF;
|
|
}
|
|
.header__detail > span{
|
|
color: #2A2A2A;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
.header__btn{
|
|
color: #1071FF;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.envelope{
|
|
position: relative;
|
|
}
|
|
.number{
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 50%;
|
|
background-color: red;
|
|
color: #fff;
|
|
position: absolute;
|
|
top: -4px;
|
|
right: -6px;
|
|
display: grid;
|
|
place-content: center;
|
|
font-size: 10px;
|
|
}
|
|
.shopping, .message{
|
|
width: 110px;
|
|
border-right: 1px solid #6e7072;
|
|
}
|
|
.sell, .help{
|
|
width: 70px;
|
|
border-right: 1px solid #6e7072;
|
|
}
|
|
|
|
/* Nav Style */
|
|
|
|
.nav__section{
|
|
height: 82px;
|
|
}
|
|
nav > ul > li > a{
|
|
color: #0C0C0C;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
letter-spacing: 1px;
|
|
}
|
|
.search__box{
|
|
width: 543px;
|
|
height: 48px;
|
|
border: 1px solid #EAECEE;
|
|
padding: 0px 16px;
|
|
border-radius: 8px;
|
|
}
|
|
.search__box input{
|
|
background-color: transparent;
|
|
}
|
|
.fa-magnifying-glass{
|
|
font-size: 12px;
|
|
color: #1071FF;
|
|
}
|
|
.search__box > input::placeholder{
|
|
color:#737B7D;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* Main Style */
|
|
|
|
.main__section{
|
|
background-color: #1071FF;
|
|
color: #fff;
|
|
}
|
|
.main__title{
|
|
color: #FFF;
|
|
font-size: 60px;
|
|
font-weight: 600;
|
|
line-height: 87px;
|
|
}
|
|
.main__para{
|
|
color: #FFF;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 30px;
|
|
}
|
|
.main__img{
|
|
height: 339px;
|
|
}
|
|
.main__img img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Features Style */
|
|
|
|
.features{
|
|
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
|
|
}
|
|
.features__icon{
|
|
width: 32px;
|
|
height: 32px;
|
|
background-color: #1071FF;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
}
|
|
.features__title{
|
|
color: #101828;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
line-height: 30px;
|
|
}
|
|
.features__para{
|
|
color: #475467;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
}
|
|
.features__more{
|
|
color: #1071FF;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
.fa-chevron-right{
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Product style */
|
|
|
|
.product{
|
|
border-radius: 8px;
|
|
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
|
|
}
|
|
.product__titlee{
|
|
color: #1071FF;
|
|
font-size: 26px;
|
|
font-weight: 500;
|
|
}
|
|
.product__show{
|
|
color: #1071FF;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
}
|
|
.number__per{
|
|
width: 52px;
|
|
height: 32px;
|
|
background: #FF7E27;
|
|
color: #fff;
|
|
}
|
|
.product__star{
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
color: #1071FF;
|
|
}
|
|
.product__img{
|
|
height: 206px;
|
|
}
|
|
.product__img img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.stock{
|
|
color: #00893A;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
}
|
|
.share{
|
|
color: #1071FF;
|
|
}
|
|
.product__para{
|
|
color: #737B7D;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
}
|
|
.product__title{
|
|
color: #0C0C0C;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
}
|
|
.letters{
|
|
color: #1071FF;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
.rupees{
|
|
color: #1071FF;
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
}
|
|
.net{
|
|
color: #1071FF;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
.price__dis{
|
|
color: #FF7E27;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
text-decoration-line: strikethrough;
|
|
}
|
|
.product__btn > button{
|
|
width: 100%;
|
|
height: 48px;
|
|
background-color: #1071FF;
|
|
color: #fff;
|
|
border-radius: 30px;
|
|
}
|
|
|
|
|
|
/* Discount Style */
|
|
|
|
.discount__section{
|
|
background-color: #1071FF;
|
|
}
|
|
.discount__img{
|
|
width: 113px;
|
|
height: 140px;
|
|
}
|
|
.discount__img img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.discount__num{
|
|
color: #FFF;
|
|
font-size: 80px;
|
|
font-weight: 600;
|
|
}
|
|
.discount__le{
|
|
color: #FFF;
|
|
font-size: 48px;
|
|
font-weight: 500;
|
|
display: inline-block;
|
|
line-height: normal;
|
|
}
|
|
.discount__para{
|
|
color: #FFF;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 30px;
|
|
}
|
|
.discount__btn > button{
|
|
width: 171px;
|
|
height: 48px;
|
|
background-color: #fff;
|
|
color: #1071FF;
|
|
border-radius: 30px;
|
|
}
|
|
|
|
|
|
/* Categories Style */
|
|
|
|
.categories__content{
|
|
border-radius: 16px;
|
|
}
|
|
.categories__title{
|
|
color: #2580FF;
|
|
font-size: 26px;
|
|
font-weight: 500;
|
|
}
|
|
.categories__show{
|
|
color: #1071FF;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
}
|
|
.categories__img{
|
|
height: 300px;
|
|
}
|
|
.categories__img img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.categories__name{
|
|
display: grid;
|
|
place-content: center;
|
|
height: 54px;
|
|
color: #fff;
|
|
background-color: #2580FF;
|
|
border-bottom-left-radius: 16px;
|
|
border-bottom-right-radius: 16px;
|
|
}
|
|
|
|
|
|
/* DPD Style */
|
|
|
|
|
|
.dpd{
|
|
background: #F6F8FB;
|
|
}
|
|
.dpd__content{
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
.dpd__title{
|
|
color: #0C0C0C;
|
|
font-size: 36px;
|
|
font-weight: 600;
|
|
}
|
|
.dpd__para{
|
|
color: #0C0C0C;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
}
|
|
.dpd__btn > button{
|
|
width: 159px;
|
|
height: 48px;
|
|
color:#FFF;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
background-color: #1071FF;
|
|
border-radius: 30px;
|
|
}
|
|
.dpd__img{
|
|
width: 622px;
|
|
height: 329px;
|
|
}
|
|
.dpd__img img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
/* Footer Style */
|
|
|
|
|
|
.footer{
|
|
background-color: #F6F8FB;
|
|
}
|
|
.footer__container{
|
|
border-bottom: 1px solid #101828;
|
|
}
|
|
.sign{
|
|
width: 300px;
|
|
}
|
|
.manufacturing{
|
|
width: 210px;
|
|
}
|
|
.sign__title{
|
|
color: #0C0C0C;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
}
|
|
.sign__para{
|
|
color: #0C0C0C;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
}
|
|
.sign__input > input{
|
|
width: 100%;
|
|
height: 48px;
|
|
border: 1px solid #EAECEE;
|
|
border-radius: 12px;
|
|
padding: 0px 16px;
|
|
}
|
|
.footer__btn > button{
|
|
width: 100%;
|
|
height: 48px;
|
|
background-color: #2580FF;
|
|
color: #fff;
|
|
border-radius: 30px;
|
|
}
|
|
.footer__accept{
|
|
color: #0C0C0C;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
}
|
|
.blue{
|
|
color: #2580FF;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
}
|
|
.manufacturing__title, .retail__title, .finance__title{
|
|
color: #000;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.manufacturing > ul > li > a,
|
|
.retail > ul > li > a,
|
|
.finance > ul > li > a {
|
|
color: #000;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
}
|
|
.footer__rights{
|
|
height: 68px;
|
|
}
|
|
.footer__mart{
|
|
color: #434447;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
}
|
|
.footer__social{
|
|
font-size: 24px;
|
|
}
|
|
|
|
|