diff --git a/about.html b/about.html
index 4956490..08f60dd 100644
--- a/about.html
+++ b/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
diff --git a/img/summer_news.jpg b/img/summer_news.jpg
new file mode 100644
index 0000000..d677768
Binary files /dev/null and b/img/summer_news.jpg differ
diff --git a/img/summer_news.jpg~ b/img/summer_news.jpg~
new file mode 100644
index 0000000..d677768
Binary files /dev/null and b/img/summer_news.jpg~ differ
diff --git a/index.html b/index.html
index 8740179..0de267f 100644
--- a/index.html
+++ b/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>
diff --git a/news.html b/news.html
index 7724b9d..d983e9e 100644
--- a/news.html
+++ b/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>
diff --git a/products.html b/products.html
index e2297f8..e3b5415 100644
--- a/products.html
+++ b/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>
diff --git a/style-shit.css b/style-shit.css
new file mode 100644
index 0000000..013eb2f
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index 57be34e..f34b6fe 100644
--- a/style.css
+++ b/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 {
@@ -519,6 +520,4 @@ body {
     .product-card {
         width: 100%;
     }
-}
-
-/* I fucking hate css */
\ No newline at end of file
+}
\ No newline at end of file