tristan/willowmecreations
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

big code refactor

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

42
about.html
View file

@ -5,27 +5,63 @@
<link rel="stylesheet" type="text/css" href="style.css"> <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"> <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"> <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> </head>
<body> <body>
<div class="container"> <div class="container">
<button onclick="topFunction()" id="myBtn" title="Go to top">Go to top</button>;
<div class="header"> <div class="header">
<h1>Willow Me Creations</h1> <h1>Willow Me Creations</h1>
</div> </div>
<div class="topnav"> <div class="topnav">
<a href="index.html">Home</a> <a href="index.html">Home</a>
<a href="about.html">About</a> <a href="about.html">About</a>
<a href="news.html">News</a>
<a href="products.html">Products</a> <a href="products.html">Products</a>
<a href="contact.html">Contact</a> <a href="contact.html">Contact</a>
</div> </div>
</header> </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>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>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>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>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> <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>
<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> </body>
</html> </html>

41
contact.html
View file

@ -5,25 +5,62 @@
<link rel="stylesheet" type="text/css" href="style.css"> <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"> <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"> <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> </head>
<body> <body>
<div class="container"> <div class="container">
<button onclick="topFunction()" id="myBtn" title="Go to top">Go to top</button>;
<div class="header"> <div class="header">
<h1>Willow Me Creations</h1> <h1>Willow Me Creations</h1>
</div> </div>
<div class="topnav"> <div class="topnav">
<a href="index.html">Home</a> <a href="index.html">Home</a>
<a href="about.html">About</a> <a href="about.html">About</a>
<a href="news.html">News</a>
<a href="products.html">Products</a> <a href="products.html">Products</a>
<a href="contact.html">Contact</a> <a href="contact.html">Contact</a>
</div> </div>
</header> </header>
</div>
<div class="meat">
<h1>Hello from WillowMeCreations!</h1> <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> <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> <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> <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>
<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> </body>
</html> </html>

58
index.html
View file

@ -5,46 +5,24 @@
<link rel="stylesheet" type="text/css" href="style.css"> <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"> <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"> <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> </head>
<body> <body>
<div class="container"> <div class="container">
<button onclick="topFunction()" id="myBtn" title="Go to top">Go to top</button>;
<div class="header"> <div class="header">
<h1>Willow Me Creations</h1> <h1>Willow Me Creations</h1>
</div> </div>
<div class="topnav"> <div class="topnav">
<a href="index.html">Home</a> <a href="index.html">Home</a>
<a href="about.html">About</a> <a href="about.html">About</a>
<a href="news.html">News</a>
<a href="products.html">Products</a> <a href="products.html">Products</a>
<a href="contact.html">Contact</a> <a href="contact.html">Contact</a>
</div> </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"> <div class="main">
<h2>Home</h2> <h2>Home</h2>
<h5>Willow Me Creations</h5> <h5>Willow Me Creations</h5>
@ -53,30 +31,9 @@
<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 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>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> <p>Thank you for visiting my website!</p>
<button onclick="topFunction()" id="myBtn" title="Go to top">Go to top</button>
</div> </div>
</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>
<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>
<h2>Privacy Policy</h2>
<p><a href="privacy.html">Read our privacy policy</a></p>
<h2>&copy; 2023 Willow Me Creations</h2>
</div> -->
<div class="footer"> <div class="footer">
<div class="contact-info"> <div class="contact-info">
<p>Email: <a href="mailto:bethany@willowmecreations.com">bethany@willowmecreations.com</a></p> <p>Email: <a href="mailto:bethany@willowmecreations.com">bethany@willowmecreations.com</a></p>
@ -84,9 +41,9 @@
<div class="social-media"> <div class="social-media">
<h2>Follow Me</h2> <h2>Follow Me</h2>
<p> <p> <!--UPDATE WORKING LINKS -->
<a href="https://facebook.com/bethany" target="_blank"><i class="fab fa-facebook"></i> Facebook</a> | <a href="https://facebook.com/" 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://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> <a href="https://tiktok.com/bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i> TikTok</a>
</p> </p>
</div> </div>
@ -111,7 +68,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>

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>

55
privacy.html
View file

