diff --git a/about.html b/about.html index 98bfcc9..e56ca1f 100644 --- a/about.html +++ b/about.html @@ -21,9 +21,7 @@ News Products Contact - - - +
diff --git a/contact.html b/contact.html index be76eec..4f3d44a 100644 --- a/contact.html +++ b/contact.html @@ -21,9 +21,7 @@ News Products Contact - - - +
diff --git a/index.html b/index.html index 3f0887b..7475a08 100644 --- a/index.html +++ b/index.html @@ -59,9 +59,7 @@ News Products Contact - - - +
@@ -102,7 +100,7 @@
-

About Us

+

WillowMeCreations 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.

@@ -111,7 +109,7 @@
-

Our Products

+

My Products

Product 1 @@ -126,7 +124,7 @@
Product 3

Neon Rainbow Hexie

-

Shit is bright, son.

+

Brighten up cloudy days!

View All Products diff --git a/index2.html b/index2.html new file mode 100644 index 0000000..7475a08 --- /dev/null +++ b/index2.html @@ -0,0 +1,162 @@ + + + + + Home - WillowMeCreations + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+
+
+
+ Hero Image 1 +
+

Welcome to WillowMeCreations

+

Beautifully hand-crafted crochet items made with love in Indiana.

+ Shop Now +
+
+
+ Hero Image 2 +
+

Handmade with Love

+

Each piece is crafted with care and attention to detail.

+ Shop Now +
+
+
+ Hero Image 3 +
+

Unique Designs

+

Discover our exclusive collection of crochet items.

+ Shop Now +
+
+
+ + +
+
+ +
+
+ +

WillowMeCreations 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.

+
+
+ +
+
+

My Products

+
+
+ Product 1 +

Greyscale Hexie

+

Soft and warm, perfect for chilly days.

+
+
+ Product 2 +

Flower Crop Top

+

Add a touch of elegance to any outfit.

+
+
+ Product 3 +

Neon Rainbow Hexie

+

Brighten up cloudy days!

+
+
+ View All Products +
+
+ +
+
+

Contact Us

+

Have questions or special requests? Reach out to us!

+

Email: bethany@willowmecreations.com
+ TikTok: bethanyrhodes6

+
+
+
+ +
+
+
+

WillowMeCreations

+

© 2024 WillowMeCreations. All rights reserved.

