home.css
@charset "UTF-8";
/* General Styles */
body {
font-family: Arial, sans-serif;
background-color: #f4fdf4;
color: #333;
margin: 0;
padding: 0;
}
/* Header and Navigation */
header {
background-color: #2d572c;
color: white;
padding: 10px 20px;
position: sticky;
top: 0;
z-index: 1000;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
margin: 0;
}
/* Updated Navigation Styles */
nav {
display: flex;
gap: 15px; /* Space between links */
}
nav a {
color: white;
text-decoration: none;
padding: 8px 12px; /* Add padding for better click area */
border-radius: 4px;
transition: background-color 0.3s, color 0.3s;
}
nav a:hover {
background-color: #4caf50;
color: #fff;
}
/* Search Form */
.search-form {
display: flex;
align-items: center;
}
.search-form input[type="text"] {
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
outline: none;
}
.search-form button {
padding: 6px 12px;
border: none;
background-color: #4caf50;
color: white;
border-radius: 0 4px 4px 0;
cursor: pointer;
transition: background-color 0.3s;
}
.search-form button:hover {
background-color: #388e3c;
}
/* Main Banner */
.banner {
position: relative;
text-align: center;
color: white;
}
.banner img {
width: 100%;
border-radius: 8px;
}
.banner-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(45, 87, 44, 0.7);
padding: 20px;
border-radius: 8px;
}
.banner-text h2 {
margin: 0;
}
.banner-text .btn-primary {
background-color: #4caf50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.banner-text .btn-primary:hover {
background-color: #388e3c;
}
/* Category Section */
.categories {
text-align: center;
padding: 20px;
}
.category-cards {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.category-card {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
width: 200px;
padding: 10px;
margin: 10px;
transition: transform 0.3s, box-shadow 0.3s;
}
.category-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.category-card img {
width: 100%;
border-radius: 8px;
}
.category-card .btn-secondary {
display: block;
margin: 10px 0;
background-color: #2d572c;
color: white;
padding: 8px;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.3s;
}
.category-card .btn-secondary:hover {
background-color: #1e3e1e;
}
/* Featured Products */
.featured-products {
padding: 20px;
text-align: center;
}
.product-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product-card {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
width: 200px;
margin: 10px;
padding: 10px;
transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.product-card img {
width: 100%;
border-radius: 8px;
}
.product-card .btn-primary {
background-color: #4caf50;
color: white;
padding: 8px;
border-radius: 5px;
text-decoration: none;
display: block;
text-align: center;
margin-top: 10px;
transition: background-color 0.3s;
}
.product-card .btn-primary:hover {
background-color: #388e3c;
}
/* Footer */
footer {
background-color: #2d572c;
color: white;
text-align: center;
padding: 10px;
margin-top: 20px;
}
footer p {
margin: 0;
}
Comments
Post a Comment