color palette
This commit is contained in:
Tristan Smith
parent
03490d2897
commit
e5dd8fed4c
10 changed files with 655 additions and 60 deletions
58
about.html
58
about.html
|
|
@ -27,33 +27,34 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<section class="about">
|
<section class="about">
|
||||||
<div class="container" id="bio">
|
<div class="container" id="bio">
|
||||||
<h2>About Bethany</h2>
|
<h2>About Bethany</h2>
|
||||||
<p>Meet Bethany Rhodes, the creative force behind the charming crochet shop known as WillowMeCreations.
|
<p>Meet Bethany Rhodes, the creative force behind the charming crochet shop known as WillowMeCreations.
|
||||||
Born and raised in the picturesque state of Indiana, Bethany discovered her passion for crafting at
|
Born and raised in the picturesque state of Indiana, Bethany discovered her passion for crafting at
|
||||||
a young age. What started as a hobby soon blossomed into a small business, where she lovingly
|
a young age. What started as a hobby soon blossomed into a small business, where she lovingly
|
||||||
handcrafts sweaters and other wearables. Her quaint shop has become a local gem, drawing visitors to
|
handcrafts sweaters and other wearables. Her quaint shop has become a local gem, drawing visitors to
|
||||||
the farmers' markets with the promise of cozy, one-of-a-kind creations.</p>
|
the farmers' markets with the promise of cozy, one-of-a-kind creations.</p>
|
||||||
<p>Bethany's journey into entrepreneurship is a tale of dedication and love for her craft. After years
|
<p>Bethany's journey into entrepreneurship is a tale of dedication and love for her craft. After years
|
||||||
of perfecting her crochet techniques, Bethany decided to share her creations with the world. The
|
of perfecting her crochet techniques, Bethany decided to share her creations with the world. The
|
||||||
decision to set up shop at farmers' markets was driven by a desire to connect with the community and
|
decision to set up shop at farmers' markets was driven by a desire to connect with the community and
|
||||||
bring warmth to the chilly Midwestern winters. Her booth, adorned with vibrant yarn and a display of
|
bring warmth to the chilly Midwestern winters. Her booth, adorned with vibrant yarn and a display of
|
||||||
intricately designed sweaters, quickly became a focal point at local markets.</p>
|
intricately designed sweaters, quickly became a focal point at local markets.</p>
|
||||||
<p>Beyond her commercial success, Bethany has a heartwarming tradition that sets her apart. Moved by a
|
<p>Beyond her commercial success, Bethany has a heartwarming tradition that sets her apart. Moved by a
|
||||||
desire to make a difference in the lives of animals, she occasionally crafts miniature sweaters for
|
desire to make a difference in the lives of animals, she occasionally crafts miniature sweaters for
|
||||||
lost cats. These tiny garments not only provide comfort and warmth but also serve as a beacon of
|
lost cats. These tiny garments not only provide comfort and warmth but also serve as a beacon of
|
||||||
hope for these feline friends in search of a home. Bethany's dedication to her community extends
|
hope for these feline friends in search of a home. Bethany's dedication to her community extends
|
||||||
beyond humans, showcasing the compassion that infuses every stitch of her work.</p>
|
beyond humans, showcasing the compassion that infuses every stitch of her work.</p>
|
||||||
<p>Each item crafted by Bethany is a testament to her meticulous attention to detail and commitment
|
<p>Each item crafted by Bethany is a testament to her meticulous attention to detail and commitment
|
||||||
to quality. Working in small batches, she ensures that every piece is a work of art, blending
|
to quality. Working in small batches, she ensures that every piece is a work of art, blending
|
||||||
functionality with aesthetic appeal. From cozy scarves to stylish shawls, WillowMeCreations offers a
|
functionality with aesthetic appeal. From cozy scarves to stylish shawls, WillowMeCreations offers a
|
||||||
diverse range of handmade products, reflecting the diversity of her skills and the unique
|
diverse range of handmade products, reflecting the diversity of her skills and the unique
|
||||||
preferences of her clientele.</p>
|
preferences of her clientele.</p>
|
||||||
<p>For Bethany, WillowMeCreations is more than just a business; it's a reflection of her passion,
|
<p>For Bethany, WillowMeCreations is more than just a business; it's a reflection of her passion,
|
||||||
creativity, and the warmth she wishes to share with the world.</p>
|
creativity, and the warmth she wishes to share with the world.</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<img src="img/creator.jpg" alt="Bethany Rhodes" class="creator">
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="contact">
|
<section class="contact">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
@ -73,8 +74,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="social-media">
|
<div class="social-media">
|
||||||
<h2>Follow Me</h2>
|
<h2>Follow Me</h2>
|
||||||
<a href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
|
<a href="https://www.instagram.com/willowmaker33" 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>
|
<a href="https://tiktok.com/bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -76,8 +76,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="social-media">
|
<div class="social-media">
|
||||||
<h2>Follow Me</h2>
|
<h2>Follow Me</h2>
|
||||||
<a href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
|
<a href="https://www.instagram.com/willowmaker33" 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>
|
<a href="https://tiktok.com/bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -77,8 +77,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="social-media">
|
<div class="social-media">
|
||||||
<h2>Follow Me</h2>
|
<h2>Follow Me</h2>
|
||||||
<a href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
|
<a href="https://www.instagram.com/willowmaker33" 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>
|
<a href="https://tiktok.com/bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
BIN
img/booth.jpg
Normal file
BIN
img/booth.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
img/creator.jpg
Normal file
BIN
img/creator.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
|
|
@ -127,7 +127,7 @@
|
||||||
<p>Brighten up cloudy days!</p>
|
<p>Brighten up cloudy days!</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a href="products.html" class="productbtn">View All Products</a>
|
<p><a href="products.html" class="productbtn">View All Products</a></p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
@ -149,8 +149,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="social-media">
|
<div class="social-media">
|
||||||
<h2>Follow Me</h2>
|
<h2>Follow Me</h2>
|
||||||
<a href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
|
<a href="https://www.instagram.com/willowmaker33" 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>
|
<a href="https://tiktok.com/bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -30,15 +30,14 @@
|
||||||
<section class="news">
|
<section class="news">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>News</h2>
|
<h2>News</h2>
|
||||||
<h3>Latest News</h3>
|
<img src="img/booth.jpg" class="news-header" alt="booth shot">
|
||||||
<img src="img/summer_news.jpg" class="news" alt="summer crochet">
|
|
||||||
<h2>Greetings, fellow yarn enthusiasts!</h2>
|
<h2>Greetings, fellow yarn enthusiasts!</h2>
|
||||||
<p>We're excited to share some delightful updates from the sunny world of WillowMeCreations.</p>
|
<p>We're excited to share some delightful updates from the sunny world of WillowMeCreations.</p>
|
||||||
|
|
||||||
<h3>Website updates </h3>
|
<h3>Website updates </h3>
|
||||||
<p>Realistically Bethany is only one person and I'm only one person making this website. I've gone through and updated backend parts of it to work more efficently without changing much on the frontend side...yet</p>
|
<p>Realistically Bethany is only one person and I'm only one person making this website. I've gone through and updated backend parts of it to work more efficently without changing much on the frontend side...yet</p>
|
||||||
<p>I moved the website from its previous host to my new, self-hosted approach which allows me to have a more dynamic approach to this site. That said, the contact form now works properly and emails will be received.</p>
|
<p>I moved the website from its previous host to my new, self-hosted approach which allows me to have a more dynamic approach to this site. That said, the contact form now works properly and emails will be received.</p>
|
||||||
<p>All code for this site is licensed under the GPL and can be viewed <a href="https://git.monotreme.org/tristan/willowmecreationsV2/">here</a>.</p>
|
<p>All code for this site is licensed under the MIT license and can be viewed <a href="https://git.monotreme.org/tristan/willowmecreationsV2/">here</a>.</p>
|
||||||
|
|
||||||
<p>Thank you for being a part of the WillowMeCreations family. Your support fuels our passion for
|
<p>Thank you for being a part of the WillowMeCreations family. Your support fuels our passion for
|
||||||
crafting and creativity. Keep an eye on our website and social media for more updates, events, and
|
crafting and creativity. Keep an eye on our website and social media for more updates, events, and
|
||||||
|
|
@ -67,8 +66,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="social-media">
|
<div class="social-media">
|
||||||
<h2>Follow Me</h2>
|
<h2>Follow Me</h2>
|
||||||
<a href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
|
<a href="https://www.instagram.com/willowmaker33" 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>
|
<a href="https://tiktok.com/bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -62,8 +62,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="social-media">
|
<div class="social-media">
|
||||||
<h2>Follow Me</h2>
|
<h2>Follow Me</h2>
|
||||||
<a href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
|
<a href="https://www.instagram.com/willowmaker33" 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>
|
<a href="https://tiktok.com/bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
75
style.css
75
style.css
|
|
@ -1,11 +1,13 @@
|
||||||
/* Base styles */
|
/* Base styles */
|
||||||
:root {
|
:root {
|
||||||
--primary-color: #333;
|
--primary-color: #F4ACB7;
|
||||||
--secondary-color: #FFD700;
|
--secondary-color: #ffffff;
|
||||||
--background-color: #FAF3E0;
|
--background-color: #4F5D2F;
|
||||||
--text-color: #333;
|
--text-color: #dddddd;
|
||||||
--header-bg-color: #888;
|
--header-bg-color: #f4acb7ce;
|
||||||
--white: #fff;
|
--white: #fff;
|
||||||
|
--box-bg-color: #6c464ec5;
|
||||||
|
--footer-text-color: #3d282cc5;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
@ -49,8 +51,8 @@ h1, h2, h3 {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
border: 2px solid var(--white);
|
border: 2px solid var(--box-bg-color);
|
||||||
box-shadow: 0 0 10px #9b9b9b;
|
box-shadow: 0 0 35px var(--background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navigation */
|
/* Navigation */
|
||||||
|
|
@ -59,7 +61,7 @@ h1, h2, h3 {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 600px;
|
width: 600px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background-color: #e2ce977c; /* Slightly darker background */
|
background-color: #4F5D2F; /* Slightly darker background */
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -109,35 +111,35 @@ a:nth-child(5) {
|
||||||
.topnav a:nth-child(1):hover~.animation {
|
.topnav a:nth-child(1):hover~.animation {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
left: 0;
|
left: 0;
|
||||||
background-color: #429b92; /* Calming teal to match earthy tones */
|
background-color: #4F5D2F; /* Calming teal to match earthy tones */
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav .start-about,
|
.topnav .start-about,
|
||||||
.topnav a:nth-child(2):hover~.animation {
|
.topnav a:nth-child(2):hover~.animation {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
left: 120px;
|
left: 120px;
|
||||||
background-color: #7ea580; /* Light green, subtle and soft */
|
background-color: #5c6842; /* Light green, subtle and soft */
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav .start-news,
|
.topnav .start-news,
|
||||||
.topnav a:nth-child(3):hover~.animation {
|
.topnav a:nth-child(3):hover~.animation {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
left: 240px;
|
left: 240px;
|
||||||
background-color: #7d9264; /* Very light green, keeping it soft */
|
background-color: #7d9264c2; /* Very light green, keeping it soft */
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav .start-products,
|
.topnav .start-products,
|
||||||
.topnav a:nth-child(4):hover~.animation {
|
.topnav a:nth-child(4):hover~.animation {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
left: 360px;
|
left: 360px;
|
||||||
background-color: #773d81; /* Muted purple to go with crochet theme */
|
background-color: #5c6842; /* Muted purple to go with crochet theme */
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav .start-contact,
|
.topnav .start-contact,
|
||||||
.topnav a:nth-child(5):hover~.animation {
|
.topnav a:nth-child(5):hover~.animation {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
left: 480px;
|
left: 480px;
|
||||||
background-color: #d3a764; /* Muted peach for a warm touch */
|
background-color: #4F5D2F; /* Muted peach for a warm touch */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hero Section */
|
/* Hero Section */
|
||||||
|
|
@ -230,11 +232,43 @@ a:nth-child(5) {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sections */
|
/* Sections */
|
||||||
|
|
||||||
|
.news-header {
|
||||||
|
width: 75%;
|
||||||
|
border-radius: 40px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 40px; /* Space between text and image */
|
||||||
|
max-width: 1200px; /* Set a max width for the whole container */
|
||||||
|
margin: 0 auto; /* Center the container */
|
||||||
|
}
|
||||||
|
|
||||||
|
#bio {
|
||||||
|
flex: 3; /* Text container takes 3/4 of the space */
|
||||||
|
}
|
||||||
|
|
||||||
|
.creator {
|
||||||
|
flex: 1; /* Image container takes 1/4 of the space */
|
||||||
|
max-width: 300px;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about p {
|
||||||
|
text-align: center; /* Ensure the text is left aligned */
|
||||||
|
}
|
||||||
|
|
||||||
.about,
|
.about,
|
||||||
.products,
|
.products,
|
||||||
.contact,
|
.contact,
|
||||||
.news {
|
.news {
|
||||||
padding: 60px 0;
|
padding: 30px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -258,6 +292,13 @@ a:nth-child(5) {
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.about p a,
|
||||||
|
.products p a,
|
||||||
|
.contact p a,
|
||||||
|
.news p a {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
/* Product Grid */
|
/* Product Grid */
|
||||||
.product-grid {
|
.product-grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -267,7 +308,7 @@ a:nth-child(5) {
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-card {
|
.product-card {
|
||||||
background-color: var(--white);
|
background-color: var(--box-bg-color);
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
|
@ -313,13 +354,13 @@ a:nth-child(5) {
|
||||||
/* Footer */
|
/* Footer */
|
||||||
.footer {
|
.footer {
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
color: var(--white);
|
color: var(--footer-text-color);
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer .social-media a {
|
.footer .social-media a {
|
||||||
color: var(--secondary-color);
|
color: var(--header-bg-color);
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
|
||||||
560
styles.css.bak
Normal file
560
styles.css.bak
Normal file
|
|
@ -0,0 +1,560 @@
|
||||||
|
body {
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
color: #333;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #FAF3E0;
|
||||||
|
/* Warm, cozy background color */
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
width: 150px;
|
||||||
|
height: auto;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
box-shadow: 0 0 10px #9b9b9b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topnav {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #333;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
/* Center the navigation links on desktop */
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topnav a {
|
||||||
|
display: block;
|
||||||
|
color: #f2f2f2;
|
||||||
|
text-align: center;
|
||||||
|
padding: 14px 16px;
|
||||||
|
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-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;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card button:hover {
|
||||||
|
background-color: #FFD700;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
background-color: #333;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
background-color: #333;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .social-media a {
|
||||||
|
color: #FFD700;
|
||||||
|
margin: 0 10px;
|
||||||
|
font-size: 1.5em;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .social-media a:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-404 {
|
||||||
|
padding: 100px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-404 h1 {
|
||||||
|
font-size: 6em;
|
||||||
|
font-family: 'Playfair Display', serif;
|
||||||
|
color: #FFD700;
|
||||||
|
/* Gold color for emphasis */
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-404 h2 {
|
||||||
|
font-size: 2.5em;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-caption p {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prev,
|
||||||
|
.next {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about p {
|
||||||
|
font-size: 1em;
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.hero {
|
||||||
|
height: 30vh;
|
||||||
|
/* Adjust height for smaller screens */
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-caption h1 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-caption p {
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prev,
|
||||||
|
.next {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about p {
|
||||||
|
font-size: 0.9em;
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.topnav a:not(:first-child) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topnav a.icon {
|
||||||
|
float: right;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topnav.responsive {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topnav.responsive .icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
background-color: #808080;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topnav.responsive a {
|
||||||
|
float: none;
|
||||||
|
display: block;
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
color: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-grid {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in a new issue