diff --git a/_site/about/index.html b/_site/about/index.html new file mode 100644 index 0000000..f12efea --- /dev/null +++ b/_site/about/index.html @@ -0,0 +1,282 @@ + + + + + + + + About - Bloom Valley Nursery Demo + + + + + + + + + + + + + + + + + + + + + + + +
+ +

Bloom Valley Nursery

+ + +
+ +
+ + +
+ +
+

The Story of Bloom Valley

+

+ Legend has it that in 1822, Benjamin Bloom, his wife Violet, and + their young daughter Nora stumbled upon a breathtaking valley + brimming with vibrant, rare flowers during their journey westward. + Enchanted by its beauty, they decided to settle there, abandoning + their plans to reach California. This picturesque haven became known + as Bloom Valley. +

+

+ Today, on the very land where the Bloom family found their paradise, + stands Bloom Valley Nursery. Still family-owned and operated, + siblings Bethany, Vincent, and Nathaniel Bloom carry forward a + legacy of preserving and sharing the natural beauty that captivated + the hearts of their ancestors over two centuries ago. +

+

Though many things have changed through the years, our commitment to serving our community has remained the same. Let us help you cultivate joy, one bloom at a time!

+
+
+
+
+
+

We Want to Hear From You!

+

Your feedback provides us with valuable insight into where we stand in our commitment to our neighbors, friends, and the entire Bloom Valley community.

+

Feel free to contact us by filling out the form below if you have any questions, concerns, or simply want to tell us how we can better serve you in the future. You are also welcome to give us a call at the number above if you need to speak with someone directly. Our friendly staff can help answer your questions or guide you in placing custom orders as well!

+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ +
+
+
+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/_site/community/index.html b/_site/community/index.html new file mode 100644 index 0000000..f841ce6 --- /dev/null +++ b/_site/community/index.html @@ -0,0 +1,264 @@ + + + + + + + + Community Events - Bloom Valley Nursery Demo + + + + + + + + + + + + + + + + + + + + + + + +
+ +

Bloom Valley Nursery

+ + +
+ +
+ + +

Mark Your Calendars!

+
+
+ +
+
+

Upcoming Events

+
+
+

Events at Bloom Valley Nursery

+

+ All workshops at Bloom Valley Nursery are provided free of charge to + anyone interested in learning techniques and ideas for creating a + visually appealing living space that can be personalized to suite + individual needs. Registration links are provided in each Google + Calendar Event by clicking on the date of the event within the + Google Calendar on this page. +

+
    +
  • + Gardening and Landscaping 101:
    When:
    2nd Tuesday of + Every Month @ 6:30 pm.
    Join Bethany Bloom as she shares her tips for + creating a themed decor through-out the home that you will be + delighted to share with your holiday guests. +
    • +
  • + Deck the Halls
    When: Saturday @ 10:00 am.
    Join + Nathaniel and Vincent as they guide us through picking and tending + the perfect live Christmas tree for your Christmas decoration + focal-point. +
    • +
  • + Christmas Eve and Christmas Day
    Bloom Valley + Nursery will close on Christmas Eve at 8:00 pm for any last-minute + shopping.
    The nursery will remain closed until January 2nd. During + this time, we will be making improvements to the nursery grounds and + store with the aim of better serving our Bloom Valley neighbors, + friends and family. We are excited to share the new features and changes with + you in the New Year!
    Happy Holidays!!! +
    • +
+
+
+

Community-Wide Events

+

+ This section includes local community events for which Bloom Valley + Nursery is in partner with or a sponsor of. These events are + typically free of charge, but can include sub-events by other local + organizations and businesses that may not be free of charge. Check + with specific organizations, businesses, and the Bloom Valley + Chamber of Commerce for specific details that may not be provided by + Bloom Valley Nursery. +

+
    +
  • + Tree Lighting Ceremony
    When:
    Thursday @ 6:00 pm.
    + Help us kick off the Holiday festivities by joining the Bloom + family, along with the Bloom Valley Chamber of Commerce, the Bloom + Valley Garden Club, and many other local businesses and + organizations, as we gather in front of City Hall for the annual Tree + Lighting Ceremony! This event will include performances by the Bloom + Valley Junior and Senior High Marching Bands, a workshop for making + tree ornaments, the annual Chili Cook-off, and much more! +
    • +
+
+ +
+
+ +

+ For more details, to add events to this page, or to leave feedback, + click here to send us a message. +

+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/_site/gallery/index.html b/_site/gallery/index.html new file mode 100644 index 0000000..062e289 --- /dev/null +++ b/_site/gallery/index.html @@ -0,0 +1,227 @@ + + + + + + + + Gallery - Bloom Valley Nursery Demo + + + + + + + + + + + + + + + + + + + + + + + +
+ +

Bloom Valley Nursery

+ + +
+ +
+ + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/_site/images/Client1_LogoPalette2_F0C06D.png b/_site/images/Client1_LogoPalette2_F0C06D.png new file mode 100644 index 0000000..6ad2d95 Binary files /dev/null and b/_site/images/Client1_LogoPalette2_F0C06D.png differ diff --git a/_site/images/accessories/BirdHouse.png b/_site/images/accessories/BirdHouse.png new file mode 100644 index 0000000..ae1692c Binary files /dev/null and b/_site/images/accessories/BirdHouse.png differ diff --git a/_site/images/accessories/PottingSoil.png b/_site/images/accessories/PottingSoil.png new file mode 100644 index 0000000..7bc91eb Binary files /dev/null and b/_site/images/accessories/PottingSoil.png differ diff --git a/_site/images/accessories/WateringCan.png b/_site/images/accessories/WateringCan.png new file mode 100644 index 0000000..2c92d78 Binary files /dev/null and b/_site/images/accessories/WateringCan.png differ diff --git a/_site/images/indoor/AloePlant.png b/_site/images/indoor/AloePlant.png new file mode 100644 index 0000000..e9a1124 Binary files /dev/null and b/_site/images/indoor/AloePlant.png differ diff --git a/_site/images/indoor/SpiderPlant.png b/_site/images/indoor/SpiderPlant.png new file mode 100644 index 0000000..ea3e8bb Binary files /dev/null and b/_site/images/indoor/SpiderPlant.png differ diff --git a/_site/images/indoor/StringofPearls.png b/_site/images/indoor/StringofPearls.png new file mode 100644 index 0000000..13fc9f8 Binary files /dev/null and b/_site/images/indoor/StringofPearls.png differ diff --git a/_site/images/indoor/aloe-plant.jpg b/_site/images/indoor/aloe-plant.jpg new file mode 100644 index 0000000..e146b62 Binary files /dev/null and b/_site/images/indoor/aloe-plant.jpg differ diff --git a/_site/images/indoor/peperomia.jpg b/_site/images/indoor/peperomia.jpg new file mode 100644 index 0000000..91d4f6f Binary files /dev/null and b/_site/images/indoor/peperomia.jpg differ diff --git a/_site/images/indoor/string-of-pearls.jpg b/_site/images/indoor/string-of-pearls.jpg new file mode 100644 index 0000000..0db5c86 Binary files /dev/null and b/_site/images/indoor/string-of-pearls.jpg differ diff --git a/_site/images/indoor/venus-fly-trap.jpg b/_site/images/indoor/venus-fly-trap.jpg new file mode 100644 index 0000000..3bd672d Binary files /dev/null and b/_site/images/indoor/venus-fly-trap.jpg differ diff --git a/_site/images/media/image1.jpg b/_site/images/media/image1.jpg new file mode 100644 index 0000000..e497892 Binary files /dev/null and b/_site/images/media/image1.jpg differ diff --git a/_site/images/media/image10.jpeg b/_site/images/media/image10.jpeg new file mode 100644 index 0000000..66dd55d Binary files /dev/null and b/_site/images/media/image10.jpeg differ diff --git a/_site/images/media/image11.jpeg b/_site/images/media/image11.jpeg new file mode 100644 index 0000000..2e795f2 Binary files /dev/null and b/_site/images/media/image11.jpeg differ diff --git a/_site/images/media/image12.jpeg b/_site/images/media/image12.jpeg new file mode 100644 index 0000000..f03c5b0 Binary files /dev/null and b/_site/images/media/image12.jpeg differ diff --git a/_site/images/media/image13.jpeg b/_site/images/media/image13.jpeg new file mode 100644 index 0000000..36b0f95 Binary files /dev/null and b/_site/images/media/image13.jpeg differ diff --git a/_site/images/media/image14.jpeg b/_site/images/media/image14.jpeg new file mode 100644 index 0000000..e90c949 Binary files /dev/null and b/_site/images/media/image14.jpeg differ diff --git a/_site/images/media/image15.jpeg b/_site/images/media/image15.jpeg new file mode 100644 index 0000000..0d9a6f5 Binary files /dev/null and b/_site/images/media/image15.jpeg differ diff --git a/_site/images/media/image16.jpeg b/_site/images/media/image16.jpeg new file mode 100644 index 0000000..6a11113 Binary files /dev/null and b/_site/images/media/image16.jpeg differ diff --git a/_site/images/media/image17.jpeg b/_site/images/media/image17.jpeg new file mode 100644 index 0000000..cea9bcb Binary files /dev/null and b/_site/images/media/image17.jpeg differ diff --git a/_site/images/media/image18.jpeg b/_site/images/media/image18.jpeg new file mode 100644 index 0000000..e8bdd4a Binary files /dev/null and b/_site/images/media/image18.jpeg differ diff --git a/_site/images/media/image19.jpeg b/_site/images/media/image19.jpeg new file mode 100644 index 0000000..079d944 Binary files /dev/null and b/_site/images/media/image19.jpeg differ diff --git a/_site/images/media/image2.jpg b/_site/images/media/image2.jpg new file mode 100644 index 0000000..e0e1da8 Binary files /dev/null and b/_site/images/media/image2.jpg differ diff --git a/_site/images/media/image20.jpeg b/_site/images/media/image20.jpeg new file mode 100644 index 0000000..1f0c322 Binary files /dev/null and b/_site/images/media/image20.jpeg differ diff --git a/_site/images/media/image21.jpeg b/_site/images/media/image21.jpeg new file mode 100644 index 0000000..491e533 Binary files /dev/null and b/_site/images/media/image21.jpeg differ diff --git a/_site/images/media/image22.jpeg b/_site/images/media/image22.jpeg new file mode 100644 index 0000000..5a54a18 Binary files /dev/null and b/_site/images/media/image22.jpeg differ diff --git a/_site/images/media/image23.jpeg b/_site/images/media/image23.jpeg new file mode 100644 index 0000000..13baef9 Binary files /dev/null and b/_site/images/media/image23.jpeg differ diff --git a/_site/images/media/image24.jpeg b/_site/images/media/image24.jpeg new file mode 100644 index 0000000..aea9021 Binary files /dev/null and b/_site/images/media/image24.jpeg differ diff --git a/_site/images/media/image25.jpeg b/_site/images/media/image25.jpeg new file mode 100644 index 0000000..e4cfad8 Binary files /dev/null and b/_site/images/media/image25.jpeg differ diff --git a/_site/images/media/image26.jpeg b/_site/images/media/image26.jpeg new file mode 100644 index 0000000..5d996ad Binary files /dev/null and b/_site/images/media/image26.jpeg differ diff --git a/_site/images/media/image27.jpeg b/_site/images/media/image27.jpeg new file mode 100644 index 0000000..7e920ed Binary files /dev/null and b/_site/images/media/image27.jpeg differ diff --git a/_site/images/media/image28.jpeg b/_site/images/media/image28.jpeg new file mode 100644 index 0000000..abea915 Binary files /dev/null and b/_site/images/media/image28.jpeg differ diff --git a/_site/images/media/image29.jpeg b/_site/images/media/image29.jpeg new file mode 100644 index 0000000..cccd21b Binary files /dev/null and b/_site/images/media/image29.jpeg differ diff --git a/_site/images/media/image3.jpeg b/_site/images/media/image3.jpeg new file mode 100644 index 0000000..7247357 Binary files /dev/null and b/_site/images/media/image3.jpeg differ diff --git a/_site/images/media/image30.jpeg b/_site/images/media/image30.jpeg new file mode 100644 index 0000000..f2f4f6a Binary files /dev/null and b/_site/images/media/image30.jpeg differ diff --git a/_site/images/media/image31.jpeg b/_site/images/media/image31.jpeg new file mode 100644 index 0000000..49871de Binary files /dev/null and b/_site/images/media/image31.jpeg differ diff --git a/_site/images/media/image32.jpeg b/_site/images/media/image32.jpeg new file mode 100644 index 0000000..54cf16e Binary files /dev/null and b/_site/images/media/image32.jpeg differ diff --git a/_site/images/media/image4.jpeg b/_site/images/media/image4.jpeg new file mode 100644 index 0000000..c07df38 Binary files /dev/null and b/_site/images/media/image4.jpeg differ diff --git a/_site/images/media/image5.jpeg b/_site/images/media/image5.jpeg new file mode 100644 index 0000000..0cca86d Binary files /dev/null and b/_site/images/media/image5.jpeg differ diff --git a/_site/images/media/image6.jpeg b/_site/images/media/image6.jpeg new file mode 100644 index 0000000..9747a58 Binary files /dev/null and b/_site/images/media/image6.jpeg differ diff --git a/_site/images/media/image7.jpeg b/_site/images/media/image7.jpeg new file mode 100644 index 0000000..fc3f98b Binary files /dev/null and b/_site/images/media/image7.jpeg differ diff --git a/_site/images/media/image8.jpeg b/_site/images/media/image8.jpeg new file mode 100644 index 0000000..1ed285e Binary files /dev/null and b/_site/images/media/image8.jpeg differ diff --git a/_site/images/media/image9.jpeg b/_site/images/media/image9.jpeg new file mode 100644 index 0000000..95134e7 Binary files /dev/null and b/_site/images/media/image9.jpeg differ diff --git a/_site/images/tools/birdhouse.jpg b/_site/images/tools/birdhouse.jpg new file mode 100644 index 0000000..b94b45f Binary files /dev/null and b/_site/images/tools/birdhouse.jpg differ diff --git a/_site/images/tools/gardening-tools.jpg b/_site/images/tools/gardening-tools.jpg new file mode 100644 index 0000000..796922a Binary files /dev/null and b/_site/images/tools/gardening-tools.jpg differ diff --git a/_site/images/tools/potting-soil.jpg b/_site/images/tools/potting-soil.jpg new file mode 100644 index 0000000..e0ca756 Binary files /dev/null and b/_site/images/tools/potting-soil.jpg differ diff --git a/_site/images/tools/watering-cans.jpg b/_site/images/tools/watering-cans.jpg new file mode 100644 index 0000000..6ef8e2d Binary files /dev/null and b/_site/images/tools/watering-cans.jpg differ diff --git a/_site/images/trees/AppleTree.png b/_site/images/trees/AppleTree.png new file mode 100644 index 0000000..e303282 Binary files /dev/null and b/_site/images/trees/AppleTree.png differ diff --git a/_site/images/trees/BirchTree.png b/_site/images/trees/BirchTree.png new file mode 100644 index 0000000..af43b15 Binary files /dev/null and b/_site/images/trees/BirchTree.png differ diff --git a/_site/images/trees/MapleTree.png b/_site/images/trees/MapleTree.png new file mode 100644 index 0000000..66906cf Binary files /dev/null and b/_site/images/trees/MapleTree.png differ diff --git a/_site/images/trees/apple-tree.jpg b/_site/images/trees/apple-tree.jpg new file mode 100644 index 0000000..2c0f6f3 Binary files /dev/null and b/_site/images/trees/apple-tree.jpg differ diff --git a/_site/images/trees/crepe-mertyl.jpg b/_site/images/trees/crepe-mertyl.jpg new file mode 100644 index 0000000..298da81 Binary files /dev/null and b/_site/images/trees/crepe-mertyl.jpg differ diff --git a/_site/images/trees/potted-spruce.jpg b/_site/images/trees/potted-spruce.jpg new file mode 100644 index 0000000..67d07d2 Binary files /dev/null and b/_site/images/trees/potted-spruce.jpg differ diff --git a/_site/images/trees/silver-birch.jpg b/_site/images/trees/silver-birch.jpg new file mode 100644 index 0000000..3c35c65 Binary files /dev/null and b/_site/images/trees/silver-birch.jpg differ diff --git a/_site/index.html b/_site/index.html new file mode 100644 index 0000000..b000a10 --- /dev/null +++ b/_site/index.html @@ -0,0 +1,266 @@ + + + + + + + + Landing - Bloom Valley Nursery Demo + + + + + + + + + + + + + + + + + + + + + + + +
+ +

