diff --git a/contact.html b/contact.html index dbee7e8..2878e93 100644 --- a/contact.html +++ b/contact.html @@ -37,7 +37,26 @@ for your next project, have a custom order in mind, or just want to share your crafting experiences, we're here for it all. Feel free to drop us a message using the form below or connect with us through our social media channels. Let's weave a thread of creativity and conversation together at - WillowMeCreations – where every message is a stitch in our community's vibrant tapestry.

+ WillowMeCreations where every message is a stitch in our community's vibrant tapestry.

+ +

Send me a message!

+

Have questions or special requests? Reach out to me!

+
+
+ + +
+
+ + +
+
+ + +
+ +
+

Contact Information

Email: willowmecreations@yahoo.com
TikTok: bethanyrhodes6

diff --git a/script.js b/script.js index ddbf619..91e93b0 100644 --- a/script.js +++ b/script.js @@ -1,51 +1,78 @@ +// Carousel Functionality let currentIndex = 0; let slides = document.getElementsByClassName("carousel-item"); let totalSlides = slides.length; function showSlides() { - for (let i = 0; i < totalSlides; i++) { - slides[i].classList.remove("active"); - } - currentIndex++; - if (currentIndex >= totalSlides) { - currentIndex = 0; - } - slides[currentIndex].classList.add("active"); - setTimeout(showSlides, 3000); // Change image every 3 seconds + for (let i = 0; i < totalSlides; i++) { + slides[i].classList.remove("active"); + } + currentIndex++; + if (currentIndex >= totalSlides) { + currentIndex = 0; + } + slides[currentIndex].classList.add("active"); + setTimeout(showSlides, 3000); // Change image every 3 seconds } function moveSlides(n) { - currentIndex += n; - if (currentIndex >= totalSlides) { - currentIndex = 0; - } else if (currentIndex < 0) { - currentIndex = totalSlides - 1; - } - for (let i = 0; i < totalSlides; i++) { - slides[i].classList.remove("active"); - } - slides[currentIndex].classList.add("active"); + currentIndex += n; + if (currentIndex >= totalSlides) { + currentIndex = 0; + } else if (currentIndex < 0) { + currentIndex = totalSlides - 1; + } + for (let i = 0; i < totalSlides; i++) { + slides[i].classList.remove("active"); + } + slides[currentIndex].classList.add("active"); } // Initial call to start the slideshow showSlides(); function toggleMenu() { - var x = document.getElementById("myTopnav"); - if (x.className === "topnav") { - x.className += " responsive"; - } else { - x.className = "topnav"; - } + var x = document.getElementById("myTopnav"); + if (x.className === "topnav") { + x.className += " responsive"; + } else { + x.className = "topnav"; + } } document.addEventListener("DOMContentLoaded", function () { - var pathname = window.location.pathname; - var navLinks = document.querySelectorAll(".topnav a"); + var pathname = window.location.pathname; + var navLinks = document.querySelectorAll(".topnav a"); - navLinks.forEach(function (link) { - if (link.getAttribute("href") === pathname.split("/").pop()) { - link.classList.add("active"); - } - }); + navLinks.forEach(function (link) { + if (link.getAttribute("href") === pathname.split("/").pop()) { + link.classList.add("active"); + } + }); +}); + +// Contact Form Functionality with EmailJS +document.getElementById("contactForm").addEventListener("submit", function(event) { + event.preventDefault(); // Prevent the default form submission + + // Initialize EmailJS + emailjs.init("BfYQtqbAmpqUEmFDF"); + console.log("EmailJS initialized."); + + // Prepare the template parameters + var templateParams = { + name: document.getElementById("name").value, + subject: document.getElementById("subject").value, + message: document.getElementById("message").value, + }; + + // Send the email using EmailJS + emailjs.send("service_ksnq0rd", "template_d1jme4h", templateParams) + .then(function(response) { + console.log("Email sent successfully:", response.status, response.text); + alert("Message sent successfully!"); + }, function(error) { + console.error("Failed to send message:", error); + alert("Failed to send message. Please try again later."); + }); }); diff --git a/style.css b/style.css index 8b06832..5c3bdac 100644 --- a/style.css +++ b/style.css @@ -405,6 +405,42 @@ body { color: #333; } +.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) { @@ -520,4 +556,5 @@ body { .product-card { width: 100%; } -} \ No newline at end of file +} +