updates and junk

about.html

@@ -30,7 +30,7 @@
 
     <main>
         <section class="about">
-            <div class="container">
+            <div class="container" id="bio">
                 <h2>About Bethany</h2>
                 <p>Meet Bethany Rhodes, the creative force behind the charming crochet shop known as WillowMeCreations.
                     Born and raised in the picturesque state of Indiana, Bethany discovered her passion for crafting at

index.html

@@ -16,7 +16,7 @@
                 <img src="img/logo-transparent.png" alt="WillowMeCreations logo">
             </div>
             <nav class="topnav" id="myTopnav">
-                <a href="index.html" class="active">Home</a>
+                <a href="index.html">Home</a>
                 <a href="about.html">About</a>
                 <a href="news.html">News</a>
                 <a href="products.html">Products</a>

news.html

@@ -32,7 +32,7 @@
         <section class="news">
             <div class="container">
                 <h2>News</h2>
-                <h5>Latest News</h5>
+                <h3>Latest News</h3>
                 <img src="img/summer_news.jpg" class="news" alt="summer crochet">
                 <h2>Greetings, fellow yarn enthusiasts!</h2>
                 <p>We're excited to share some delightful updates from the sunny world of WillowMeCreations.</p>

products.html

@@ -46,7 +46,7 @@
                         <button>Add to Cart</button>
                     </div>
                     <div class="product-card">
-                        <img src="img/productpage3.jpg" alt="Sweater 3">
+                        <img src="img/productpage3.jpg" alt="Not a sweater, obviously">
                         <h3>Sweater 3</h3>
                         <p>Price: $105</p>
                         <button>Add to Cart</button>

style-shit.css

@@ -0,0 +1,400 @@
+/* General Styles */
+body {
+    font-family: 'Montserrat', sans-serif;
+    color: #333;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    background-color: #FAF3E0;
+}
+
+/* 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;
+    color: #fff;
+    padding: 20px 0;
+}
+
+.logo {
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: center;
+}
+
+.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;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.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;
+}
+
+/* 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 {
+    padding: 60px 0;
+    text-align: center;
+}
+
+.section 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;
+    flex-wrap: wrap;
+    gap: 20px;
+}
+
+.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;
+}
+
+.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;
+}
+
+.button {
+    display: inline-block;
+    background-color: #333;
+    color: #fff;
+    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;
+}
+
+.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;
+}
+
+/* Footer Styles */
+.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 Page Styles */
+.error-404 {
+    padding: 100px 0;
+    text-align: center;
+}
+
+.error-404 h1 {
+    font-size: 6em;
+    font-family: 'Playfair Display', serif;
+    color: #FFD700;
+}
+
+.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;
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+    .product-card {
+        width: calc(50% - 20px);
+    }
+
+    .section p {
+        font-size: 1em;
+        max-width: 90%;
+    }
+
+    .hero {
+        height: 40vh;
+    }
+
+    .carousel-caption h1 {
+        font-size: 2em;
+    }
+
+    .carousel-caption p {
+        font-size: 1em;
+    }
+
+    .prev,
+    .next {
+        font-size: 1.5em;
+    }
+}
+
+@media (max-width: 480px) {
+    .product-card {
+        width: 100%;
+    }
+
+    .hero {
+        height: 30vh;
+    }
+
+    .carousel-caption h1 {
+        font-size: 1.5em;
+    }
+
+    .carousel-caption p {
+        font-size: 0.8em;
+    }
+
+    .prev,
+    .next {
+        font-size: 1.2em;
+    }
+
+    .section 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;
+    }
+
+    .topnav.responsive a {
+        float: none;
+        display: block;
+        text-align: left;
+        width: 100%;
+        color: #f2f2f2;
+    }
+}

style.css

@@ -346,7 +346,7 @@ body {
 }
 
 .news img {
-    width: 100%;
+    width: 30%;
     border-radius: 10px;
     margin-bottom: 20px;
 }
@@ -502,6 +502,7 @@ body {
         position: absolute;
         right: 0;
         top: 0;
+        background-color: #808080;
     }
 
     .topnav.responsive a {
@@ -520,5 +521,3 @@ body {
         width: 100%;
     }
 }
-
-/* I fucking hate css */