@ -5,11 +5,12 @@
<link rel="stylesheet" type="text/css" href="style.css"> <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"> <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"> <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> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<button onclick="topFunction()" id="myBtn" title="Go to top">Go to top</button>;
<h1>Willow Me Creations</h1> <h1>Willow Me Creations</h1>
</div> </div>
<div class="topnav"> <div class="topnav">
@ -19,22 +20,8 @@
<a href="contact.html">Contact</a> <a href="contact.html">Contact</a>
</div> </div>
</header> </header>
</div>
<!DOCTYPE html> <div class="meat">
<html lang="en">
<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>
<body>
<div class="container">
<h1>Privacy Policy</h1>
<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> <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> <h2>Information We Collect:</h2>
@ -91,11 +78,39 @@
<p>If you have any questions about our Privacy Policy, please <a href="contact.html">contact us</a>.</p> <p>If you have any questions about our Privacy Policy, please <a href="contact.html">contact us</a>.</p>
</div> </div>
<div class="footer">
<div class="contact-info">
<p>Email: <a href="mailto:bethany@willowmecreations.com">bethany@willowmecreations.com</a></p>
</div> </div>
</body>
</html>
<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>
<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> </body>
</html> </html>

50
products.html
View file

@ -5,28 +5,30 @@
<link rel="stylesheet" type="text/css" href="style.css"> <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"> <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"> <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> </head>
<body> <body>
<div class="container"> <div class="container">
<button onclick="topFunction()" id="myBtn" title="Go to top">Go to top</button>;
<div class="header"> <div class="header">
<h1>Willow Me Creations</h1> <h1>Willow Me Creations</h1>
</div> </div>
<div class="topnav"> <div class="topnav">
<a href="index.html">Home</a> <a href="index.html">Home</a>
<a href="about.html">About</a> <a href="about.html">About</a>
<a href="news.html">News</a>
<a href="products.html">Products</a> <a href="products.html">Products</a>
<a href="contact.html">Contact</a> <a href="contact.html">Contact</a>
</div> </div>
</header> </header>
</div>
<h1>Products</h1> <div class="meat">
<h2>Products</h2>
<div class="row"> <div class="row">
<div class="column"> <div class="column">
<div class="card"> <div class="card">
<img src="img/sweater1.png" alt="sweater1"> <img src="img/sweater1.png" alt="sweater1">
<div class="container"> <div class="info">
<h2>Sweater 1</h2> <h2>Sweater 1</h2>
<p>Price: $45</p> <p>Price: $45</p>
<p>Size: Small</p> <p>Size: Small</p>
@ -38,7 +40,7 @@
<div class="column"> <div class="column">
<div class="card"> <div class="card">
<img src="img/sweater2.png" alt="sweater2"> <img src="img/sweater2.png" alt="sweater2">
<div class="container"> <div class="info">
<h2>Sweater 2</h2> <h2>Sweater 2</h2>
<p>Price: $50</p> <p>Price: $50</p>
<p>Size: Medium</p> <p>Size: Medium</p>
@ -50,7 +52,7 @@
<div class="column"> <div class="column">
<div class="card"> <div class="card">
<img src="img/sweater3.png" alt="sweater3"> <img src="img/sweater3.png" alt="sweater3">
<div class="container"> <div class="info">
<h2>Sweater 3</h2> <h2>Sweater 3</h2>
<p>Price: $55</p> <p>Price: $55</p>
<p>Size: Large</p> <p>Size: Large</p>
@ -60,5 +62,39 @@
</div> </div>
</div> </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> </body>
</html> </html>

84
style.css
View file

@ -1,19 +1,38 @@
body { body {
background: linear-gradient(to bottom, #FFDAB9, #FFFACD); /* gradient from light peach to cream */ background: linear-gradient(to bottom, #FFDAB9, #FFFACD); /* gradient from light peach to cream */
color: #006400; /* dark green */ color: #006400; /* dark green */
font-family: Kalnia, 'Times New Roman', Times, serif; font-family: Lora, 'Times New Roman', Times, serif;
line-height: 1.6; line-height: 1.6;
margin: 0;
padding: 0;
box-sizing: border-box;
} }
.container { .container {
padding: 20px;
}
.info {
padding: 2px 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; justify-content: center;
max-width: 800px; align-items: center;
margin: 0 auto; }
padding: 20px;
.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 { .news {
@ -23,11 +42,10 @@ body {
h1, h2 { h1, h2 {
color: #333333; /* dark grey */ color: #333333; /* dark grey */
margin-bottom: 10px;
} }
p { h1, h2, p {
margin-bottom: 10px; margin-bottom: 20px;
} }
a { a {
@ -42,6 +60,16 @@ a:hover {
.fab { .fab {
color: #000080; /* dark blue */ 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 { .card img {
width: 40%; /* adjust as needed */ width: 40%; /* adjust as needed */
@ -57,9 +85,42 @@ a:hover {
.header, .topnav { .header, .topnav {
flex: 1; 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 { #myBtn {
display: none; display: none;
position: fixed; position: fixed;
@ -74,6 +135,7 @@ a:hover {
padding: 15px; padding: 15px;
border-radius: 10px; border-radius: 10px;
font-size: 18px; font-size: 18px;
transition: background-color 0.3s ease;
} }
#myBtn:hover { #myBtn:hover {