jesus

index.html

@@ -59,6 +59,7 @@
                 <a href="news.html">News</a>
                 <a href="products.html">Products</a>
                 <a href="contact.html">Contact</a>
+                <span class="hamburger" onclick="toggleNav()">&#9776;</span>
                 <div class="animation start-home"></div>
             </nav>
         </div>

index2.html

@@ -41,7 +41,7 @@
     }
     </script>
 
-    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="style2.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=Montserrat:400,700|Playfair+Display:400,700">
@@ -59,6 +59,7 @@
                 <a href="news.html">News</a>
                 <a href="products.html">Products</a>
                 <a href="contact.html">Contact</a>
+                <span class="hamburger" onclick="toggleNav()">&#9776;</span>
                 <div class="animation start-home"></div>
             </nav>
         </div>
@@ -127,14 +128,14 @@
                         <p>Brighten up cloudy days!</p>
                     </div>
                 </div>
-                <a href="products.html" class="productbtn">View All Products</a>
+                <p><a href="products.html" class="productbtn">View All Products</a></p>
             </div>
         </section>
 
         <section class="contact">
             <div class="container">
                 <h2>Contact Us</h2>
-                <p>Have questions or special requests? Reach out to us!</p>
+                <p>Have questions or special requests? Reach out to me!</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>
             </div>
@@ -149,8 +150,7 @@
             </div>
             <div class="social-media">
                 <h2>Follow Me</h2>
-                <a href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
+                <a href="https://www.instagram.com/willowmaker33" target="_blank"><i class="fab fa-instagram"></i></a>
-                <a href="https://facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
                 <a href="https://tiktok.com/bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i></a>
             </div>
         </div>

script.js

@@ -1,7 +1,7 @@
-// Carousel Functionality
 let currentIndex = 0;
 let slides = document.getElementsByClassName("carousel-item");
 let totalSlides = slides.length;
+let slideInterval;
 
 function showSlides() {
     for (let i = 0; i < totalSlides; i++) {
@@ -12,10 +12,13 @@ function showSlides() {
         currentIndex = 0;
     }
     slides[currentIndex].classList.add("active");
-    setTimeout(showSlides, 3000); // Change image every 3 seconds
 }
 
+// Set interval for automatic slide transition
+slideInterval = setInterval(showSlides, 3000);
+
 function moveSlides(n) {
+    clearInterval(slideInterval); // Stop automatic slide when manually navigating
     currentIndex += n;
     if (currentIndex >= totalSlides) {
         currentIndex = 0;
@@ -26,18 +29,17 @@ function moveSlides(n) {
         slides[i].classList.remove("active");
     }
     slides[currentIndex].classList.add("active");
+    slideInterval = setInterval(showSlides, 3000); // Restart automatic slideshow
 }
 
-// Initial call to start the slideshow
+// Start the slideshow on page load
-showSlides();
+document.addEventListener("DOMContentLoaded", function () {
+    showSlides(); // Show the first slide
+});
 
 function toggleMenu() {
-    var x = document.getElementById("myTopnav");
+    var topnav = document.getElementById("myTopnav");
-    if (x.className === "topnav") {
+    topnav.classList.toggle("responsive");
-        x.className += " responsive";
-    } else {
-        x.className = "topnav";
-    }
 }
 
 document.addEventListener("DOMContentLoaded", function () {

style2.css

@@ -0,0 +1,629 @@
+
+/* Base styles */
+:root {
+    --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 {
+    font-family: 'Montserrat', sans-serif;
+    color: var(--text-color);
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    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: var(--header-bg-color);
+    color: var(--white);
+    padding: 20px 0;
+}
+
+.logo {
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: center;
+}
+
+.logo img {
+    width: 150px;
+    height: auto;
+    margin-bottom: 20px;
+    border: 2px solid var(--background-color);
+    box-shadow: 0 0 35px var(--background-color);
+    border-radius: 12px;
+}
+
+/* Navigation */
+.topnav {
+    margin: 27px auto 0;
+    position: relative;
+    width: 600px;
+    height: 50px;
+    background-color: #4F5D2F;
+    border-radius: 12px;
+    font-size: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.topnav a {
+    line-height: 50px;
+    height: 100%;
+    font-size: 15px;
+    display: inline-block;
+    position: relative;
+    z-index: 1;
+    text-decoration: none;
+    text-transform: uppercase;
+    text-align: center;
+    color: #f5f5f5;
+    cursor: pointer;
+    transition: color 0.3s ease;
+    padding: 0 20px;
+}
+
+.topnav .hamburger {
+    display: none;
+    font-size: 30px;
+    cursor: pointer;
+    color: #f5f5f5;
+    padding: 0 10px;
+}
+
+/* Animation for hover */
+.topnav .animation {
+    position: absolute;
+    height: 100%;
+    top: 0;
+    z-index: 0;
+    transition: all 0.5s ease;
+    border-radius: 8px;
+}
+
+.topnav.responsive {
+    flex-direction: column;
+    align-items: flex-start;
+    background-color: var(--primary-color);
+}
+
+.topnav.responsive .hamburger {
+    display: block;
+}
+
+.topnav.responsive a {
+    display: block;
+    width: 100%;
+    text-align: left;
+    padding: 10px;
+    border-bottom: 1px solid var(--background-color);
+}
+
+/* Updated hover colors */
+.topnav .start-home,
+.topnav a:nth-child(1):hover~.animation {
+    background-color: #4F5D2F;
+}
+
+.topnav .start-about,
+.topnav a:nth-child(2):hover~.animation {
+    background-color: #5c6842;
+}
+
+.topnav .start-news,
+.topnav a:nth-child(3):hover~.animation {
+    background-color: #7d9264c2;
+}
+
+.topnav .start-products,
+.topnav a:nth-child(4):hover~.animation {
+    background-color: #5c6842;
+}
+
+.topnav .start-contact,
+.topnav a:nth-child(5):hover~.animation {
+    background-color: #4F5D2F;
+}
+
+/* Media query for smaller screens */
+@media (max-width: 768px) {
+    .topnav {
+        width: 100%;
+        height: auto;
+        justify-content: space-between;
+        position: relative;
+    }
+
+    .topnav a {
+        display: none;
+        width: 100%;
+        padding: 15px;
+        border-bottom: 1px solid var(--secondary-color);
+    }
+
+    .topnav .hamburger {
+        display: block;
+        cursor: pointer;
+        font-size: 30px;
+        padding: 10px;
+    }
+
+    .topnav.responsive a {
+        display: block;
+    }
+
+    .topnav.responsive .animation {
+        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: var(--white);
+    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-size: 3em;
+    margin-bottom: 20px;
+}
+
+.carousel-caption p {
+    font-size: 1.2em;
+    margin-bottom: 20px;
+}
+
+.prev,
+.next {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--white);
+    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);
+}
+
+/* Updated for mobile responsiveness */
+@media (max-width: 768px) {
+    .topnav {
+        width: 100%;
+        height: auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .topnav a {
+        width: 100%;
+        text-align: center;
+        padding: 10px 0;
+    }
+
+    .hero {
+        height: 40vh;
+    }
+
+    .carousel-caption h1 {
+        font-size: 2em;
+    }
+
+    .carousel-caption p {
+        font-size: 1em;
+    }
+
+    .prev,
+    .next {
+        font-size: 1.5em;
+    }
+
+    .about p,
+    .products p,
+    .news p {
+        font-size: 1em;
+        max-width: 90%;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero {
+        height: auto;
+        min-height: 200px;
+    }
+
+    .carousel-caption h1 {
+        font-size: 1.5em;
+    }
+
+    .carousel-caption p {
+        font-size: 0.8em;
+    }
+
+    .prev,
+    .next {
+        font-size: 1.2em;
+    }
+
+    .about p,
+    .products p,
+    .news p {
+        font-size: 0.9em;
+        max-width: 90%;
+    }
+}
+
+/* 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 */
+}
+
+.about {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start; /* Aligns the text and image by the top of the container */
+    justify-content: space-between;
+    gap: 40px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.creator {
+    flex: 1; /* Image container takes 1/4 of the space */
+    max-width: 300px;
+    height: auto;
+    border-radius: 50%;
+    box-shadow: 0 0 35px var(--header-bg-color);
+    align-self: flex-start;
+    margin-top: 30px;
+}
+
+.about p {
+    text-align: center; /* Ensure the text is left aligned */
+}
+
+.about,
+.products,
+.contact,
+.news {
+    padding: 30px 0;
+    text-align: center;
+}
+
+.about h2,
+.products h2,
+.contact h2,
+.news h2 {
+    font-size: 2.5em;
+    margin-bottom: 20px;
+}
+
+.about p,
+.products p,
+.contact p,
+.news p {
+    font-size: 1.1em;
+    line-height: 1.8;
+    margin-bottom: 20px;
+    max-width: 800px;
+    margin-left: auto;
+    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;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 20px;
+}
+
+.product-card {
+    background-color: var(--box-bg-color);
+    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: 80%;
+    border-radius: 10px;
+    margin-bottom: 15px;
+}
+
+.product-card h3 {
+    font-size: 1.5em;
+    margin-bottom: 10px;
+}
+
+.product-card p {
+    font-size: 1em;
+}
+
+/* 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;
+}
+
+.btn:hover,
+.product-card button:hover {
+    background-color: var(--secondary-color);
+    color: var(--primary-color);
+}
+
+/* Footer */
+.footer {
+    background-color: var(--primary-color);
+    color: var(--footer-text-color);
+    padding: 20px 0;
+    text-align: center;
+}
+
+.footer .social-media a {
+    color: var(--footer-text-color);    
+    margin: 0 10px;
+    font-size: 1.5em;
+    text-decoration: none;
+}
+
+.footer .social-media a:hover {
+    color: var(--white);
+}
+
+/* 404 Error Page */
+.error-404 {
+    padding: 100px 0;
+    text-align: center;
+}
+
+.error-404 h1 {
+    font-size: 6em;
+    color: var(--secondary-color);
+}
+
+.error-404 h2 {
+    font-size: 2.5em;
+    margin-bottom: 20px;
+}
+
+/* Forms */
+.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;
+}
+
+/* Media Queries */
+@media (max-width: 768px) {
+    .product-card {
+        width: calc(50% - 20px);
+    }
+
+    .hero {
+        height: 40vh;
+    }
+
+    .carousel-caption h1 {
+        font-size: 2em;
+    }
+
+    .carousel-caption p {
+        font-size: 1em;
+    }
+
+    .prev,
+    .next {
+        font-size: 1.5em;
+    }
+
+    .about p,
+    .products p,
+    .news p {
+        font-size: 1em;
+        max-width: 90%;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero {
+        height: 30vh;
+    }
+
+    .carousel-caption h1 {
+        font-size: 1.5em;
+    }
+
+    .carousel-caption p {
+        font-size: 0.8em;
+    }
+
+    .prev,
+    .next {
+        font-size: 1.2em;
+    }
+
+    .about p,
+    .products p,
+    .news 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: var(--primary-color);
+    }
+
+    .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: var(--white);
+    }
+
+    .product-grid {
+        flex-direction: column;
+    }
+
+    .product-card {
+        width: 100%;
+    }
+}