first commit

This commit is contained in:
Tristan Smith 2024-05-25 22:59:54 -04:00
commit 8c966ba60b
19 changed files with 1043 additions and 0 deletions

51
Readme.md Normal file
View file

@ -0,0 +1,51 @@
# Willow Me Creations Website
Welcome to the Willow Me Creations website! This is a small business specializing in handcrafted clothing and wearables. The website provides information about the creator, the products offered, and how to get in touch.
## Table of Contents
- [About](#about)
- [Products](#products)
- [Contact](#contact)
- [Getting Started](#getting-started)
- [Contributing](#contributing)
- [License](#license)
## About
Willow Me Creations is a small independent maker located in the beautiful Midwest, specifically in the state of Indiana. The creator, Bethany, loves to craft beautiful goods for people to wear and show off. The website showcases meticulously crafted sweaters, scarves, shawls, and more, all available for purchase through the online store.
## Products
The website's [Products](products.html) page provides detailed information about the handcrafted items available. Each product is crafted in small batches, ensuring a unique and personalized touch to every piece. Custom orders are also welcomed, allowing customers to request personalized items.
## Contact
For inquiries, custom orders, or general communication, feel free to reach out: (update email)
- **Email:** [bethany@willowmecreations.com](mailto:)
Connect with Willow Me Creations on social media: (need to update these links)
- [Facebook](https://facebook.com/)
- [Instagram](https://instagram.com/)
- [TikTok](https://tiktok.com/bethanyrhodes6)
## Getting Started
To explore the website, simply navigate through the following sections:
- [Home](index.html): Overview of Willow Me Creations and the creator.
- [About](about.html): Learn more about the creator and the crafting process.
- [Products](products.html): Browse through the available handcrafted items.
- [Contact](contact.html): Find contact information and connect on social media.
## Contributing
Contributions to Willow Me Creations are not currently open, as this is a personal website. However, suggestions and feedback are always welcome.
## License
This website is licensed under the [MIT License](LICENSE). Feel free to explore the code, but please respect the intellectual property and creative efforts behind Willow Me Creations. Or don't. I used AI to build a fair amount of this.
© 2023-24 Willow Me Creations

75
about.html Normal file
View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<title>About Bethany - WillowMeCreations</title>
<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.png" alt="WillowMeCreations logo">
</div>
<nav class="topnav">
<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>
</nav>
</div>
</header>
<main>
<section class="about">
<div class="container">
<h2>About Bethany</h2>
<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
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
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
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
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>
<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
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
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
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
diverse range of handmade products, reflecting the diversity of her skills and the unique
preferences of her clientele.</p>
<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>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer-info">
<h2>Willow Me Creations</h2>
<p>&copy; 2024 Willow Me Creations. All rights reserved.</p>
</div>
<div class="social-media">
<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>

64
contact.html Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<title>Contact Us - WillowMeCreations</title>
<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.png" alt="WillowMeCreations logo">
</div>
<nav class="topnav">
<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>
</nav>
</div>
</header>
<main>
<section class="contact">
<div class="container">
<h1>Hello from WillowMeCreations!</h1>
<p>We're thrilled that you're considering reaching out to us. Your inquiries, thoughts, and shared
enthusiasm for the world of yarn mean a lot to us. Whether you're seeking advice on the perfect yarn
for your next project, have a custom order in mind, or just want to share your crafting experiences,
we're here for it all. Feel free to drop us a message using the form below or connect with us
through our social media channels. Let's weave a thread of creativity and conversation together at
WillowMeCreations where every message is a stitch in our community's vibrant tapestry.</p>
<h2>Contact Information</h2>
<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>Willow Me Creations</h2>
<p>&copy; 2024 Willow Me Creations. 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>

BIN
img/hero1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 577 KiB

BIN
img/hero2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 659 KiB

BIN
img/hero3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 518 KiB

BIN
img/hero4.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 587 KiB

BIN
img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 637 KiB

BIN
img/product1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 577 KiB

BIN
img/product1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 739 KiB

BIN
img/product2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 345 KiB

BIN
img/product3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 289 KiB

BIN
img/productpage3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 518 KiB

121
index.html Normal file
View file

@ -0,0 +1,121 @@
<!DOCTYPE html>
<html>
<head>
<title>Home - Willow Me Creations</title>
<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.png" alt="WillowMeCreations logo">
</div>
<nav class="topnav">
<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>
</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 Willow Me Creations</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)">&#10094;</a>
<a class="next" onclick="moveSlides(1)">&#10095;</a>
</div>
</section>
<section class="about">
<div class="container">
<h2>About Us</h2>
<p>Willow Me Creations 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>Our 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>Shit is bright, son.</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>
<a href="mailto:bethany@willowmecreations.com" class="btn">Email Us</a>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer-info">
<h2>Willow Me Creations</h2>
<p>&copy; 2024 Willow Me Creations. All rights reserved.</p>
</div>
<div class="social-media">
<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>

91
news.html Normal file
View file

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html>
<head>
<title>News - WillowMeCreations</title>
<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.png" alt="WillowMeCreations logo">
</div>
<nav class="topnav">
<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>
</nav>
</div>
</header>
<main>
<section class="news">
<div class="container">
<h2>News</h2>
<h5>Latest News</h5>
<img src="img/summer_news.jpg" class="news" alt="summer crochet">
<h2>Greetings, fellow yarn enthusiasts!</h2>
<p>We're excited to share some delightful updates from the sunny world of WillowMeCreations.</p>
<h3>1. New Summer Collection Unveiled!</h3>
<p>Get ready to embrace the warmth of summer with our latest collection of hand-crocheted wonders. From
lightweight and breezy tops to colorful and fun accessories, our artisans have been working
tirelessly to bring you a spectrum of vibrant colors and textures. Dive into our online store to
discover the perfect piece that will add a touch of handmade charm to your summer wardrobe.</p>
<h3>2. Custom Beachwear Orders Now Open</h3>
<p>Did you know that at WillowMeCreations, we love turning your creative visions into reality? We're
delighted to announce that our custom order slots are now open for summer beachwear! Whether it's a
personalized swimsuit cover-up, a unique sunhat, or a special gift for a loved one, let us bring
your crochet dreams to life. Contact us today, and let the summer crafting adventure begin.</p>
<h3>3. Summer Yarn Workshops Coming Soon</h3>
<p>Calling all crochet enthusiasts and beginners alike! We're brewing up something special for you. In
the upcoming months, WillowMeCreations will be hosting a series of interactive summer yarn
workshops. Join us for a hands-on experience where you can learn new stitches, explore summer color
palettes, and share the joy of creating with fellow yarn lovers. Stay tuned for more details on how
you can be a part of this sunny community gathering.</p>
<h3>4. Featured Product of the Month</h3>
<p>This month, we're shining the spotlight on our colorful summer tote bag. Perfect for adding a touch
of handmade elegance to your beach outings, this hand-crocheted masterpiece is now available in a
variety of bright and cheerful colors. Treat yourself or surprise someone special with this
functional and stylish accessory. Visit our 'Products' page to explore this month's featured item.
</p>
<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
delightful summer yarny surprises!</p>
<span>Warm regards,
Bethany</span>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer-info">
<h2>Willow Me Creations</h2>
<p>&copy; 2024 Willow Me Creations. 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>

118
privacy.html Normal file
View file

@ -0,0 +1,118 @@
<!DOCTYPE html>
<html>
<head>
<title>Contact Us - WillowMeCreations</title>
<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=Lora">
</head>
<body>
<div class="container">
<div class="header">
<button onclick="topFunction()" id="myBtn" title="Go to top">Go to top</button>
<!-- <h1>Willow Me Creations</h1> -->
<img src="img/logo.png" alt="WillowMeCreations logo" class="logo">
</div>
<div class="topnav">
<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>
</header>
</div>
<div class="meat">
<p>Welcome to WillowMeCreations! At WillowMeCreations, we are committed to protecting your privacy and ensuring the security of your personal information. This Privacy Policy outlines how we collect, use, and safeguard your data when you interact with our website or engage with our products and services.</p>
<h2>Information We Collect:</h2>
<ol>
<li>
<strong>Personal Information:</strong>
<p>When you place an order or register on our website, we collect personal information such as your name, email address, shipping address, and contact details to process your order and provide customer support.</p>
</li>
<li>
<strong>Payment Information:</strong>
<p>WillowMeCreations does not directly process payments. Payments are securely processed through third-party payment processors, and we do not store your credit card details.</p>
</li>
<li>
<strong>Communications:</strong>
<p>If you contact us via email or through our website, we may retain the content of your communication, including your email address, to respond to your inquiries and provide assistance.</p>
</li>
</ol>
<h2>How We Use Your Information:</h2>
<ol>
<li>
<strong>Order Fulfillment:</strong>
<p>We use your personal information to process and fulfill your orders, including shipping and delivery.</p>
</li>
<li>
<strong>Communication:</strong>
<p>We may use your contact information to communicate with you about your orders, provide updates on our products and services, and respond to your inquiries.</p>
</li>
<li>
<strong>Marketing:</strong>
<p>With your consent, we may send you marketing communications, such as newsletters and promotional offers. You can opt-out of these communications at any time.</p>
</li>
</ol>
<h2>Data Security:</h2>
<p>We implement reasonable security measures to protect the confidentiality and integrity of your personal information. However, please be aware that no method of transmission over the internet or electronic storage is completely secure, and we cannot guarantee absolute security.</p>
<h2>Your Choices:</h2>
<p>You have the right to access, correct, or delete your personal information. You can also opt-out of marketing communications by following the instructions provided in the communication.</p>
<h2>Changes to this Privacy Policy:</h2>
<p>We may update this Privacy Policy from time to time to reflect changes in our practices. The revised policy will be effective immediately upon posting on our website.</p>
<h2>Contact Us:</h2>
<p>If you have any questions about our Privacy Policy, please <a href="contact.html">contact us</a>.</p>
</div>
<div class="footer">
<div class="contact-info">
<p>Email: <a href="mailto:bethany@willowmecreations.com">bethany@willowmecreations.com</a></p>
</div>
<div class="social-media">
<h2>Follow Me</h2>
<p> <!--UPDATE WORKING LINKS -->
<a href="https://facebook.com/" target="_blank"><i class="fab fa-facebook"></i> Facebook</a> |
<a href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i> Instagram</a> |
<a href="https://tiktok.com/bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i> TikTok</a>
</p>
</div>
<div class="quick-links">
<h2>Quick Links</h2>
<p>
<a href="index.html">Home</a> |
<a href="about.html">About</a> |
<a href="products.html">Products</a> |
<a href="contact.html">Contact</a>
</p>
</div>
<div class="privacy-policy">
<h2>Privacy Policy</h2>
<p><a href="privacy.html">Read our privacy policy</a></p>
</div>
<div class="copyright">
<h2>&copy; 2024 Willow Me Creations</h2>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

74
products.html Normal file
View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<title>Products - WillowMeCreations</title>
<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.png" alt="WillowMeCreations logo">
</div>
<nav class="topnav">
<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>
</nav>
</div>
</header>
<main>
<section class="products">
<div class="container">
<h2>Products</h2>
<div class="product-grid">
<div class="product-card">
<img src="img/product1.jpg" alt="Sweater 1">
<h3>Sweater 1</h3>
<p>Price: $80</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="img/product2.png" alt="Sweater 2">
<h3>Flower Crop Top</h3>
<p>Price: $90</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="img/productpage3.jpg" alt="Sweater 3">
<h3>Sweater 3</h3>
<p>Price: $105</p>
<button>Add to Cart</button>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer-info">
<h2>Willow Me Creations</h2>
<p>&copy; 2024 Willow Me Creations. 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>

31
script.js Normal file
View file

@ -0,0 +1,31 @@
let currentIndex = 0;
let slides = document.getElementsByClassName("carousel-item");
let totalSlides = slides.length;
function showSlides() {
for (let i = 0; i < totalSlides; i++) {
slides[i].classList.remove("active");
}
currentIndex++;
if (currentIndex >= totalSlides) {
currentIndex = 0;
}
slides[currentIndex].classList.add("active");
setTimeout(showSlides, 3000); // Change image every 3 seconds
}
function moveSlides(n) {
currentIndex += n;
if (currentIndex >= totalSlides) {
currentIndex = 0;
} else if (currentIndex < 0) {
currentIndex = totalSlides - 1;
}
for (let i = 0; i < totalSlides; i++) {
slides[i].classList.remove("active");
}
slides[currentIndex].classList.add("active");
}
// Initial call to start the slideshow
showSlides();

418
style.css Normal file
View file

@ -0,0 +1,418 @@
body {
font-family: 'Montserrat', sans-serif;
color: #333;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #FAF3E0;
/* Warm, cozy background color */
}
header {
background-color: #333;
color: #fff;
padding: 20px 0;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.logo img {
width: 150px;
}
.topnav {
text-align: center;
}
.topnav a {
color: #fff;
margin: 0 15px;
text-decoration: none;
font-weight: 700;
}
.topnav a:hover {
color: #FFD700;
}
.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: center;
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);
width: calc(33.333% - 20px);
margin-bottom: 20px;
}
.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;
}
.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: center;
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);
width: calc(33.333% - 20px);
margin-bottom: 20px;
}
.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: 100%;
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;
}
/* 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: 480px) {
.product-card {
width: calc(100% - 20px);
}
.products p {
font-size: 0.9em;
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%;
}
}
/* I fucking hate css */