body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
background-color: #F5F5DC; /* Cream background for earthy feel */
color: #8B4513; /* Deep brown text */
line-height: 1.6;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #D2B48C; /* Tan header */
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.logo h1 {
font-family: 'Playfair Display', serif;
font-size: 2.5em;
margin: 0;
color: #8B4513;
}
nav a {
margin: 0 15px;
text-decoration: none;
color: #8B4513;
font-weight: bold;
}
#hero {
text-align: center;
padding: 100px 20px;
background-image: url('[Link]
text=Brown+Texture+Background'); /* Placeholder for brown texture */
background-size: cover;
color: #FFFFFF;
}
.cta-button {
background-color: #DAA520; /* Gold accent */
color: #8B4513;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
}
#products {
padding: 50px 20px;
text-align: center;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.product {
background-color: #FFFFFF;
border: 1px solid #D2B48C;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.product img {
width: 100%;
height: auto;
border-radius: 5px;
}
.product button {
background-color: #8B4513;
color: #FFFFFF;
border: none;
padding: 10px;
width: 100%;
cursor: pointer;
border-radius: 5px;
}
#about, #contact {
padding: 50px 20px;
text-align: center;
background-color: #D2B48C;
}
form {
max-width: 400px;
margin: 0 auto;
}
input, textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #8B4513;
border-radius: 5px;
}
button[type="submit"] {
background-color: #DAA520;
color: #8B4513;
border: none;
padding: 10px;
width: 100%;
cursor: pointer;
border-radius: 5px;
}
footer {
text-align: center;
padding: 20px;
background-color: #8B4513;
color: #FFFFFF;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
header {
flex-direction: column;
}
.product-grid {
grid-template-columns: 1fr;
}
}