Compare commits

..

No commits in common. "f714ec19691da31596c579f5255fc833c6df3dd7" and "f823e1e8f2a78db83d9702674b3a361fb83601c5" have entirely different histories.

View file

@ -1,4 +1,3 @@
/* Base styles */
:root {
--primary-color: #F4ACB7;
@ -63,7 +62,7 @@ h1, h2, h3 {
position: relative;
width: 600px;
height: 50px;
background-color: #4F5D2F;
background-color: #4F5D2F; /* Slightly darker background */
border-radius: 12px;
font-size: 0;
}
@ -78,7 +77,7 @@ h1, h2, h3 {
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: #f5f5f5;
color: #f5f5f5; /* Softer white for text */
cursor: pointer;
transition: color 0.3s ease;
}
@ -113,35 +112,35 @@ a:nth-child(5) {
.topnav a:nth-child(1):hover~.animation {
width: 120px;
left: 0;
background-color: #4F5D2F;
background-color: #4F5D2F; /* Calming teal to match earthy tones */
}
.topnav .start-about,
.topnav a:nth-child(2):hover~.animation {
width: 120px;
left: 120px;
background-color: #5c6842;
background-color: #5c6842; /* Light green, subtle and soft */
}
.topnav .start-news,
.topnav a:nth-child(3):hover~.animation {
width: 120px;
left: 240px;
background-color: #7d9264c2;
background-color: #7d9264c2; /* Very light green, keeping it soft */
}
.topnav .start-products,
.topnav a:nth-child(4):hover~.animation {
width: 120px;
left: 360px;
background-color: #5c6842;
background-color: #5c6842; /* Muted purple to go with crochet theme */
}
.topnav .start-contact,
.topnav a:nth-child(5):hover~.animation {
width: 120px;
left: 480px;
background-color: #4F5D2F;
background-color: #4F5D2F; /* Muted peach for a warm touch */
}
/* Hero Section */
@ -233,74 +232,6 @@ a:nth-child(5) {
background-color: rgba(0, 0, 0, 0.8);
}
/* Updated for mobile responsiveness */
@media (max-width: 768px) {
.topnav {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.topnav a {
width: 100%;
text-align: center;
padding: 10px 0;
}
.hero {
height: 40vh;
}
.carousel-caption h1 {
font-size: 2em;
}
.carousel-caption p {
font-size: 1em;
}
.prev,
.next {
font-size: 1.5em;
}
.about p,
.products p,
.news p {
font-size: 1em;
max-width: 90%;
}
}
@media (max-width: 480px) {
.hero {
height: auto;
min-height: 200px;
}
.carousel-caption h1 {
font-size: 1.5em;
}
.carousel-caption p {
font-size: 0.8em;
}
.prev,
.next {
font-size: 1.2em;
}
.about p,
.products p,
.news p {
font-size: 0.9em;
max-width: 90%;
}
}
/* Sections */
.news-header {