Bloom Valley Nursery

+ + +
+ +
+ + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/_site/scripts/cart.js b/_site/scripts/cart.js new file mode 100644 index 0000000..f8e26a2 --- /dev/null +++ b/_site/scripts/cart.js @@ -0,0 +1,178 @@ +document.addEventListener('DOMContentLoaded', () => { + let cart = JSON.parse(sessionStorage.getItem('cart')) || []; + + // Get modal and cart-related elements + const modal = document.getElementById('cart-modal'); + const closeModal = document.querySelector('.close-modal'); + const cartItemsContainer = document.getElementById('cart-items'); + const cartTotalContainer = document.getElementById('cart-total'); + const clearCartModalButton = document.getElementById('clear-cart-modal-btn'); + const processOrderModalButton = document.getElementById('process-order-modal-btn'); + + // Custom confirmation modals for clear cart and process order + const confirmationModal = document.getElementById('confirmation-modal'); + const confirmationMessage = document.getElementById('confirmation-message'); + const confirmationCloseButton = document.getElementById('confirmation-close-btn'); + const confirmationConfirmButton = document.getElementById('confirmation-confirm-btn'); + + // Buttons + const shoppingCartButton = document.getElementById('shopping-cart'); + const cartDetailsButton = document.getElementById('cart-details'); + + // Custom alert modal for item added + const itemAddedModal = document.getElementById('item-added-modal'); + const itemAddedMessage = document.getElementById('item-added-message'); + const itemAddedClose = document.getElementById('item-added-close'); + + // Final confirmation modal for success messages + const finalConfirmationModal = document.getElementById('final-confirmation-modal'); + const finalConfirmationMessage = document.getElementById('final-confirmation-message'); + const finalConfirmationCloseButton = document.getElementById('final-confirmation-close-btn'); + + // Function to render the cart + function renderCart() { + cart = JSON.parse(sessionStorage.getItem('cart')) || []; + cartItemsContainer.innerHTML = ''; // Clear existing items + let total = 0; + + if (cart.length === 0) { + cartItemsContainer.innerHTML = '
  • Your cart is empty.
    • '; + cartTotalContainer.textContent = ''; + return; + } + + cart.forEach(item => { + const itemTotal = item.price * item.quantity; + total += itemTotal; + + const listItem = document.createElement('li'); + listItem.textContent = `${item.name} x ${item.quantity} - $${itemTotal.toFixed(2)}`; + cartItemsContainer.appendChild(listItem); + }); + + cartTotalContainer.textContent = `Subtotal: $${total.toFixed(2)}`; + } + + // Show cart modal with current cart content + function showModal() { + renderCart(); // Always render the latest cart + modal.style.display = 'flex'; // Show the cart modal + } + + // Show confirmation modal for actions (clear or process order) + function showConfirmationModal(message, action) { + confirmationMessage.textContent = message; + confirmationModal.style.display = 'flex'; // Show the confirmation modal + + // Confirm action on the "Confirm" button + confirmationConfirmButton.onclick = () => { + action(); // Execute the passed action (clear cart, process order) + confirmationModal.style.display = 'none'; // Close the confirmation modal after confirming + }; + + // Close confirmation modal without performing any action + confirmationCloseButton.onclick = () => { + confirmationModal.style.display = 'none'; + }; + } + + // Show final confirmation modal with success message + function showFinalConfirmationModal(message) { + finalConfirmationMessage.textContent = message; + finalConfirmationModal.style.display = 'flex'; // Show the final confirmation modal + finalConfirmationCloseButton.onclick = () => { + finalConfirmationModal.style.display = 'none'; // Close final confirmation modal + }; + } + + // Show custom modal when item is added to cart + function showItemAddedModal(message) { + itemAddedMessage.textContent = message; // Set message dynamically + itemAddedModal.style.display = 'flex'; // Show the modal + itemAddedClose.addEventListener('click', () => { + itemAddedModal.style.display = 'none'; // Close the modal + }); + } + + // Attach event listeners to both cart buttons + [shoppingCartButton, cartDetailsButton].forEach(button => { + if (button) { + button.addEventListener('click', showModal); // Open modal when clicked + } + }); + + // Close modal when clicking outside of it + window.addEventListener('click', event => { + if (event.target === modal) { + modal.style.display = 'none'; + } + }); + + // Close the modal by clicking the close button (for cart modal) + if (closeModal) { + closeModal.addEventListener('click', () => { + modal.style.display = 'none'; + }); + } + + // Add to cart functionality + const addToCartButtons = document.querySelectorAll('.add-to-cart-btn'); + addToCartButtons.forEach(button => { + button.addEventListener('click', () => { + const productId = parseInt(button.dataset.productId, 10); + const product = products.find(item => item.id === productId); + + if (product) { + const existingProduct = cart.find(item => item.id === productId); + + if (existingProduct) { + existingProduct.quantity++; + } else { + cart.push({ ...product, quantity: 1 }); + } + + sessionStorage.setItem('cart', JSON.stringify(cart)); // Save cart to session storage + showItemAddedModal(`${product.name} has been added to the cart!`); // Show custom modal + } + }); + }); + + // Event listener for Clear Cart button in the modal + if (clearCartModalButton) { + clearCartModalButton.addEventListener('click', () => { + showConfirmationModal('Are you sure you want to clear the cart?', () => { + sessionStorage.removeItem('cart'); + cart = []; + renderCart(); // Re-render cart after clearing it + showFinalConfirmationModal('Cart has been cleared!'); // Show final confirmation for cart clearing + }); + }); + } + + // Event listener for Process Order button in the modal + if (processOrderModalButton) { + processOrderModalButton.addEventListener('click', () => { + if (cart.length === 0) { + showItemAddedModal('Your cart is empty. Please add items to the cart before processing the order.'); + return; + } + + showConfirmationModal('Are you sure you want to process your order?', () => { + const receiptNumber = Math.floor(Math.random() * 1000000); // Generate receipt number + showFinalConfirmationModal(`Thank you for your order!\nYour receipt number is ${receiptNumber}.`); + sessionStorage.removeItem('cart'); + cart = []; + renderCart(); // Re-render cart after processing the order + }); + }); + } +}); + +const allCloseButtons = document.querySelectorAll('.close-modal'); +allCloseButtons.forEach(button => { + button.addEventListener('click', () => { + // Close the parent modal of the button clicked + const modal = button.closest('.modal'); + modal.style.display = 'none'; + }); +}); diff --git a/_site/scripts/feedback.js b/_site/scripts/feedback.js new file mode 100644 index 0000000..5977d04 --- /dev/null +++ b/_site/scripts/feedback.js @@ -0,0 +1,93 @@ +document.addEventListener('DOMContentLoaded', () => { + const feedbackForm = document.querySelector('#feedback-form form'); + const nameInput = document.getElementById('name'); + const emailInput = document.getElementById('email'); + const phoneInput = document.getElementById('tel'); + const messageInput = document.getElementById('message'); + + const alertBox = document.getElementById('custom-alert'); + const alertMessage = document.getElementById('alert-message'); + const alertOkButton = document.getElementById('alert-ok-button'); + const alertCloseButton = document.getElementById('alert-close-btn'); + + const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; // Email validation regex + const phoneRegex = /^[0-9]{10,15}$/; // Phone validation regex (10-15 digits) + const nameRegex = /^[a-zA-Z\s]{2,}$/; // Name validation regex (at least 2 letters) + const sqlInjectionRegex = /[;'"\\]/; // Prevent SQL injection-like characters + + // Form submission handler + feedbackForm.addEventListener('submit', (event) => { + event.preventDefault(); // Prevent form submission and page refresh + + const name = nameInput.value.trim(); + const email = emailInput.value.trim(); + const phone = phoneInput.value.trim(); + const message = messageInput.value.trim(); + + // Validate each field + if (!nameRegex.test(name)) { + showCustomAlert('Please enter a valid name (letters and spaces only).'); + return; + } + + if (!emailRegex.test(email)) { + showCustomAlert('Please enter a valid email address.'); + return; + } + + if (!phoneRegex.test(phone)) { + showCustomAlert('Please enter a valid phone number (10-15 digits).'); + return; + } + + if (sqlInjectionRegex.test(message)) { + showCustomAlert('Your message contains invalid characters.'); + return; + } + + // Save feedback to localStorage + const feedbackData = { + name, + email, + phone, + message, + timestamp: new Date().toISOString(), + }; + + // Retrieve existing feedback data or initialize an empty array + const feedbackList = JSON.parse(localStorage.getItem('feedbackList')) || []; + feedbackList.push(feedbackData); // Add new feedback to the list + localStorage.setItem('feedbackList', JSON.stringify(feedbackList)); // Save updated list to localStorage + console.log('Feedback saved to localStorage:', feedbackList); + + // Show success message + showCustomAlert('Thank you for your feedback! We appreciate hearing from you.'); + feedbackForm.reset(); // Clear the input fields after submission + }); + + // Function to show the custom alert modal + function showCustomAlert(message) { + alertMessage.textContent = message; // Set modal message + alertBox.classList.remove('hidden'); // Display the modal + alertBox.style.display = 'flex'; // Ensure the modal is visible + } + + // Function to close the custom alert modal + function closeCustomAlert() { + alertBox.classList.add('hidden'); // Hide the modal + alertBox.style.display = 'none'; // Ensure it's hidden + } + + // Close modal on "OK" button click + alertOkButton.addEventListener('click', closeCustomAlert); + + // Close modal on "X" button click + alertCloseButton.addEventListener('click', closeCustomAlert); + + // Close modal when clicking outside the modal content + window.addEventListener('click', (event) => { + if (event.target === alertBox) { + closeCustomAlert(); + } + }); +}); diff --git a/_site/scripts/gallery-carousel.js b/_site/scripts/gallery-carousel.js new file mode 100644 index 0000000..05510b6 --- /dev/null +++ b/_site/scripts/gallery-carousel.js @@ -0,0 +1,130 @@ +// Gallery Carousel .js +const products = { + trees: [ + { id: 1, name: "Crepe Mertyl Tree", description: "Beautiful Crepe Mertyl tree.", price: 55.00, image: "images/trees/crepe-mertyl.jpg" }, + { id: 2, name: "Silver Birch Tree", description: "Sturdy Silver Birch tree.", price: 45.00, image: "images/trees/silver-birch.jpg" }, + { id: 3, name: "Apple Tree", description: "Fruitful apple tree.", price: 35.00, image: "images/trees/apple-tree.jpg" }, + { id: 4, name: "Potted Spruce Tree", description: "Miniature Spruce in a white planter.", price: 35.00, image: "images/trees/potted-spruce.jpg" } + ], + indoor: [ + { id: 5, name: "Aloe Plant", description: "Thrives with 6-8 hours of direct sunlight a day.", price: 15.00, image: "images/indoor/aloe-plant.jpg" }, + { id: 6, name: "Peperonia Plant", description: "Low-maintenance and perfect for spaces with lots of natural light.", price: 12.50, image: "images/indoor/peperonia.jpg" }, + { id: 7, name: "String-of-Pearls Plant", description: "Best placed in east-facing windows or on shaded patios and balconies.", price: 20.00, image: "images/indoor/string-of-pearls.jpg" }, + { id: 12, name: "Venus Fly Trap", description: "Perfect for young botanists or your fly problem!", price: 12.50, image: "images/indoor/venus-fly-trap.jpg"} + ], + tools: [ + { id: 8, name: "Watering Cans", description: "Galvanized aluminum watering cans (x2).", price: 25.00, image: "images/tools/watering-cans.jpg" }, + { id: 9, name: "Potting Soil", description: "Premium-blend of nutrient-rich potting soil - 10 lb bag.", price: 8.00, image: "images/tools/potting-soil.png" }, + { id: 10, name: "Bird House", description: "Handmade wooden bird house for hanging or mounting.", price: 11.00, image: "images/tools/birdhouse.jpg" }, + { id: 11, name: "Gardening Tools", description: "Wooden handled gardening tools.", price: 20.00, image: "images/tools/gardening-tools.jpg"} + ] +}; + +document.addEventListener('DOMContentLoaded', () => { + console.log("DOM fully loaded and parsed"); // Check if the DOM is ready + + const productCarousel = document.getElementById('product-carousel'); + const scrollLeftButton = document.getElementById('scroll-left'); + const scrollRightButton = document.getElementById('scroll-right'); + const categoryButtons = document.querySelectorAll('.cat-btn'); + + // Scroll button functionality + scrollLeftButton.addEventListener('click', () => { + productCarousel.scrollBy({ left: -300, behavior: 'smooth' }); + }); + + scrollRightButton.addEventListener('click', () => { + productCarousel.scrollBy({ left: 300, behavior: 'smooth' }); + }); + + // Map buttons to categories + categoryButtons.forEach(button => { + button.addEventListener('click', (event) => { + event.preventDefault(); // Prevent default navigation + const url = new URL(button.href); // Parse the URL + const category = url.searchParams.get('category'); // Get category from the query parameter + updateProductList(category); // Update the product list + }); + }); + + // Load default category or the one from the current URL + const currentUrl = new URL(window.location.href); + const defaultCategory = currentUrl.searchParams.get('category') || 'trees'; + updateProductList(defaultCategory); +}); + +function updateScrollButtons() { + const scrollLeftButton = document.getElementById('scroll-left'); + const scrollRightButton = document.getElementById('scroll-right'); + const productCarousel = document.getElementById('product-carousel'); + + scrollLeftButton.style.display = productCarousel.scrollLeft === 0 ? 'none' : 'block'; + scrollRightButton.style.display = + productCarousel.scrollWidth - productCarousel.clientWidth === productCarousel.scrollLeft + ? 'none' + : 'block'; +} + +function updateProductList(category) { + const productList = document.getElementById("product-list"); + if (!productList) { + console.error("Element with ID 'product-list' not found in the DOM."); + return; + } + + productList.innerHTML = ""; // Clear existing products + console.log(`Updating product list for category: ${category}`); // Debugging line + + const selectedProducts = products[category]; + + if (selectedProducts) { + selectedProducts.forEach(product => { + const productCard = document.createElement("div"); + productCard.className = "product-card"; + + console.log(`Creating product card for: ${product.name}`); // Debugging line + + productCard.innerHTML = ` + ${product.name} +

    ${product.name}

    +

    ${product.description}

    +

    $${product.price}

    + + `; + productList.appendChild(productCard); + + // Add event listener for "Add to Cart" button + const addToCartButton = productCard.querySelector('.add-to-cart-btn'); + addToCartButton.addEventListener('click', () => { + addToCart(product.id); + }); + }); + } else { + console.error(`No products found for category: ${category}`); + } +} + +function addToCart(productId) { + const product = findProductById(productId); + if (product) { + let cart = JSON.parse(sessionStorage.getItem('cart')) || []; + const existingProduct = cart.find(item => item.id === productId); + + if (existingProduct) { + existingProduct.quantity++; + } else { + cart.push({ ...product, quantity: 1 }); + } + + sessionStorage.setItem('cart', JSON.stringify(cart)); + alert(`${product.name} has been added to your cart!`); + } +} + +function findProductById(productId) { + for (let category in products) { + const product = products[category].find(item => item.id === productId); + if (product) return product; + } + return null; +} diff --git a/_site/scripts/newsletter.js b/_site/scripts/newsletter.js new file mode 100644 index 0000000..609a7bd --- /dev/null +++ b/_site/scripts/newsletter.js @@ -0,0 +1,50 @@ +document.addEventListener('DOMContentLoaded', () => { + const newsletterForm = document.getElementById('newsletter-form'); + const emailInput = document.getElementById('email-input'); + const alertBox = document.getElementById('custom-alert'); + const alertMessage = document.getElementById('alert-message'); + const alertOkButton = document.getElementById('alert-ok-button'); + const alertCloseButton = document.getElementById('alert-close-btn'); + + // Form submission handler + newsletterForm.addEventListener('submit', (event) => { + event.preventDefault(); // Prevent form from submitting and refreshing the page + + const email = emailInput.value.trim(); + const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; + + // Check if email is valid + if (!emailRegex.test(email)) { + showCustomAlert('Please enter a valid email address.'); + return; + } + + // Show success message + showCustomAlert(`Thank you for subscribing, ${email}!`); + newsletterForm.reset(); // Clear the input field after submission + }); + + // Function to show the custom alert modal + function showCustomAlert(message) { + alertMessage.textContent = message; // Set the alert message + alertBox.classList.remove('hidden'); // Show the alert modal + alertBox.style.display = 'flex'; // Ensure the modal is displayed + + // Close the modal when the "OK" button is clicked + alertOkButton.addEventListener('click', closeCustomAlert); + alertCloseButton.addEventListener('click', closeCustomAlert); + } + + // Function to hide the custom alert modal + function closeCustomAlert() { + alertBox.classList.add('hidden'); // Hide the alert modal + alertBox.style.display = 'none'; // Ensure the modal is hidden + } + + // Close the modal if clicking outside the modal content + window.addEventListener('click', (event) => { + if (event.target === alertBox) { + closeCustomAlert(); + } + }); +}); diff --git a/_site/scripts/script.js b/_site/scripts/script.js new file mode 100644 index 0000000..f7bf166 --- /dev/null +++ b/_site/scripts/script.js @@ -0,0 +1,126 @@ +document.addEventListener("DOMContentLoaded", () => { + // ================== DEMO NOTICE MODAL ================== + if (!sessionStorage.getItem("demoNoticeAcknowledged")) { + let modal = document.createElement("div"); + modal.id = "demoModal"; + modal.style.position = "fixed"; + modal.style.left = "0"; + modal.style.top = "0"; + modal.style.width = "100%"; + modal.style.height = "100%"; + modal.style.background = "rgba(0, 0, 0, 0.7)"; + modal.style.display = "flex"; + modal.style.alignItems = "center"; + modal.style.justifyContent = "center"; + modal.style.zIndex = "1000"; + + let modalContent = document.createElement("div"); + modalContent.style.background = "white"; + modalContent.style.padding = "20px"; + modalContent.style.borderRadius = "10px"; + modalContent.style.textAlign = "center"; + modalContent.style.width = "80%"; + modalContent.style.maxWidth = "400px"; + + let heading = document.createElement("h2"); + heading.innerText = "Demo Notice"; + + let message = document.createElement("p"); + message.innerText = + "This site is for demonstration purposes only and is not a real e-commerce store. No purchases can be made."; + + let closeButton = document.createElement("button"); + closeButton.innerText = "I Understand"; + closeButton.style.padding = "10px 20px"; + closeButton.style.marginTop = "15px"; + closeButton.style.border = "none"; + closeButton.style.background = "#007bff"; + closeButton.style.color = "white"; + closeButton.style.fontSize = "16px"; + closeButton.style.cursor = "pointer"; + closeButton.style.borderRadius = "5px"; + + closeButton.addEventListener("click", function () { + modal.style.display = "none"; + sessionStorage.setItem("demoNoticeAcknowledged", "true"); + }); + + modalContent.appendChild(heading); + modalContent.appendChild(message); + modalContent.appendChild(closeButton); + modal.appendChild(modalContent); + document.body.appendChild(modal); + } + + // ================== SHOPPER PERKS CAROUSEL ================== + const perks = document.querySelectorAll(".perk-item"); + let currentIndexPerks = 0; + + function showNextPerk() { + perks.forEach(perk => { + perk.classList.remove("visible"); + perk.style.display = "none"; + }); + + perks[currentIndexPerks].classList.add("visible"); + perks[currentIndexPerks].style.display = "block"; + + currentIndexPerks = (currentIndexPerks + 1) % perks.length; + } + + showNextPerk(); + setInterval(showNextPerk, 2250); + + // ================== CUSTOMER HIGHLIGHTS CAROUSEL ================== + const testimonials = document.querySelectorAll(".testimonial"); + let currentIndexTestimonials = 0; + + function showNextTestimonial() { + testimonials.forEach(testimonial => { + testimonial.classList.remove("visible"); + testimonial.style.display = "none"; + }); + + testimonials[currentIndexTestimonials].classList.add("visible"); + testimonials[currentIndexTestimonials].style.display = "block"; + + currentIndexTestimonials = (currentIndexTestimonials + 1) % testimonials.length; + } + + showNextTestimonial(); + setInterval(showNextTestimonial, 3500); + + // ================== FEATURED ITEMS CAROUSEL ================== + const featuredItems = document.querySelectorAll("#featured-images .featured-item"); + let currentIndex = 0; + + function showNextItem() { + featuredItems[currentIndex].classList.remove("active"); + currentIndex = (currentIndex + 1) % featuredItems.length; + featuredItems[currentIndex].classList.add("active"); + } + + featuredItems[currentIndex].classList.add("active"); + setInterval(showNextItem, 3000); + + // ================== UPDATED FEATURED ITEMS CAROUSEL ================== + let currentIndexFeatured = 0; + + function updateFeaturedImages() { + featuredItems.forEach((item, index) => { + const text = item.closest('a'); + if (text) text.style.display = (index === currentIndexFeatured ? "block" : "none"); + + const image = item; + image.style.display = (index === currentIndexFeatured ? "block" : "none"); + }); + } + + function showNextFeatured() { + currentIndexFeatured = (currentIndexFeatured + 1) % featuredItems.length; + updateFeaturedImages(); + } + + updateFeaturedImages(); + setInterval(showNextFeatured, 3000); +}); diff --git a/_site/styles/about.css b/_site/styles/about.css new file mode 100644 index 0000000..e341750 --- /dev/null +++ b/_site/styles/about.css @@ -0,0 +1,217 @@ +/* |--↓-↓-↓ Start about.html ↓-↓-↓--| */ +#about-page main { + display: flex; + flex-direction: column; + align-items: center; +} + +#main-top { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 95vw; + position: center; +} + +#business-info { + display: block; + align-items: center; + width: 25vw; + background-color:#f0c06d; + border: solid #f7f7f7; + border-radius: 10px; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); + +} + +#phone, +#hours { + background-color: #f7f7f7; + border: solid #bdd4da; + border-radius: 10px; + margin: 5px 10px; +} + + + +#business-info h3, +#feedback-intro h1 { +font-size: 1.875rem; +text-align: center; +text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */ +-0.5px -0.5px 2px #014038, /* Top-left base shadow */ +-0.5px 0.5px 2px #014038, /* Bottom-left base shadow */ +0.5px -0.5px 2px #014038; /* Top-right base shadow */ +color: #f7f7f7; +background-color: #96baa0; +border: solid #f7f7f7; +max-width: 75vw; +border-radius: 10px; +padding-left: 10px; +transform: translateX(0px); +box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); +} + +#business-info p { + text-align: center; + font-size: 14pt; +} + +#business-info h4 { + text-align: center; + background-color: #bdd4da; + border: solid #f7f7f7; + border-radius: 15px; + padding: 0 10px; + width: 50%; + margin-left: 22.5%; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); +} + +#story { + display: flex; + flex-direction: column; + align-items: center; + justify-content: left; + width: 70vw; + margin-left: 30px; +} + +#story h1 { + background-color: #96baa0; + color: #f7f7f7; + border: solid #f7f7f7; + border-radius: 15px; + text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */ +-0.5px -0.5px 2px #014038, /* Top-left base shadow */ +-0.5px 0.5px 2px #014038, /* Bottom-left base shadow */ +0.5px -0.5px 2px #014038; /* Top-right base shadow */ + width: 50%; + padding: 5px 10px; + text-align: center; + margin-right: 12.5%; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); +} + +#story p { + color: #014038; + font-size: 1.25rem; + font-weight: bold; +} + +#feedback { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + background-color: #96baa0; + border: solid #f7f7f7; + border-radius: 15px; + width: 90vw; + margin-top: 30px; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); +} + +#feedback h1 { + background-color: #a4ccd6; + border: solid #f7f7f7; + border-radius: 10px; + width: 50vw; + padding: 5px 10px; + text-align: center; + margin-left: 25vw; + margin-right: 25vw; + text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */ + -0.5px -0.5px 2px #014038, /* Top-left base shadow */ + -0.5px 0.5px 2px #014038, /* Bottom-left base shadow */ + 0.5px -0.5px 2px #014038; /* Top-right base shadow */ + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +} + +#feedback h3 { + color: #00231c; + font-weight: bold; + width: 85vw; + text-align: center; + margin-left: 7.5vw; + margin-right: 7.5vw; + +} + +#feedback p { + color: #00231c; + width: 85vw; + text-align: center; + margin-left: 7.5vw; + margin-right: 7.5vw; + font-weight: bold; +} + +#feedback-form form{ + display: flex; + flex-direction: row; + gap: 20px; + align-items: baseline; + width: 95%; + margin-top: 20px; /* Adds some spacing above the form */ +} + +#customer-info { + display: flex; + flex-direction: column; + align-content: center; + width: 95%; /* Adjusted width */ + gap: 25px; /* Adds spacing between input fields */ + text-align: center; +} + +#customer-info input { + background-color: #f7f7f7; + border: solid #014038; + border-radius: 15px; + width: 90%; /* Ensures the input fields fill the section width */ + height: 30px; /* Adjusts height to match the textarea */ + text-align: center; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); +} + +#customer-message { + display: flex; + flex-direction: column; + align-items: center; + width: 90%; /* Adjusted width */ +} + +#customer-message #message-field textarea { + width: 50vw; /* Takes full width of the section */ + height: 30vh; /* Adjust height as needed */ + background-color: #f7f7f7; + border: solid #014038; + border-radius: 15px; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); +} + +#form-submit-btn { + display: flex; + justify-content: center; + margin-top: 10px; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); +} + +#form-submit { + padding: 10px 20px; + background-color: #bdd4da; + border: solid #f7f7f7; + border-radius: 10px; + color: #014038; + font-size: 1rem; + cursor: pointer; + margin-bottom: 10px; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); +} + +#form-submit:hover { + background-color: #f7f7f7; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); +} +/* | ↑-↑-↑ End About.html ↑-↑-↑--| */ \ No newline at end of file diff --git a/_site/styles/base.css b/_site/styles/base.css new file mode 100644 index 0000000..fa167ac --- /dev/null +++ b/_site/styles/base.css @@ -0,0 +1,87 @@ +* Global Styles */ +html { + font-size: 17px; /* Base font size for scaling */ + scroll-behavior: smooth; +} + +body { + display: flex; + flex-direction: column; + align-items: center; + font-family: 'Calibri', sans-serif; + font-size: 1rem; /* Default font size based on 16px */ + line-height: 1.5; + margin: 0; + padding: 0; + background-color: #bdd4da; /* Sky Bloom */ +} + +body h1 { + text-shadow: 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */ + -0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */ + -0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */ + 0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */ +} + + + +/* Title Large (Arial Bold 30px) */ +h1 { + font-family: 'Arial', sans-serif; + font-weight: bold; + font-size: 1.875rem; /* 30px for title */ +} + +/* Title (Arial Bold 25px) */ +h2 { + font-family: 'Arial', sans-serif; + font-weight: bold; + font-size: 1.5625rem; +} + +/* Subtitle (Comfortaa Normal 15px) */ +h3 { + font-family: 'Comfortaa', sans-serif; + font-size: .9375rem ; /* 15px for subtitle */ +} + +/* Body Large (Calibri Normal 20px) */ +p.body-large { + font-family: 'Calibri', sans-serif; + font-size: 1.25rem; /* 20px for body large */ +} + +/* Body Strong (Calibri Bold 16px) */ +strong { + font-family: 'Calibri', sans-serif; + font-weight: bold; + font-size: 1rem; /* 16px for body strong */ +} + +/* Body (Calibri Normal 16px) */ +p.body { + font-family: 'Calibri', sans-serif; + font-size: 1rem; /* 16px for regular body text */ +} + +/* Captions (Arial Bold 11px) */ +figcaption { + font-family: 'Arial', sans-serif; + font-weight: bold; + font-size: .6875rem; /* 11px for captions */ +} + +@media (max-width: 780px) { + html{ + font-size: 14px; + } +} + + +main { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + padding: 20px; +} \ No newline at end of file diff --git a/_site/styles/community.css b/_site/styles/community.css new file mode 100644 index 0000000..ff7f35e --- /dev/null +++ b/_site/styles/community.css @@ -0,0 +1,105 @@ +/* |--↓-↓-↓ Start Community.html ↓-↓-↓--| */ +#community-page { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + gap: 20px; + width: 95vh; + height: auto; +} + +#community-page h1 { + font-size: 1.6rem; + background-color: #96baa0; + border: solid #f7f7f7; + border-radius: 15px; + width: 50vw; + color: #f7f7f7; + text-decoration: underline; + text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */ + -0.5px -0.5px 1px #014038, /* Top-left base shadow */ + -0.5px 0.5px 1px #014038, /* Bottom-left base shadow */ + 0.5px -0.5px 1px #014038; /* Top-right base shadow */ + padding: 5px 10px; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); +} + +#calendar-events-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + border: none; +} +.calendar iframe{ + width: 80vw; + height: auto; + margin-bottom: 20px; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); +} + +.events { + background-color: #f0c06d; + border: solid #014038; + border-radius: 15px; + padding: 10px; + width: 95vw; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); +} + +.events h2 { + background-color: #96baa0; + border: solid #f7f7f7; + border-radius: 15px; + padding: 10px 15px; + width: 50vw; + text-decoration: underline; + font-weight: bold; + font-size: 1.4rem; + text-align: center; + margin-left: 20vw; + transform: translateY(-6vh); + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); +} + +.events h3 { + background-color: #96baa080; + border: solid #bdd4da; + border-radius: 15px; + padding: 5px 10px; + width: 50vw; + text-decoration: underline; + font-weight: bold; + font-size: 1.2rem; + text-align: center; + margin-left: 20vw; + transform: translateY(-5vh); + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); +} + +.events p { + transform: translateY(-5vh); +} + +.event-list ul { + list-style-type: none; + transform: translateY(-5vh); +} + +.event-list li { + background-color: #f7f7f7; + border: solid #bdd4da; + border-radius: 15px; + text-align: center; + padding: 5px 10px; + margin-bottom: 10px; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); +} + +.events strong { + color:#014038; + font-size: 1.1rem; +} + +/* | ↑-↑-↑ End Community.html ↑-↑-↑--| */ \ No newline at end of file diff --git a/_site/styles/gallery.css b/_site/styles/gallery.css new file mode 100644 index 0000000..c03996b --- /dev/null +++ b/_site/styles/gallery.css @@ -0,0 +1,194 @@ +/* |--↓-↓-↓ Start gallery.html ↓-↓-↓--| */ +#main-gallery { + display: flex; + flex-direction: column; + align-items: center; +} + +#gallery-top { + display: flex; + flex-direction: row; + align-items: center; + width: 95vw; + gap: 20px +} + +#product-carousel-feature h2 { + font-size: 1.875rem; + text-align: center; + text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */ + -0.5px -0.5px 1px #014038, /* Top-left base shadow */ + -0.5px 0.5px 1px #014038, /* Bottom-left base shadow */ + 0.5px -0.5px 1px #014038, /* Top-right base shadow */ + 0.5px 0.5px .5px #bdd4da, /* Bottom-right mid shadow */ + -0.5px -0.5px .5px #bdd4da, /* Top-left mid shadow */ + -0.5px 0.5px .5px #bdd4da, /* Bottom-left mid shadow */ + 0.5px -0.5px .5px #bdd4da, /* Top-right mid shadow */ + 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */ + -0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */ + -0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */ + 0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */ + color: #f7f7f7; + background-color: #96baa0; + border: solid #f7f7f7; + border-radius: 10px; + padding-left: 20px; + transform: translateX(30px); + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); +} + +#product-category-card { + display: flex; + flex-direction: row; + align-items: center; + text-align: center; + width: 65vw; +} + +#product-carousel { + display: flex; /* Flexbox layout for horizontal row */ + gap: 20px; /* Space between product cards */ + overflow-x: auto; /* Enable horizontal scrolling */ + scroll-behavior: smooth; /* Smooth scrolling for buttons */ + padding: 10px; /* Optional padding inside the carousel */ + white-space: nowrap; /* Prevent wrapping to a new row */ + transform: translateX(4vw); +} + +.product-card { + display: inline-block; /* Ensure cards stay in a row */ + min-width: 150px; /* Set the card size */ + max-width: 200px; + max-height: auto; + flex: 0 0 auto; /* Prevent resizing of cards */ + border: 1px solid #ddd; /* Optional border */ + border-radius: 8px; + padding: 10px; + margin-left: 20px; + align-items: center; + text-align: center; + white-space: wrap; + background-color: #f7f7f7; /* Optional background */ +} + +.product-card img { + max-width: 100%; + height: auto; + display: block; + border-radius: 8px; + align-items: center; +} + +#scroll-left, #scroll-right { + cursor: pointer; /* Show pointer to indicate clickable buttons */ + background-color: #014038; /* Dark green background */ + color: white; + border: none; + padding: 10px; + border-radius: 50%; + font-size: 1.5rem; + transform: translateX(4.5vw); +} + +@media (max-width: 768px) { + .product-card { + min-width: 150px; + max-width: 200px; + } + + #product-carousel { + gap: 5px; + } +} + + +#main-gallery #right-aside { + width: 25vw; +} + +#main-gallery #right-aside h2 { + font-size: 1.675rem; + background-color: #bdd4da; + color: #014038; + border: solid #014038; + border-radius: 5px; + padding: 0 5px; + white-space: nowrap; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +#main-gallery .categories ul { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + list-style-type: none; +} + +#main-gallery .categories ul li { + border: solid #014038; + border-radius: 5px; + background-color: #96baa0; + margin-top: 20px; + margin-right: 35px; + min-width: 100%; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +#main-gallery .categories a { + color: #014038; + font-size: 1.3rem; +} + +button#cart-details { + background-color: #f7f7f7; + border: solid #014038; + border-radius: 15px; + color: #014038; + font-weight: bold; + font-size: 1.4em; + text-align: center; /* Align text horizontally */ + height: 30px; /* Adjust height to fit text comfortably */ + padding: 0 15px; /* Horizontal padding for spacing */ + margin-top: 10px; + margin-bottom: 10px; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.3); + transform: translateX(-15vw) translateY(-5vh); + transition: background-color 0.3s ease, color 0.3s ease; + display: flex; /* Flexbox ensures content alignment */ + align-items: center; /* Center text vertically */ + justify-content: center; /* Center text horizontally */ +} + +button#cart-details:hover { + background-color: #014033; + color: #f7f7f7; + border: solid #f7f7f7; + border-radius: 15px; +} + +.product-card { + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.3); + transition: background-color 0.3s ease, color 0.3s ease; +} + +.add-to-cart-btn { + cursor: pointer; + background-color: #f7f7f7; + border: solid #014038; + color: #014038; + font-weight: bold; + border-radius: 5px; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); + transition: background-color 0.3s ease, color 0.3s ease; +} + +.add-to-cart-btn:hover { + background-color: #014038; + border: solid #f7f7f7; + color: #f7f7f7; + border-radius: 5px; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); + +} +/* |--↑-↑-↑ End gallery.html ↑-↑-↑--| */ \ No newline at end of file diff --git a/_site/styles/header-footer.css b/_site/styles/header-footer.css new file mode 100644 index 0000000..645c5e2 --- /dev/null +++ b/_site/styles/header-footer.css @@ -0,0 +1,333 @@ +/* |--↓-↓-↓ Start Header ↓-↓-↓--| */ +header { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 20px; + background-color: #bdd4da; /* Light teal */ + border-bottom: 3px solid #96baa0; /* Pale green for contrast */ +} + +header .logo { + position: absolute; + left: 3vw; + top: 20px; + width: auto; /* Maintains aspect ratio */ + height: auto; /* Constrains the height to 80px */ + max-width: 20vw; +} + + +header .logo img { + display: block; + width: 180px; + height: auto; + max-width: 100%; + filter: drop-shadow(0 0 2px #f0c06d) drop-shadow(0 0 0px #014038); /* Yellow outline effect */ + + +} + +header h1 { + font-family: 'Georgia', serif; + font-size: 2.8rem; + color: #014038; /* Dark green for the title */ + margin: 10px 0; + text-align: center; +} + +header p.tagline { + font-family: 'Arial', sans-serif; + font-size: 1.4rem; + color: #96baa0; /* Pale green for the tagline */ + margin: 0; + text-align: center; +} + +nav { + margin-top: 20px; + background-color: #f7f7f7; /* White for navigation background */ + padding: 10px 20px; + border-radius: 5px; + width: 100%; /* Ensures the nav spans the width of the header */ + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); +} + +button#shopping-cart{ + position: absolute; + top: 100px; + right: 100px; + padding: 20px; + border-radius: 10px; + background-color: #f7f7f7; + color: #014038; + cursor: pointer; + z-index: 5; + transition: background-color 0.3s ease, color 0.3s ease; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +button#shopping-cart:hover { + background-color: #014038; + color: #96baa0; + border: solid #f7f7f7; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); +} + +nav ul { + display: flex; + justify-content: center; + list-style: none; + padding: 0; + margin: 0; +} + +nav ul li { + margin: 0 20px; + border-radius: 5px; +} + +.current-page { + font-size: 1.4em; + font-weight: bold; + color: #014038; + background-color: #96baa0; + border: none; + text-decoration: underline; + white-space: wrap; + text-align: center; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +nav ul li a { + font-family: 'Arial', sans-serif; + font-size: 1rem; + font-weight: bold; + border: solid #f7f7f7; + color: #014038; + text-decoration: underline; + padding: 8px 15px; + border-radius: 10px; + transition: background-color 0.3s ease, color 0.3s ease; +} + +nav ul li a:hover { + background-color: #f7f7f7; + color: #014038; + border: solid #014038; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); +} + +/* |--↓-↓-↓ Start Footer ↓-↓-↓--| */ +#footer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; +} + +#newsletter-container { + display: inline-block; + margin-bottom: 10px; + text-align: center; +} + +#email-input { + display: inline-block; + width: 55%; + padding: 5px 10px; + text-align: center; + border-radius: 10px; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); +} + +button#submit-btn { + display: inline-block; + padding: 5px 10px; + border-radius: 10px; + cursor: pointer; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); + z-index: 5; +} + +footer div label { + font-size: 1.2rem; + font-weight: bold; + color: #014038 +} + +#newsletter-form { + display: inline-block; + background-color: #f0c06d; + border: solid #f7f7f7; + border-radius: 10px; + width: 60%; + padding: 5px; + text-align: center; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); +} + +#footer-nav ul { + position: relative; + list-style-type: none; + display: inline-block; + flex-direction: row; + margin-top: 20px; + background-color: #f7f7f7; /* White for navigation background */ + padding: 5px 20px; + border-radius: 5px; + width: 100%; /* Ensures the nav spans the width of the header */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds subtle shadow for depth */ +} + +#footer-nav ul li { + display: inline-block; + align-items: center; + padding: 5px 10px; + margin: 0 20px; +} + +#footer-nav ul li .current-page { + font-size: 1.2em; + font-weight: bold; + color: #014038; + background-color: #96baa0; + text-decoration: underline; +} + +#footer-nav ul li a { + font-family: 'Arial', sans-serif; + font-size: 1rem; + font-weight: bold; + color: #014038; /* Dark green for the links */ + text-decoration: none; + padding: 8px 15px; + border-radius: 5px; + transition: background-color 0.3s ease, color 0.3s ease; +} + +#footer-nav ul li a:hover { + background-color: #f7f7f7; + color: #014038; + border: solid #014038; + border-radius: 10px; +} + +#social-media { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; +} + +#social-media p { +text-align: center; +} + +#social-media ul { + position: relative; + display: inline-block; + list-style-type: none; + text-align: center; +} + +#social-media ul li { + display: inline-block; + margin: 0 10px; + padding: 0 10px; + color: #014038; +} + +#social-media ul li a { + font-family: 'Arial', sans-serif; + font-size: 1rem; + color: #014038; /* Dark green for the links */ + text-decoration: none; + padding: 8px 15px; + border-radius: 5px; + transition: background-color 0.3s ease, color 0.3s ease; +} + +#social-media ul li a:hover { + background-color: #f0c06d; + color: #f7f7f7; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); + +} + +#copyright { + text-align: center; + margin-bottom: 20px; +} + + +/* Styles for the modal */ +.modal { + display: none; /* Initially hidden */ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */ + justify-content: center; + align-items: center; + z-index: 1000; +} + +.modal-content { + background-color: #fff; + padding: 20px; + border-radius: 10px; + width: 80%; + max-width: 600px; + text-align: center; +} + +.modal-buttons button { + margin: 10px; +} + +.close-modal { + position: absolute; + top: 10px; + right: 20px; + font-size: 1.5rem; + cursor: pointer; +} + +.perk-item, +.testimonial, +.featured-item { + display: none; /* Hide all by default */ +} + +.perk-item.visible, +.testimonial.visible, +.featured-item.active { + display: block; /* Show visible or active items */ +} + +#featured-images { + overflow: hidden; /* Hide anything outside the container */ + text-align: center; /* Center align content if necessary */ + width: 100%; /* Match the width of the container */ + height: auto; /* Let the height adapt to content */ +} + +#featured-images img { + display: none; /* Hide all items initially */ + max-width: 100%; /* Ensure images are responsive */ + height: auto; /* Maintain aspect ratio */ + background-color: #96baa0; + border: solid #014038; + border-radius: 5px; + padding: 5px; +} + +.visible { + display: block; +} \ No newline at end of file diff --git a/_site/styles/index.css b/_site/styles/index.css new file mode 100644 index 0000000..79a8ce9 --- /dev/null +++ b/_site/styles/index.css @@ -0,0 +1,216 @@ +#left-aside, +#right-aside { + flex: 1; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +#featured-container { + flex: 2; +} + +#left-aside { + display: flex; + flex-direction: column; + background-color: #f0c06d; + border: solid #f7f7f7; + padding: 5px 10px; + margin-top: 10px; + border-radius: 10px; +} + +#left-aside h2 { + border: solid #014038; + background-color: #bdd4da; + border-radius: 10px; +} + +#perks-feature-container { + background-color: #96baa0; + color: #014038; + border: solid #014038; + border-radius: 10px; + padding: 5px 10px; + margin-top: 5px; + text-align: center; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +.perk-item { + background-color: #f7f7f7; + color: #014038; + border: solid #014038; + border-radius: 10px; + padding: 5px 10px; + white-space: wrap; + max-height: 250px; + min-height: 250px; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); + text-align: +} + +#perks-heading { + font-family: 'Arial', sans-serif; + font-weight: bold; + font-size: 1.875rem; /* 30px for title */ + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +#featured-container { + display: flex; + flex-direction: column; + text-align: center; + margin-right: 40px; + margin-top: 10px; +} + +#featured-container h2 { + font-size: 1.875rem; + text-align: center; + text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */ + -0.5px -0.5px 1px #014038, /* Top-left base shadow */ + -0.5px 0.5px 1px #014038, /* Bottom-left base shadow */ + 0.5px -0.5px 1px #014038, /* Top-right base shadow */ + 0.5px 0.5px .5px #bdd4da, /* Bottom-right mid shadow */ + -0.5px -0.5px .5px #bdd4da, /* Top-left mid shadow */ + -0.5px 0.5px .5px #bdd4da, /* Bottom-left mid shadow */ + 0.5px -0.5px .5px #bdd4da, /* Top-right mid shadow */ + 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */ + -0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */ + -0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */ + 0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */ + color: #f7f7f7; + background-color: #96baa0; + border: solid #f7f7f7; + border-radius: 10px; + padding-left: 20px; + transform: translateX(30px); + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); +} + +#featured-container ul { + list-style-type: none; + display: flex; + flex-direction: column; +} + +#featured-image ul li { + align-content: space-between; +} + +#featured-images ul li a { + color: #014038; + background-color: #f7f7f7; + border-radius: 10px; + padding: 5px 10px; +} + +#featured-images a { + display: block; + text-align: center; + font-size: 1.4rem; + color:#014038; +} + +#featured-images img { + display: block; + margin: 0 auto; + margin-bottom: 10px; + margin-right: 45px; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +#testimonials-feature{ + background-color: #96baa0; + color: #014038; + border: solid #014038; + border-radius: 10px; + padding: 5px 10px; + margin-top: 10px; + white-space: wrap; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +#testimonials-feature h2 { + font-size: 1.675rem; + text-align: center; +} + +.testimonial { + background-color: #f7f7f7; + color: #014038; + border: solid #014038; + border-radius: 5px; + padding: 5px 10px; + white-space: wrap; + min-height: 250px; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); + text-align: center; +} + +#right-aside { + display: flex; + flex-direction: column; + align-items: center; + background-color: #f0c06d; + width: 100%; + height: auto; + padding: 5px 10px; + margin-left: 40px; + margin-top: 10px; + border: solid #f7f7f7; + border-radius: 10px; +} + +#category-nav-container { + background-color: #f7f7f7; + color: #014038; + border: solid #014038; + border-radius: 10px; + padding: 5px 10px; + margin-top: 5px; + text-align: center; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +#right-aside h2 { + font-size: 1.675rem; + background-color: #bdd4da; + color: #014038; + border: solid #014038; + border-radius: 10px; + padding: 0 5px; + white-space: nowrap; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +.categories ul { + display: flex; + flex-direction: column; + align-items: center; + list-style-type: none; +} + +.categories ul li { + border: solid #014038; + border-radius: 10px; + background-color: #96baa0; + margin-top: 20px; + margin-right: 35px; + min-width: 100%; + transition: background-color 0.3s ease, color 0.3s ease; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +.categories a { + color: #014038; + font-size: 1.3rem; + font-weight: bold; + transition: background-color 0.3s ease, color 0.3s ease; + +} + +.categories ul li:hover { + background-color: #f7f7f7; + color: #014038; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); +} \ No newline at end of file diff --git a/src/styles/styles.css b/_site/styles/styles.css similarity index 100% rename from src/styles/styles.css rename to _site/styles/styles.css diff --git a/_site/styles/variables.css b/_site/styles/variables.css new file mode 100644 index 0000000..e69de29 diff --git a/src/_includes/base.njk b/src/_includes/base.njk new file mode 100644 index 0000000..6ea836c --- /dev/null +++ b/src/_includes/base.njk @@ -0,0 +1,47 @@ + + + + + + + + {{title}} + + {% if stylesheet %} + {% for style in stylesheet %} + + {% endfor %} + {% endif %} + + {% if hCAPTCHA %} + + {% endif %} + + {% if fontAwesome %} + + {% endif %} + + + + + + {% include "header.html" %} + +
    + + {{ content | safe }} + +
    + + {% include "footer.html" %} + + + + {% if pageScripts %} + {% for script in pageScripts %} + + {% endfor %} + {% endif %} + + + \ No newline at end of file diff --git a/src/_includes/footer.html b/src/_includes/footer.html new file mode 100644 index 0000000..252289a --- /dev/null +++ b/src/_includes/footer.html @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + diff --git a/src/_includes/header.html b/src/_includes/header.html new file mode 100644 index 0000000..4d7cf7d --- /dev/null +++ b/src/_includes/header.html @@ -0,0 +1,25 @@ +
    + +

    Bloom Valley Nursery

    + + +
    \ No newline at end of file diff --git a/src/about.html b/src/about.html deleted file mode 100644 index f05fbf6..0000000 --- a/src/about.html +++ /dev/null @@ -1,275 +0,0 @@ - - - - - - - - About Us - Bloom Valley Nursery - - - - -
    - -

    Bloom Valley Nursery

    - - -
    - - -
    -
    - -
    -

    The Story of Bloom Valley

    -

    - Legend has it that in 1822, Benjamin Bloom, his wife Violet, and - their young daughter Nora stumbled upon a breathtaking valley - brimming with vibrant, rare flowers during their journey westward. - Enchanted by its beauty, they decided to settle there, abandoning - their plans to reach California. This picturesque haven became known - as Bloom Valley. -

    -

    - Today, on the very land where the Bloom family found their paradise, - stands Bloom Valley Nursery. Still family-owned and operated, - siblings Bethany, Vincent, and Nathaniel Bloom carry forward a - legacy of preserving and sharing the natural beauty that captivated - the hearts of their ancestors over two centuries ago. -

    -

    Though many things have changed through the years, our commitment to serving our community has remained the same. Let us help you cultivate joy, one bloom at a time!

    -
    -
    -
    -
    -
    -

    We Want to Hear From You!

    -

    Your feedback provides us with valuable insight into where we stand in our commitment to our neighbors, friends, and the entire Bloom Valley community.

    -

    Feel free to contact us by filling out the form below if you have any questions, concerns, or simply want to tell us how we can better serve you in the future. You are also welcome to give us a call at the number above if you need to speak with someone directly. Our friendly staff can help answer your questions or guide you in placing custom orders as well!

    -
    -
    -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
    - - -
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/about.njk b/src/about.njk new file mode 100644 index 0000000..a23d38d --- /dev/null +++ b/src/about.njk @@ -0,0 +1,116 @@ +--- +layout: base.njk +metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev" +title: "About - Bloom Valley Nursery Demo" +stylesheet: + - "/styles/variables.css" + - "/styles/base.css" + - "/styles/header-footer.css" + - "/styles/about.css" +fontAwesome: "https://kit.fontawesome.com/abc7c3b0da.js" +isLandingPage: false +pageScripts: + - "/scripts/feedback.js" + - "/scripts/cart.js" + - "/scripts/newsletter.js" +--- + +
    + +
    +

    The Story of Bloom Valley

    +

    + Legend has it that in 1822, Benjamin Bloom, his wife Violet, and + their young daughter Nora stumbled upon a breathtaking valley + brimming with vibrant, rare flowers during their journey westward. + Enchanted by its beauty, they decided to settle there, abandoning + their plans to reach California. This picturesque haven became known + as Bloom Valley. +

    +

    + Today, on the very land where the Bloom family found their paradise, + stands Bloom Valley Nursery. Still family-owned and operated, + siblings Bethany, Vincent, and Nathaniel Bloom carry forward a + legacy of preserving and sharing the natural beauty that captivated + the hearts of their ancestors over two centuries ago. +

    +

    Though many things have changed through the years, our commitment to serving our community has remained the same. Let us help you cultivate joy, one bloom at a time!

    +
    +
    +
    +
    +
    +

    We Want to Hear From You!

    +

    Your feedback provides us with valuable insight into where we stand in our commitment to our neighbors, friends, and the entire Bloom Valley community.

    +

    Feel free to contact us by filling out the form below if you have any questions, concerns, or simply want to tell us how we can better serve you in the future. You are also welcome to give us a call at the number above if you need to speak with someone directly. Our friendly staff can help answer your questions or guide you in placing custom orders as well!

    +
    +
    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    + + +
    +
    + +
    +
    +
    +
    +
    diff --git a/src/community.html b/src/community.html deleted file mode 100644 index 60cffeb..0000000 --- a/src/community.html +++ /dev/null @@ -1,256 +0,0 @@ - - - - - - - - Community Events - Bloom Valley Nursery - - - - -
    - -

    Bloom Valley Nursery

    - - -
    - - -
    -

    Mark Your Calendars!

    -
    -
    - -
    -
    -

    Upcoming Events

    -
    -
    -

    Events at Bloom Valley Nursery

    -

    - All workshops at Bloom Valley Nursery are provided free of charge to - anyone interested in learning techniques and ideas for creating a - visually appealing living space that can be personalized to suite - individual needs. Registration links are provided in each Google - Calendar Event by clicking on the date of the event within the - Google Calendar on this page. -

    -
      -
    • - Gardening and Landscaping 101:
      When:
      2nd Tuesday of - Every Month @ 6:30 pm.
      Join Bethany Bloom as she shares her tips for - creating a themed decor through-out the home that you will be - delighted to share with your holiday guests. -
      • -
    • - Deck the Halls
      When: Saturday @ 10:00 am.
      Join - Nathaniel and Vincent as they guide us through picking and tending - the perfect live Christmas tree for your Christmas decoration - focal-point. -
      • -
    • - Christmas Eve and Christmas Day
      Bloom Valley - Nursery will close on Christmas Eve at 8:00 pm for any last-minute - shopping.
      The nursery will remain closed until January 2nd. During - this time, we will be making improvements to the nursery grounds and - store with the aim of better serving our Bloom Valley neighbors, - friends and family. We are excited to share the new features and changes with - you in the New Year!
      Happy Holidays!!! -
      • -
    -
    -
    -

    Community-Wide Events

    -

    - This section includes local community events for which Bloom Valley - Nursery is in partner with or a sponsor of. These events are - typically free of charge, but can include sub-events by other local - organizations and businesses that may not be free of charge. Check - with specific organizations, businesses, and the Bloom Valley - Chamber of Commerce for specific details that may not be provided by - Bloom Valley Nursery. -

    -
      -
    • - Tree Lighting Ceremony
      When:
      Thursday @ 6:00 pm.
      - Help us kick off the Holiday festivities by joining the Bloom - family, along with the Bloom Valley Chamber of Commerce, the Bloom - Valley Garden Club, and many other local businesses and - organizations, as we gather in front of City Hall for the annual Tree - Lighting Ceremony! This event will include performances by the Bloom - Valley Junior and Senior High Marching Bands, a workshop for making - tree ornaments, the annual Chili Cook-off, and much more! -
      • -
    -
    - -
    -
    - -

    - For more details, to add events to this page, or to leave feedback, - click here to send us a message. -

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/community.njk b/src/community.njk new file mode 100644 index 0000000..e97b19c --- /dev/null +++ b/src/community.njk @@ -0,0 +1,99 @@ +--- +layout: base.njk +metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev" +title: "Community Events - Bloom Valley Nursery Demo" +stylesheet: + - "/styles/variables.css" + - "/styles/base.css" + - "/styles/header-footer.css" + - "/styles/community.css" +fontAwesome: "https://kit.fontawesome.com/abc7c3b0da.js" +isLandingPage: false +pageScripts: + - "/scripts/cart.js" + - "/scripts/newsletter.js" +--- + +

    Mark Your Calendars!

    +
    +
    + +
    +
    +

    Upcoming Events

    +
    +
    +

    Events at Bloom Valley Nursery

    +

    + All workshops at Bloom Valley Nursery are provided free of charge to + anyone interested in learning techniques and ideas for creating a + visually appealing living space that can be personalized to suite + individual needs. Registration links are provided in each Google + Calendar Event by clicking on the date of the event within the + Google Calendar on this page. +

    +
      +
    • + Gardening and Landscaping 101:
      When:
      2nd Tuesday of + Every Month @ 6:30 pm.
      Join Bethany Bloom as she shares her tips for + creating a themed decor through-out the home that you will be + delighted to share with your holiday guests. +
      • +
    • + Deck the Halls
      When: Saturday @ 10:00 am.
      Join + Nathaniel and Vincent as they guide us through picking and tending + the perfect live Christmas tree for your Christmas decoration + focal-point. +
      • +
    • + Christmas Eve and Christmas Day
      Bloom Valley + Nursery will close on Christmas Eve at 8:00 pm for any last-minute + shopping.
      The nursery will remain closed until January 2nd. During + this time, we will be making improvements to the nursery grounds and + store with the aim of better serving our Bloom Valley neighbors, + friends and family. We are excited to share the new features and changes with + you in the New Year!
      Happy Holidays!!! +
      • +
    +
    +
    +

    Community-Wide Events

    +

    + This section includes local community events for which Bloom Valley + Nursery is in partner with or a sponsor of. These events are + typically free of charge, but can include sub-events by other local + organizations and businesses that may not be free of charge. Check + with specific organizations, businesses, and the Bloom Valley + Chamber of Commerce for specific details that may not be provided by + Bloom Valley Nursery. +

    +
      +
    • + Tree Lighting Ceremony
      When:
      Thursday @ 6:00 pm.
      + Help us kick off the Holiday festivities by joining the Bloom + family, along with the Bloom Valley Chamber of Commerce, the Bloom + Valley Garden Club, and many other local businesses and + organizations, as we gather in front of City Hall for the annual Tree + Lighting Ceremony! This event will include performances by the Bloom + Valley Junior and Senior High Marching Bands, a workshop for making + tree ornaments, the annual Chili Cook-off, and much more! +
      • +
    +
    + +
    +
    + +

    + For more details, to add events to this page, or to leave feedback, + click here to send us a message. +

    diff --git a/src/gallery.html b/src/gallery.html deleted file mode 100644 index fae1499..0000000 --- a/src/gallery.html +++ /dev/null @@ -1,219 +0,0 @@ - - - - - - - - Gallery - Bloom Valley Nursery - - - - -
    - -

    Bloom Valley Nursery

    - - -
    - - -
    - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/gallery.njk b/src/gallery.njk new file mode 100644 index 0000000..2e16e14 --- /dev/null +++ b/src/gallery.njk @@ -0,0 +1,61 @@ +--- +layout: base.njk +metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev" +title: "Gallery - Bloom Valley Nursery Demo" +stylesheet: + - "/styles/variables.css" + - "/styles/base.css" + - "/styles/header-footer.css" + - "/styles/gallery.css" +fontAwesome: "https://kit.fontawesome.com/abc7c3b0da.js" +isLandingPage: false +pageScripts: + - "/scripts/gallery-carousel.js" + - "/scripts/script.js" + - "/scripts/cart.js" + - "/scripts/newsletter.js" +--- + + + \ No newline at end of file diff --git a/src/index.html b/src/index.html deleted file mode 100644 index 7a804f1..0000000 --- a/src/index.html +++ /dev/null @@ -1,239 +0,0 @@ - - - - - - - - Homepage - Bloom Valley Nursery - - - - -
    - -

    Bloom Valley Nursery

    - - -
    - - -
    - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/index.njk b/src/index.njk new file mode 100644 index 0000000..4d68687 --- /dev/null +++ b/src/index.njk @@ -0,0 +1,100 @@ +--- +layout: base.njk +metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev" +title: "Landing - Bloom Valley Nursery Demo" +stylesheet: + - "/styles/variables.css" + - "/styles/base.css" + - "/styles/header-footer.css" + - "/styles/index.css" +fontAwesome: "https://kit.fontawesome.com/abc7c3b0da.js" +isLandingPage: true +pageScripts: + - "/scripts/script.js" + - "/scripts/cart.js" + - "/scripts/newsletter.js" +--- + + + + + + + + diff --git a/src/styles/about.css b/src/styles/about.css new file mode 100644 index 0000000..e341750 --- /dev/null +++ b/src/styles/about.css @@ -0,0 +1,217 @@ +/* |--↓-↓-↓ Start about.html ↓-↓-↓--| */ +#about-page main { + display: flex; + flex-direction: column; + align-items: center; +} + +#main-top { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 95vw; + position: center; +} + +#business-info { + display: block; + align-items: center; + width: 25vw; + background-color:#f0c06d; + border: solid #f7f7f7; + border-radius: 10px; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); + +} + +#phone, +#hours { + background-color: #f7f7f7; + border: solid #bdd4da; + border-radius: 10px; + margin: 5px 10px; +} + + + +#business-info h3, +#feedback-intro h1 { +font-size: 1.875rem; +text-align: center; +text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */ +-0.5px -0.5px 2px #014038, /* Top-left base shadow */ +-0.5px 0.5px 2px #014038, /* Bottom-left base shadow */ +0.5px -0.5px 2px #014038; /* Top-right base shadow */ +color: #f7f7f7; +background-color: #96baa0; +border: solid #f7f7f7; +max-width: 75vw; +border-radius: 10px; +padding-left: 10px; +transform: translateX(0px); +box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); +} + +#business-info p { + text-align: center; + font-size: 14pt; +} + +#business-info h4 { + text-align: center; + background-color: #bdd4da; + border: solid #f7f7f7; + border-radius: 15px; + padding: 0 10px; + width: 50%; + margin-left: 22.5%; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); +} + +#story { + display: flex; + flex-direction: column; + align-items: center; + justify-content: left; + width: 70vw; + margin-left: 30px; +} + +#story h1 { + background-color: #96baa0; + color: #f7f7f7; + border: solid #f7f7f7; + border-radius: 15px; + text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */ +-0.5px -0.5px 2px #014038, /* Top-left base shadow */ +-0.5px 0.5px 2px #014038, /* Bottom-left base shadow */ +0.5px -0.5px 2px #014038; /* Top-right base shadow */ + width: 50%; + padding: 5px 10px; + text-align: center; + margin-right: 12.5%; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); +} + +#story p { + color: #014038; + font-size: 1.25rem; + font-weight: bold; +} + +#feedback { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + background-color: #96baa0; + border: solid #f7f7f7; + border-radius: 15px; + width: 90vw; + margin-top: 30px; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); +} + +#feedback h1 { + background-color: #a4ccd6; + border: solid #f7f7f7; + border-radius: 10px; + width: 50vw; + padding: 5px 10px; + text-align: center; + margin-left: 25vw; + margin-right: 25vw; + text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */ + -0.5px -0.5px 2px #014038, /* Top-left base shadow */ + -0.5px 0.5px 2px #014038, /* Bottom-left base shadow */ + 0.5px -0.5px 2px #014038; /* Top-right base shadow */ + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +} + +#feedback h3 { + color: #00231c; + font-weight: bold; + width: 85vw; + text-align: center; + margin-left: 7.5vw; + margin-right: 7.5vw; + +} + +#feedback p { + color: #00231c; + width: 85vw; + text-align: center; + margin-left: 7.5vw; + margin-right: 7.5vw; + font-weight: bold; +} + +#feedback-form form{ + display: flex; + flex-direction: row; + gap: 20px; + align-items: baseline; + width: 95%; + margin-top: 20px; /* Adds some spacing above the form */ +} + +#customer-info { + display: flex; + flex-direction: column; + align-content: center; + width: 95%; /* Adjusted width */ + gap: 25px; /* Adds spacing between input fields */ + text-align: center; +} + +#customer-info input { + background-color: #f7f7f7; + border: solid #014038; + border-radius: 15px; + width: 90%; /* Ensures the input fields fill the section width */ + height: 30px; /* Adjusts height to match the textarea */ + text-align: center; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); +} + +#customer-message { + display: flex; + flex-direction: column; + align-items: center; + width: 90%; /* Adjusted width */ +} + +#customer-message #message-field textarea { + width: 50vw; /* Takes full width of the section */ + height: 30vh; /* Adjust height as needed */ + background-color: #f7f7f7; + border: solid #014038; + border-radius: 15px; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); +} + +#form-submit-btn { + display: flex; + justify-content: center; + margin-top: 10px; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); +} + +#form-submit { + padding: 10px 20px; + background-color: #bdd4da; + border: solid #f7f7f7; + border-radius: 10px; + color: #014038; + font-size: 1rem; + cursor: pointer; + margin-bottom: 10px; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); +} + +#form-submit:hover { + background-color: #f7f7f7; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); +} +/* | ↑-↑-↑ End About.html ↑-↑-↑--| */ \ No newline at end of file diff --git a/src/styles/base.css b/src/styles/base.css new file mode 100644 index 0000000..fa167ac --- /dev/null +++ b/src/styles/base.css @@ -0,0 +1,87 @@ +* Global Styles */ +html { + font-size: 17px; /* Base font size for scaling */ + scroll-behavior: smooth; +} + +body { + display: flex; + flex-direction: column; + align-items: center; + font-family: 'Calibri', sans-serif; + font-size: 1rem; /* Default font size based on 16px */ + line-height: 1.5; + margin: 0; + padding: 0; + background-color: #bdd4da; /* Sky Bloom */ +} + +body h1 { + text-shadow: 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */ + -0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */ + -0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */ + 0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */ +} + + + +/* Title Large (Arial Bold 30px) */ +h1 { + font-family: 'Arial', sans-serif; + font-weight: bold; + font-size: 1.875rem; /* 30px for title */ +} + +/* Title (Arial Bold 25px) */ +h2 { + font-family: 'Arial', sans-serif; + font-weight: bold; + font-size: 1.5625rem; +} + +/* Subtitle (Comfortaa Normal 15px) */ +h3 { + font-family: 'Comfortaa', sans-serif; + font-size: .9375rem ; /* 15px for subtitle */ +} + +/* Body Large (Calibri Normal 20px) */ +p.body-large { + font-family: 'Calibri', sans-serif; + font-size: 1.25rem; /* 20px for body large */ +} + +/* Body Strong (Calibri Bold 16px) */ +strong { + font-family: 'Calibri', sans-serif; + font-weight: bold; + font-size: 1rem; /* 16px for body strong */ +} + +/* Body (Calibri Normal 16px) */ +p.body { + font-family: 'Calibri', sans-serif; + font-size: 1rem; /* 16px for regular body text */ +} + +/* Captions (Arial Bold 11px) */ +figcaption { + font-family: 'Arial', sans-serif; + font-weight: bold; + font-size: .6875rem; /* 11px for captions */ +} + +@media (max-width: 780px) { + html{ + font-size: 14px; + } +} + + +main { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + padding: 20px; +} \ No newline at end of file diff --git a/src/styles/community.css b/src/styles/community.css new file mode 100644 index 0000000..ff7f35e --- /dev/null +++ b/src/styles/community.css @@ -0,0 +1,105 @@ +/* |--↓-↓-↓ Start Community.html ↓-↓-↓--| */ +#community-page { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + gap: 20px; + width: 95vh; + height: auto; +} + +#community-page h1 { + font-size: 1.6rem; + background-color: #96baa0; + border: solid #f7f7f7; + border-radius: 15px; + width: 50vw; + color: #f7f7f7; + text-decoration: underline; + text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */ + -0.5px -0.5px 1px #014038, /* Top-left base shadow */ + -0.5px 0.5px 1px #014038, /* Bottom-left base shadow */ + 0.5px -0.5px 1px #014038; /* Top-right base shadow */ + padding: 5px 10px; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); +} + +#calendar-events-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + border: none; +} +.calendar iframe{ + width: 80vw; + height: auto; + margin-bottom: 20px; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); +} + +.events { + background-color: #f0c06d; + border: solid #014038; + border-radius: 15px; + padding: 10px; + width: 95vw; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); +} + +.events h2 { + background-color: #96baa0; + border: solid #f7f7f7; + border-radius: 15px; + padding: 10px 15px; + width: 50vw; + text-decoration: underline; + font-weight: bold; + font-size: 1.4rem; + text-align: center; + margin-left: 20vw; + transform: translateY(-6vh); + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); +} + +.events h3 { + background-color: #96baa080; + border: solid #bdd4da; + border-radius: 15px; + padding: 5px 10px; + width: 50vw; + text-decoration: underline; + font-weight: bold; + font-size: 1.2rem; + text-align: center; + margin-left: 20vw; + transform: translateY(-5vh); + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); +} + +.events p { + transform: translateY(-5vh); +} + +.event-list ul { + list-style-type: none; + transform: translateY(-5vh); +} + +.event-list li { + background-color: #f7f7f7; + border: solid #bdd4da; + border-radius: 15px; + text-align: center; + padding: 5px 10px; + margin-bottom: 10px; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); +} + +.events strong { + color:#014038; + font-size: 1.1rem; +} + +/* | ↑-↑-↑ End Community.html ↑-↑-↑--| */ \ No newline at end of file diff --git a/src/styles/gallery.css b/src/styles/gallery.css new file mode 100644 index 0000000..c03996b --- /dev/null +++ b/src/styles/gallery.css @@ -0,0 +1,194 @@ +/* |--↓-↓-↓ Start gallery.html ↓-↓-↓--| */ +#main-gallery { + display: flex; + flex-direction: column; + align-items: center; +} + +#gallery-top { + display: flex; + flex-direction: row; + align-items: center; + width: 95vw; + gap: 20px +} + +#product-carousel-feature h2 { + font-size: 1.875rem; + text-align: center; + text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */ + -0.5px -0.5px 1px #014038, /* Top-left base shadow */ + -0.5px 0.5px 1px #014038, /* Bottom-left base shadow */ + 0.5px -0.5px 1px #014038, /* Top-right base shadow */ + 0.5px 0.5px .5px #bdd4da, /* Bottom-right mid shadow */ + -0.5px -0.5px .5px #bdd4da, /* Top-left mid shadow */ + -0.5px 0.5px .5px #bdd4da, /* Bottom-left mid shadow */ + 0.5px -0.5px .5px #bdd4da, /* Top-right mid shadow */ + 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */ + -0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */ + -0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */ + 0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */ + color: #f7f7f7; + background-color: #96baa0; + border: solid #f7f7f7; + border-radius: 10px; + padding-left: 20px; + transform: translateX(30px); + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); +} + +#product-category-card { + display: flex; + flex-direction: row; + align-items: center; + text-align: center; + width: 65vw; +} + +#product-carousel { + display: flex; /* Flexbox layout for horizontal row */ + gap: 20px; /* Space between product cards */ + overflow-x: auto; /* Enable horizontal scrolling */ + scroll-behavior: smooth; /* Smooth scrolling for buttons */ + padding: 10px; /* Optional padding inside the carousel */ + white-space: nowrap; /* Prevent wrapping to a new row */ + transform: translateX(4vw); +} + +.product-card { + display: inline-block; /* Ensure cards stay in a row */ + min-width: 150px; /* Set the card size */ + max-width: 200px; + max-height: auto; + flex: 0 0 auto; /* Prevent resizing of cards */ + border: 1px solid #ddd; /* Optional border */ + border-radius: 8px; + padding: 10px; + margin-left: 20px; + align-items: center; + text-align: center; + white-space: wrap; + background-color: #f7f7f7; /* Optional background */ +} + +.product-card img { + max-width: 100%; + height: auto; + display: block; + border-radius: 8px; + align-items: center; +} + +#scroll-left, #scroll-right { + cursor: pointer; /* Show pointer to indicate clickable buttons */ + background-color: #014038; /* Dark green background */ + color: white; + border: none; + padding: 10px; + border-radius: 50%; + font-size: 1.5rem; + transform: translateX(4.5vw); +} + +@media (max-width: 768px) { + .product-card { + min-width: 150px; + max-width: 200px; + } + + #product-carousel { + gap: 5px; + } +} + + +#main-gallery #right-aside { + width: 25vw; +} + +#main-gallery #right-aside h2 { + font-size: 1.675rem; + background-color: #bdd4da; + color: #014038; + border: solid #014038; + border-radius: 5px; + padding: 0 5px; + white-space: nowrap; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +#main-gallery .categories ul { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + list-style-type: none; +} + +#main-gallery .categories ul li { + border: solid #014038; + border-radius: 5px; + background-color: #96baa0; + margin-top: 20px; + margin-right: 35px; + min-width: 100%; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +#main-gallery .categories a { + color: #014038; + font-size: 1.3rem; +} + +button#cart-details { + background-color: #f7f7f7; + border: solid #014038; + border-radius: 15px; + color: #014038; + font-weight: bold; + font-size: 1.4em; + text-align: center; /* Align text horizontally */ + height: 30px; /* Adjust height to fit text comfortably */ + padding: 0 15px; /* Horizontal padding for spacing */ + margin-top: 10px; + margin-bottom: 10px; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.3); + transform: translateX(-15vw) translateY(-5vh); + transition: background-color 0.3s ease, color 0.3s ease; + display: flex; /* Flexbox ensures content alignment */ + align-items: center; /* Center text vertically */ + justify-content: center; /* Center text horizontally */ +} + +button#cart-details:hover { + background-color: #014033; + color: #f7f7f7; + border: solid #f7f7f7; + border-radius: 15px; +} + +.product-card { + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.3); + transition: background-color 0.3s ease, color 0.3s ease; +} + +.add-to-cart-btn { + cursor: pointer; + background-color: #f7f7f7; + border: solid #014038; + color: #014038; + font-weight: bold; + border-radius: 5px; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); + transition: background-color 0.3s ease, color 0.3s ease; +} + +.add-to-cart-btn:hover { + background-color: #014038; + border: solid #f7f7f7; + color: #f7f7f7; + border-radius: 5px; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); + +} +/* |--↑-↑-↑ End gallery.html ↑-↑-↑--| */ \ No newline at end of file diff --git a/src/styles/header-footer.css b/src/styles/header-footer.css new file mode 100644 index 0000000..645c5e2 --- /dev/null +++ b/src/styles/header-footer.css @@ -0,0 +1,333 @@ +/* |--↓-↓-↓ Start Header ↓-↓-↓--| */ +header { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 20px; + background-color: #bdd4da; /* Light teal */ + border-bottom: 3px solid #96baa0; /* Pale green for contrast */ +} + +header .logo { + position: absolute; + left: 3vw; + top: 20px; + width: auto; /* Maintains aspect ratio */ + height: auto; /* Constrains the height to 80px */ + max-width: 20vw; +} + + +header .logo img { + display: block; + width: 180px; + height: auto; + max-width: 100%; + filter: drop-shadow(0 0 2px #f0c06d) drop-shadow(0 0 0px #014038); /* Yellow outline effect */ + + +} + +header h1 { + font-family: 'Georgia', serif; + font-size: 2.8rem; + color: #014038; /* Dark green for the title */ + margin: 10px 0; + text-align: center; +} + +header p.tagline { + font-family: 'Arial', sans-serif; + font-size: 1.4rem; + color: #96baa0; /* Pale green for the tagline */ + margin: 0; + text-align: center; +} + +nav { + margin-top: 20px; + background-color: #f7f7f7; /* White for navigation background */ + padding: 10px 20px; + border-radius: 5px; + width: 100%; /* Ensures the nav spans the width of the header */ + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); +} + +button#shopping-cart{ + position: absolute; + top: 100px; + right: 100px; + padding: 20px; + border-radius: 10px; + background-color: #f7f7f7; + color: #014038; + cursor: pointer; + z-index: 5; + transition: background-color 0.3s ease, color 0.3s ease; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +button#shopping-cart:hover { + background-color: #014038; + color: #96baa0; + border: solid #f7f7f7; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); +} + +nav ul { + display: flex; + justify-content: center; + list-style: none; + padding: 0; + margin: 0; +} + +nav ul li { + margin: 0 20px; + border-radius: 5px; +} + +.current-page { + font-size: 1.4em; + font-weight: bold; + color: #014038; + background-color: #96baa0; + border: none; + text-decoration: underline; + white-space: wrap; + text-align: center; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +nav ul li a { + font-family: 'Arial', sans-serif; + font-size: 1rem; + font-weight: bold; + border: solid #f7f7f7; + color: #014038; + text-decoration: underline; + padding: 8px 15px; + border-radius: 10px; + transition: background-color 0.3s ease, color 0.3s ease; +} + +nav ul li a:hover { + background-color: #f7f7f7; + color: #014038; + border: solid #014038; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); +} + +/* |--↓-↓-↓ Start Footer ↓-↓-↓--| */ +#footer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; +} + +#newsletter-container { + display: inline-block; + margin-bottom: 10px; + text-align: center; +} + +#email-input { + display: inline-block; + width: 55%; + padding: 5px 10px; + text-align: center; + border-radius: 10px; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); +} + +button#submit-btn { + display: inline-block; + padding: 5px 10px; + border-radius: 10px; + cursor: pointer; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); + z-index: 5; +} + +footer div label { + font-size: 1.2rem; + font-weight: bold; + color: #014038 +} + +#newsletter-form { + display: inline-block; + background-color: #f0c06d; + border: solid #f7f7f7; + border-radius: 10px; + width: 60%; + padding: 5px; + text-align: center; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); +} + +#footer-nav ul { + position: relative; + list-style-type: none; + display: inline-block; + flex-direction: row; + margin-top: 20px; + background-color: #f7f7f7; /* White for navigation background */ + padding: 5px 20px; + border-radius: 5px; + width: 100%; /* Ensures the nav spans the width of the header */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds subtle shadow for depth */ +} + +#footer-nav ul li { + display: inline-block; + align-items: center; + padding: 5px 10px; + margin: 0 20px; +} + +#footer-nav ul li .current-page { + font-size: 1.2em; + font-weight: bold; + color: #014038; + background-color: #96baa0; + text-decoration: underline; +} + +#footer-nav ul li a { + font-family: 'Arial', sans-serif; + font-size: 1rem; + font-weight: bold; + color: #014038; /* Dark green for the links */ + text-decoration: none; + padding: 8px 15px; + border-radius: 5px; + transition: background-color 0.3s ease, color 0.3s ease; +} + +#footer-nav ul li a:hover { + background-color: #f7f7f7; + color: #014038; + border: solid #014038; + border-radius: 10px; +} + +#social-media { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; +} + +#social-media p { +text-align: center; +} + +#social-media ul { + position: relative; + display: inline-block; + list-style-type: none; + text-align: center; +} + +#social-media ul li { + display: inline-block; + margin: 0 10px; + padding: 0 10px; + color: #014038; +} + +#social-media ul li a { + font-family: 'Arial', sans-serif; + font-size: 1rem; + color: #014038; /* Dark green for the links */ + text-decoration: none; + padding: 8px 15px; + border-radius: 5px; + transition: background-color 0.3s ease, color 0.3s ease; +} + +#social-media ul li a:hover { + background-color: #f0c06d; + color: #f7f7f7; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); + +} + +#copyright { + text-align: center; + margin-bottom: 20px; +} + + +/* Styles for the modal */ +.modal { + display: none; /* Initially hidden */ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */ + justify-content: center; + align-items: center; + z-index: 1000; +} + +.modal-content { + background-color: #fff; + padding: 20px; + border-radius: 10px; + width: 80%; + max-width: 600px; + text-align: center; +} + +.modal-buttons button { + margin: 10px; +} + +.close-modal { + position: absolute; + top: 10px; + right: 20px; + font-size: 1.5rem; + cursor: pointer; +} + +.perk-item, +.testimonial, +.featured-item { + display: none; /* Hide all by default */ +} + +.perk-item.visible, +.testimonial.visible, +.featured-item.active { + display: block; /* Show visible or active items */ +} + +#featured-images { + overflow: hidden; /* Hide anything outside the container */ + text-align: center; /* Center align content if necessary */ + width: 100%; /* Match the width of the container */ + height: auto; /* Let the height adapt to content */ +} + +#featured-images img { + display: none; /* Hide all items initially */ + max-width: 100%; /* Ensure images are responsive */ + height: auto; /* Maintain aspect ratio */ + background-color: #96baa0; + border: solid #014038; + border-radius: 5px; + padding: 5px; +} + +.visible { + display: block; +} \ No newline at end of file diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 0000000..79a8ce9 --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1,216 @@ +#left-aside, +#right-aside { + flex: 1; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +#featured-container { + flex: 2; +} + +#left-aside { + display: flex; + flex-direction: column; + background-color: #f0c06d; + border: solid #f7f7f7; + padding: 5px 10px; + margin-top: 10px; + border-radius: 10px; +} + +#left-aside h2 { + border: solid #014038; + background-color: #bdd4da; + border-radius: 10px; +} + +#perks-feature-container { + background-color: #96baa0; + color: #014038; + border: solid #014038; + border-radius: 10px; + padding: 5px 10px; + margin-top: 5px; + text-align: center; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +.perk-item { + background-color: #f7f7f7; + color: #014038; + border: solid #014038; + border-radius: 10px; + padding: 5px 10px; + white-space: wrap; + max-height: 250px; + min-height: 250px; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); + text-align: +} + +#perks-heading { + font-family: 'Arial', sans-serif; + font-weight: bold; + font-size: 1.875rem; /* 30px for title */ + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +#featured-container { + display: flex; + flex-direction: column; + text-align: center; + margin-right: 40px; + margin-top: 10px; +} + +#featured-container h2 { + font-size: 1.875rem; + text-align: center; + text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */ + -0.5px -0.5px 1px #014038, /* Top-left base shadow */ + -0.5px 0.5px 1px #014038, /* Bottom-left base shadow */ + 0.5px -0.5px 1px #014038, /* Top-right base shadow */ + 0.5px 0.5px .5px #bdd4da, /* Bottom-right mid shadow */ + -0.5px -0.5px .5px #bdd4da, /* Top-left mid shadow */ + -0.5px 0.5px .5px #bdd4da, /* Bottom-left mid shadow */ + 0.5px -0.5px .5px #bdd4da, /* Top-right mid shadow */ + 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */ + -0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */ + -0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */ + 0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */ + color: #f7f7f7; + background-color: #96baa0; + border: solid #f7f7f7; + border-radius: 10px; + padding-left: 20px; + transform: translateX(30px); + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); +} + +#featured-container ul { + list-style-type: none; + display: flex; + flex-direction: column; +} + +#featured-image ul li { + align-content: space-between; +} + +#featured-images ul li a { + color: #014038; + background-color: #f7f7f7; + border-radius: 10px; + padding: 5px 10px; +} + +#featured-images a { + display: block; + text-align: center; + font-size: 1.4rem; + color:#014038; +} + +#featured-images img { + display: block; + margin: 0 auto; + margin-bottom: 10px; + margin-right: 45px; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +#testimonials-feature{ + background-color: #96baa0; + color: #014038; + border: solid #014038; + border-radius: 10px; + padding: 5px 10px; + margin-top: 10px; + white-space: wrap; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +#testimonials-feature h2 { + font-size: 1.675rem; + text-align: center; +} + +.testimonial { + background-color: #f7f7f7; + color: #014038; + border: solid #014038; + border-radius: 5px; + padding: 5px 10px; + white-space: wrap; + min-height: 250px; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); + text-align: center; +} + +#right-aside { + display: flex; + flex-direction: column; + align-items: center; + background-color: #f0c06d; + width: 100%; + height: auto; + padding: 5px 10px; + margin-left: 40px; + margin-top: 10px; + border: solid #f7f7f7; + border-radius: 10px; +} + +#category-nav-container { + background-color: #f7f7f7; + color: #014038; + border: solid #014038; + border-radius: 10px; + padding: 5px 10px; + margin-top: 5px; + text-align: center; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +#right-aside h2 { + font-size: 1.675rem; + background-color: #bdd4da; + color: #014038; + border: solid #014038; + border-radius: 10px; + padding: 0 5px; + white-space: nowrap; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +.categories ul { + display: flex; + flex-direction: column; + align-items: center; + list-style-type: none; +} + +.categories ul li { + border: solid #014038; + border-radius: 10px; + background-color: #96baa0; + margin-top: 20px; + margin-right: 35px; + min-width: 100%; + transition: background-color 0.3s ease, color 0.3s ease; + box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); +} + +.categories a { + color: #014038; + font-size: 1.3rem; + font-weight: bold; + transition: background-color 0.3s ease, color 0.3s ease; + +} + +.categories ul li:hover { + background-color: #f7f7f7; + color: #014038; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); +} \ No newline at end of file diff --git a/src/styles/variables.css b/src/styles/variables.css new file mode 100644 index 0000000..e69de29