big code refactor

This commit is contained in:
Tristan Smith 2023-12-10 16:24:28 -05:00
parent f7f6322584
commit cc37391d91
7 changed files with 389 additions and 161 deletions

View file

@ -5,27 +5,63 @@
<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=Kalnia">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora">
</head>
<body>
<div class="container">
<button onclick="topFunction()" id="myBtn" title="Go to top">Go to top</button>;
<div class="header">
<h1>Willow Me Creations</h1>
</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>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 sweater 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>
<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>
<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; 2023 Willow Me Creations</h2>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

View file

@ -5,25 +5,62 @@
<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=Kalnia">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora">
</head>
<body>
<div class="container">
<button onclick="topFunction()" id="myBtn" title="Go to top">Go to top</button>;
<div class="header">
<h1>Willow Me Creations</h1>
</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">
<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></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; 2023 Willow Me Creations</h2>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

View file

@ -5,46 +5,24 @@
<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=Kalnia">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora">
</head>
<body>
<div class="container">
<button onclick="topFunction()" id="myBtn" title="Go to top">Go to top</button>;
<div class="header">
<h1>Willow Me Creations</h1>
</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>
<div class="row">
<div class="side">
<h2>News</h2>
<h5>Latest News</h5>
<img src="img/willow2.png" class="news" alt="willow tree">
<h2>Greetings, fellow yarn enthusiasts!</h2>
<p>We're thrilled to share some exciting updates from the cozy world of WillowMeCreations.</p>
<h3>1. New Seasonal Collection Unveiled!</h3>
<p>Get ready to embrace the changing seasons with our latest collection of hand-crocheted wonders. From warm and fuzzy winter essentials to breezy and vibrant spring delights, our artisans have been working tirelessly to bring you a spectrum of colors and textures. Dive into our online store to discover the perfect piece that will add a touch of handmade charm to your wardrobe.</p>
<h3>2. Custom Creations Await You</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! Whether it's a personalized sweater, a unique shawl, or a special gift for a loved one, let us bring your crochet dreams to life. Contact us today, and let the crafting adventure begin.</p>
<h3>3. 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 yarn workshops. Join us for a hands-on experience where you can learn new stitches, explore color combinations, and share the joy of creating with fellow yarn lovers. Stay tuned for more details on how you can be a part of this cozy community gathering.</p>
<h3>4. Featured Product of the Month</h3>
<p>This month, we're shining the spotlight on our exquisite lace-inspired shawl. Perfect for adding a touch of elegance to any outfit, this hand-crocheted masterpiece is now available in a variety of mesmerizing colors. Treat yourself or surprise someone special with this timeless 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 yarny surprises!</p>
<span>Warm regards,
Bethany</span>
</div>
</div>
<div class="meat">
<div class="main">
<h2>Home</h2>
<h5>Willow Me Creations</h5>
@ -53,62 +31,40 @@
<p>My sweaters, scarves, and shawls are meticulously crafted in small batches. They come in a diverse range of colors and weights, ensuring a unique and personalized touch to each piece. We also offer custom orders, so if you don't see what you're looking for, please contact us and we will do our best to accommodate your needs.</p>
<p>My items are available for purchase through our online store, or at one of the many fiber festivals we attend throughout the year. Please check our <a href="products.html">Products</a> page for more information.</p>
<p>Thank you for visiting my website!</p>
<button onclick="topFunction()" id="myBtn" title="Go to top">Go to top</button>
</div>
</div>
<!-- <div class="footer">
<h2>Contact Information</h2>
<p>Email: info@willowmecreations.com</p>
<p>Phone: (555) 123-4567</p>
<h2>Follow Me</h2>
<p><a href="https://facebook.com/bethany" target="_blank"><i class="fab fa-facebook"></i> Facebook</a></p>
<p><a href="https://instagram.com/fkahab" target="_blank"><i class="fab fa-instagram"></i> Instagram</a></p>
<p><a href="https://tiktok.com/bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i> TikTok</a></p>
<div class="footer">
<div class="contact-info">
<p>Email: <a href="mailto:bethany@willowmecreations.com">bethany@willowmecreations.com</a></p>
</div>
<h2>Quick Links</h2>
<p><a href="index.html">Home</a></p>
<p><a href="about.html">About</a></p>
<p><a href="products.html">Products</a></p>
<p><a href="contact.html">Contact</a></p>
<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>
<h2>Privacy Policy</h2>
<p><a href="privacy.html">Read our privacy policy</a></p>
<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>
<h2>&copy; 2023 Willow Me Creations</h2>
</div> -->
<div class="footer">
<div class="contact-info">
<p>Email: <a href="mailto:bethany@willowmecreations.com">bethany@willowmecreations.com</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="social-media">
<h2>Follow Me</h2>
<p>
<a href="https://facebook.com/bethany" target="_blank"><i class="fab fa-facebook"></i> Facebook</a> |
<a href="https://instagram.com/fkahab" 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; 2023 Willow Me Creations</h2>
</div>
<div class="copyright">
<h2>&copy; 2023 Willow Me Creations</h2>
</div>
</div>
</div>

