Untitled
unknown
plain_text
2 years ago
38 kB
5
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruit Shop</title>
<link rel="icon" type="image/x-png" href="./images/logo.png">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.4.0/dist/full.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
.font-poppin{
font-family: 'Poppins', sans-serif;
}
</style>
</head>
<body class="font-poppin">
<!-- Header Section -->
<header class="my-4 sm:my-10">
<div class="p-0 lg:p-4 bg-none lg:bg-rose-500 sm:rounded-full mx-4 lg:mx-60">
<div class="flex flex-row-reverse lg:flex-row justify-between items-center px-0 lg:px-5">
<!-- Hamburger Menu -->
<div class="lg:hidden ">
<div class="drawer lg:drawer-open">
<input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
<div class="drawer-content flex flex-col items-center justify-center">
<!-- Page content here -->
<label for="my-drawer-2" class="btn btn-primary bg-transparent text-black border-none drawer-button lg:hidden z-100"><i class="fa-solid fa-bars"></i></label>
</div>
<div class="drawer-side z-10">
<label for="my-drawer-2" class="drawer-overlay "></label>
<ul class="menu p-4 w-80 h-full bg-base-200 text-base-content">
<!-- Sidebar content here -->
<li><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Shop</a></li>
<li><a>All Fruits</a></li>
</ul>
</div>
</div>
</div>
<!-- Left Menu for desktop -->
<div class="hidden lg:flex">
<ul class="flex space-x-4">
<li><a href="#" class="text-white">Home</a></li>
<li><a href="#" class="text-white">About</a></li>
<li><a href="#" class="text-white">Shop</a></li>
<li><a href="#" class="text-white">All Fruits</a></li>
</ul>
</div>
<!-- Logo -->
<div class="flex justify-center text-center gap-4">
<img src="./images/logo.png" alt="Logo">
<h2 class="text-left text-black font-bold lg:text-white text-2xl lg:text-4xl align-baseline m-auto">
Fruit Burst</h2>
</div>
<!-- Search Form for desktop -->
<div class="hidden lg:flex">
<form class="flex items-center">
<input type="text" class="rounded-full px-4 py-2 mr-2" placeholder="Search">
<button type="submit" class="bg-white rounded-full p-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
</form>
</div>
</div>
</div>
</header>
<main>
<!-- slider section -->
<section class="my-4 sm:my-10 md:mx-30 lg:mx-4">
<div class="mx-4 sm:mx-60">
<!-- slider or carousel -->
<div class="carousel w-full h-48 lg:h-[550px]">
<!-- slide 1 -->
<div id="slide1"
class="flex justify-content items-center carousel-item relative h-48 lg:h-auto w-full bg-[url('./images/banner1.png')] bg-cover">
<div class="m-auto">
<div class="text-center">
<h2 class="text-white text-2xl mb-2 font-bold sm:text-3xl sm:mb-4">Exotic tastes at your
doorstep</h2>
<p class="text-white mb-2 sm:mb-4">We supply highly quality organic products</p>
<a href="#" class="bg-red-500 text-white px-2 sm:px-4 py-2 rounded">Shop Now</a>
</div>
</div>
<div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
<a href="#slide4" class="btn btn-sm">❮</a>
<a href="#slide2" class="btn btn-sm">❯</a>
</div>
</div>
<!-- slide 2 -->
<div id="slide2"
class="flex justify-content items-center carousel-item relative h-48 lg:h-auto w-full bg-[url('./images/banner2.png')] bg-cover">
<div class="m-auto">
<div class="text-center">
<h2 class="text-white text-2xl mb-2 font-bold sm:text-3xl sm:mb-4">Exotic tastes at your
doorstep</h2>
<p class="text-white mb-2 sm:mb-4">We supply highly quality organic products</p>
<a href="#" class="bg-red-500 text-white px-2 sm:px-4 py-2 rounded">Shop Now</a>
</div>
</div>
<div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
<a href="#slide1" class="btn btn-sm">❮</a>
<a href="#slide3" class="btn btn-sm">❯</a>
</div>
</div>
<!-- slide 3 -->
<div id="slide3"
class="flex justify-content items-center carousel-item relative h-48 lg:h-auto w-full bg-[url('./images/banner3.png')] bg-cover">
<div class="m-auto">
<div class="text-center">
<h2 class="text-white text-2xl mb-2 font-bold sm:text-3xl sm:mb-4">Exotic tastes at your
doorstep</h2>
<p class="text-white mb-2 sm:mb-4">We supply highly quality organic products</p>
<a href="#" class="bg-red-500 text-white px-2 sm:px-4 py-2 rounded">Shop Now</a>
</div>
</div>
<div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
<a href="#slide2" class="btn btn-sm">❮</a>
<a href="#slide4" class="btn btn-sm">❯</a>
</div>
</div>
<!-- slide 4 -->
<div id="slide4"
class="flex justify-content items-center carousel-item relative h-48 lg:h-auto w-full bg-[url('./images/banner4.png')] bg-cover">
<div class="m-auto">
<div class="text-center">
<h2 class="text-white text-2xl mb-2 font-bold sm:text-3xl sm:mb-4">Exotic tastes at your
doorstep</h2>
<p class="text-white mb-2 sm:mb-4">We supply highly quality organic products</p>
<a href="#" class="bg-red-500 text-white px-2 sm:px-4 py-2 rounded">Shop Now</a>
</div>
</div>
<div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
<a href="#slide3" class="btn btn-sm">❮</a>
<a href="#slide1" class="btn btn-sm">❯</a>
</div>
</div>
</div>
</div>
</section>
<!-- slider section end -->
<!-- image under slide -->
<div
class="hidden lg:flex justify-center space-x-8 gap-16 p-4 mx-72 bg-white rounded-xl shadow-md relative -top-24">
<div class="text-center">
<img src="./images/fruit1.png" alt="Image 1" class="w-36 h-28 object-cover">
<p class="text-sm">Grapes</p>
</div>
<div class="text-center">
<img src="./images/fruit2.png" alt="Image 2" class="w-36 h-28 object-cover">
<p class="text-sm">Orange</p>
</div>
<div class="text-center">
<img src="./images/fruit3.png" alt="Image 3" class="w-36 h-28 object-cover">
<p class="text-sm">Mango</p>
</div>
<div class="text-center">
<img src="./images/fruit4.png" alt="Image 4" class="w-36 h-28 object-cover">
<p class="text-sm">Strawberry</p>
</div>
<div class="text-center">
<img src="./images/fruit5.png" alt="Image 5" class="w-36 h-28 object-cover">
<p class="text-sm">Pomegranate</p>
</div>
</div>
<!-- image under slide end -->
<!-- Deal of the day -->
<section class=" mx-4 sm:mx-60 my-4 sm:my-10">
<!-- Deal of the day - first block -->
<div class="flex lg:justify-between my-12 flex-col lg:flex-row">
<!-- Left Block -->
<div class="w-auto lg:w-1/2 pr-4 text-center lg:text-left">
<h2 class="font-bold text-2xl lg:text-5xl my-4">Deal of the day</h2>
<p>Contrary to popular belief, is not simply random text. It has roots in a piece of classical Latin
literature from 45 BC, making it over 2000 years old.</p>
</div>
<!-- Right Block -->
<div class="w-auto lg:w-1/2 pr-4 text-center lg:text-right mt-6">
<div class="text-center flex justify-center lg:justify-end">
<!-- Countdown -->
<div class="grid grid-flow-col gap-5 text-center auto-cols-max ">
<div class="flex flex-col">
<span class="countdown font-mono font-bold text-2xl lg:text-5xl my-4">
<span style="--value:15;"></span>
</span>
days
</div>
<div class="flex flex-col">
<span class="countdown font-mono font-bold text-2xl lg:text-5xl my-4">
<span style="--value:10;"></span>
</span>
hours
</div>
<div class="flex flex-col">
<span class="countdown font-mono font-bold text-2xl lg:text-5xl my-4">
<span style="--value:24;"></span>
</span>
min
</div>
<div class="flex flex-col">
<span class="countdown font-mono font-bold text-2xl lg:text-5xl my-4">
<span style="--value:16;"></span>
</span>
sec
</div>
</div>
</div>
</div>
</div>
<!-- Deal of the day - first block end -->
<!-- Deal of the day - box start -->
<div class="grid grid-cols-1 lg:grid-cols-4 gap-4 ">
<!-- First box -->
<div
class="flex flex-col items-center bg-white mx-4 lg:mx-0 p-4 rounded shadow border-1 border-black gap-4 ">
<img src="./images/fruit6.png" class="my-10">
<h3 class="text-lg mb-2 text-2xl font-bold text-black">12.90$ - 18.85$</h3>
<hr class="w-9/12 lg:w-full mb-2">
<p class="mb-2 text-gray-500">Apples</p>
<div class="rating">
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
</div>
<!-- Open the modal using ID.showModal() method -->
<button class="text-orange-600" onclick="my_modal_1.showModal()">Details</button>
<dialog id="my_modal_1" class="modal modal-bottom sm:modal-middle">
<form method="dialog"
class="modal-box bg-white flex flex-col items-center p-4 rounded shadow border-1 border-black gap-4 rounded-3xl">
<img src="./images/fruit6.png" class="my-10 m-auto">
<h2 class="text-lg mb-2 text-2xl font-bold text-black">Apple</h2>
<p class="text-gray-600 max-w-md text-center">Professional employees are there for you to
pick the most amazing and fresh fruits.</p>
<div class="rating">
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
</div>
<br>
<div class="modal-action">
<!-- if there is a button in form, it will close the modal -->
<button class="btn">Close</button>
<a href="#" class="bg-red-500 text-white px-4 py-2 rounded">Buy Now</a>
</div>
</form>
</dialog>
</div>
<!-- second box -->
<div
class="flex flex-col items-center bg-white mx-4 lg:mx-0 p-4 rounded shadow border-1 border-black gap-4 ">
<img src="./images/fruit7.png" class="my-10">
<h3 class="text-lg mb-2 text-2xl font-bold text-black">12.90$ - 18.85$</h3>
<hr class="w-9/12 lg:w-full mb-2">
<p class="mb-2 text-gray-500">Orange</p>
<div class="rating">
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
</div>
<!-- Open the modal using ID.showModal() method -->
<button class="text-orange-600" onclick="my_modal_2.showModal()">Details</button>
<dialog id="my_modal_2" class="modal modal-bottom sm:modal-middle">
<form method="dialog"
class="modal-box bg-white flex flex-col items-center p-4 rounded shadow border-1 border-black gap-4 rounded-3xl">
<img src="./images/fruit7.png" class="my-10 m-auto">
<h2 class="text-lg mb-2 text-2xl font-bold text-black">Orange</h2>
<p class="text-gray-600 max-w-md text-center">Professional employees are there for you to
pick the most amazing and fresh fruits.</p>
<div class="rating">
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
</div>
<br>
<div class="modal-action">
<!-- if there is a button in form, it will close the modal -->
<button class="btn">Close</button>
<a href="#" class="bg-red-500 text-white px-4 py-2 rounded">Buy Now</a>
</div>
</form>
</dialog>
</div>
<!-- third box -->
<div
class="flex flex-col items-center bg-white mx-4 lg:mx-0 p-4 rounded shadow border-1 border-black gap-4 ">
<img src="./images/fruit8.png" class="my-10">
<h3 class="text-lg mb-2 text-2xl font-bold text-black">12.90$ - 18.85$</h3>
<hr class="w-9/12 lg:w-full mb-2">
<p class="mb-2 text-gray-500">Red Dragon</p>
<div class="rating">
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
</div>
<!-- Open the modal using ID.showModal() method -->
<button class="text-orange-600" onclick="my_modal_3.showModal()">Details</button>
<dialog id="my_modal_3" class="modal modal-bottom sm:modal-middle">
<form method="dialog"
class="modal-box bg-white flex flex-col items-center p-4 rounded shadow border-1 border-black gap-4 rounded-3xl">
<img src="./images/fruit8.png" class="my-10 m-auto">
<h2 class="text-lg mb-2 text-2xl font-bold text-black">Red Dragon</h2>
<p class="text-gray-600 max-w-md text-center">Professional employees are there for you to
pick the most amazing and fresh fruits.</p>
<div class="rating">
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
</div>
<br>
<div class="modal-action">
<!-- if there is a button in form, it will close the modal -->
<button class="btn">Close</button>
<a href="#" class="bg-red-500 text-white px-4 py-2 rounded">Buy Now</a>
</div>
</form>
</dialog>
</div>
<!-- forth box -->
<div
class="flex flex-col items-center bg-white mx-4 lg:mx-0 p-4 rounded shadow border-1 border-black gap-4 ">
<img src="./images/fruit9.png" class="my-10">
<h3 class="text-lg mb-2 text-2xl font-bold text-black">12.90$ - 18.85$</h3>
<hr class="w-9/12 lg:w-full mb-2">
<p class="mb-2 text-gray-500">Banana</p>
<div class="rating">
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
</div>
<!-- Open the modal using ID.showModal() method -->
<button class="text-orange-600" onclick="my_modal_4.showModal()">Details</button>
<dialog id="my_modal_4" class="modal modal-bottom sm:modal-middle">
<form method="dialog"
class="modal-box bg-white flex flex-col items-center p-4 rounded shadow border-1 border-black gap-4 rounded-3xl">
<img src="./images/fruit9.png" class="my-10 m-auto">
<h2 class="text-lg mb-2 text-2xl font-bold text-black">Banana</h2>
<p class="text-gray-600 max-w-md text-center">Professional employees are there for you to
pick the most amazing and fresh fruits.</p>
<div class="rating">
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
</div>
<br>
<div class="modal-action">
<!-- if there is a button in form, it will close the modal -->
<button class="btn">Close</button>
<a href="#" class="bg-red-500 text-white px-4 py-2 rounded">Buy Now</a>
</div>
</form>
</dialog>
</div>
</div>
<!-- Deal of the day - box end -->
<div class="flex justify-center m-10">
<a href="#" class="bg-red-500 text-white px-4 py-2 rounded text-center">Shop Now</a>
</div>
</section>
<!-- Meet the team section start -->
<section class="mx-4 sm:mx-60 my-4 sm:my-10">
<div class="hero" style="background-image: url('./images/banner1.png');">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content flex flex-col py-0 lg:py-24">
<div class="text-center text-white">
<h1 class="font-bold text-2xl lg:text-5xl my-4">Meet the team</h1>
<p class="m-auto">
Contrary to popular belief, is not simply random text. It has
roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</p>
</div>
<!-- Meet the Team members -->
<div class="text-center">
<!-- Team Grid -->
<div class="grid grid-cols-1 my-12 gap-12 lg:gap-24 lg:grid-cols-4 ">
<!-- Team Member 1 -->
<div class="text-white">
<img src="./images/member1.png" alt="Team Member Name"
class="w-24 h-24 sm:w-36 sm:h-36 object-cover rounded-full mb-4 m-auto">
<h3 class="text-lg">Awlad Hossain</h3>
<p class="text-sm mb-4">Fruits Expert</p>
<!-- Social Icons -->
<div class="flex justify-center space-x-4">
<a href="#">
<i class="fa-brands fa-facebook"></i>
</a>
<a href="#">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#">
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
<!-- Team Member 2 -->
<div class="text-white">
<img src="./images/member2.png" alt="Team Member Name"
class="w-24 h-24 sm:w-36 sm:h-36 object-cover rounded-full mb-4 m-auto">
<h3 class="text-lg">Safia Chowdhury</h3>
<p class="text-sm mb-4">Fruits Expert</p>
<!-- Social Icons -->
<div class="flex justify-center space-x-4">
<a href="#">
<i class="fa-brands fa-facebook"></i>
</a>
<a href="#">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#">
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
<!-- Team Member 3 -->
<div class="text-white">
<img src="./images/member3.png" alt="Team Member Name"
class="w-24 h-24 sm:w-36 sm:h-36 object-cover rounded-full mb-4 m-auto">
<h3 class="text-lg">Rokib Hossain</h3>
<p class="text-sm mb-4">Fruits Expert</p>
<!-- Social Icons -->
<div class="flex justify-center space-x-4">
<a href="#">
<i class="fa-brands fa-facebook"></i>
</a>
<a href="#">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#">
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
<!-- Team Member 4 -->
<div class="text-white">
<img src="./images/member4.png" alt="Team Member Name"
class="w-24 h-24 sm:w-36 sm:h-36 object-cover rounded-full mb-4 m-auto">
<h3 class="text-lg">Chaity</h3>
<p class="text-sm mb-4">Fruits Expert</p>
<!-- Social Icons -->
<div class="flex justify-center space-x-4">
<a href="#">
<i class="fa-brands fa-facebook"></i>
</a>
<a href="#">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#">
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Meet the team section end -->
<!-- why choose use section start -->
<section class=" mx-4 sm:mx-60 my-4 sm:my-10">
<div class="text-center mt-20 mb-10">
<h2 class="font-bold text-2xl lg:text-5xl my-4">Why Choose Us</h2>
<p class="text-black">Contrary to popular belief, is not simply random text. It has roots in a piece of
classical Latin literature from 45 BC, making it over 2000 years old.</p>
</div>
<div class="flex flex-col lg:flex-row justify-between items-center gap-4 lg:gap-10">
<!-- fist-left -->
<div class="order-2 lg:order-1">
<!-- box 1 -->
<div class="flex flex-col lg:flex-row justify-center items-center gap-4 pb-12">
<div class="border-gray-800 border rounded-full p-2">
<i class="fa-solid fa-fire fa-2xl"></i>
</div>
<div class="flex flex-col items-center lg:items-start">
<h1 class="font-bold">Dedicated Team</h1>
<hr class="w-24 my-2">
<p class="text-center lg:text-left">Professional employees are there for you to pick the
most amazing and fresh fruits.
</p>
</div>
</div>
<!-- box 2 -->
<div class="flex flex-col lg:flex-row justify-center items-center gap-4 pb-12">
<div class="border-gray-800 border rounded-full p-2">
<i class="fa-solid fa-tree fa-2xl"></i>
</div>
<div class="flex flex-col items-center lg:items-start">
<h1 class="font-bold">Fresh is Best</h1>
<hr class="w-24 my-2">
<p class="text-center lg:text-left">Professional employees are there for you to pick the
most amazing and fresh fruits.
</p>
</div>
</div>
<!-- box 3 -->
<div class="flex flex-col lg:flex-row justify-center items-center gap-4 pb-12">
<div class="border-gray-800 border rounded-full p-2">
<i class="fa-solid fa-certificate fa-2xl"></i>
</div>
<div class="flex flex-col items-center lg:items-start">
<h1 class="font-bold">Gift Certificates</h1>
<hr class="w-24 my-2">
<p class="text-center lg:text-left">Professional employees are there for you to pick the
most amazing and fresh fruits.
</p>
</div>
</div>
</div>
<!-- image -->
<div class="pb-4 lg:pb-0 order-1 lg:order-2">
<img class="w-full" src="./images/whychoose1.png" alt="Logo">
</div>
<!-- fist-right -->
<div class="text-left lg:text-right order-3 lg:order-3">
<!-- box 1 -right -->
<div class="flex flex-col lg:flex-row-reverse justify-center items-center gap-4 pb-12">
<div class="border-gray-800 border rounded-full p-2">
<i class="fa-brands fa-dropbox fa-xl"></i>
</div>
<div class="flex flex-col items-center lg:items-end">
<h1 class="font-bold">Integrated Supplier</h1>
<hr class="w-24 my-2">
<p class="text-center lg:text-right">Professional employees are there for you to pick
the most amazing and fresh fruits.
</p>
</div>
</div>
<!-- box 2 -right-->
<div class="flex flex-col lg:flex-row-reverse justify-center items-center gap-4 pb-12">
<div class="border-gray-800 border rounded-full p-2">
<i class="fa-solid fa-percent fa-2xl"></i>
</div>
<div class="flex flex-col items-center lg:items-end">
<h1 class="font-bold">Sustainable Practice</h1>
<hr class="w-24 my-2">
<p class="text-center lg:text-right">Professional employees are there for you to pick
the most amazing and fresh fruits.
</p>
</div>
</div>
<!-- box 3 -right-->
<div class="flex flex-col lg:flex-row-reverse justify-center items-center gap-4 pb-12">
<div class="border-gray-800 border rounded-full p-2">
<i class="fa-solid fa-earth-americas fa-2xl"></i>
</div>
<div class="flex flex-col items-center lg:items-end">
<h1 class="font-bold">The Benefits Only</h1>
<hr class="w-24 my-2">
<p class="text-center lg:text-right">Professional employees are there for you to pick
the most amazing and fresh fruits.
</p>
</div>
</div>
</div>
</div>
</section>
<footer class="footer footer-center p-10 bg-base-200 text-base-content rounded bg-black text-white">
<div class="flex gap-4">
<img src="./images/logo.png">
<h2 class="text-left text-black font-bold text-white text-2xl lg:text-4xl align-baseline m-auto">Fruit
Burst</h2>
</div>
<div class="grid grid-flow-col gap-4">
<a class="#">Home</a>
<a class="#">About</a>
<a class="#">Shop</a>
<a class="#">Support</a>
</div>
<div>
<div class="grid grid-flow-col gap-4">
<a><i class="fa-brands fa-youtube fa-xl"></i></a>
<a><i class="fa-brands fa-twitter fa-xl"></i></a>
<a><i class="fa-brands fa-facebook fa-xl"></i></a>
<a><i class="fa-brands fa-instagram fa-xl"></i></a>
<a><i class="fa-brands fa-linkedin fa-xl"></i></a>
</div>
</div>
</footer>
</main>
</body>
</html>Editor is loading...