+
+ +
+
+ + + + + \ No newline at end of file diff --git a/news.html b/news.html index 8acf3a5..3f9cbf3 100644 --- a/news.html +++ b/news.html @@ -21,9 +21,7 @@ News Products Contact - - - +
diff --git a/products.html b/products.html index e3b5415..e5a8821 100644 --- a/products.html +++ b/products.html @@ -21,9 +21,7 @@ News Products Contact - - - +
diff --git a/style.css b/style.css index 67970e9..e3f54ac 100644 --- a/style.css +++ b/style.css @@ -1,148 +1,151 @@ +/* Base styles */ +:root { + --primary-color: #333; + --secondary-color: #FFD700; + --background-color: #FAF3E0; + --text-color: #333; + --header-bg-color: #888; + --white: #fff; +} + body { font-family: 'Montserrat', sans-serif; - color: #333; + color: var(--text-color); margin: 0; padding: 0; box-sizing: border-box; - background-color: #FAF3E0; - /* Warm, cozy background color */ + background-color: var(--background-color); } +/* Typography */ +h1, h2, h3 { + font-family: 'Playfair Display', serif; +} + +/* Layout */ +.container { + width: 90%; + max-width: 1600px; + margin: 0 auto; +} + +/* Header */ .header { display: flex; flex-direction: column; align-items: center; - background-color: #888; - /* Slightly lighter background color */ - color: #fff; + background-color: var(--header-bg-color); + color: var(--white); 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; + border: 2px solid var(--white); box-shadow: 0 0 10px #9b9b9b; } +/* Navigation */ .topnav { - overflow: hidden; - background-color: #333; + margin: 27px auto 0; position: relative; - display: flex; - justify-content: center; - /* Center the navigation links on desktop */ - align-items: center; + width: 600px; + height: 50px; + background-color: #e2ce977c; /* Slightly darker background */ + border-radius: 8px; + font-size: 0; } .topnav a { - display: block; - color: #f2f2f2; - text-align: center; - padding: 14px 16px; + line-height: 50px; + height: 100%; + font-size: 15px; + display: inline-block; + position: relative; + z-index: 1; 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-transform: uppercase; 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; + color: #f5f5f5; /* Softer white for text */ cursor: pointer; + transition: color 0.3s ease; } -.product-card button:hover { - background-color: #FFD700; - color: #333; +.topnav .animation { + position: absolute; + height: 100%; + top: 0; + z-index: 0; + transition: all 0.5s ease; + border-radius: 8px; } +a:nth-child(1) { + width: 120px; +} +a:nth-child(2) { + width: 120px; +} +a:nth-child(3) { + width: 120px; +} +a:nth-child(4) { + width: 120px; +} +a:nth-child(5) { + width: 120px; +} + +/* Updated hover colors for a more cohesive look */ +.topnav .start-home, +.topnav a:nth-child(1):hover~.animation { + width: 120px; + left: 0; + background-color: #429b92; /* 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 */ +} + +.topnav .start-news, +.topnav a:nth-child(3):hover~.animation { + width: 120px; + left: 240px; + background-color: #7d9264; /* 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 */ +} + +.topnav .start-contact, +.topnav a:nth-child(5):hover~.animation { + width: 120px; + left: 480px; + background-color: #d3a764; /* Muted peach for a warm touch */ +} + +/* Hero Section */ .hero { position: relative; overflow: hidden; text-align: center; height: 60vh; - /* Adjust height as needed */ } .carousel { @@ -160,7 +163,6 @@ body { position: absolute; opacity: 0; transition: opacity 1s ease-in-out; - /* Smooth fade effect */ width: 100%; height: 100%; box-sizing: border-box; @@ -175,7 +177,6 @@ body { width: 100%; height: 100%; object-fit: cover; - /* Ensure images cover the container without distortion */ } .carousel-caption { @@ -183,19 +184,16 @@ body { bottom: 20%; left: 50%; transform: translateX(-50%); - color: #fff; + color: var(--white); 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; } @@ -205,21 +203,12 @@ body { 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; + color: var(--white); font-size: 2em; cursor: pointer; padding: 16px; @@ -240,24 +229,27 @@ body { background-color: rgba(0, 0, 0, 0.8); } +/* Sections */ .about, .products, -.contact { +.contact, +.news { padding: 60px 0; text-align: center; } .about h2, .products h2, -.contact h2 { - font-family: 'Playfair Display', serif; +.contact h2, +.news h2 { font-size: 2.5em; margin-bottom: 20px; } .about p, .products p, -.contact p { +.contact p, +.news p { font-size: 1.1em; line-height: 1.8; margin-bottom: 20px; @@ -266,15 +258,16 @@ body { margin-right: auto; } +/* Product Grid */ .product-grid { display: flex; justify-content: space-between; - gap: 20px; flex-wrap: wrap; + gap: 20px; } .product-card { - background-color: #fff; + background-color: var(--white); padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); @@ -284,7 +277,7 @@ body { } .product-card img { - width: 100%; + width: 80%; border-radius: 10px; margin-bottom: 15px; } @@ -298,77 +291,45 @@ body { font-size: 1em; } -.productbtn { - background-color: #333; - color: #fff; +/* Buttons */ +.btn, +.product-card button { + background-color: var(--primary-color); + color: var(--white); padding: 10px 20px; text-decoration: none; font-weight: bold; border-radius: 5px; + border: none; + cursor: pointer; } -.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; +.btn:hover, +.product-card button:hover { + background-color: var(--secondary-color); + color: var(--primary-color); } +/* Footer */ .footer { - background-color: #333; - color: #fff; + background-color: var(--primary-color); + color: var(--white); padding: 20px 0; text-align: center; } .footer .social-media a { - color: #FFD700; + color: var(--secondary-color); margin: 0 10px; font-size: 1.5em; text-decoration: none; } .footer .social-media a:hover { - color: #fff; + color: var(--white); } +/* 404 Error Page */ .error-404 { padding: 100px 0; text-align: center; @@ -376,9 +337,7 @@ body { .error-404 h1 { font-size: 6em; - font-family: 'Playfair Display', serif; - color: #FFD700; - /* Gold color for emphasis */ + color: var(--secondary-color); } .error-404 h2 { @@ -386,25 +345,7 @@ body { 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; -} - +/* Forms */ .form-group { margin-bottom: 15px; } @@ -428,50 +369,14 @@ body { 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 Queries */ @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 { @@ -487,7 +392,9 @@ button.btn:hover { font-size: 1.5em; } - .about p { + .about p, + .products p, + .news p { font-size: 1em; max-width: 90%; } @@ -496,7 +403,6 @@ button.btn:hover { @media (max-width: 480px) { .hero { height: 30vh; - /* Adjust height for smaller screens */ } .carousel-caption h1 { @@ -512,7 +418,9 @@ button.btn:hover { font-size: 1.2em; } - .about p { + .about p, + .products p, + .news p { font-size: 0.9em; max-width: 90%; } @@ -531,7 +439,7 @@ button.btn:hover { .topnav.responsive { flex-direction: column; align-items: flex-start; - background-color: #333; + background-color: var(--primary-color); } .topnav.responsive .icon { @@ -546,7 +454,7 @@ button.btn:hover { display: block; text-align: left; width: 100%; - color: #f2f2f2; + color: var(--white); } .product-grid { @@ -557,4 +465,3 @@ button.btn:hover { width: 100%; } } - diff --git a/style-shit.css b/styles.css similarity index 64% rename from style-shit.css rename to styles.css index 013eb2f..67970e9 100644 --- a/style-shit.css +++ b/styles.css @@ -1,4 +1,3 @@ -/* General Styles */ body { font-family: 'Montserrat', sans-serif; color: #333; @@ -6,35 +5,32 @@ body { padding: 0; box-sizing: border-box; background-color: #FAF3E0; + /* Warm, cozy background color */ } -/* Container Styles */ -.container { - width: 90%; - max-width: 1200px; - margin: 0 auto; - padding: 20px 0; - text-align: center; -} - -#bio p { - text-align: left; -} - -/* Header Styles */ .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 { @@ -48,10 +44,11 @@ body { .topnav { overflow: hidden; background-color: #333; + position: relative; display: flex; justify-content: center; + /* Center the navigation links on desktop */ align-items: center; - position: relative; } .topnav a { @@ -77,106 +74,24 @@ body { display: none; } -/* Hero Section */ -.hero { - position: relative; - overflow: hidden; - text-align: center; - height: 60vh; -} - -.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; - 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; -} - -.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); - padding: 20px; - border-radius: 10px; - max-width: 90%; - 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; -} - -/* Section Styles */ -.section { +.products { padding: 60px 0; text-align: center; } -.section h2 { +.products h2 { font-family: 'Playfair Display', serif; font-size: 2.5em; margin-bottom: 20px; } -.section p { - font-size: 1.1em; - line-height: 1.8; - margin-bottom: 20px; - max-width: 800px; - margin-left: auto; - margin-right: auto; -} - -/* Product Styles */ .product-grid { display: flex; justify-content: space-between; + /* Spread items out evenly */ flex-wrap: wrap; gap: 20px; + /* Space between items */ } .product-card { @@ -185,12 +100,14 @@ body { 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: 100%; + width: 80%; border-radius: 10px; margin-bottom: 15px; } @@ -220,22 +137,165 @@ body { color: #333; } -.button { - display: inline-block; - background-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; - border: none; - cursor: pointer; - margin: 10px 0; } -.button:hover { - background-color: #FFD700; - color: #333; +.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 { @@ -256,7 +316,41 @@ body { border-radius: 5px; } -/* Footer Styles */ +.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; @@ -275,7 +369,6 @@ body { color: #fff; } -/* Error Page Styles */ .error-404 { padding: 100px 0; text-align: center; @@ -285,6 +378,7 @@ body { font-size: 6em; font-family: 'Playfair Display', serif; color: #FFD700; + /* Gold color for emphasis */ } .error-404 h2 { @@ -311,19 +405,73 @@ body { color: #333; } -/* Responsive Styles */ +.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); } - .section p { + .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 { @@ -338,15 +486,17 @@ body { .next { font-size: 1.5em; } + + .about p { + font-size: 1em; + max-width: 90%; + } } @media (max-width: 480px) { - .product-card { - width: 100%; - } - .hero { height: 30vh; + /* Adjust height for smaller screens */ } .carousel-caption h1 { @@ -362,7 +512,7 @@ body { font-size: 1.2em; } - .section p { + .about p { font-size: 0.9em; max-width: 90%; } @@ -388,6 +538,7 @@ body { position: absolute; right: 0; top: 0; + background-color: #808080; } .topnav.responsive a { @@ -397,4 +548,13 @@ body { width: 100%; color: #f2f2f2; } -} \ No newline at end of file + + .product-grid { + flex-direction: column; + } + + .product-card { + width: 100%; + } +} +