86
news.html Normal file
View file

@ -0,0 +1,86 @@
<!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=Lora">
</head>
<body>
<div class="container">
<button onclick="topFunction()" id="myBtn" title="Go to top">Go to top</button>;
<div class="header">
<h1>Willow Me Creations</h1>
</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">
<div class="main">
<h2>News</h2>
<h5>Latest News</h5>
<img src="img/willow2.png" class="news" alt="willow tree">
<h2>Greetings, fellow yarn enthusiasts!</h2>
<p>We're thrilled to share some exciting updates from the cozy world of WillowMeCreations.</p>
<h3>1. New Seasonal Collection Unveiled!</h3>
<p>Get ready to embrace the changing seasons with our latest collection of hand-crocheted wonders. From warm and fuzzy winter essentials to breezy and vibrant spring delights, our artisans have been working tirelessly to bring you a spectrum of colors and textures. Dive into our online store to discover the perfect piece that will add a touch of handmade charm to your wardrobe.</p>
<h3>2. Custom Creations Await You</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! Whether it's a personalized sweater, a unique shawl, or a special gift for a loved one, let us bring your crochet dreams to life. Contact us today, and let the crafting adventure begin.</p>
<h3>3. 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 yarn workshops. Join us for a hands-on experience where you can learn new stitches, explore color combinations, and share the joy of creating with fellow yarn lovers. Stay tuned for more details on how you can be a part of this cozy community gathering.</p>
<h3>4. Featured Product of the Month</h3>
<p>This month, we're shining the spotlight on our exquisite lace-inspired shawl. Perfect for adding a touch of elegance to any outfit, this hand-crocheted masterpiece is now available in a variety of mesmerizing colors. Treat yourself or surprise someone special with this timeless 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 yarny surprises!</p>
<span>Warm regards,
Bethany</span>
</div>
</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>
<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; 2023 Willow Me Creations</h2>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

View file

@ -5,11 +5,12 @@
<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=Kalnia">
<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>
</div>
<div class="topnav">
@ -19,83 +20,97 @@
<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>
<!DOCTYPE html>
<html lang="en">
<h2>Information We Collect:</h2>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bethany Rhodes - A Crochet Journey</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<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>
<body>
<div class="container">
<h1>Privacy Policy</h1>
<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>
<div class="content">
<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>
<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>Information We Collect:</h2>
<h2>How We Use Your Information:</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>
<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>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>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>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>
<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>How We Use Your Information:</h2>
<h2>Data Security:</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>
<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>
<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>
<h2>Your Choices:</h2>
<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>
<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>Data Security:</h2>
<h2>Changes to this Privacy Policy:</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>
<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>Your Choices:</h2>
<h2>Contact Us:</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>
<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>
<h2>Changes to this Privacy Policy:</h2>
<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>
<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>
<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>
<h2>Contact Us:</h2>
<div class="privacy-policy">
<h2>Privacy Policy</h2>
<p><a href="privacy.html">Read our privacy policy</a></p>
</div>
<p>If you have any questions about our Privacy Policy, please <a href="contact.html">contact us</a>.</p>
<div class="copyright">
<h2>&copy; 2023 Willow Me Creations</h2>
</div>
</div>
</body>
</html>
</div>
<script src="script.js"></script>
</body>
</html>

