HTML
নিজস্ব প্রতিবেদক, স্বাধীন খবর ডটকম
প্রকাশের তারিখ:
শনিবার, জানুয়ারি ২৫, ২০২৫ ৪:১৯ পূর্বাহ্ণ পরিবর্তনের তারিখ:
শনিবার, জানুয়ারি ২৫, ২০২৫ ৪:২৫ পূর্বাহ্ণ
HTML
<!doctype html>
<html lang=”en” data-bs-theme=”auto”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta name=”description” content=””>
<meta name=”author” content=””>
<link rel=”stylesheet” href=”assets/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”assets/css/style.css”>
<title>Cow Breeds</title>
</head>
<body>
<div class=”main-wrapper”>
<section class=”header-area”>
<div class=”container”>
<div class=”header-content”>
<div class=”logo-area”>
<a href=”#”><img src=”assets/img/logo.png” alt=”Logo”></a>
</div>
<nav class=”menu-area”>
<ul class=”main-menu”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#”>Cow Breeds</a></li>
<li><a href=”#”>Care & Health Tips</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
</div>
</div>
</section>
<!– Start Banner Section –>
<section class=”banner-area”>
<div class=”banner-container”>
<div class=”banner-img”>
<img src=”assets/img/banner.jpg” alt=”Welcome to Dairy Farm”>
<h1>Welcome to Dairy Farm</h1>
</div>
</div>
</section>
<!– End Banner Section –>
<!– Start Welcome Section –>
<section class=”welcome-area”>
<div class=”container”>
<div class=”row”>
<div class=”col-md-6″>
<div class=”welcome-text”>
<h1>Welcome To Our Cow Farm!</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sequi eligendi illum nihil ea exercitationem porro. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sequi eligendi illum nihil ea exercitationem porro delectus iure.
</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sequi eligendi illum nihil ea exercitationem porro delectus iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sequi eligendi illum nihil ea exercitationem porro delectus iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sequi eligendi illum nihil ea exercitationem porro delectus iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sequi eligendi illum nihil ea exercitationem porro delectus iure.</p>
<a href=”#” class=”button”>Learn More</a>
</div>
</div>
<div class=”col-md-6″>
<div class=”welcome-image”>
<img src=”assets/img/about.jpg” alt=”Welcome Text”>
</div>
</div>
</div>
</div>
</section>
<!– End Welcome Section –>
<!– Start Service Section –>
<!– Cow Breeds Section –>
<section class=”cow-breeds-section”>
<div class=”container”>
<h1 class=”section-title”>Explore Popular Cow Breeds</h1>
<p class=”section-description”>
Discover a variety of cow breeds, their unique traits, and their importance in dairy farming. Learn about their care, health benefits, and contributions to agriculture.
</p>
<div class=”breed-cards”>
<!– Cow Breed Card 1 –>
<div class=”breed-card”>
<img src=”assets/img/service2.jpg” alt=”Holstein Cow” class=”breed-img”>
<h3>Holstein</h3>
<p>
Known for their black and white markings, Holsteins are the most common dairy breed and produce the highest volume of milk.
</p>
</div>
<!– Cow Breed Card 2 –>
<div class=”breed-card”>
<img src=”assets/img/service2.jpg” alt=”Jersey Cow” class=”breed-img”>
<h3>Jersey</h3>
<p>
Small in size but big in productivity, Jersey cows produce milk high in butterfat, ideal for cheese and butter.
</p>
</div>
<!– Cow Breed Card 3 –>
<div class=”breed-card”>
<img src=”assets/img/service2.jpg” alt=”Ayrshire Cow” class=”breed-img”>
<h3>Ayrshire</h3>
<p>
Originating from Scotland, Ayrshires are hardy cows known for their adaptability and quality milk production.
</p>
</div>
</div>
</div>
</section>
<!– Care and Health Tips Section –>
<section class=”health-tips-section”>
<div class=”container”>
<h1 class=”section-title”>Cow Care and Health Tips</h1>
<p class=”section-description”>
Proper care and attention to health are essential for maintaining happy, healthy cows. Explore some key tips to ensure their well-being.
</p>
<div class=”tips-cards”>
<!– Tip Card 1 –>
<div class=”tip-card”>
<img src=”assets/img/service2.jpg” alt=”Nutrition Tips” class=”tip-img”>
<h3>Balanced Nutrition</h3>
<p>
Provide a balanced diet with essential nutrients like proteins, minerals, and vitamins. Ensure access to clean water at all times.
</p>
</div>
<!– Tip Card 2 –>
<div class=”tip-card”>
<img src=”assets/img/service2.jpg” alt=”Shelter Tips” class=”tip-img”>
<h3>Comfortable Shelter</h3>
<p>
Offer clean and spacious housing with proper ventilation to protect cows from extreme weather and stress.
</p>
</div>
<!– Tip Card 3 –>
<div class=”tip-card”>
<img src=”assets/img/service2.jpg” alt=”Veterinary Care” class=”tip-img”>
<h3>Regular Veterinary Checkups</h3>
<p>
Schedule regular health checkups and vaccinations to prevent diseases and ensure early detection of any health issues.
</p>
</div>
</div>
</div>
</section>
<section class=”feature-area”>
<div class=”container”>
<h1 class=”section-title”>Dairy Product Information</h1>
<p class=”section-description”>
Proper care and attention to health are essential for maintaining happy, healthy cows. Explore some key tips to ensure their well-being.
</p>
<div class=”row”>
<div class=”col-md-4″>
<div class=”single-feature”>
<img src=”assets/img/service2.jpg” alt=”Cow Breeds Overview”>
<h3>Cow Breeds Overview</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sequi eligendi illum nihil ea exercitationem porro delectus iure.</p>
<a href=”#” class=”button-small”>Learn More</a>
</div>
</div>
<div class=”col-md-4″>
<div class=”single-feature”>
<img src=”assets/img/service2.jpg” alt=”Care & Health Tips”>
<h3>Care & Health Tips</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sequi eligendi illum nihil ea exercitationem porro delectus iure.</p>
<a href=”#” class=”button-small”>Learn More</a>
</div>
</div>
<div class=”col-md-4″>
<div class=”single-feature”>
<img src=”assets/img/service2.jpg” alt=”Dairy Production Info”>
<h3>Dairy Production Info</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sequi eligendi illum nihil ea exercitationem porro delectus iure.</p>
<a href=”#” class=”button-small”>Learn More</a>
</div>
</div>
</div>
</div>
</section>
<!– Start Footer Area –>
<footer class=”footer-area”>
<div class=”container”>
<div class=”row”>
<div class=”col-md-4 col-sm-6″>
<div class=”single-footer”>
<h2>Farm Address</h2>
<ul class=”footer-list”>
<li><a href=”#”>Meet Our Farmers</a></li>
<li><a href=”#”>Meet the Cows</a></li>
<li><a href=”#”>Famous Dairy Facts</a></li>
<li><a href=”#”>From the Farm to the Fridge</a></li>
<li><a href=”#”>Farm Practices</a></li>
</ul>
</div>
</div>
<div class=”col-md-4 col-sm-6″>
<div class=”single-footer”>
<h2>About Our Farm</h2>
<ul class=”footer-list”>
<li><a href=”#”>Meet Our Farmers</a></li>
<li><a href=”#”>Meet the Cows</a></li>
<li><a href=”#”>Famous Dairy Facts</a></li>
<li><a href=”#”>From the Farm to the Fridge</a></li>
<li><a href=”#”>Farm Practices</a></li>
</ul>
</div>
</div>
<div class=”col-md-4 col-sm-6″>
<div class=”single-footer”>
<h2>On the Farm</h2>
<ul class=”footer-list”>
<li><a href=”#”>Meet Our Farmers</a></li>
<li><a href=”#”>Meet the Cows</a></li>
<li><a href=”#”>Famous Dairy Facts</a></li>
<li><a href=”#”>From the Farm to the Fridge</a></li>
<li><a href=”#”>Farm Practices</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<!– End Footer Area –>
<!– Start Footer Bottom Area –>
<div class=”footer-bottom”>
<div class=”container”>
<p>© 2025 All Rights Reserved | Terms of Use and <a href=”#”>Privacy Policy</a></p>
</div>
</div>
<!– End Footer Bottom Area –>
<!– End Main wtapper –>
<!– All jQuery –>
</div>
<script src=”assets/js/bootstrap.min.js”></script>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.main-wrapper {
max-width:95%; /* Restrict maximum width */
margin: 0 auto; /* Center the wrapper */
padding: 20px; /* Add padding inside the div */
background-color: #f4f4f4; /* Light gray background */
border: 1px solid #ddd; /* Subtle border */
border-radius: 10px; /* Rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
}
/* Add responsiveness */
@media (max-width: 768px) {
.main-wrapper {
padding: 15px; /* Adjust padding for smaller screens */
}
}
/* General Reset */
body, ul, li, a {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: Arial, sans-serif;
}
/* Header Area Styles */
.header-area {
background-color: #f8f9fa;
padding: 15px 0;
border-bottom: 1px solid #ddd;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-area img {
max-width: 150px;
}
.menu-area {
text-align: right;
}
.main-menu {
display: flex;
gap: 20px;
}
.main-menu li {
position: relative;
}
.main-menu a {
color: #333;
font-weight: bold;
padding: 5px 10px;
transition: color 0.3s ease, border-bottom 0.3s ease;
}
.main-menu a:hover,
.main-menu .active a {
color: #4caf50;
border-bottom: 2px solid #4caf50;
}
/* Responsive Design */
@media (max-width: 768px) {
.header-content {
flex-direction: column;
align-items: flex-start;
}
.main-menu {
flex-direction: column;
align-items: flex-start;
}
.main-menu li {
margin: 10px 0;
}
}
/* Banner area styles */
.banner-area {
position: relative;
width: 100%;
height: 100vh; /* Full viewport height */
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: #000; /* Fallback color */
}
.banner-container {
position: relative;
width: 100%;
height: 100%;
}
.banner-img {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.banner-img img {
width: 100%;
height: 100%;
}
.banner-img h1 {
position: absolute;
top: 43%;
text-transform: uppercase;
font-weight: 900;
font-size: 80px;
color: #fff;
z-index: 1;
width: 100%;
text-align: center;
}
/* Loaded state for fade-in effects */
.banner-area.loaded .banner-img img {
opacity: 1; /* Image becomes visible */
}
.banner-area.loaded .banner-text {
opacity: 1; /* Text becomes visible */
}
/* Responsive adjustments */
@media (max-width: 768px) {
.banner-text {
font-size: 2rem; /* Adjust font size for smaller screens */
}
}
/* Welcome Area */
.welcome-area {
padding: 80px 0;
background-color: #f3f3f3;
}
.welcome-text h1 {
font-size: 2.5rem;
color: #4caf50;
margin-bottom: 1rem;
}
.welcome-text p {
font-size: 1.1rem;
margin-bottom: 1.5rem;
color: #555;
}
.welcome-text .button {
display: inline-block;
padding: 10px 20px;
font-size: 1rem;
background-color: #4caf50;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.welcome-text .button:hover {
background-color: #3e8e41;
}
.welcome-image img {
width: 100%;
height: 500Px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* Cow Breeds Section */
.cow-breeds-section {
padding: 80px 20px;
background-color: #fff;
text-align: center;
}
.section-title {
font-size: 2.5rem;
color: #4CAF50;
margin-bottom: 20px;
}
.section-description {
font-size: 1.2rem;
color: #666;
margin-bottom: 40px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.breed-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.breed-card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 370px;
padding: 20px;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
}
.breed-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.breed-img {
width: 100%;
border-radius: 8px;
margin-bottom: 15px;
}
.breed-card h3 {
font-size: 1.5rem;
color: #4CAF50;
margin-bottom: 10px;
}
.breed-card p {
font-size: 1rem;
color: #666;
}
/* Responsive Design */
@media (max-width: 768px) {
.breed-cards {
flex-direction: column;
align-items: center;
}
.breed-card {
width: 100%;
max-width: 350px;
}
}
/* Care and Health Tips Section */
.health-tips-section {
width: 100%;
padding: 80px 20px;
background-color: #f9f1f1;
text-align: center;
}
.tips-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.tip-card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 350px;
padding: 20px;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
}
.tip-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.tip-img {
width: 100%;
border-radius: 8px;
margin-bottom: 15px;
}
.tip-card h3 {
font-size: 1.5rem;
color: #3498db;
margin-bottom: 10px;
}
.tip-card p {
font-size: 1rem;
color: #666;
}
/* Responsive Design */
@media (max-width: 768px) {
.tips-cards {
flex-direction: column;
align-items: center;
}
.tip-card {
width: 100%;
max-width: 350px;
}
}
/* Service Section */
.feature-area {
padding: 80px 0;
text-align: center;
background-color: #fff;
}
.single-feature {
background-color: #f9f9f9;
border: 1px solid #e6e6e6;
border-radius: 10px;
padding: 20px;
margin: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.single-feature:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.single-feature img {
width: 100%;
border-radius: 10px;
margin-bottom: 15px;
}
.single-feature h3 {
font-size: 1.5rem;
color: #4caf50;
margin-bottom: 1rem;
}
.single-feature p {
font-size: 1rem;
color: #555;
margin-bottom: 1.5rem;
}
.button-small {
display: inline-block;
padding: 8px 15px;
font-size: 0.9rem;
background-color: #4caf50;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.button-small:hover {
background-color: #3e8e41;
}
/* Responsive Design */
@media (max-width: 768px) {
.welcome-text h1 {
font-size: 2rem;
}
.single-feature {
margin-bottom: 20px;
}
}
/* Footer Area */
.footer-area {
background-color: #222;
color: #f9f9f9;
padding: 80px 0;
}
.footer-area h2 {
font-size: 1.5rem;
color: #4CAF50;
margin-bottom: 1rem;
}
.footer-list {
list-style: none;
padding: 0;
}
.footer-list li {
margin-bottom: 10px;
}
.footer-list a {
text-decoration: none;
color: #ccc;
font-size: 1rem;
transition: color 0.3s ease;
}
.footer-list a:hover {
color: #4CAF50;
}
/* Footer Bottom Area */
.footer-bottom {
background-color: #111;
color: #ccc;
padding: 20px 0;
text-align: center;
}
.footer-bottom a {
color: #4CAF50;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
}
.footer-bottom a:hover {
color: #fff;
}
/* Responsive Design */
@media (max-width: 768px) {
.footer-area .row {
flex-direction: column;
text-align: center;
}
.footer-area .col-md-4 {
margin-bottom: 20px;
}
.footer-bottom p {
font-size: 0.9rem;
}
}
স্বাধীন খবর ডটকম/আ আ
