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
+}
+