diff --git a/about.html b/about.html index e56ca1f..21f36bd 100644 --- a/about.html +++ b/about.html @@ -27,33 +27,34 @@
-
-
-

About Bethany

-

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.

-

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.

-

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.

-

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.

-

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.

-
-
+
+
+

About Bethany

+

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.

+

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.

+

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.

+

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.

+

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.

+
+ Bethany Rhodes +
@@ -73,8 +74,7 @@
diff --git a/contact.html b/contact.html index 4f3d44a..343230b 100644 --- a/contact.html +++ b/contact.html @@ -76,8 +76,7 @@ diff --git a/contactold.html b/contactold.html index 8cedb86..ef8702e 100644 --- a/contactold.html +++ b/contactold.html @@ -77,8 +77,7 @@ diff --git a/img/booth.jpg b/img/booth.jpg new file mode 100644 index 0000000..a7d3190 Binary files /dev/null and b/img/booth.jpg differ diff --git a/img/creator.jpg b/img/creator.jpg new file mode 100644 index 0000000..74e9288 Binary files /dev/null and b/img/creator.jpg differ diff --git a/index.html b/index.html index 7475a08..1576ad9 100644 --- a/index.html +++ b/index.html @@ -127,7 +127,7 @@

Brighten up cloudy days!

- View All Products +

View All Products

@@ -149,8 +149,7 @@

Follow Me

- - +
diff --git a/news.html b/news.html index 3f9cbf3..979eaf7 100644 --- a/news.html +++ b/news.html @@ -30,15 +30,14 @@

News

-

Latest News

- summer crochet + booth shot

Greetings, fellow yarn enthusiasts!

We're excited to share some delightful updates from the sunny world of WillowMeCreations.

Website updates

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

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.

-

All code for this site is licensed under the GPL and can be viewed here.

+

All code for this site is licensed under the MIT license and can be viewed here.

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 @@ -67,8 +66,7 @@

diff --git a/products.html b/products.html index e5a8821..ad9eab6 100644 --- a/products.html +++ b/products.html @@ -62,8 +62,7 @@ diff --git a/style.css b/style.css index e3f54ac..1a20ec3 100644 --- a/style.css +++ b/style.css @@ -1,11 +1,13 @@ /* Base styles */ :root { - --primary-color: #333; - --secondary-color: #FFD700; - --background-color: #FAF3E0; - --text-color: #333; - --header-bg-color: #888; + --primary-color: #F4ACB7; + --secondary-color: #ffffff; + --background-color: #4F5D2F; + --text-color: #dddddd; + --header-bg-color: #f4acb7ce; --white: #fff; + --box-bg-color: #6c464ec5; + --footer-text-color: #3d282cc5; } body { @@ -49,8 +51,8 @@ h1, h2, h3 { width: 150px; height: auto; margin-bottom: 20px; - border: 2px solid var(--white); - box-shadow: 0 0 10px #9b9b9b; + border: 2px solid var(--box-bg-color); + box-shadow: 0 0 35px var(--background-color); } /* Navigation */ @@ -59,7 +61,7 @@ h1, h2, h3 { position: relative; width: 600px; height: 50px; - background-color: #e2ce977c; /* Slightly darker background */ + background-color: #4F5D2F; /* Slightly darker background */ border-radius: 8px; font-size: 0; } @@ -109,35 +111,35 @@ a:nth-child(5) { .topnav a:nth-child(1):hover~.animation { width: 120px; left: 0; - background-color: #429b92; /* Calming teal to match earthy tones */ + background-color: #4F5D2F; /* Calming teal to match earthy tones */ } .topnav .start-about, .topnav a:nth-child(2):hover~.animation { width: 120px; left: 120px; - background-color: #7ea580; /* Light green, subtle and soft */ + background-color: #5c6842; /* Light green, subtle and soft */ } .topnav .start-news, .topnav a:nth-child(3):hover~.animation { width: 120px; left: 240px; - background-color: #7d9264; /* Very light green, keeping it soft */ + background-color: #7d9264c2; /* Very light green, keeping it soft */ } .topnav .start-products, .topnav a:nth-child(4):hover~.animation { width: 120px; left: 360px; - background-color: #773d81; /* Muted purple to go with crochet theme */ + background-color: #5c6842; /* Muted purple to go with crochet theme */ } .topnav .start-contact, .topnav a:nth-child(5):hover~.animation { width: 120px; left: 480px; - background-color: #d3a764; /* Muted peach for a warm touch */ + background-color: #4F5D2F; /* Muted peach for a warm touch */ } /* Hero Section */ @@ -230,11 +232,43 @@ a:nth-child(5) { } /* 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, .products, .contact, .news { - padding: 60px 0; + padding: 30px 0; text-align: center; } @@ -258,6 +292,13 @@ a:nth-child(5) { margin-right: auto; } +.about p a, +.products p a, +.contact p a, +.news p a { + color: var(--primary-color); +} + /* Product Grid */ .product-grid { display: flex; @@ -267,7 +308,7 @@ a:nth-child(5) { } .product-card { - background-color: var(--white); + background-color: var(--box-bg-color); padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); @@ -313,13 +354,13 @@ a:nth-child(5) { /* Footer */ .footer { background-color: var(--primary-color); - color: var(--white); + color: var(--footer-text-color); padding: 20px 0; text-align: center; } .footer .social-media a { - color: var(--secondary-color); + color: var(--header-bg-color); margin: 0 10px; font-size: 1.5em; text-decoration: none; diff --git a/styles.css.bak b/styles.css.bak new file mode 100644 index 0000000..67970e9 --- /dev/null +++ b/styles.css.bak @@ -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%; + } +} +