View file

@ -5,28 +5,30 @@
<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=Kalnia">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora">
</head>
<body>
<div class="container">
<button onclick="topFunction()" id="myBtn" title="Go to top">Go to top</button>;
<div class="header">
<h1>Willow Me Creations</h1>
</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>
<h1>Products</h1>
</div>
<div class="meat">
<h2>Products</h2>
<div class="row">
<div class="column">
<div class="card">
<img src="img/sweater1.png" alt="sweater1">
<div class="container">
<div class="info">
<h2>Sweater 1</h2>
<p>Price: $45</p>
<p>Size: Small</p>
@ -38,7 +40,7 @@
<div class="column">
<div class="card">
<img src="img/sweater2.png" alt="sweater2">
<div class="container">
<div class="info">
<h2>Sweater 2</h2>
<p>Price: $50</p>
<p>Size: Medium</p>
@ -50,7 +52,7 @@
<div class="column">
<div class="card">
<img src="img/sweater3.png" alt="sweater3">
<div class="container">
<div class="info">
<h2>Sweater 3</h2>
<p>Price: $55</p>
<p>Size: Large</p>
@ -60,5 +62,39 @@
</div>
</div>
</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; 2023 Willow Me Creations</h2>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

View file

@ -1,19 +1,38 @@
body {
background: linear-gradient(to bottom, #FFDAB9, #FFFACD); /* gradient from light peach to cream */
color: #006400; /* dark green */
font-family: Kalnia, 'Times New Roman', Times, serif;
font-family: Lora, 'Times New Roman', Times, serif;
line-height: 1.6;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
padding: 20px;
}
.info {
padding: 2px 16px;
display: flex;
flex-direction: column;
gap: 20px;
max-width: 800px;
margin: 0 auto;
padding: 20px;
justify-content: center;
align-items: center;
}
.meat {
margin: 20px auto; /* Adds a margin to the top and bottom, and auto-aligns the left and right */
padding: 20px; /* Adds padding inside the div */
max-width: 800px; /* Limits the width of the content to 800px */
background-color: #fff; /* Sets the background color to white */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow around the div */
}
.main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.news {
@ -23,11 +42,10 @@ body {
h1, h2 {
color: #333333; /* dark grey */
margin-bottom: 10px;
}
p {
margin-bottom: 10px;
h1, h2, p {
margin-bottom: 20px;
}
a {
@ -42,6 +60,16 @@ a:hover {
.fab {
color: #000080; /* dark blue */
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 100%; /* This will make the card take up the full width of its container */
margin-bottom: 20px; /* This adds some space between the cards */
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.card img {
width: 40%; /* adjust as needed */
@ -57,9 +85,42 @@ a:hover {
.header, .topnav {
flex: 1;
text-align: center;
}
.topnav a {
margin: 0 10px;
color: #006400;
text-decoration: none;
transition: color 0.3s ease;
}
.topnav a:hover {
color: #800080;
}
.footer {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background-color: #f2f2f2; /* This will make the background of the footer a light grey */
padding: 20px 0; /* This adds some vertical padding */
}
.footer div {
flex: 1 1 200px; /* This will make the divs take up equal space and wrap as needed */
margin: 10px;
text-align: center; /* This will center the text within each div */
}
/* Add box shadow to header and footer */
.header, .footer {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Add hover effect to "Go to top" button */
#myBtn {
display: none;
position: fixed;
@ -74,6 +135,7 @@ a:hover {
padding: 15px;
border-radius: 10px;
font-size: 18px;
transition: background-color 0.3s ease;
}
#myBtn:hover {