diff --git a/about.html b/about.html
index 98bfcc9..e56ca1f 100644
--- a/about.html
+++ b/about.html
@@ -21,9 +21,7 @@
<a href="news.html">News</a>
<a href="products.html">Products</a>
<a href="contact.html">Contact</a>
- <a href="javascript:void(0);" class="icon" onclick="toggleMenu()">
- <i class="fa fa-bars"></i>
- </a>
+ <div class="animation start-home"></div>
</nav>
</div>
</header>
diff --git a/contact.html b/contact.html
index be76eec..4f3d44a 100644
--- a/contact.html
+++ b/contact.html
@@ -21,9 +21,7 @@
<a href="news.html">News</a>
<a href="products.html">Products</a>
<a href="contact.html" class="active">Contact</a>
- <a href="javascript:void(0);" class="icon" onclick="toggleMenu()">
- <i class="fa fa-bars"></i>
- </a>
+ <div class="animation start-home"></div>
</nav>
</div>
</header>
diff --git a/index.html b/index.html
index 3f0887b..7475a08 100644
--- a/index.html
+++ b/index.html
@@ -59,9 +59,7 @@
<a href="news.html">News</a>
<a href="products.html">Products</a>
<a href="contact.html">Contact</a>
- <a href="javascript:void(0);" class="icon" onclick="toggleMenu()">
- <i class="fa fa-bars"></i>
- </a>
+ <div class="animation start-home"></div>
</nav>
</div>
</header>
@@ -102,7 +100,7 @@
<section class="about">
<div class="container">
- <h2>About Us</h2>
+
<p>WillowMeCreations is a small business that makes handmade clothing and wearables. Located in the
beautiful Midwest, we take pride in creating unique, high-quality crochet items. Each piece is
crafted with care and attention to detail.</p>
@@ -111,7 +109,7 @@
<section class="products">
<div class="container">
- <h2>Our Products</h2>
+ <h2>My Products</h2>
<div class="product-grid">
<div class="product-card">
<img src="img/product1.png" alt="Product 1">
@@ -126,7 +124,7 @@
<div class="product-card">
<img src="img/product3.png" alt="Product 3">
<h3>Neon Rainbow Hexie</h3>
- <p>Shit is bright, son.</p>
+ <p>Brighten up cloudy days!</p>
</div>
</div>
<a href="products.html" class="productbtn">View All Products</a>
diff --git a/index2.html b/index2.html
new file mode 100644
index 0000000..7475a08
--- /dev/null
+++ b/index2.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <title>Home - WillowMeCreations</title>
+ <!-- Primary Meta Tags -->
+ <meta name="title" content="WillowMeCreations - Hand-Crafted Crochet Items from Indiana">
+ <meta name="description" content="Discover beautifully hand-crafted crochet items made with love at WillowMeCreations. Explore our unique designs and shop high-quality crochet wearables.">
+ <meta name="keywords" content="handmade crochet, WillowMeCreations, crochet items, crochet fashion, Indiana crochet, custom crochet, handcrafted wearables, crochet gifts">
+ <meta name="robots" content="index, follow">
+ <meta name="author" content="WillowMeCreations">
+
+ <!-- Open Graph / Facebook -->
+ <meta property="og:type" content="website">
+ <meta property="og:url" content="https://willowmecreations.com/">
+ <meta property="og:title" content="WillowMeCreations - Hand-Crafted Crochet Items from Indiana">
+ <meta property="og:description" content="Discover beautifully hand-crafted crochet items made with love at WillowMeCreations. Explore our unique designs and shop high-quality crochet wearables.">
+ <meta property="og:image" content="https://willowmecreations.com/img/hero1.jpg">
+
+ <!-- Twitter -->
+ <meta property="twitter:card" content="summary_large_image">
+ <meta property="twitter:url" content="https://willowmecreations.com/">
+ <meta property="twitter:title" content="WillowMeCreations - Hand-Crafted Crochet Items from Indiana">
+ <meta property="twitter:description" content="Discover beautifully hand-crafted crochet items made with love at WillowMeCreations. Explore our unique designs and shop high-quality crochet wearables.">
+ <meta property="twitter:image" content="https://willowmecreations.com/img/hero1.jpg">
+
+ <!-- Schema.org for Google -->
+ <script type="application/ld+json">
+ {
+ "@context": "https://schema.org",
+ "@type": "Organization",
+ "name": "WillowMeCreations",
+ "url": "https://willowmecreations.com/",
+ "logo": "https://willowmecreations.com/img/logo-transparent.png",
+ "sameAs": [
+ "https://instagram.com/",
+ "https://facebook.com/",
+ "https://tiktok.com/bethanyrhodes6"
+ ],
+ "description": "WillowMeCreations offers handmade crochet items crafted with love in Indiana. Shop a variety of wearables, including scarves, shawls, and more."
+ }
+ </script>
+
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Playfair+Display:400,700">
+</head>
+
+<body>
+ <header class="header">
+ <div class="container">
+ <div class="logo">
+ <img src="img/logo-transparent.png" alt="WillowMeCreations logo">
+ </div>
+ <nav class="topnav" id="myTopnav">
+ <a href="index.html">Home</a>
+ <a href="about.html">About</a>
+ <a href="news.html">News</a>
+ <a href="products.html">Products</a>
+ <a href="contact.html">Contact</a>
+ <div class="animation start-home"></div>
+ </nav>
+ </div>
+ </header>
+
+ <main>
+ <section class="hero">
+ <div class="carousel">
+ <div class="carousel-inner">
+ <div class="carousel-item active">
+ <img src="img/hero1.jpg" alt="Hero Image 1">
+ <div class="carousel-caption">
+ <h1>Welcome to WillowMeCreations</h1>
+ <p>Beautifully hand-crafted crochet items made with love in Indiana.</p>
+ <a href="products.html" class="btn">Shop Now</a>
+ </div>
+ </div>
+ <div class="carousel-item">
+ <img src="img/hero2.jpg" alt="Hero Image 2">
+ <div class="carousel-caption">
+ <h1>Handmade with Love</h1>
+ <p>Each piece is crafted with care and attention to detail.</p>
+ <a href="products.html" class="btn">Shop Now</a>
+ </div>
+ </div>
+ <div class="carousel-item">
+ <img src="img/hero3.jpg" alt="Hero Image 3">
+ <div class="carousel-caption">
+ <h1>Unique Designs</h1>
+ <p>Discover our exclusive collection of crochet items.</p>
+ <a href="products.html" class="btn">Shop Now</a>
+ </div>
+ </div>
+ </div>
+ <a class="prev" onclick="moveSlides(-1)">❮</a>
+ <a class="next" onclick="moveSlides(1)">❯</a>
+ </div>
+ </section>
+
+ <section class="about">
+ <div class="container">
+
+ <p>WillowMeCreations is a small business that makes handmade clothing and wearables. Located in the
+ beautiful Midwest, we take pride in creating unique, high-quality crochet items. Each piece is
+ crafted with care and attention to detail.</p>
+ </div>
+ </section>
+
+ <section class="products">
+ <div class="container">
+ <h2>My Products</h2>
+ <div class="product-grid">
+ <div class="product-card">
+ <img src="img/product1.png" alt="Product 1">
+ <h3>Greyscale Hexie</h3>
+ <p>Soft and warm, perfect for chilly days.</p>
+ </div>
+ <div class="product-card">
+ <img src="img/product2.png" alt="Product 2">
+ <h3>Flower Crop Top</h3>
+ <p>Add a touch of elegance to any outfit.</p>
+ </div>
+ <div class="product-card">
+ <img src="img/product3.png" alt="Product 3">
+ <h3>Neon Rainbow Hexie</h3>
+ <p>Brighten up cloudy days!</p>
+ </div>
+ </div>
+ <a href="products.html" class="productbtn">View All Products</a>
+ </div>
+ </section>
+
+ <section class="contact">
+ <div class="container">
+ <h2>Contact Us</h2>
+ <p>Have questions or special requests? Reach out to us!</p>
+ <p>Email: <a href="mailto:bethany@willowmecreations.com">bethany@willowmecreations.com</a><br>
+ TikTok: <a href="https://www.tiktok.com/@bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i>bethanyrhodes6</a></p>
+ </div>
+ </section>
+ </main>
+
+ <footer class="footer">
+ <div class="container">
+ <div class="footer-info">
+ <h2>WillowMeCreations</h2>
+ <p>© 2024 WillowMeCreations. All rights reserved.</p>
+ </div>
+ <div class="social-media">
+ <h2>Follow Me</h2>
+ <a href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
+ <a href="https://facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
+ <a href="https://tiktok.com/bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i></a>
+ </div>
+ </div>
+ </footer>
+
+ <script src="script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/news.html b/news.html
index 8acf3a5..3f9cbf3 100644
--- a/news.html
+++ b/news.html
@@ -21,9 +21,7 @@
<a href="news.html" class="active">News</a>
<a href="products.html">Products</a>
<a href="contact.html">Contact</a>
- <a href="javascript:void(0);" class="icon" onclick="toggleMenu()">
- <i class="fa fa-bars"></i>
- </a>
+ <div class="animation start-home"></div>
</nav>
</div>
</header>
diff --git a/products.html b/products.html
index e3b5415..e5a8821 100644
--- a/products.html
+++ b/products.html
@@ -21,9 +21,7 @@
<a href="news.html">News</a>
<a href="products.html" class="active">Products</a>
<a href="contact.html">Contact</a>
- <a href="javascript:void(0);" class="icon" onclick="toggleMenu()">
- <i class="fa fa-bars"></i>
- </a>
+ <div class="animation start-home"></div>
</nav>
</div>
</header>
diff --git a/style.css b/style.css
index 67970e9..e3f54ac 100644
--- a/style.css
+++ b/style.css
@@ -1,148 +1,151 @@
+/* Base styles */
+:root {
+ --primary-color: #333;
+ --secondary-color: #FFD700;
+ --background-color: #FAF3E0;
+ --text-color: #333;
+ --header-bg-color: #888;
+ --white: #fff;
+}
+
body {
font-family: 'Montserrat', sans-serif;
- color: #333;
+ color: var(--text-color);
margin: 0;
padding: 0;
box-sizing: border-box;
- background-color: #FAF3E0;
- /* Warm, cozy background color */
+ background-color: var(--background-color);
}
+/* Typography */
+h1, h2, h3 {
+ font-family: 'Playfair Display', serif;
+}
+
+/* Layout */
+.container {
+ width: 90%;
+ max-width: 1600px;
+ margin: 0 auto;
+}
+
+/* Header */
.header {
display: flex;
flex-direction: column;
align-items: center;
- background-color: #888;
- /* Slightly lighter background color */
- color: #fff;
+ background-color: var(--header-bg-color);
+ color: var(--white);
padding: 20px 0;
}
-.container {
- width: 90%;
- max-width: 1600px;
- /* Increase max-width to allow more items in a line */
- margin: 0 auto;
-}
-
.logo {
margin-bottom: 10px;
- /* Add some space between the logo and navigation */
display: flex;
justify-content: center;
- /* Center the logo */
}
.logo img {
width: 150px;
height: auto;
margin-bottom: 20px;
- border: 2px solid #fff;
+ border: 2px solid var(--white);
box-shadow: 0 0 10px #9b9b9b;
}
+/* Navigation */
.topnav {
- overflow: hidden;
- background-color: #333;
+ margin: 27px auto 0;
position: relative;
- display: flex;
- justify-content: center;
- /* Center the navigation links on desktop */
- align-items: center;
+ width: 600px;
+ height: 50px;
+ background-color: #e2ce977c; /* Slightly darker background */
+ border-radius: 8px;
+ font-size: 0;
}
.topnav a {
- display: block;
- color: #f2f2f2;
- text-align: center;
- padding: 14px 16px;
+ line-height: 50px;
+ height: 100%;
+ font-size: 15px;
+ display: inline-block;
+ position: relative;
+ z-index: 1;
text-decoration: none;
- font-size: 17px;
-}
-
-.topnav a:hover {
- background-color: #4b4b4b;
- color: black;
-}
-
-.topnav a.active {
- background-color: #91c993;
- color: white;
-}
-
-.topnav a.icon {
- display: none;
-}
-
-.products {
- padding: 60px 0;
+ text-transform: uppercase;
text-align: center;
-}
-
-.products h2 {
- font-family: 'Playfair Display', serif;
- font-size: 2.5em;
- margin-bottom: 20px;
-}
-
-.product-grid {
- display: flex;
- justify-content: space-between;
- /* Spread items out evenly */
- flex-wrap: wrap;
- gap: 20px;
- /* Space between items */
-}
-
-.product-card {
- background-color: #fff;
- padding: 20px;
- border-radius: 10px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
- flex: 1 1 calc(30% - 20px);
- /* Make each product card flexible */
- margin-bottom: 20px;
- box-sizing: border-box;
- /* Ensure padding and borders are included in the width */
-}
-
-.product-card img {
- width: 80%;
- border-radius: 10px;
- margin-bottom: 15px;
-}
-
-.product-card h3 {
- font-size: 1.5em;
- margin-bottom: 10px;
-}
-
-.product-card p {
- font-size: 1em;
-}
-
-.product-card button {
- background-color: #333;
- color: #fff;
- padding: 10px 20px;
- text-decoration: none;
- font-weight: bold;
- border-radius: 5px;
- border: none;
+ color: #f5f5f5; /* Softer white for text */
cursor: pointer;
+ transition: color 0.3s ease;
}
-.product-card button:hover {
- background-color: #FFD700;
- color: #333;
+.topnav .animation {
+ position: absolute;
+ height: 100%;
+ top: 0;
+ z-index: 0;
+ transition: all 0.5s ease;
+ border-radius: 8px;
}
+a:nth-child(1) {
+ width: 120px;
+}
+a:nth-child(2) {
+ width: 120px;
+}
+a:nth-child(3) {
+ width: 120px;
+}
+a:nth-child(4) {
+ width: 120px;
+}
+a:nth-child(5) {
+ width: 120px;
+}
+
+/* Updated hover colors for a more cohesive look */
+.topnav .start-home,
+.topnav a:nth-child(1):hover~.animation {
+ width: 120px;
+ left: 0;
+ background-color: #429b92; /* Calming teal to match earthy tones */
+}
+
+.topnav .start-about,
+.topnav a:nth-child(2):hover~.animation {
+ width: 120px;
+ left: 120px;
+ background-color: #7ea580; /* Light green, subtle and soft */
+}
+
+.topnav .start-news,
+.topnav a:nth-child(3):hover~.animation {
+ width: 120px;
+ left: 240px;
+ background-color: #7d9264; /* Very light green, keeping it soft */
+}
+
+.topnav .start-products,
+.topnav a:nth-child(4):hover~.animation {
+ width: 120px;
+ left: 360px;
+ background-color: #773d81; /* Muted purple to go with crochet theme */
+}
+
+.topnav .start-contact,
+.topnav a:nth-child(5):hover~.animation {
+ width: 120px;
+ left: 480px;
+ background-color: #d3a764; /* Muted peach for a warm touch */
+}
+
+/* Hero Section */
.hero {
position: relative;
overflow: hidden;
text-align: center;
height: 60vh;
- /* Adjust height as needed */
}
.carousel {
@@ -160,7 +163,6 @@ body {
position: absolute;
opacity: 0;
transition: opacity 1s ease-in-out;
- /* Smooth fade effect */
width: 100%;
height: 100%;
box-sizing: border-box;
@@ -175,7 +177,6 @@ body {
width: 100%;
height: 100%;
object-fit: cover;
- /* Ensure images cover the container without distortion */
}
.carousel-caption {
@@ -183,19 +184,16 @@ body {
bottom: 20%;
left: 50%;
transform: translateX(-50%);
- color: #fff;
+ color: var(--white);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.5);
- /* Semi-transparent background for better readability */
padding: 20px;
border-radius: 10px;
max-width: 90%;
- /* Ensure the caption doesn't overflow */
text-align: center;
}
.carousel-caption h1 {
- font-family: 'Playfair Display', serif;
font-size: 3em;
margin-bottom: 20px;
}
@@ -205,21 +203,12 @@ body {
margin-bottom: 20px;
}
-.carousel-caption .btn {
- background-color: #FFD700;
- color: #333;
- padding: 10px 20px;
- text-decoration: none;
- font-weight: bold;
- border-radius: 5px;
-}
-
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
- color: #fff;
+ color: var(--white);
font-size: 2em;
cursor: pointer;
padding: 16px;
@@ -240,24 +229,27 @@ body {
background-color: rgba(0, 0, 0, 0.8);
}
+/* Sections */
.about,
.products,
-.contact {
+.contact,
+.news {
padding: 60px 0;
text-align: center;
}
.about h2,
.products h2,
-.contact h2 {
- font-family: 'Playfair Display', serif;
+.contact h2,
+.news h2 {
font-size: 2.5em;
margin-bottom: 20px;
}
.about p,
.products p,
-.contact p {
+.contact p,
+.news p {
font-size: 1.1em;
line-height: 1.8;
margin-bottom: 20px;
@@ -266,15 +258,16 @@ body {
margin-right: auto;
}
+/* Product Grid */
.product-grid {
display: flex;
justify-content: space-between;
- gap: 20px;
flex-wrap: wrap;
+ gap: 20px;
}
.product-card {
- background-color: #fff;
+ background-color: var(--white);
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -284,7 +277,7 @@ body {
}
.product-card img {
- width: 100%;
+ width: 80%;
border-radius: 10px;
margin-bottom: 15px;
}
@@ -298,77 +291,45 @@ body {
font-size: 1em;
}
-.productbtn {
- background-color: #333;
- color: #fff;
+/* Buttons */
+.btn,
+.product-card button {
+ background-color: var(--primary-color);
+ color: var(--white);
padding: 10px 20px;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
+ border: none;
+ cursor: pointer;
}
-.contact .btn {
- background-color: #333;
- color: #fff;
- padding: 10px 20px;
- text-decoration: none;
- font-weight: bold;
- border-radius: 5px;
-}
-
-.news {
- padding: 60px 0;
- text-align: center;
-}
-
-.news h2,
-.news h3 {
- font-family: 'Playfair Display', serif;
-}
-
-.news h2 {
- font-size: 2.5em;
- margin-bottom: 20px;
-}
-
-.news h3 {
- font-size: 1.8em;
- margin-bottom: 15px;
-}
-
-.news p {
- font-size: 1.1em;
- line-height: 1.8;
- margin-bottom: 20px;
- max-width: 800px;
- margin-left: auto;
- margin-right: auto;
-}
-
-.news img {
- width: 30%;
- border-radius: 10px;
- margin-bottom: 20px;
+.btn:hover,
+.product-card button:hover {
+ background-color: var(--secondary-color);
+ color: var(--primary-color);
}
+/* Footer */
.footer {
- background-color: #333;
- color: #fff;
+ background-color: var(--primary-color);
+ color: var(--white);
padding: 20px 0;
text-align: center;
}
.footer .social-media a {
- color: #FFD700;
+ color: var(--secondary-color);
margin: 0 10px;
font-size: 1.5em;
text-decoration: none;
}
.footer .social-media a:hover {
- color: #fff;
+ color: var(--white);
}
+/* 404 Error Page */
.error-404 {
padding: 100px 0;
text-align: center;
@@ -376,9 +337,7 @@ body {
.error-404 h1 {
font-size: 6em;
- font-family: 'Playfair Display', serif;
- color: #FFD700;
- /* Gold color for emphasis */
+ color: var(--secondary-color);
}
.error-404 h2 {
@@ -386,25 +345,7 @@ body {
margin-bottom: 20px;
}
-.error-404 p {
- font-size: 1.2em;
- margin-bottom: 30px;
-}
-
-.error-404 .btn {
- background-color: #333;
- color: #fff;
- padding: 10px 20px;
- text-decoration: none;
- font-weight: bold;
- border-radius: 5px;
-}
-
-.error-404 .btn:hover {
- background-color: #FFD700;
- color: #333;
-}
-
+/* Forms */
.form-group {
margin-bottom: 15px;
}
@@ -428,50 +369,14 @@ body {
height: 150px;
}
-button.btn {
- background-color: #333;
- color: #fff;
- padding: 10px 20px;
- border: none;
- border-radius: 5px;
- cursor: pointer;
-}
-
-button.btn:hover {
- background-color: #555;
-}
-
-/* Media Queries for Responsiveness */
-
+/* Media Queries */
@media (max-width: 768px) {
.product-card {
width: calc(50% - 20px);
}
- .products p {
- font-size: 1em;
- max-width: 90%;
- }
-}
-
-@media (max-width: 768px) {
- .news p {
- font-size: 1em;
- max-width: 90%;
- }
-}
-
-@media (max-width: 480px) {
- .news p {
- font-size: 0.9em;
- max-width: 90%;
- }
-}
-
-@media (max-width: 768px) {
.hero {
height: 40vh;
- /* Adjust height for smaller screens */
}
.carousel-caption h1 {
@@ -487,7 +392,9 @@ button.btn:hover {
font-size: 1.5em;
}
- .about p {
+ .about p,
+ .products p,
+ .news p {
font-size: 1em;
max-width: 90%;
}
@@ -496,7 +403,6 @@ button.btn:hover {
@media (max-width: 480px) {
.hero {
height: 30vh;
- /* Adjust height for smaller screens */
}
.carousel-caption h1 {
@@ -512,7 +418,9 @@ button.btn:hover {
font-size: 1.2em;
}
- .about p {
+ .about p,
+ .products p,
+ .news p {
font-size: 0.9em;
max-width: 90%;
}
@@ -531,7 +439,7 @@ button.btn:hover {
.topnav.responsive {
flex-direction: column;
align-items: flex-start;
- background-color: #333;
+ background-color: var(--primary-color);
}
.topnav.responsive .icon {
@@ -546,7 +454,7 @@ button.btn:hover {
display: block;
text-align: left;
width: 100%;
- color: #f2f2f2;
+ color: var(--white);
}
.product-grid {
@@ -557,4 +465,3 @@ button.btn:hover {
width: 100%;
}
}
-
diff --git a/style-shit.css b/styles.css
similarity index 64%
rename from style-shit.css
rename to styles.css
index 013eb2f..67970e9 100644
--- a/style-shit.css
+++ b/styles.css
@@ -1,4 +1,3 @@
-/* General Styles */
body {
font-family: 'Montserrat', sans-serif;
color: #333;
@@ -6,35 +5,32 @@ body {
padding: 0;
box-sizing: border-box;
background-color: #FAF3E0;
+ /* Warm, cozy background color */
}
-/* Container Styles */
-.container {
- width: 90%;
- max-width: 1200px;
- margin: 0 auto;
- padding: 20px 0;
- text-align: center;
-}
-
-#bio p {
- text-align: left;
-}
-
-/* Header Styles */
.header {
display: flex;
flex-direction: column;
align-items: center;
background-color: #888;
+ /* Slightly lighter background color */
color: #fff;
padding: 20px 0;
}
+.container {
+ width: 90%;
+ max-width: 1600px;
+ /* Increase max-width to allow more items in a line */
+ margin: 0 auto;
+}
+
.logo {
margin-bottom: 10px;
+ /* Add some space between the logo and navigation */
display: flex;
justify-content: center;
+ /* Center the logo */
}
.logo img {
@@ -48,10 +44,11 @@ body {
.topnav {
overflow: hidden;
background-color: #333;
+ position: relative;
display: flex;
justify-content: center;
+ /* Center the navigation links on desktop */
align-items: center;
- position: relative;
}
.topnav a {
@@ -77,106 +74,24 @@ body {
display: none;
}
-/* Hero Section */
-.hero {
- position: relative;
- overflow: hidden;
- text-align: center;
- height: 60vh;
-}
-
-.carousel {
- position: relative;
- height: 100%;
-}
-
-.carousel-inner {
- display: flex;
- transition: transform 0.5s ease-in-out;
- height: 100%;
-}
-
-.carousel-item {
- position: absolute;
- opacity: 0;
- transition: opacity 1s ease-in-out;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
-}
-
-.carousel-item.active {
- opacity: 1;
- position: relative;
-}
-
-.carousel-item img {
- width: 100%;
- height: 100%;
- object-fit: cover;
-}
-
-.carousel-caption {
- position: absolute;
- bottom: 20%;
- left: 50%;
- transform: translateX(-50%);
- color: #fff;
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
- background: rgba(0, 0, 0, 0.5);
- padding: 20px;
- border-radius: 10px;
- max-width: 90%;
- text-align: center;
-}
-
-.carousel-caption h1 {
- font-family: 'Playfair Display', serif;
- font-size: 3em;
- margin-bottom: 20px;
-}
-
-.carousel-caption p {
- font-size: 1.2em;
- margin-bottom: 20px;
-}
-
-.carousel-caption .btn {
- background-color: #FFD700;
- color: #333;
- padding: 10px 20px;
- text-decoration: none;
- font-weight: bold;
- border-radius: 5px;
-}
-
-/* Section Styles */
-.section {
+.products {
padding: 60px 0;
text-align: center;
}
-.section h2 {
+.products h2 {
font-family: 'Playfair Display', serif;
font-size: 2.5em;
margin-bottom: 20px;
}
-.section p {
- font-size: 1.1em;
- line-height: 1.8;
- margin-bottom: 20px;
- max-width: 800px;
- margin-left: auto;
- margin-right: auto;
-}
-
-/* Product Styles */
.product-grid {
display: flex;
justify-content: space-between;
+ /* Spread items out evenly */
flex-wrap: wrap;
gap: 20px;
+ /* Space between items */
}
.product-card {
@@ -185,12 +100,14 @@ body {
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
flex: 1 1 calc(30% - 20px);
+ /* Make each product card flexible */
margin-bottom: 20px;
box-sizing: border-box;
+ /* Ensure padding and borders are included in the width */
}
.product-card img {
- width: 100%;
+ width: 80%;
border-radius: 10px;
margin-bottom: 15px;
}
@@ -220,22 +137,165 @@ body {
color: #333;
}
-.button {
- display: inline-block;
- background-color: #333;
+.hero {
+ position: relative;
+ overflow: hidden;
+ text-align: center;
+ height: 60vh;
+ /* Adjust height as needed */
+}
+
+.carousel {
+ position: relative;
+ height: 100%;
+}
+
+.carousel-inner {
+ display: flex;
+ transition: transform 0.5s ease-in-out;
+ height: 100%;
+}
+
+.carousel-item {
+ position: absolute;
+ opacity: 0;
+ transition: opacity 1s ease-in-out;
+ /* Smooth fade effect */
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+}
+
+.carousel-item.active {
+ opacity: 1;
+ position: relative;
+}
+
+.carousel-item img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ /* Ensure images cover the container without distortion */
+}
+
+.carousel-caption {
+ position: absolute;
+ bottom: 20%;
+ left: 50%;
+ transform: translateX(-50%);
color: #fff;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+ background: rgba(0, 0, 0, 0.5);
+ /* Semi-transparent background for better readability */
+ padding: 20px;
+ border-radius: 10px;
+ max-width: 90%;
+ /* Ensure the caption doesn't overflow */
+ text-align: center;
+}
+
+.carousel-caption h1 {
+ font-family: 'Playfair Display', serif;
+ font-size: 3em;
+ margin-bottom: 20px;
+}
+
+.carousel-caption p {
+ font-size: 1.2em;
+ margin-bottom: 20px;
+}
+
+.carousel-caption .btn {
+ background-color: #FFD700;
+ color: #333;
padding: 10px 20px;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
- border: none;
- cursor: pointer;
- margin: 10px 0;
}
-.button:hover {
- background-color: #FFD700;
- color: #333;
+.prev,
+.next {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ color: #fff;
+ font-size: 2em;
+ cursor: pointer;
+ padding: 16px;
+ margin-top: -22px;
+ user-select: none;
+}
+
+.prev {
+ left: 10px;
+}
+
+.next {
+ right: 10px;
+}
+
+.prev:hover,
+.next:hover {
+ background-color: rgba(0, 0, 0, 0.8);
+}
+
+.about,
+.products,
+.contact {
+ padding: 60px 0;
+ text-align: center;
+}
+
+.about h2,
+.products h2,
+.contact h2 {
+ font-family: 'Playfair Display', serif;
+ font-size: 2.5em;
+ margin-bottom: 20px;
+}
+
+.about p,
+.products p,
+.contact p {
+ font-size: 1.1em;
+ line-height: 1.8;
+ margin-bottom: 20px;
+ max-width: 800px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.product-grid {
+ display: flex;
+ justify-content: space-between;
+ gap: 20px;
+ flex-wrap: wrap;
+}
+
+.product-card {
+ background-color: #fff;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ flex: 1 1 calc(30% - 20px);
+ margin-bottom: 20px;
+ box-sizing: border-box;
+}
+
+.product-card img {
+ width: 100%;
+ border-radius: 10px;
+ margin-bottom: 15px;
+}
+
+.product-card h3 {
+ font-size: 1.5em;
+ margin-bottom: 10px;
+}
+
+.product-card p {
+ font-size: 1em;
}
.productbtn {
@@ -256,7 +316,41 @@ body {
border-radius: 5px;
}
-/* Footer Styles */
+.news {
+ padding: 60px 0;
+ text-align: center;
+}
+
+.news h2,
+.news h3 {
+ font-family: 'Playfair Display', serif;
+}
+
+.news h2 {
+ font-size: 2.5em;
+ margin-bottom: 20px;
+}
+
+.news h3 {
+ font-size: 1.8em;
+ margin-bottom: 15px;
+}
+
+.news p {
+ font-size: 1.1em;
+ line-height: 1.8;
+ margin-bottom: 20px;
+ max-width: 800px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.news img {
+ width: 30%;
+ border-radius: 10px;
+ margin-bottom: 20px;
+}
+
.footer {
background-color: #333;
color: #fff;
@@ -275,7 +369,6 @@ body {
color: #fff;
}
-/* Error Page Styles */
.error-404 {
padding: 100px 0;
text-align: center;
@@ -285,6 +378,7 @@ body {
font-size: 6em;
font-family: 'Playfair Display', serif;
color: #FFD700;
+ /* Gold color for emphasis */
}
.error-404 h2 {
@@ -311,19 +405,73 @@ body {
color: #333;
}
-/* Responsive Styles */
+.form-group {
+ margin-bottom: 15px;
+}
+
+.form-group label {
+ display: block;
+ font-weight: bold;
+ margin-bottom: 5px;
+}
+
+.form-group input,
+.form-group textarea {
+ width: 100%;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
+
+.form-group textarea {
+ resize: vertical;
+ height: 150px;
+}
+
+button.btn {
+ background-color: #333;
+ color: #fff;
+ padding: 10px 20px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+button.btn:hover {
+ background-color: #555;
+}
+
+/* Media Queries for Responsiveness */
+
@media (max-width: 768px) {
.product-card {
width: calc(50% - 20px);
}
- .section p {
+ .products p {
font-size: 1em;
max-width: 90%;
}
+}
+@media (max-width: 768px) {
+ .news p {
+ font-size: 1em;
+ max-width: 90%;
+ }
+}
+
+@media (max-width: 480px) {
+ .news p {
+ font-size: 0.9em;
+ max-width: 90%;
+ }
+}
+
+@media (max-width: 768px) {
.hero {
height: 40vh;
+ /* Adjust height for smaller screens */
}
.carousel-caption h1 {
@@ -338,15 +486,17 @@ body {
.next {
font-size: 1.5em;
}
+
+ .about p {
+ font-size: 1em;
+ max-width: 90%;
+ }
}
@media (max-width: 480px) {
- .product-card {
- width: 100%;
- }
-
.hero {
height: 30vh;
+ /* Adjust height for smaller screens */
}
.carousel-caption h1 {
@@ -362,7 +512,7 @@ body {
font-size: 1.2em;
}
- .section p {
+ .about p {
font-size: 0.9em;
max-width: 90%;
}
@@ -388,6 +538,7 @@ body {
position: absolute;
right: 0;
top: 0;
+ background-color: #808080;
}
.topnav.responsive a {
@@ -397,4 +548,13 @@ body {
width: 100%;
color: #f2f2f2;
}
-}
\ No newline at end of file
+
+ .product-grid {
+ flex-direction: column;
+ }
+
+ .product-card {
+ width: 100%;
+ }
+}
+