<!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="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css"
/>
<link rel="stylesheet" href="/css/main.css" />
</head>
<body>
<!-- Navbar Start -->
<nav class="bg-white border-gray-200 dark:bg-green-600 shadow-md">
<div
class="container flex flex-wrap items-center justify-between mx-auto p-4"
>
<a
href="/"
class="flex items-center space-x-3 rtl:space-x-reverse"
>
<h3 class="text-white font-medium text-xl">Agricultural Hub</h3>
</a>
<button
data-collapse-toggle="navbar-default"
type="button"
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
aria-controls="navbar-default"
aria-expanded="false"
>
<span class="sr-only">Open main menu</span>
<svg
class="w-5 h-5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 17 14"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 1h15M1 7h15M1 13h15"
/>
</svg>
</button>
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
<ul
class="font-medium flex flex-col p-4 md:p-0 mt-4 border md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0"
>
<li>
<a
href="/index"
class="nav-link block py-2 px-3 rounded-sm text-white hover:underline hover:font-bold md:p-0"
>Home</a
>
</li>
<li>
<a
href="pages/about.html"
class="nav-link block py-2 px-3 rounded-sm text-white hover:underline hover:font-bold md:p-0"
>About</a
>
</li>
<li>
<a
href="pages/crop-details.html"
class="nav-link block py-2 px-3 rounded-sm text-white hover:underline hover:font-bold md:p-0"
>Crop Details</a
>
</li>
<li>
<a
href="pages/farming-guide.html"
class="nav-link block py-2 px-3 rounded-sm text-white hover:underline hover:font-bold md:p-0"
>Farming Guide</a
>
</li>
<li>
<a
href="pages/pest-control.html"
class="nav-link block py-2 px-3 rounded-sm text-white hover:underline hover:font-bold md:p-0"
>Pest Control</a
>
</li>
<li>
<a
href="pages/contact-us.html"
class="nav-link block py-2 px-3 rounded-sm text-white hover:underline hover:font-bold md:p-0"
>Contact Us</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar End -->
<!-- Slider Starts -->
<div id="default-carousel" class="relative w-full" data-carousel="slide">
<!-- Carousel wrapper -->
<div class="relative h-56 overflow-hidden md:h-[500px]">
<!-- Item 1 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img decoding="async" src="/img/fields-1757089163604-9824.jpg" class="" alt="..." />
</div>
</div>
<!-- Slider indicators -->
<div
class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse"
>
<button
type="button"
class="w-3 h-3 rounded-full"
aria-current="true"
aria-label="Slide 1"
data-carousel-slide-to="0"
></button>
<button
type="button"
class="w-3 h-3 rounded-full"
aria-current="false"
aria-label="Slide 2"
data-carousel-slide-to="1"
></button>
<button
type="button"
class="w-3 h-3 rounded-full"
aria-current="false"
aria-label="Slide 3"
data-carousel-slide-to="2"
></button>
<button
type="button"
class="w-3 h-3 rounded-full"
aria-current="false"
aria-label="Slide 4"
data-carousel-slide-to="3"
></button>
<button
type="button"
class="w-3 h-3 rounded-full"
aria-current="false"
aria-label="Slide 5"
data-carousel-slide-to="4"
></button>
</div>
<!-- Slider controls -->
<button
type="button"
class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
data-carousel-prev
>
<span
class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
>
<svg
class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 6 10"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 1 1 5l4 4"
/>
</svg>
<span class="sr-only">Previous</span>
</span>
</button>
<button
type="button"
class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
data-carousel-next
>
<span
class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
>
<svg
class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 6 10"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m1 9 4-4-4-4"
/>
</svg>
<span class="sr-only">Next</span>
</span>
</button>
</div>
<!-- Slider Ends-->
<!-- Introduction Start-->
<section class="container mx-auto py-20 px-4">
<div class="flex flex-col md:flex-row items-center md:items-start gap-8">
<div class="md:w-1/2">
<img decoding="async"
src="/img//farmer.jpg"
alt="Two people in a field smiling"
class="w-full h-auto xl:h-[332px] object-cover rounded-lg shadow-lg"
/>
</div>
<div class="md:w-1/2">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Introduction</h2>
<p class="text-gray-600 leading-relaxed">
The Agricultural Information Hub is a vital digital platform
designed to consolidate and disseminate essential knowledge for
modern farming communities. Its primary purpose is to bridge the
information gap that often hinders productivity and sustainable
practices in agriculture. By serving as a centralized repository,
the Hub offers farmers, researchers, extension workers, and
policymakers easy access to up-to-date data on best farming
techniques, market trends, weather forecasts, disease management
protocols, and innovative technologies. Ultimately, the Hub aims to
empower stakeholders with the necessary insights to make informed
decisions, optimize resource utilization, enhance crop yields, and
foster resilience against climate change. It is a critical tool for
driving digital transformation in the agricultural sector, promoting
food security, and ensuring the long-term sustainability of farming
livelihoods globally.
</p>
</div>
</div>
</section>
<!-- Introduction End-->
<!-- Farming Guide Section Start -->
<section class="bg-green-100 py-20 px-4">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-8">Farming Guide</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="relative w-full" style="padding-top: 56.25%">
<iframe
class="absolute top-0 left-0 w-full h-full"
src="https://www.youtube.com/embed/I1PFLIvUgnw"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Soil Preparation</h3>
<p class="text-sm text-gray-600 mb-4">
How to prepare your soil for crop growth.
</p>
<a
href="#"
class="inline-block bg-green-500 text-white text-sm px-4 py-2 rounded-md hover:bg-green-600 transition-colors"
>Detailed View</a
>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="relative w-full" style="padding-top: 56.25%">
<iframe
class="absolute top-0 left-0 w-full h-full"
src="https://www.youtube.com/embed/Xej22GsLLQA?si=o0vMNldv3TFYnt1U"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Irrigation Techniques</h3>
<p class="text-sm text-gray-600 mb-4">
Discover efficient irrigation methods for your farm.
</p>
<a
href="#"
class="inline-block bg-green-500 text-white text-sm px-4 py-2 rounded-md hover:bg-green-600 transition-colors"
>Detailed View</a
>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="relative w-full" style="padding-top: 56.25%">
<iframe
class="absolute top-0 left-0 w-full h-full"
src="https://www.youtube.com/embed/XeNA6XdMoF8?si=5eeEnpvlrOamboJg"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Crop Rotation</h3>
<p class="text-sm text-gray-600 mb-4">
Understand the benefits of crop rotation for soil.
</p>
<a
href="#"
class="inline-block bg-green-500 text-white text-sm px-4 py-2 rounded-md hover:bg-green-600 transition-colors"
>Detailed View</a
>
</div>
</div>
</div>
</div>
</section>
<!-- Farming Guide Section End -->
<!-- Crop Details Section Start -->
<section class="py-20 px-4">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-8">Crop Details</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img decoding="async"
src="img/wheat.jpg"
alt="Wheat crops"
class="w-full h-auto object-cover"
/>
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Wheat</h3>
<p class="text-sm text-gray-600">
Information on growing and harvesting wheat.
</p>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img decoding="async"
src="img/istockphoto-165646486-612x612.jpg"
alt="Rice crops"
class="w-full h-auto object-cover"
/>
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Rice</h3>
<p class="text-sm text-gray-600">
Everything you need to know about rice cultivation.
</p>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img decoding="async"
src="img/corn.jpg"
alt="Corn crops"
class="w-full h-auto object-cover"
/>
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Corn</h3>
<p class="text-sm text-gray-600">
Natural methods to control pests without chemicals
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Crop Details Section End -->
<!-- Pest Control Section Start -->
<section class="py-20 bg-green-100 px-4">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-8">
Pest Control Strategies
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="relative w-full" style="padding-top: 56.25%">
<iframe
class="absolute top-0 left-0 w-full h-full"
src="https://www.youtube.com/embed/YsbdHIENEGM?si=W8Qon1tllurSeiFX"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Organic Pest Control</h3>
<p class="text-sm text-gray-600">
Safe and effective use of pesticides.
</p>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="relative w-full" style="padding-top: 56.25%">
<iframe
class="absolute top-0 left-0 w-full h-full"
src="https://www.youtube.com/embed/lH_8N9HRsys?si=T5JTSI7CUW1rnlL9"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Chemical Pest Control</h3>
<p class="text-sm text-gray-600">
Safe and effective use of pesticides.
</p>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="relative w-full" style="padding-top: 56.25%">
<iframe
class="absolute top-0 left-0 w-full h-full"
src="https://www.youtube.com/embed/z2AMnP4nn2E?si=rykPPKyOqN5zYAjN"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Integrated Pest Management</h3>
<p class="text-sm text-gray-600">
Combining methods for sustainable pest control.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Pest Control Section End -->
<!-- Contact Us Section Start -->
<section class="py-20 px-4">
<div class="container mx-auto max-w-xl">
<h2 class="text-3xl font-bold text-center mb-8">Contact Us</h2>
<form class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700"
>Name</label
>
<input
type="text"
id="name"
class="mt-1 block w-full rounded-md border-gray-300 bg-white shadow-sm focus:border-green-500 focus:ring focus:ring-green-200 py-2"
style="border-width: 1.5px"
/>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700"
>Email</label
>
<input
type="email"
id="email"
class="mt-1 block w-full rounded-md border-gray-300 bg-white shadow-sm focus:border-green-500 focus:ring focus:ring-green-200 py-2"
style="border-width: 1.5px"
/>
</div>
<div>
<label
for="expertise"
class="block text-sm font-medium text-gray-700"
>Agricultural Expertise</label
>
<input
type="text"
id="expertise"
placeholder="e.g., Soil Science, Irrigation, Crop Protection"
class="mt-1 block w-full rounded-md border-gray-300 bg-white shadow-sm focus:border-green-500 focus:ring focus:ring-green-200 py-2"
style="border-width: 1.5px"
/>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700"
>Message</label
>
<textarea
id="message"
rows="4"
class="mt-1 block w-full rounded-md border-gray-300 bg-white shadow-sm focus:border-green-500 focus:ring focus:ring-green-200"
style="border-width: 1.5px"
></textarea>
</div>
<div>
<label
for="file_upload"
class="block text-sm font-medium text-gray-700"
>Upload File (Optional)</label
>
<input
type="file"
id="file_upload"
class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-gray-400 file:border-[1.5px] file:text-sm file:font-semibold file:bg-green-50 file:text-green-700 hover:file:bg-green-100"
/>
</div>
<button
type="submit"
class="w-full bg-green-500 text-white py-2 rounded-md hover:bg-green-600 transition-colors duration-300"
>
Submit
</button>
</form>
<div class="mt-8 text-center text-sm text-gray-700">
<p>
For direct support, contact our Agricultural Extension Services:
</p>
<p class="font-medium">
Phone: +880-1234-567890 | Email: info@agriculturalhub.com
</p>
</div>
</div>
</section>
<!-- Contact Us Section End -->
<!-- Footer Start -->
<footer class="bg-green-600 text-white py-8 mt-auto">
<div class="container mx-auto px-4 text-center">
<p>© 2025 Agricultural Information Hub. All Rights Reserved.</p>
<p id="current-time" class="mt-2"></p>
</div>
</footer>
<!-- Footer End -->
<section class="relative h-64 bg-cover bg-center" style="background-image: url('/img/fields-1757089163604-9824.jpg')">
<div class="absolute inset-0 bg-black/50"></div>
<div class="relative z-10 flex items-center justify-center h-full">
<div class="text-center">
<h3 class="text-white text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold">
Crop Details
</h3>
</div>
</div>
</section>
<!-- JavaScript for time in footer -->
<p id="current-time" class="mt-2"></p>
<script>
document.getElementById("current-time").textContent =
new Date().toLocaleString();
</script>
<!-- Flowbite CDN -->
<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sirajul Arefin</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Import the Outfit font */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* Apply custom styles and font */
body {
font-family: 'Outfit', sans-serif;
}
/* Define custom colors and patterns for Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;
.pattern-boxes {
background-image: radial-gradient(var(--tw-pattern-color) 4%, transparent 4%),
radial-gradient(var(--tw-pattern-color) 4%, transparent 4%);
background-position: var(--tw-pattern-size) var(--tw-pattern-size), 0 0;
background-size: calc(2 * var(--tw-pattern-size)) calc(2 * var(--tw-pattern-size));
}
.pattern-blue-500 {
--tw-pattern-color: #3b82f6;
}
.pattern-size-4 {
--tw-pattern-size: 1rem;
}
.pattern-opacity-5 {
--tw-pattern-opacity: 0.05;
}
/* Hamburger Menu Styling */
.hamburger {
cursor: pointer;
width: 24px;
height: 24px;
transition: all 0.25s;
position: relative;
}
.hamburger-top,
.hamburger-middle,
.hamburger-bottom {
position: absolute;
width: 24px;
height: 2px;
top: 0;
left: 0;
background: #fff;
transform: rotate(0);
transition: all 0.5s;
}
.hamburger-middle {
transform: translateY(7px);
}
.hamburger-bottom {
transform: translateY(14px);
}
.open {
transform: rotate(90deg);
transform: translateY(0px);
}
.open .hamburger-top {
transform: rotate(45deg) translateY(6px) translate(6px);
}
.open .hamburger-middle {
display: none;
}
.open .hamburger-bottom {
transform: rotate(-45deg) translateY(6px) translate(-6px);
}
</style>
</head>
<body class="bg-gray-950 text-white">
<!-- Header Section -->
<header class="py-4 top-0 sticky border-b border-b-slate-500 border-opacity-15 px-4 sm:px-6 md:px-8 bg-slate-900 opacity-95 z-50">
<!-- Container-->
<div class="max-w-7xl mx-auto">
<!-- Navbar-->
<nav class="flex items-center justify-between">
<!-- Logo -->
<div>
<a href="#"><span class="font-bold text-2xl">Sirajul Arefin</span></a>
</div>
<!-- Menu -->
<div>
<ul class="hidden md:flex space-x-5 capitalize">
<li><a href="/" class="hover:bg-purple-500 px-4 py-1 rounded">home</a></li>
<li><a href="#about" class="hover:bg-purple-500 px-4 py-1 rounded">about</a></li>
<li><a href="#project" class="hover:bg-purple-500 px-4 py-1 rounded">projects</a></li>
<li><a href="https://docs.google.com/document/d/1ofvB7Cyqb9XlYl5YVfBpRPWGAl_zrXaJjVcAmfVDTVA/edit?usp=sharing"
class="hover:bg-purple-500 px-4 py-1 rounded">resume</a></li>
<li><a href="#skill" class="hover:bg-purple-500 px-4 py-1 rounded">skills</a></li>
</ul>
</div>
</nav>
</div>
<!-- Hamburger Icon -->
<button id="menu-btn" class="block hamburger md:hidden focus:outline-none text-white">
<span class="hamburger-top"></span>
<span class="hamburger-middle"></span>
<span class="hamburger-bottom"></span>
</button>
<!-- Mobile Menu -->
<div class="md:hidden">
<div id="menu"
class="absolute capitalize flex-col items-center hidden self-end py-8 mt-10 space-y-6 font-bold text-purple-500 bg-white sm:w-auto sm:self-center left-6 right-6 rounded-md drop-shadow-md">
<a href="/">home</a>
<a href="#about">about</a>
<a href="#project">projects</a>
<a href="#">resume</a>
<a href="#skill">skills</a>
</div>
</div>
</header>
<!-- Hero Section -->
<section id="about" class="py-[60px] sm:py-[100px] xl:py-[219px] px-4 sm:px-6 md:px-8 bg-gray-900 relative ">
<div
class="pattern-boxes pattern-blue-500 pattern-size-4 pattern-opacity-5 absolute inset-0 opacity-[0.04] overflow-hidden ">
</div>
<!-- Container -->
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-8 z-10 relative ">
<!-- blobs-->
<div
class="absolute left-[-100px] top-[-80px] m-auto w-[500px] h-[400px] rounded-full bg-blue-800 opacity-60 blur-[100px] -z-40">
</div>
<div
class="absolute right-[-100px] bottom-[-11px] -z-50 m-auto w-[500px] h-[400px] rounded-full bg-purple-500 opacity-30 blur-[100px]">
</div>
<!-- blobs end-->
<!-- Left Item-->
<div class="col-span-1 order-2 md:order-1 text-center md:text-left ">
<p class="text-xl sm:text-3xl md:text-2xl lg:text-3xl mb-5 text-slate-200">Hello! World</p>
<h1
class="font-medium capitalize text-4xl sm:text-6xl md:text-[42px] lg:text-6xl xl:text-7xl tracking-normal text-slate-200 mb-5">
I'm
Sirajul Arefin</h1>
<span class="text-2xl sm:text-4xl md:text-[27px] lg:text-4xl xl:text-6xl text-purple-500"> < <span
class="text-white">Web Developer</span>
> </span>
<h2 class=" my-8 text-lg text-slate-300">
I am a front-end web developer specializing in HTML, CSS, Tailwind CSS, Bootstrap, JavaScript,
React, WordPress, Elementor Pro, and WooCommerce. With a strong focus on functionality and
performance,
I craft professional-grade websites and user interfaces.
</h2>
<!-- Buttons -->
<div class="mx-auto lg:mx-0 text-center lg:text-left">
<!-- Button 1 -->
<a href="https://www.linkedin.com/in/md-sirajul-arefin/"
class="px-4 py-2 xl:py-4 sm:px-6 md:px-4 lg:px-10 xl:px-16 text-center text-xs sm:text-base md:text-sm lg:text-base font-medium uppercase inline-block bg-purple-500 border border-purple-500 rounded-full mb-3 mr-4 sm:mr-5 lg:mr-5">say
hello</a>
<!-- Button 2 -->
<a href="https://docs.google.com/document/d/1ofvB7Cyqb9XlYl5YVfBpRPWGAl_zrXaJjVcAmfVDTVA/edit?usp=sharing"
class="px-4 py-2 xl:py-4 sm:px-6 md:px-4 lg:px-10 xl:px-16 text-center text-xs sm:text-base font-medium uppercase inline-block border border-solid rounded-full">download
resume</a>
</div>
</div>
<!-- Right Item-->
<div class="col-span-1 order-1 lg:order-2 grid items-center justify-center">
<img decoding="async" src="https://placehold.co/300x400/222831/ffffff?text=Hero+Image" class="max-w-[200px] sm:max-w-[300px] l" alt="">
</div>
</div>
</section>
<!-- Hero Section end -->
<!-- skill Section-->
<section id="skill"
class="py-10 sm:py-24 border-t border-t-slate-500 border-opacity-15 relative px-4 sm:px-6 md:px-8 bg-slate-900 z-20">
<!-- Container-->
<div class="max-w-7xl mx-auto">
<h2
class="text-center font-semibold text-3xl capitalize sm:text-4xl lg:text-5xl tracking-normal text-slate-200 dark:text-white mb-4">
My <span class="text-purple-500">tech stack</span>
</h2>
<p class="text-center text-2xl text-slate-400 mb-10">Technology I have been worked recently</p>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
<div class="col-span-1">
<div
class=" py-5 sm:py-10 lg:py-10 border border-slate-700 flex items-start justify-center bg-gray-800 rounded-xl">
<div>
<img decoding="async" src="https://placehold.co/150x150/222831/ffffff?text=Tailwind+CSS" alt=""
class="max-w-16 sm:max-w-32 md:max-w-36 m-auto">
<h3 class="text-center mt-2 text-lg">Tailwind CSS</h3>
</div>
</div>
</div>
<div class="col-span-1">
<div
class=" py-5 sm:py-10 lg:py-10 border border-slate-700 flex items-start justify-center bg-gray-800 rounded-xl">
<div>
<img decoding="async" src="https://placehold.co/150x150/222831/ffffff?text=Bootstrap" alt=""
class="max-w-16 sm:max-w-32 md:max-w-36 m-auto">
<h3 class="text-center mt-2 text-lg">Bootstrap</h3>
</div>
</div>
</div>
<div class="col-span-1">
<div
class=" py-5 sm:py-10 lg:py-10 border border-slate-700 flex items-start justify-center bg-gray-800 rounded-xl">
<div>
<img decoding="async" src="https://placehold.co/150x150/222831/ffffff?text=JavaScript" alt=""
class="max-w-16 sm:max-w-32 md:max-w-36 m-auto">
<h3 class="text-center mt-2 text-lg">JavaScript</h3>
</div>
</div>
</div>
<div class="col-span-1">
<div
class=" py-5 sm:py-10 lg:py-10 border border-slate-700 flex items-start justify-center bg-gray-800 rounded-xl">
<div>
<img decoding="async" src="https://placehold.co/150x150/222831/ffffff?text=React" alt=""
class="max-w-16 sm:max-w-32 md:max-w-36 m-auto">
<h3 class="text-center mt-2 text-lg">React</h3>
</div>
</div>
</div>
<div class="col-span-1">
<div
class=" py-5 sm:py-10 lg:py-10 border border-slate-700 flex items-start justify-center bg-gray-800 rounded-xl">
<div>
<img decoding="async" src="https://placehold.co/150x150/222831/ffffff?text=Elementor" alt=""
class="max-w-16 sm:max-w-32 md:max-w-36 m-auto">
<h3 class="text-center mt-2 text-lg">Elementor</h3>
</div>
</div>
</div>
<div class="col-span-1">
<div
class=" py-5 sm:py-10 lg:py-10 border border-slate-700 flex items-start justify-center bg-gray-800 rounded-xl">
<div>
<img decoding="async" src="https://placehold.co/150x150/222831/ffffff?text=WordPress" alt=""
class="max-w-16 sm:max-w-32 md:max-w-36 m-auto">
<h3 class="text-center mt-2 text-lg">WordPress</h3>
</div>
</div>
</div>
<div class="col-span-1">
<div
class=" py-5 sm:py-10 lg:py-10 border border-slate-700 flex items-start justify-center bg-gray-800 rounded-xl">
<div>
<img decoding="async" src="https://placehold.co/150x150/222831/ffffff?text=WooCommerce" alt=""
class="max-w-16 sm:max-w-32 md:max-w-36 m-auto">
<h3 class="text-center mt-2 text-lg">WooCommerce</h3>
</div>
</div>
</div>
<div class="col-span-1">
<div
class=" py-5 sm:py-10 lg:py-10 border border-slate-700 flex items-start justify-center bg-gray-800 rounded-xl">
<div>
<img decoding="async" src="https://placehold.co/150x150/222831/ffffff?text=Figma" alt=""
class="max-w-16 sm:max-w-32 md:max-w-36 m-auto">
<h3 class="text-center mt-2 text-lg">Figma</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- skill Section end-->
<!-- Project Section -->
<section id="project"
class="py-10 sm:py-24 px-4 sm:px-6 md:px-8 bg-gray-950 border-t border-t-slate-500 border-b border-b-slate-500 border-opacity-15 z-20">
<!-- Container -->
<div class="max-w-7xl mx-auto z-10 relative ">
<!-- blobs-->
<div
class="absolute left-[-100px] top-[-0px] m-auto w-[400px] h-[400px] rounded-full bg-blue-800 opacity-60 blur-[100px] -z-40">
</div>
<div
class="absolute right-[-100px] bottom-[-150px] -z-50 m-auto w-[500px] h-[400px] rounded-full bg-purple-500 opacity-30 blur-[100px]">
</div>
<!-- blobs end-->
<!-- main content-->
<h2
class="text-center font-semibold text-3xl capitalize sm:text-4xl lg:text-5xl tracking-normal text-slate-200 dark:text-white mb-4">
my <span class="text-purple-500">projects</span>
</h2>
<p class="text-center text-2xl text-slate-300 mb-10">Projects I have been worked recently</p>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6 md:gap-8">
<div class="col-span-1">
<a href="https://rakibitfarm.com/" target="_blank">
<div
class="p-2 min-h-44 lg:min-h-[248px] sm:p-3 md:p-4 lg:p-3 xl:p-4 rounded-lg border border-opacity-20 border-white">
<img decoding="async" src="https://placehold.co/400x250/222831/ffffff?text=Project+1" alt="">
<h3 class=" mt-2 text-sm sm:text-base md:text-lg capitalize">Rakib IT Farm Agency Website
(WordPress)
</h3>
</div>
</a>
</div>
<div class="col-span-1">
<a href="https://bombaygrillmortdale.com.au/" target="_blank">
<div
class="p-2 min-h-44 lg:min-h-[248px] sm:p-3 md:p-4 lg:p-3 xl:p-4 rounded-lg border border-opacity-20 border-white">
<img decoding="async" src="https://placehold.co/400x250/222831/ffffff?text=Project+2" alt="">
<h3 class="mt-2 text-sm sm:text-base md:text-lg capitalize">Bombay Grill Resturant Website
(WordPress)</h3>
</div>
</a>
</div>
<div class="col-span-1">
<a href="https://sirajul-arefin.vercel.app/" target="_blank">
<div
class="p-2 min-h-44 lg:min-h-[248px] sm:p-3 md:p-4 lg:p-3 xl:p-4 rounded-lg border border-opacity-20 border-white">
<img decoding="async" src="https://placehold.co/400x250/222831/ffffff?text=Project+3" alt="">
<h3 class="mt-2 text-sm sm:text-base md:text-lg capitalize">Portfolio Website <br>
(Tailwind, JS)</h3>
</div>
</a>
</div>
<div class="col-span-1">
<a href="https://arefins-store.vercel.app/" target="_blank">
<div
class="p-2 min-h-44 lg:min-h-[248px] sm:p-3 md:p-4 lg:p-3 xl:p-4 rounded-lg border border-opacity-20 border-white">
<img decoding="async" src="https://placehold.co/400x250/222831/ffffff?text=Project+4" alt="">
<h3 class="mt-2 text-sm sm:text-base md:text-lg capitalize">Arefins Store <br> (front-end,
React)</h3>
</div>
</a>
</div>
<!-- main content ends-->
</div>
</div>
</section>
<!-- Project Section end -->
<!-- Testimonial Section-->
<section itemid="testimonial" class="md:py-24 px-4 sm:px-6 md:px-8 mt-16 md:mt-0" id="testimonial">
<!-- Container -->
<div class="max-w-7xl mx-auto">
<!-- Section Title-->
<div class="text-center mb-24">
<p class="uppercase font-bold">testimonials</p>
<h2
class="text-center font-semibold text-3xl capitalize sm:text-4xl lg:text-5xl tracking-normal text-slate-200 dark:text-white mb-4">
read <span class="text-purple-500">what others <br> have to say</span>
</h2>
</div>
<!-- Testimonials -->
<div class="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-3 gap-5 md:gap-14 lg:gap-4">
<!--Single Testimonial-->
<div class="relative text-center bg-slate-800 lg:px-6 px-6 lg:py-6 md:py-8 rounded-2xl mb-20 md:mb-0">
<!-- Image positioned at 25% from the top and 50% from the left of the relative div -->
<img decoding="async" src="https://placehold.co/150x150/222831/ffffff?text=Mehedi"
class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full border-4 border-white md:max-w-[90px] lg:max-w-[116px] xl:max-w-full"
alt="Your Image">
<h3 class="uppercase font-bold sm:mt-20 md:mt-5 mt-[85px] lg:mt-11 xl:mt-14 mb-2">Mehedi Hasan
</h3>
<h4>Project Manager, Rakib IT Farm</h4> <br>
<p class="mb-10 md:mb-0 lg:mb-10 opacity-80">Simply outstanding! He enjoys working with precision
and dedication. Both his work and personality have truly impressed me. Highly professional and a
pleasure to work with! I would definitely collaborate again in the future.</p>
</div>
<!--Single Testimonial-->
<div class="relative text-center bg-slate-800 lg:px-6 px-6 lg:py-6 md:py-8 rounded-2xl mb-20 md:mb-0">
<!-- Image positioned at 25% from the top and 50% from the left of the relative div -->
<img decoding="async" src="https://placehold.co/150x150/222831/ffffff?text=Faisal"
class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full border-4 border-white md:max-w-[90px] lg:max-w-[116px] xl:max-w-full"
alt="Your Image">
<h3 class="uppercase font-bold sm:mt-20 md:mt-5 mt-[85px] lg:mt-11 xl:mt-14 mb-2">Faisal Azad</h3>
<h4>Owner, Bombay Grill Mortdale</h4> <br>
<p class="mb-10 md:mb-0 lg:mb-10 opacity-80">Wonderful work! The WordPress website for my restaurant
is beautifully designed and highly functional. Customers can navigate and place
orders seamlessly. The attention to detail and dedication were truly impressive—highly
recommended!</p>
</div>
<!--Single Testimonial-->
<div class="relative text-center bg-slate-800 lg:px-6 px-6 lg:py-6 md:py-8 rounded-2xl mb-20 md:mb-0">
<!-- Image positioned at 25% from the top and 50% from the left of the relative div -->
<img decoding="async" src="https://placehold.co/150x150/222831/ffffff?text=David"
class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full border-4 border-white md:max-w-[90px] lg:max-w-[116px] xl:max-w-full"
alt="Your Image">
<h3 class="uppercase font-bold sm:mt-20 md:mt-5 mt-[85px] lg:mt-11 xl:mt-14 mb-2">David Mumma</h3>
<h4>Owner, Blue Horizon</h4> <br>
<p class="mb-10 md:mb-0 lg:mb-10 opacity-80">Our website was slow, leading to high bounce rates and
lost customers. After the speed optimization, it loads lightning-fast! User experience improved,
and our SEO rankings went up. Highly recommend his service!"</p>
</div>
</div>
</div>
</section>
<!-- Get Started Section -->
<section itemid="contact" class=" lg:py-8 px-4 sm:px-6 md:px-8" id="get-started">
<!-- Container -->
<div class="max-w-7xl mx-auto rounded-lg bg-gradient-to-br from-cyan-200 to-indigo-500 py-10">
<!-- Wrapper-->
<div class="text-center">
<p class="uppercase font-bold">are you ready?</p>
<h2
class="capitalize font-semibold text-3xl sm:text-4xl lg:text-5xl tracking-normal text-white mt-2 mb-5">
be a part of the <br> next big thing</h2>
<a href="https://www.linkedin.com/in/md-sirajul-arefin/" target="_blank"
class="py-3 px-8 sm:py-4 sm:px-16 text-center text-sm sm:text-base uppercase font-bold inline-block bg-gray-950 rounded-full mb-3 sm:mb-0 sm:mr-5">get
started</a>
</div>
</div>
</section>
<!-- Footer Section -->
<footer id="footer" class="pt-20 pb-5 sm:pt-20 sm:pb-10 px-4 sm:px-6 md:px-8">
<!-- Container -->
<div class="max-w-7xl mx-auto">
<!-- Wrapper-->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
<div class="text-left">
<ul class="text-xs sm:text-base">
<li><a href="/" class="capitalize">home</a></li>
<li><a href="#about" class="capitalize">about</a></li>
<li><a href="#project" class="capitalize">projects</a></li>
<li><a
href="https://docs.google.com/document/d/1ofvB7Cyqb9XlYl5YVfBpRPWGAl_zrXaJjVcAmfVDTVA/edit?usp=sharing"
class="capitalize">resume</a></li>
</ul>
</div>
<div class="text-left">
<ul class="text-xs sm:text-base">
<li><a href="https://www.linkedin.com/in/md-sirajul-arefin/" target="_blank">LinkedIn</a></li>
<li><a href="https://x.com/sirajul_arefin" target="_blank">X (Twitter)</a></li>
<li><a href="#buy-nfts" target="_blank">Instagram</a></li>
<li><a href="https://www.facebook.com/md.sirajularefin.maqsud.7" target="_blank">Facebook</a>
</li>
</ul>
</div>
<div class="text-left">
<ul class="text-xs sm:text-base">
<li><a href="tel:+8801872345422" target="_blank">Phone</a></li>
<li><a href="mailto:sirajul.arefin123@gmail.com" target="_blank">Email</a></li>
<li><a href="https://wa.me/8801872345422" target="_blank">WhatsApp</a></li>
</ul>
</div>
<div class="text-left">
<p class="mb-3">Join My Newsletter</p>
<div class="inline-block">
<a href="https://forms.gle/BHdDPriP2WUBtwZq9" target="_blank">
<button
class="bg-primary border text-xs md:text-base border-white bg-purple-500 text-center text-white py-1 px-2 sm:px-2 sm:py-2 md:px-4 lg:px-8 hover:bg-mainColor w-full md:w-auto rounded-full transition">
Subscribe Now
</button>
</a>
</div>
</div>
</div>
<!-- Copyright -->
<div class="text-center sm:mb-5 mt-10">
<p class="text-xs sm:text-lg"><span class="opacity-60">Designed and developed by</span> <a
href="https://www.linkedin.com/in/md-sirajul-arefin/"><strong>Sirajul Arefin</strong> </a> </p>
</div>
<!-- Copyright end -->
</div>
</footer>
<div class="bg-gradient-to-br from-cyan-300 to-indigo-600 h-2"></div>
<!-- JavaScript-->
<script>
const btn = document.getElementById('menu-btn')
const nav = document.getElementById('menu')
btn.addEventListener('click', () => {
btn.classList.toggle('open')
nav.classList.toggle('flex')
nav.classList.toggle('hidden')
})
</script>
</body>
</html>