Upload files to "/"
commit
b817b74917
|
|
@ -0,0 +1,554 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Header Section -->
|
||||
|
||||
<section class="header__section flex justify-between items-center">
|
||||
<header class="container mx-auto flex justify-between items-center">
|
||||
<div class="martLogo">
|
||||
<img src="/image/Logo.png" alt="">
|
||||
</div>
|
||||
<div class="header__detail flex">
|
||||
<div class="shopping">
|
||||
<i class="fa-solid fa-tag icon mr-2"></i>
|
||||
<span>Shopping</span>
|
||||
</div>
|
||||
<div class="sell ml-2">
|
||||
<i class="fa-solid fa-shop icon mr-2"></i>
|
||||
<span>Sell</span>
|
||||
</div>
|
||||
<div class="message flex ml-2">
|
||||
<div class="envelope mr-2">
|
||||
<i class="fa-regular fa-envelope icon"></i>
|
||||
<span class="number">12</span>
|
||||
</div>
|
||||
<span>Messages</span>
|
||||
</div>
|
||||
<div class="help ml-2">
|
||||
<i class="fa-solid fa-circle-question icon"></i>
|
||||
<span>Help</span>
|
||||
</div>
|
||||
<div class="header__btn flex items-center ml-2">
|
||||
<button>LOGIN /</button>
|
||||
<button class="ml-2">REGISTER</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<!-- Nav section -->
|
||||
|
||||
<section class="nav__section container mx-auto flex justify-between items-center">
|
||||
<nav>
|
||||
<ul class="flex gap-x-11">
|
||||
<li><a href="">HOME & GARDEN <i class="fa-solid fa-chevron-down"></i></a></li>
|
||||
<li><a href="">CLOTHING <i class="fa-solid fa-chevron-down"></i></a></li>
|
||||
<li><a href="">ELECTRONICS</a></li>
|
||||
<li><a href="">OFFICE EQUIPMENT</a></li>
|
||||
<li><a href="">MACHINES</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="search__box flex items-center">
|
||||
<i class="fa-solid fa-magnifying-glass mr-3"></i>
|
||||
<input type="text" placeholder="Search by product">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Main Section -->
|
||||
|
||||
<section class="main__section">
|
||||
<div class="main__container container mx-auto flex justify-between py-20">
|
||||
<div class="main__content w-3/5">
|
||||
<div class="main__title">
|
||||
<span>The leading B2B ecommerce platform for global trade</span>
|
||||
</div>
|
||||
<div class="main__para mt-10 pr-36">
|
||||
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main__image w-2/5">
|
||||
<div class="main__img">
|
||||
<img src="/image/B2B.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
|
||||
<section class="container mx-auto grid grid-cols-4 gap-x-6 mt-20">
|
||||
<div class="features p-6">
|
||||
<div class="features__icon grid place-content-center">
|
||||
<i class="fa-solid fa-thumbs-up"></i>
|
||||
</div>
|
||||
<div class="features__title mt-7 mb-2">
|
||||
<span>Feature 1</span>
|
||||
</div>
|
||||
<div class="features__para mb-5">
|
||||
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</span>
|
||||
</div>
|
||||
<div class="features__more">
|
||||
<span>Learn More <i class="fa-solid fa-chevron-right ml-3"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features p-6">
|
||||
<div class="features__icon grid place-content-center">
|
||||
<i class="fa-solid fa-thumbs-up"></i>
|
||||
</div>
|
||||
<div class="features__title mt-7 mb-2">
|
||||
<span>Feature 1</span>
|
||||
</div>
|
||||
<div class="features__para mb-5">
|
||||
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</span>
|
||||
</div>
|
||||
<div class="features__more">
|
||||
<span>Learn More <i class="fa-solid fa-chevron-right ml-3"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features p-6">
|
||||
<div class="features__icon grid place-content-center">
|
||||
<i class="fa-solid fa-thumbs-up"></i>
|
||||
</div>
|
||||
<div class="features__title mt-7 mb-2">
|
||||
<span>Feature 1</span>
|
||||
</div>
|
||||
<div class="features__para mb-5">
|
||||
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</span>
|
||||
</div>
|
||||
<div class="features__more">
|
||||
<span>Learn More <i class="fa-solid fa-chevron-right ml-3"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features p-6">
|
||||
<div class="features__icon grid place-content-center">
|
||||
<i class="fa-solid fa-thumbs-up"></i>
|
||||
</div>
|
||||
<div class="features__title mt-7 mb-2">
|
||||
<span>Feature 1</span>
|
||||
</div>
|
||||
<div class="features__para mb-5">
|
||||
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</span>
|
||||
</div>
|
||||
<div class="features__more">
|
||||
<span>Learn More <i class="fa-solid fa-chevron-right ml-3"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Product Section -->
|
||||
|
||||
<section class="container mx-auto">
|
||||
<div class="product__header flex justify-between mt-24 mb-12">
|
||||
<div class="product__titlee">
|
||||
<span>Products You May Like</span>
|
||||
</div>
|
||||
<div class="product__show">
|
||||
<span>Show all recommended products <i class="fa-solid fa-arrow-right"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product__container grid grid-cols-5 gap-x-7">
|
||||
<div class="product py-4">
|
||||
<div class="product__discount flex justify-between">
|
||||
<div class="number__per grid place-content-center">
|
||||
<span>-30%</span>
|
||||
</div>
|
||||
<div class="product__star grid place-content-center">
|
||||
<i class="fa-regular fa-star"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product__content px-4">
|
||||
<div class="product__img">
|
||||
<img src="/image/product image (1).png" alt="">
|
||||
</div>
|
||||
<div class="product__stock flex justify-between">
|
||||
<div class="stock">
|
||||
<i class="fa-solid fa-circle-check"></i>
|
||||
<span>In stock </span>
|
||||
</div>
|
||||
<div class="share">
|
||||
<button><i class="fa-solid fa-share-nodes"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product__para mt-5 mb-3">
|
||||
<span>Omnires | Part No. 2123532</span>
|
||||
</div>
|
||||
<div class="product__title">
|
||||
<span>Connection with a handle Omnires round</span>
|
||||
</div>
|
||||
<div class="product__price flex justify-between items-center mt-5 mb-4">
|
||||
<div class="price">
|
||||
<div><span class="letters">Your price</span></div>
|
||||
<div><span class="rupees">₹350.00 <span class="net">net</span></span></div>
|
||||
</div>
|
||||
<div class="price__dis">
|
||||
<span><strike>₹450.00 net</strike></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product__btn">
|
||||
<button>BUY NOW</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product py-4">
|
||||
<div class="product__discount flex justify-between">
|
||||
<div class="number__per grid place-content-center">
|
||||
<span>-30%</span>
|
||||
</div>
|
||||
<div class="product__star grid place-content-center">
|
||||
<i class="fa-regular fa-star"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product__content px-4">
|
||||
<div class="product__img">
|
||||
<img src="/image/product image (1).png" alt="">
|
||||
</div>
|
||||
<div class="product__stock flex justify-between">
|
||||
<div class="stock">
|
||||
<i class="fa-solid fa-circle-check"></i>
|
||||
<span>In stock </span>
|
||||
</div>
|
||||
<div class="share">
|
||||
<button><i class="fa-solid fa-share-nodes"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product__para mt-5 mb-3">
|
||||
<span>Omnires | Part No. 2123532</span>
|
||||
</div>
|
||||
<div class="product__title">
|
||||
<span>Connection with a handle Omnires round</span>
|
||||
</div>
|
||||
<div class="product__price flex justify-between items-center mt-5 mb-4">
|
||||
<div class="price">
|
||||
<div><span class="letters">Your price</span></div>
|
||||
<div><span class="rupees">₹350.00 <span class="net">net</span></span></div>
|
||||
</div>
|
||||
<div class="price__dis">
|
||||
<span><strike>₹450.00 net</strike></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product__btn">
|
||||
<button>BUY NOW</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product py-4">
|
||||
<div class="product__discount flex justify-between">
|
||||
<div class="number__per grid place-content-center">
|
||||
<span>-30%</span>
|
||||
</div>
|
||||
<div class="product__star grid place-content-center">
|
||||
<i class="fa-regular fa-star"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product__content px-4">
|
||||
<div class="product__img">
|
||||
<img src="/image/product image (1).png" alt="">
|
||||
</div>
|
||||
<div class="product__stock flex justify-between">
|
||||
<div class="stock">
|
||||
<i class="fa-solid fa-circle-check"></i>
|
||||
<span>In stock </span>
|
||||
</div>
|
||||
<div class="share">
|
||||
<button><i class="fa-solid fa-share-nodes"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product__para mt-5 mb-3">
|
||||
<span>Omnires | Part No. 2123532</span>
|
||||
</div>
|
||||
<div class="product__title">
|
||||
<span>Connection with a handle Omnires round</span>
|
||||
</div>
|
||||
<div class="product__price flex justify-between items-center mt-5 mb-4">
|
||||
<div class="price">
|
||||
<div><span class="letters">Your price</span></div>
|
||||
<div><span class="rupees">₹350.00 <span class="net">net</span></span></div>
|
||||
</div>
|
||||
<div class="price__dis">
|
||||
<span><strike>₹450.00 net</strike></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product__btn">
|
||||
<button>BUY NOW</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product py-4">
|
||||
<div class="product__discount flex justify-between">
|
||||
<div class="number__per grid place-content-center">
|
||||
<span>-30%</span>
|
||||
</div>
|
||||
<div class="product__star grid place-content-center">
|
||||
<i class="fa-regular fa-star"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product__content px-4">
|
||||
<div class="product__img">
|
||||
<img src="/image/product image (1).png" alt="">
|
||||
</div>
|
||||
<div class="product__stock flex justify-between">
|
||||
<div class="stock">
|
||||
<i class="fa-solid fa-circle-check"></i>
|
||||
<span>In stock </span>
|
||||
</div>
|
||||
<div class="share">
|
||||
<button><i class="fa-solid fa-share-nodes"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product__para mt-5 mb-3">
|
||||
<span>Omnires | Part No. 2123532</span>
|
||||
</div>
|
||||
<div class="product__title">
|
||||
<span>Connection with a handle Omnires round</span>
|
||||
</div>
|
||||
<div class="product__price flex justify-between items-center mt-5 mb-4">
|
||||
<div class="price">
|
||||
<div><span class="letters">Your price</span></div>
|
||||
<div><span class="rupees">₹350.00 <span class="net">net</span></span></div>
|
||||
</div>
|
||||
<div class="price__dis">
|
||||
<span><strike>₹450.00 net</strike></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product__btn">
|
||||
<button>BUY NOW</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product py-4">
|
||||
<div class="product__discount flex justify-between">
|
||||
<div class="number__per grid place-content-center">
|
||||
<span>-30%</span>
|
||||
</div>
|
||||
<div class="product__star grid place-content-center">
|
||||
<i class="fa-regular fa-star"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product__content px-4">
|
||||
<div class="product__img">
|
||||
<img src="/image/product image (1).png" alt="">
|
||||
</div>
|
||||
<div class="product__stock flex justify-between">
|
||||
<div class="stock">
|
||||
<i class="fa-solid fa-circle-check"></i>
|
||||
<span>In stock </span>
|
||||
</div>
|
||||
<div class="share">
|
||||
<button><i class="fa-solid fa-share-nodes"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product__para mt-5 mb-3">
|
||||
<span>Omnires | Part No. 2123532</span>
|
||||
</div>
|
||||
<div class="product__title">
|
||||
<span>Connection with a handle Omnires round</span>
|
||||
</div>
|
||||
<div class="product__price flex justify-between items-center mt-5 mb-4">
|
||||
<div class="price">
|
||||
<div><span class="letters">Your price</span></div>
|
||||
<div><span class="rupees">₹350.00 <span class="net">net</span></span></div>
|
||||
</div>
|
||||
<div class="price__dis">
|
||||
<span><strike>₹450.00 net</strike></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product__btn">
|
||||
<button>BUY NOW</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Discount Section -->
|
||||
|
||||
<section class="discount__section mt-28">
|
||||
<div class="discount__container container mx-auto flex items-center py-6">
|
||||
<div class="discount__image mr-10">
|
||||
<div class="discount__img">
|
||||
<img src="/image/image (1).png" alt="img">
|
||||
</div>
|
||||
</div>
|
||||
<div class="discount__word flex items-center mr-12">
|
||||
<span class="discount__num mr-4">30%</span>
|
||||
<span class="discount__le">on power tools</span>
|
||||
</div>
|
||||
<div class="discount__para w-2/5">
|
||||
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</span>
|
||||
</div>
|
||||
<div class="discount__btn ml-auto">
|
||||
<button>Check offer</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Categories Section -->
|
||||
|
||||
<section class="categories container mx-auto">
|
||||
<div class="categories__header flex justify-between items-center mt-20 mb-12">
|
||||
<div class="categories__title">
|
||||
<span>Recommended Categories</span>
|
||||
</div>
|
||||
<div class="categories__show">
|
||||
<span>Show all categories <i class="fa-solid fa-arrow-right"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="categories__container grid grid-cols-5 gap-x-7">
|
||||
<div class="categories__content">
|
||||
<div class="categories__img">
|
||||
<img src="/image/t-shirt.png" alt="">
|
||||
</div>
|
||||
<div class="categories__name">
|
||||
<span>T-Shirt</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="categories__content">
|
||||
<div class="categories__img">
|
||||
<img src="/image/veg.png" alt="">
|
||||
</div>
|
||||
<div class="categories__name">
|
||||
<span>Vegetables</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="categories__content">
|
||||
<div class="categories__img">
|
||||
<img src="/image/can.png" alt="">
|
||||
</div>
|
||||
<div class="categories__name">
|
||||
<span>Chemicals</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="categories__content">
|
||||
<div class="categories__img">
|
||||
<img src="/image/man.png" alt="">
|
||||
</div>
|
||||
<div class="categories__name">
|
||||
<span>Machinery & Equipment</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="categories__content">
|
||||
<div class="categories__img">
|
||||
<img src="/image/tablet.png" alt="">
|
||||
</div>
|
||||
<div class="categories__name">
|
||||
<span>Pharmaceuticals</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DPD Section -->
|
||||
|
||||
<section class="dpd container mx-auto mt-28">
|
||||
<div class="dpd__container flex justify-between px-10 py-24">
|
||||
<div class="dpd__content w-2/5">
|
||||
<div class="dpd__title">
|
||||
<span>DPD delivery already available!</span>
|
||||
</div>
|
||||
<div class="dpd__para mt-6 mb-10">
|
||||
<span>Choose DPD for speed, ease and convenience.
Track your parcel in real time. This will help you plan your work while waiting for the parcel.</span>
|
||||
</div>
|
||||
<div class="dpd__button">
|
||||
<div class="dpd__btn">
|
||||
<button>Show more</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dpd__image">
|
||||
<div class="dpd__img">
|
||||
<img src="/image/van.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Footer Section -->
|
||||
|
||||
<section class="footer pt-12 mt-32">
|
||||
<div class="footer__container container mx-auto flex gap-x-20 pb-12">
|
||||
<div class="sign">
|
||||
<div class="sign__title">
|
||||
<span>Sign up for news</span>
|
||||
</div>
|
||||
<div class="sign__para my-6">
|
||||
<span>Keep up to date with the latest product launches and news. Find out more about our brands and get special promo codes.</span>
|
||||
</div>
|
||||
<div class="sign__input">
|
||||
<input type="text" placeholder="Your e-mail address">
|
||||
</div>
|
||||
<div class="footer__btn my-6">
|
||||
<button>Sign up for newsletter</button>
|
||||
</div>
|
||||
<div class="footer__accept">
|
||||
<input type="checkbox">
|
||||
<span class="ml-3">I accept <span class="blue">the personal data management.</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="manufacturing">
|
||||
<div class="manufacturing__title">
|
||||
<span>Manufacturing Industries</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="mt-6"><a href="">B2B Food & Beverage</a></li>
|
||||
<li class="my-4"><a href="">B2B Leather Industries</a></li>
|
||||
<li class="my-4"><a href="">B2B Machinery & Equipment</a></li>
|
||||
<li class="my-4"><a href="">B2B Pharmaceuticals</a></li>
|
||||
<li><a href="">B2B Chemicals</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="retail">
|
||||
<div class="retail__title">
|
||||
<span>Retail and E-commerce</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="mt-6"><a href="">B2B Wholesale Trade</a></li>
|
||||
<li class="my-4"><a href="">B2B Import & Export</a></li>
|
||||
<li class="my-4"><a href="">B2B Consumer Electronics</a></li>
|
||||
<li class="my-4"><a href="">B2B Furniture & HomeImprovement</a></li>
|
||||
<li><a href="">B2B Building Materials</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="finance">
|
||||
<div class="finance__title">
|
||||
<span>Financial Services</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="mt-6"><a href="">B2B Projects</a></li>
|
||||
<li class="my-4"><a href="">B2B Bank & Finance</a></li>
|
||||
<li class="my-4"><a href="">B2B Fintech (Financial Technology)</a></li>
|
||||
<li class="my-4"><a href="">B2B Insurance</a></li>
|
||||
<li><a href="">B2B E-Commerce</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__rights container mx-auto flex justify-between items-center">
|
||||
<div class="footer__mart">
|
||||
<i class="fa-regular fa-copyright mr-3"></i><span>2023 HaodaMart</span>
|
||||
</div>
|
||||
<div class="footer__icon flex items-center justify-center">
|
||||
<div class="footer__social mt-2 mr-3">
|
||||
<i class="fa-brands fa-facebook mr-2"></i>
|
||||
<i class="fa-brands fa-square-instagram mr-2"></i>
|
||||
<i class="fa-brands fa-youtube mr-2"></i>
|
||||
<i class="fa-brands fa-linkedin"></i>
|
||||
</div>
|
||||
<div class="martLogo">
|
||||
<img src="/image/Logo.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,416 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue