From baba62927426f8acd42cb0dc1304c5d089c2e644 Mon Sep 17 00:00:00 2001 From: Tristan Smith Date: Fri, 11 Oct 2024 22:30:22 -0400 Subject: [PATCH] jesus --- index.html | 1 + index2.html | 10 +- script.js | 22 +- style2.css | 629 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 647 insertions(+), 15 deletions(-) create mode 100644 style2.css diff --git a/index.html b/index.html index e2cc4e4..219f9a0 100644 --- a/index.html +++ b/index.html @@ -59,6 +59,7 @@ News Products Contact + ☰
diff --git a/index2.html b/index2.html index 7475a08..36c19b2 100644 --- a/index2.html +++ b/index2.html @@ -41,7 +41,7 @@ } - + @@ -59,6 +59,7 @@ News Products Contact + ☰
@@ -127,14 +128,14 @@

Brighten up cloudy days!

- View All Products +

View All Products

Contact Us

-

Have questions or special requests? Reach out to us!

+

Have questions or special requests? Reach out to me!

Email: bethany@willowmecreations.com
TikTok: bethanyrhodes6

@@ -149,8 +150,7 @@ diff --git a/script.js b/script.js index e7739ac..be7ec14 100644 --- a/script.js +++ b/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 -showSlides(); +// Start the slideshow on page load +document.addEventListener("DOMContentLoaded", function () { + showSlides(); // Show the first slide +}); function toggleMenu() { - var x = document.getElementById("myTopnav"); - if (x.className === "topnav") { - x.className += " responsive"; - } else { - x.className = "topnav"; - } + var topnav = document.getElementById("myTopnav"); + topnav.classList.toggle("responsive"); } document.addEventListener("DOMContentLoaded", function () { diff --git a/style2.css b/style2.css new file mode 100644 index 0000000..08d6d52 --- /dev/null +++ b/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%; + } +}