554 lines
24 KiB
HTML
554 lines
24 KiB
HTML
<!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> |