Compare commits
2 Commits
d357d6fec3
...
2805c14e56
| Author | SHA1 | Date | |
|---|---|---|---|
|
2805c14e56 | ||
|
|
3bf8446c61 |
@@ -21,7 +21,7 @@ const TESTIMONIALS = [
|
|||||||
{
|
{
|
||||||
"id": "T02",
|
"id": "T02",
|
||||||
"clientName": "Morris F.",
|
"clientName": "Morris F.",
|
||||||
"testimonial": "Thanks to the Gardening 101 Workshop with Bethany and Bloom Valley Nursery's amazing line of products, I won 'Best Azaleas' at the 2024 Royal Horticultural Society's American Cup!",
|
"testimonial": "Thanks to BVN's Workshops and amazing line of products, I won 'Best Azaleas' at the 2024 Royal Horticultural Society's American Cup!",
|
||||||
"dateObtained": "2024-12-03"
|
"dateObtained": "2024-12-03"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -10,6 +10,11 @@
|
|||||||
|
|
||||||
<title>{{title}}</title>
|
<title>{{title}}</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/styles/variables.css">
|
||||||
|
<link rel="stylesheet" href="/styles/base.css">
|
||||||
|
<link rel="stylesheet" href="/styles/header.css">
|
||||||
|
<link rel="stylesheet" href="/styles/footer.css">
|
||||||
|
<link rel="stylesheet" href="/styles/modals.css">
|
||||||
{% if stylesheet %}
|
{% if stylesheet %}
|
||||||
{% for style in stylesheet %}
|
{% for style in stylesheet %}
|
||||||
<link rel="stylesheet" href="{{ style }}">
|
<link rel="stylesheet" href="{{ style }}">
|
||||||
@@ -19,7 +24,6 @@
|
|||||||
{% if hCAPTCHA %}
|
{% if hCAPTCHA %}
|
||||||
<script src="{{ hCAPTCHA }}" async defer></script>
|
<script src="{{ hCAPTCHA }}" async defer></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if fontAwesome %}
|
{% if fontAwesome %}
|
||||||
<script src="{{ fontAwesome }}" crossorigin="anonymous"></script>
|
<script src="{{ fontAwesome }}" crossorigin="anonymous"></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
@@ -30,7 +34,7 @@
|
|||||||
|
|
||||||
{% include "header.njk" %}
|
{% include "header.njk" %}
|
||||||
|
|
||||||
<main>
|
<main class="main-content-container">
|
||||||
|
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
|
|
||||||
@@ -40,11 +44,14 @@
|
|||||||
|
|
||||||
{% include "modals.njk" %}
|
{% include "modals.njk" %}
|
||||||
|
|
||||||
|
<script src="/scripts/demo-modal.js"></script>
|
||||||
{% if pageScripts %}
|
{% if pageScripts %}
|
||||||
{% for script in pageScripts %}
|
{% for script in pageScripts %}
|
||||||
<script src="{{ script }}"></script>
|
<script src="{{ script }}"></script>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
<script src="/scripts/cart.js"></script>
|
||||||
|
<script src="/scripts/newsletter.js">
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,7 +1,8 @@
|
|||||||
<div id="right-side">
|
<div id="right-side">
|
||||||
<nav id="category-nav">
|
<nav id="category-nav">
|
||||||
<div id="category-nav-container">
|
<div id="category-nav-container">
|
||||||
<h2>Shop by Category</h2>
|
<h2>Categories</h2>
|
||||||
|
<hr>
|
||||||
<div class="categories">
|
<div class="categories">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
|
<li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
|
||||||
|
|||||||
@@ -1,44 +1,37 @@
|
|||||||
<header role="banner">
|
<header role="banner">
|
||||||
<div class="header-container">
|
<div class="header-container">
|
||||||
<div class="header-left">
|
<div class="logo-name-cart">
|
||||||
<div class="logo">
|
<div class="logo-box">
|
||||||
<img
|
<img class="logo" src="/images/Client1_LogoPalette2_F0C06D.png"
|
||||||
src="/images/Client1_LogoPalette2_F0C06D.png"
|
alt="Bloom Valley Nursery Logo">
|
||||||
alt="Bloom Valley Nursery Logo">
|
</div>
|
||||||
</div>
|
<div class="name-box">
|
||||||
</div>
|
<p class="business-name">Bloom Valley Nursery</p>
|
||||||
|
</div>
|
||||||
|
<div class="cart-box">
|
||||||
|
<button id="shopping-cart" aria-label="Shopping Cart">
|
||||||
|
<i class="fa-solid fa-cart-shopping fa-2xl"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="header-center">
|
<div class="nav-container">
|
||||||
<div class="business-name-container">
|
<nav role="navigation" aria-label="Main Navigation">
|
||||||
<p class="business-name">Bloom Valley Nursery</p>
|
<ul>
|
||||||
</div>
|
<li>
|
||||||
<div class="nav-container">
|
<a href="/" {% if currentPage == 'index' %}class="current-page" aria-current="page"{% endif %}>Home</a>
|
||||||
<nav role="navigation" aria-label="Main Navigation">
|
</li>
|
||||||
<ul>
|
<li>
|
||||||
<li>
|
<a href="/gallery/" {% if currentPage == 'gallery' %}class="current-page" aria-current="page"{% endif %}>Gallery</a>
|
||||||
<a href="/" {% if currentPage == 'index' %}class="current-page" aria-current="page"{% endif %}>Home</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a href="/about/" {% if currentPage == 'about'%}class="current-page" aria-current="page"{% endif %}>About Us</a>
|
||||||
<a href="/gallery/" {% if currentPage == 'gallery' %}class="current-page" aria-current="page"{% endif %}>Gallery</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a href="/community/" {% if currentPage == 'community' %}class="current-page community-link" aria-current="page"{% endif %}>Community Events</a>
|
||||||
<a href="/about/" {% if currentPage == 'about'%}class="current-page" aria-current="page"{% endif %}>About Us</a>
|
</li>
|
||||||
</li>
|
</ul>
|
||||||
<li>
|
</nav>
|
||||||
<a href="/community/" {% if currentPage == 'community' %}class="current-page community-link" aria-current="page"{% endif %}>Community Events</a>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="header-right">
|
|
||||||
<button id="menu-toggle" class="menu-toggle" aria-label="Open navigation menu" aria-expanded="false">
|
|
||||||
<i class="fa-solid fa-bars fa-2xl"></i>
|
|
||||||
</button>
|
|
||||||
<button id="shopping-cart" aria-label="Shopping Cart">
|
|
||||||
<i class="fa-solid fa-cart-shopping fa-2xl"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
130
src/about.njk
130
src/about.njk
@@ -4,73 +4,63 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
|
|||||||
seoIndexing: false
|
seoIndexing: false
|
||||||
title: "About - Bloom Valley Nursery Demo"
|
title: "About - Bloom Valley Nursery Demo"
|
||||||
stylesheet:
|
stylesheet:
|
||||||
- "/styles/variables.css"
|
|
||||||
- "/styles/base.css"
|
|
||||||
- "/styles/header.css"
|
|
||||||
- "/styles/about.css"
|
- "/styles/about.css"
|
||||||
- "/styles/footer.css"
|
|
||||||
- "/styles/modals.css"
|
|
||||||
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
||||||
currentPage: "about"
|
currentPage: "about"
|
||||||
pageScripts:
|
pageScripts:
|
||||||
- "/scripts/feedback.js"
|
- "/scripts/feedback.js"
|
||||||
- "/scripts/cart.js"
|
|
||||||
- "/scripts/newsletter.js"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="about">
|
<div id="top" aria-labelledby="bvn-story">
|
||||||
<div id="main-top">
|
|
||||||
<section
|
|
||||||
id="business-info"
|
|
||||||
aria-label="Hours of operation and contact info"
|
|
||||||
>
|
|
||||||
<h3>Contact Us</h3>
|
|
||||||
<div id="phone">
|
|
||||||
<h4><strong>Phone:</strong></h4>
|
|
||||||
<p>(555) 123-4567</p>
|
|
||||||
</div>
|
|
||||||
<h3>Hours of Operation</h3>
|
|
||||||
<div id="hours">
|
|
||||||
<h4><strong>Monday - Friday:</strong></h4>
|
|
||||||
<p>9:00 AM - 6:00 PM</p>
|
|
||||||
<h4><strong>Saturday & Sunday:</strong></h4>
|
|
||||||
<p>10:00 AM - 5:00 PM</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section class="story-section">
|
<section class="story-section">
|
||||||
<div id="story" aria-label="History of Bloom Valley Nursery">
|
<h2 id="bvn-story">The Story of Bloom Valley</h2>
|
||||||
<h2>The Story of Bloom Valley</h2>
|
<div class="video-border">
|
||||||
<p>
|
<div class="bvn-video" style="left: 0px; width: 600px; height: 338px; position: relative; border-radius: 15px">
|
||||||
Legend has it that in 1822, Benjamin Bloom, his wife Violet, and
|
<iframe src="https://video.pictory.ai/embed/202509100421159152ab7b3c7e5dc46a29dec7057c108b158/20250910051954092q4MZ6z6NHgYUlrP" class="iframe"
|
||||||
their young daughter Nora stumbled upon a breathtaking valley
|
title="The Story of Bloom Valley" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0; border-radus: 15px;" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
|
||||||
brimming with vibrant, rare flowers during their journey westward.
|
</iframe>
|
||||||
Enchanted by its beauty, they decided to settle there, abandoning
|
</div>
|
||||||
their plans to reach California. This picturesque haven became known
|
</div>
|
||||||
as Bloom Valley.
|
<div class="story">
|
||||||
</p>
|
<p> Legend has it that in 1822, Benjamin Bloom, his wife Violet, and their young daughter Nora embarked on a journey westward, driven by dreams of new opportunities in California. Along the way, they wandered through rolling hills, dense forests, and sparkling streams, until one fateful day, they stumbled upon a hidden valley unlike anything they had ever seen.
|
||||||
<p>
|
</p>
|
||||||
Today, on the very land where the Bloom family found their paradise,
|
<p>
|
||||||
stands Bloom Valley Nursery. Still family-owned and operated,
|
The valley was a riot of color, alive with flowers of every hue imaginable—delicate bluebells swaying in the breeze, golden sunflowers turning toward the sun, and rare, exotic blooms that seemed to glow with an otherworldly light. Birds of vibrant plumage sang from the trees, and a gentle stream wove through the meadow, reflecting the kaleidoscope of colors around it.
|
||||||
siblings Bethany, Vincent, and Nathaniel Bloom carry forward a
|
</p>
|
||||||
legacy of preserving and sharing the natural beauty that captivated
|
<p>
|
||||||
the hearts of their ancestors over two centuries ago.
|
Benjamin, Violet, and little Nora were spellbound. They knew instantly that this magical place was meant to be their home. Abandoning their original plans, they settled in the valley, tending the land and nurturing its natural beauty. Over time, the area became known as Bloom Valley, a name that honored both the family who called it home and the flowers that had captured their hearts.
|
||||||
</p>
|
</p>
|
||||||
<p>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!</p>
|
<p>
|
||||||
</div>
|
Generations later, the Bloom family's reverence for the valley's splendor continues to flourish. Today, on the very land where Benjamin and Violet first marveled at the blooms, stands Bloom Valley Nursery. Still family-owned and operated, siblings Bethany, Vincent, and Nathaniel Bloom carry forward a tradition of cultivating and sharing the natural beauty that enchanted their ancestors more than two centuries ago.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Each plant in the nursery is chosen with care, echoing the Bloom family's historic love for vibrant, rare, and enduring flora. Though the world around them has changed, the heart of Bloom Valley Nursery remains the same: a place where beauty, nature, and community grow hand in hand. From the first seed to the full bloom, the nursery is a celebration of life's simple joys. Let us help you cultivate joy, one bloom at a time.</p>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<div id="main-bottom">
|
<div id="bottom">
|
||||||
<div id="feedback" aria-label="Feedback form">
|
<section
|
||||||
<div id="feedback-intro">
|
id="business-info"
|
||||||
<h2>We Want to Hear From You!</h2>
|
aria-label="Contact and Hours of Operation">
|
||||||
<h3>Your feedback provides us with valuable insight into where we stand in our commitment to our neighbors, friends, and the entire Bloom Valley community.</h3>
|
<h3>Contact & Hours</h3>
|
||||||
<p>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!</p>
|
<p><strong>Phone:</strong><br> (555) 123-4567</p>
|
||||||
</div>
|
<p><strong>Monday - Friday:</strong><br> 9:00 AM - 6:00 PM</p>
|
||||||
<div id="feedback-form">
|
<p><strong>Saturday & Sunday:</strong><br> 10:00 AM - 5:00 PM</p>
|
||||||
<form action="#" method="POST">
|
</section>
|
||||||
|
|
||||||
|
<section id="feedback" aria-label="Feedback form">
|
||||||
|
<div id="feedback-intro">
|
||||||
|
<h2>We Want to Hear From You!</h2>
|
||||||
|
<p class="special">Your feedback provides us with valuable insight into where we stand in our commitment to our neighbors, friends, and the entire Bloom Valley community.</p>
|
||||||
|
<p>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!</p>
|
||||||
|
</div>
|
||||||
|
<div id="feedback-form">
|
||||||
|
<form action="#" method="POST">
|
||||||
|
<div class="inputs">
|
||||||
<div id="customer-info">
|
<div id="customer-info">
|
||||||
<div id="name-field">
|
<div id="name-field">
|
||||||
<label for="name">Name:</label>
|
<label for="name">Name: </label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="name"
|
id="name"
|
||||||
@@ -79,7 +69,7 @@ pageScripts:
|
|||||||
required/>
|
required/>
|
||||||
</div>
|
</div>
|
||||||
<div id="phone-field">
|
<div id="phone-field">
|
||||||
<label for="tel">Phone Number:</label>
|
<label for="tel">Phone: </label>
|
||||||
<input
|
<input
|
||||||
type="tel"
|
type="tel"
|
||||||
id="tel"
|
id="tel"
|
||||||
@@ -88,7 +78,7 @@ pageScripts:
|
|||||||
required/>
|
required/>
|
||||||
</div>
|
</div>
|
||||||
<div id="email-field">
|
<div id="email-field">
|
||||||
<label for="email">Email:</label>
|
<label for="email">Email: </label>
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
id="email"
|
id="email"
|
||||||
@@ -97,18 +87,19 @@ pageScripts:
|
|||||||
required/>
|
required/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="customer-message">
|
<div class="message-box">
|
||||||
<div id="message-field">
|
<div id="customer-message">
|
||||||
<label for="message">Message:</label>
|
<div id="message-field">
|
||||||
<textarea
|
<label for="message">Message:</label>
|
||||||
id="message"
|
<textarea
|
||||||
name="message"
|
id="message"
|
||||||
rows="5"
|
name="message"
|
||||||
aria-label="Enter feedback or inquiries here" placeholder="Enter feedback or inquiries here..."
|
rows="5"
|
||||||
required>
|
aria-label="Enter feedback or inquiries here" placeholder="Enter feedback or inquiries here..."
|
||||||
</textarea>
|
required>
|
||||||
|
</textarea>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="form-submit-btn">
|
|
||||||
<button
|
<button
|
||||||
id="form-submit"
|
id="form-submit"
|
||||||
type="submit"
|
type="submit"
|
||||||
@@ -119,5 +110,6 @@ pageScripts:
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -4,18 +4,11 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
|
|||||||
seoIndexing: false
|
seoIndexing: false
|
||||||
title: "Community Events - Bloom Valley Nursery Demo"
|
title: "Community Events - Bloom Valley Nursery Demo"
|
||||||
stylesheet:
|
stylesheet:
|
||||||
- "/styles/variables.css"
|
|
||||||
- "/styles/base.css"
|
|
||||||
- "/styles/header.css"
|
|
||||||
- "/styles/community.css"
|
- "/styles/community.css"
|
||||||
- "/styles/footer.css"
|
|
||||||
- "/styles/modals.css"
|
|
||||||
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
||||||
currentPage: "community"
|
currentPage: "community"
|
||||||
pageScripts:
|
pageScripts:
|
||||||
- "/scripts/events-carousel.js"
|
- "/scripts/events-carousel.js"
|
||||||
- "/scripts/cart.js"
|
|
||||||
- "/scripts/newsletter.js"
|
|
||||||
---
|
---
|
||||||
<div class="community">
|
<div class="community">
|
||||||
<h1>Mark Your Calendars!</h1>
|
<h1>Mark Your Calendars!</h1>
|
||||||
@@ -24,6 +17,7 @@ pageScripts:
|
|||||||
|
|
||||||
<div class="upcoming-events">
|
<div class="upcoming-events">
|
||||||
<h2>Upcoming Events</h2>
|
<h2>Upcoming Events</h2>
|
||||||
|
<p class="notice">Check out the Upcoming Events at Bloom Valley Nursery and around the community!<br> Our BVN Workshops are for all ages and free of charge. We ask that you use our <a class="com-link" href="../about/#feedback" target="_blank" rel="noopener noreferrer">contact form here</a> to sign up for BVN Workshops in advance. Reservations are not required, though, and we will make space for all who attend.</p>
|
||||||
<div id="events-navigation">
|
<div id="events-navigation">
|
||||||
<ul class="event-categories">
|
<ul class="event-categories">
|
||||||
<li class="workshops-btn enav"><a href="/community/?category=workshop#" class="cat-btn">Workshops</a></li>
|
<li class="workshops-btn enav"><a href="/community/?category=workshop#" class="cat-btn">Workshops</a></li>
|
||||||
@@ -70,7 +64,7 @@ pageScripts:
|
|||||||
<div class="add-events">
|
<div class="add-events">
|
||||||
<p>
|
<p>
|
||||||
For more details, to add events to this page, or to leave feedback,
|
For more details, to add events to this page, or to leave feedback,
|
||||||
<a
|
<a class="com-link"
|
||||||
href="/about/#feedback"
|
href="/about/#feedback"
|
||||||
aria-label="Go to the feedback form on the About Us page to leave feedback or inquiries."
|
aria-label="Go to the feedback form on the About Us page to leave feedback or inquiries."
|
||||||
>click here</a
|
>click here</a
|
||||||
|
|||||||
@@ -4,47 +4,54 @@ metaDesc: "Credit & attribution for the contributors of this demo eCommerce webs
|
|||||||
seoIndexing: true
|
seoIndexing: true
|
||||||
title: "Credits & Attribution - Bloom Valley Nursery Demo"
|
title: "Credits & Attribution - Bloom Valley Nursery Demo"
|
||||||
stylesheet:
|
stylesheet:
|
||||||
- "/styles/variables.css"
|
|
||||||
- "/styles/base.css"
|
|
||||||
- "/styles/header.css"
|
|
||||||
- "/styles/credits.css"
|
- "/styles/credits.css"
|
||||||
- "/styles/footer.css"
|
|
||||||
- "/styles/modals.css"
|
|
||||||
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
||||||
isLandingPage: false
|
isLandingPage: false
|
||||||
pageScripts:
|
pageScripts:
|
||||||
- "/scripts/tooltips.js"
|
- "/scripts/tooltips.js"
|
||||||
- "/scripts/script.js"
|
|
||||||
- "/scripts/cart.js"
|
|
||||||
- "/scripts/newsletter.js"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="credits-container">
|
<div class="credits-container">
|
||||||
<div class="intro">
|
<div class="content">
|
||||||
<h1>Credits & Attributions</h1>
|
<div class="intro">
|
||||||
<p>A heartfelt <strong>Thank You</strong> is extended to these creators and the platforms that host their work. Their royalty-free contributions to the public helped make this demo possible.</p>
|
<h1 class="cred-attr">Credits & Attributions</h1>
|
||||||
<p id="tip-desc" class="visually-hidden">Preview shows a small version of the linked image.</p>
|
<p class="thanks">A heartfelt <strong class="strong-thanks">Thank You</strong> is extended to these creators and the platforms that host their work.<br> Their royalty-free contributions to the public helped make this demo possible.</p>
|
||||||
|
<p id="tip-desc" class="visually-hidden">Preview shows a small version of the linked image.</p>
|
||||||
|
|
||||||
<div>
|
<div class="video-box">
|
||||||
<ul class="credits-list">
|
<h2 class="videos">Video Content</h2>
|
||||||
{% for credit in credits.CREDITS %}
|
<ul class="videos-credits-list">
|
||||||
<li class="credit" data-tooltip="../images/_m-thumbs/{{ credit.category }}/{{ credit.fileName }}">
|
<li class="credit" data-tooltip="https://video.pictory.ai/202509100421159152ab7b3c7e5dc46a29dec7057c108b158/20250910051954092q4MZ6z6NHgYUlrP">
|
||||||
<div class="thumb">
|
<div class="meta">
|
||||||
<img class="thumb-inline"
|
<p>
|
||||||
src="../images/_s-thumbs/{{ credit.category }}/{{ credit.fileName }}"
|
<a href="https://video.pictory.ai/202509100421159152ab7b3c7e5dc46a29dec7057c108b158/20250910051954092q4MZ6z6NHgYUlrP">The Story of Bloom Valley</a> was created by <a class="creator" href="https://dlseitz.dev" target="_blank" rel="noopener noreferrer">Derek L. Seitz</a> with <a class="source" href="https://pictory.ai/" target="_blank" rel="noopener noreferrer">Pictory.AI</a> under the <a class="license" href="https://pictory.ai/terms-of-service#:~:text=(c).%20Third%2DParty,new%20Pictoried%20Content." target="_blank" rel="noopener noreferrer">Pictory.AI Terms of Service</a>.
|
||||||
alt="Attributed image for {{ credit.fileName }}"
|
</p>
|
||||||
width="40" height="24"
|
</div>
|
||||||
loading="lazy" decoding="async">
|
</li>
|
||||||
</div>
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="images-box">
|
||||||
|
<h2 class="images">Image Content</h2>
|
||||||
|
<ul class="images-credits-list">
|
||||||
|
{% for credit in credits.CREDITS %}
|
||||||
|
<li class="credit" data-tooltip="../images/_m-thumbs/{{ credit.category }}/{{ credit.fileName }}">
|
||||||
|
<div class="thumb">
|
||||||
|
<img class="thumb-inline"
|
||||||
|
src="../images/_s-thumbs/{{ credit.category }}/{{ credit.fileName }}"
|
||||||
|
alt="Attributed image for {{ credit.fileName }}"
|
||||||
|
width="40" height="24"
|
||||||
|
loading="lazy" decoding="async">
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="meta" >
|
<div class="meta">
|
||||||
<p>
|
<p>
|
||||||
Photo by <a class="creator" href="{{ credit.creatorUrl }}" target="_blank"
|
Photo by <a class="creator" href="{{ credit.creatorUrl }}" target="_blank"
|
||||||
rel="noopener noreferrer">{{ credit.creator }}</a> at <a class="source" href="{{ credit.sourceUrl }}" target="_blank" rel="noopener noreferrer">{{ credit.host }}</a> under the <a class="license" href="{{ credit.licenseUrl }}" target="_blank" rel="noopener noreferrer">{{ credit.license }}</a> .
|
rel="noopener noreferrer">{{ credit.creator }}</a> at <a class="source" href="{{ credit.sourceUrl }}" target="_blank" rel="noopener noreferrer">{{ credit.host }}</a> under the <a class="license" href="{{ credit.licenseUrl }}" target="_blank" rel="noopener noreferrer">{{ credit.license }}</a> .
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -4,49 +4,43 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
|
|||||||
seoIndexing: false
|
seoIndexing: false
|
||||||
title: "Gallery - Bloom Valley Nursery Demo"
|
title: "Gallery - Bloom Valley Nursery Demo"
|
||||||
stylesheet:
|
stylesheet:
|
||||||
- "/styles/variables.css"
|
|
||||||
- "/styles/base.css"
|
|
||||||
- "/styles/header.css"
|
|
||||||
- "/styles/gallery.css"
|
- "/styles/gallery.css"
|
||||||
- "/styles/category-nav.css"
|
- "/styles/category-nav.css"
|
||||||
- "/styles/footer.css"
|
|
||||||
- "/styles/modals.css"
|
|
||||||
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
||||||
currentPage: "gallery"
|
currentPage: "gallery"
|
||||||
pageScripts:
|
pageScripts:
|
||||||
- "/scripts/gallery-carousel.js"
|
- "/scripts/gallery-carousel.js"
|
||||||
- "/scripts/script.js"
|
|
||||||
- "/scripts/cart.js"
|
|
||||||
- "/scripts/newsletter.js"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div id="gallery-top">
|
<div id="gallery-top">
|
||||||
<section id="product-carousel-feature" aria-label="Interactive Carousel of Available Products by Category.">
|
<div class="left-side">
|
||||||
<h2>Products by Category</h2>
|
<section id="product-carousel-feature" aria-label="Interactive Carousel of Available Products by Category.">
|
||||||
<div id="product-category-card">
|
<h2>Products by Category</h2>
|
||||||
<button
|
<div id="product-category-card">
|
||||||
id="scroll-left"
|
<button
|
||||||
aria-label="Scroll products left"
|
id="scroll-left"
|
||||||
aria-controls="product-carousel"
|
aria-label="Scroll products left"
|
||||||
class="fa-solid fa-chevron-left"
|
aria-controls="product-carousel"
|
||||||
>
|
class="fa-solid fa-chevron-left"
|
||||||
</button>
|
>
|
||||||
<div id="product-carousel">
|
</button>
|
||||||
<div id="product-list"><!--Product Cards will be dynamically inserted here--></div>
|
<div id="product-carousel">
|
||||||
|
<div id="product-list"><!--Product Cards will be dynamically inserted here--></div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
id="scroll-right"
|
||||||
|
aria-label="Scroll products right"
|
||||||
|
aria-controls="product-carousel"
|
||||||
|
class="fa-solid fa-chevron-right"
|
||||||
|
>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<div id="gallery-bottom">
|
||||||
id="scroll-right"
|
<button id="cart-details">View Shopping Cart</button>
|
||||||
aria-label="Scroll products right"
|
</div>
|
||||||
aria-controls="product-carousel"
|
</section>
|
||||||
class="fa-solid fa-chevron-right"
|
</div>
|
||||||
>
|
<div class="right-side">
|
||||||
</button>
|
{% include "category-nav.njk" %}
|
||||||
</div>
|
</div>
|
||||||
<div id="gallery-bottom">
|
|
||||||
<button id="cart-details">View Shopping Cart</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{% include "category-nav.njk" %}
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,19 +4,12 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
|
|||||||
seoIndexing: false
|
seoIndexing: false
|
||||||
title: "Landing - Bloom Valley Nursery Demo"
|
title: "Landing - Bloom Valley Nursery Demo"
|
||||||
stylesheet:
|
stylesheet:
|
||||||
- "/styles/variables.css"
|
|
||||||
- "/styles/base.css"
|
|
||||||
- "/styles/header.css"
|
|
||||||
- "/styles/index.css"
|
- "/styles/index.css"
|
||||||
- "/styles/category-nav.css"
|
- "/styles/category-nav.css"
|
||||||
- "/styles/footer.css"
|
|
||||||
- "/styles/modal.css"
|
|
||||||
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
||||||
currentPage: "index"
|
currentPage: "index"
|
||||||
pageScripts:
|
pageScripts:
|
||||||
- "/scripts/script.js"
|
- "/scripts/script.js"
|
||||||
- "/scripts/cart.js"
|
|
||||||
- "/scripts/newsletter.js"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<!-- Main Content Section -->
|
<!-- Main Content Section -->
|
||||||
@@ -40,7 +33,7 @@ pageScripts:
|
|||||||
<h2 id="testimonials-heading">What Others Say</h2>
|
<h2 id="testimonials-heading">What Others Say</h2>
|
||||||
{% for item in testimonials.TESTIMONIALS %}
|
{% for item in testimonials.TESTIMONIALS %}
|
||||||
<div id="{{ id }}" class="testimonial-item">
|
<div id="{{ id }}" class="testimonial-item">
|
||||||
<h3 class="client-name">{{ item.clientName }} said<h3>
|
<h3 class="client-name">{{ item.clientName }} said</h3>
|
||||||
<p class="client-quote">"{{ item.testimonial }}"</p>
|
<p class="client-quote">"{{ item.testimonial }}"</p>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
@@ -58,7 +51,7 @@ pageScripts:
|
|||||||
<a href="/gallery/">
|
<a href="/gallery/">
|
||||||
<h3 class="product-name">{{ item.productName }}</h3>
|
<h3 class="product-name">{{ item.productName }}</h3>
|
||||||
<figure>
|
<figure>
|
||||||
<img src="images/_m-thumbs/{{ item.category }}/{{ item.imageFile }}" alt="{{ item.altText }}" class="featured-item">
|
<img src="images/_m-thumbs/{{ item.category }}/{{ item.imageFile }}" alt="{{ item.altText }}" width="480" height="320" class="featured-item">
|
||||||
<figcaption class="short-description">{{ item.shortDescription }}</figcaption>
|
<figcaption class="short-description">{{ item.shortDescription }}</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
<p class="price">${{ item.price }}</p>
|
<p class="price">${{ item.price }}</p>
|
||||||
|
|||||||
54
src/scripts/demo-modal.js
Normal file
54
src/scripts/demo-modal.js
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
@@ -71,6 +71,20 @@ const updateProductList = (category) => {
|
|||||||
const productList = document.getElementById("product-list");
|
const productList = document.getElementById("product-list");
|
||||||
if (!productList) return console.error("Element with ID 'product-list' not found.");
|
if (!productList) return console.error("Element with ID 'product-list' not found.");
|
||||||
|
|
||||||
|
// Remove active class from all buttons
|
||||||
|
document.querySelectorAll(".categories ul li").forEach(li => {
|
||||||
|
li.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add active class to the button for the current category
|
||||||
|
document.querySelectorAll(".cat-btn").forEach(button => {
|
||||||
|
const url = new URL(button.href);
|
||||||
|
const btnCategory = url.searchParams.get('category');
|
||||||
|
if (btnCategory === category) {
|
||||||
|
button.parentElement.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
selectedProducts = allProducts.filter(product => product.category === category);
|
selectedProducts = allProducts.filter(product => product.category === category);
|
||||||
currentIndex = 0;
|
currentIndex = 0;
|
||||||
|
|
||||||
|
|||||||
@@ -1,58 +1,6 @@
|
|||||||
document.addEventListener("DOMContentLoaded", () => {
|
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");
|
// ================== PROMOS CAROUSEL ==================
|
||||||
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 PROMO CAROUSEL ==================
|
|
||||||
const promo = document.querySelectorAll(".promo-item");
|
const promo = document.querySelectorAll(".promo-item");
|
||||||
let currentIndexPromo = 0;
|
let currentIndexPromo = 0;
|
||||||
|
|
||||||
@@ -71,7 +19,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||||||
showNextPromo();
|
showNextPromo();
|
||||||
setInterval(showNextPromo, 2250);
|
setInterval(showNextPromo, 2250);
|
||||||
|
|
||||||
// ================== CUSTOMER HIGHLIGHTS CAROUSEL ==================
|
// ================== TESTIMONIALS CAROUSEL ==================
|
||||||
const testimonials = document.querySelectorAll(".testimonial-item");
|
const testimonials = document.querySelectorAll(".testimonial-item");
|
||||||
let currentIndexTestimonials = 0;
|
let currentIndexTestimonials = 0;
|
||||||
|
|
||||||
@@ -91,19 +39,6 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||||||
setInterval(showNextTestimonial, 3500);
|
setInterval(showNextTestimonial, 3500);
|
||||||
|
|
||||||
// ================== FEATURED ITEMS CAROUSEL ==================
|
// ================== 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 ==================
|
|
||||||
const featuredItems = document.querySelectorAll(".featured-card");
|
const featuredItems = document.querySelectorAll(".featured-card");
|
||||||
let currentIndexFeatured = 0;
|
let currentIndexFeatured = 0;
|
||||||
|
|
||||||
|
|||||||
@@ -1,212 +1,255 @@
|
|||||||
/* |--↓-↓-↓ Start about.html ↓-↓-↓--| */
|
/* |--↓-↓-↓ Start about.html ↓-↓-↓--| */
|
||||||
.about {
|
#top {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
background-color: var(--color-soft-golden);
|
||||||
|
border: solid 3px var(--color-destin-sand);
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-top {
|
.story-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
gap: 30px;
|
align-items: center;
|
||||||
width: 90vw;
|
justify-content: center;
|
||||||
|
width: 95%;
|
||||||
|
margin: 20px 0;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
background-color: var(--color-pale-green);
|
||||||
|
border: solid 3px var(--color-destin-sand);
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#business-info {
|
.video-border {
|
||||||
|
border-bottom: solid 3px var(--color-destin-sand);
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bvn-video {
|
||||||
display: block;
|
display: block;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 25vw;
|
border: solid 3px var(--color-destin-sand);
|
||||||
background-color: var(--color-soft-golden);
|
border-radius: 15px;
|
||||||
border: solid var(--color-destin-sand);
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: var(--shadow-medium);
|
box-shadow: var(--shadow-medium);
|
||||||
|
margin: 10px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#phone,
|
.iframe {
|
||||||
#hours {
|
border-radius: 15px;
|
||||||
background-color: var(--color-destin-sand);
|
|
||||||
border: solid var(--color-light-teal);
|
|
||||||
border-radius: 10px;
|
|
||||||
margin: 5px 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#business-info h3,
|
h2#bvn-story {
|
||||||
#feedback-intro h2 {
|
font-size: 2.25rem;
|
||||||
font-size: 1.875rem;
|
|
||||||
text-align: center;
|
|
||||||
text-shadow: 0.5px 0.5px 2px var(--color-dark-green),
|
|
||||||
-0.5px -0.5px 2px var(--color-dark-green),
|
|
||||||
-0.5px 0.5px 2px var(--color-dark-green),
|
|
||||||
0.5px -0.5px 2px var(--color-dark-green);
|
|
||||||
color: var(--color-destin-sand);
|
|
||||||
background-color: var(--color-mid-green);
|
background-color: var(--color-mid-green);
|
||||||
border: solid var(--color-destin-sand);
|
color: var(--color-destin-sand);
|
||||||
max-width: 75vw;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding-left: 10px;
|
|
||||||
transform: translateX(0px);
|
|
||||||
box-shadow: var(--shadow-medium);
|
|
||||||
}
|
|
||||||
|
|
||||||
#business-info p {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 14pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
#business-info h4 {
|
|
||||||
text-align: center;
|
|
||||||
background-color: var(--color-light-teal);
|
|
||||||
border: solid var(--color-destin-sand);
|
border: solid var(--color-destin-sand);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
padding: 0 10px;
|
padding: 0 100px;
|
||||||
width: 50%;
|
margin-top: 20px;
|
||||||
margin-left: 22.5%;
|
margin-bottom: 20px;
|
||||||
box-shadow: var(--shadow-subtle);
|
width: fit-content;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: var(--text-outline-heading);
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#story {
|
.story {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
width: 95%;
|
||||||
|
padding: 20px 10px;
|
||||||
|
margin: 20px 0px;
|
||||||
|
text-align: left;
|
||||||
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: left;
|
background-color: var(--color-destin-sand);
|
||||||
width: 70vw;
|
border: solid 3px var(--color-mid-green);
|
||||||
margin-left: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#story h2 {
|
|
||||||
background-color: var(--color-mid-green);
|
|
||||||
color: var(--color-destin-sand);
|
|
||||||
border: solid var(--color-destin-sand);
|
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
text-shadow: 0.5px 0.5px 2px var(--color-dark-green),
|
box-shadow: var(--shadow-medium);
|
||||||
-0.5px -0.5px 2px var(--color-dark-green),
|
|
||||||
-0.5px 0.5px 2px var(--color-dark-green),
|
|
||||||
0.5px -0.5px 2px var(--color-dark-green);
|
|
||||||
width: 50%;
|
|
||||||
padding: 5px 10px;
|
|
||||||
text-align: center;
|
|
||||||
margin-right: 12.5%;
|
|
||||||
box-shadow: var(--shadow-medium);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#story p {
|
.story p {
|
||||||
color: var(--color-dark-green);
|
color: var(--color-dark-green);
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
text-indent: 1.75rem;
|
||||||
|
margin: 5px auto;
|
||||||
|
padding: 0 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bottom {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
background-color: var(--color-pale-green);
|
||||||
|
border: solid 3px var(--color-destin-sand);
|
||||||
|
border-radius: 15px;
|
||||||
|
width: 95%;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 30px auto;
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
#business-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
width: fit-content;
|
||||||
|
background-color: var(--color-destin-sand);
|
||||||
|
color: var(--color-dark-green);
|
||||||
|
border: solid 2px var(--color-pale-green);
|
||||||
|
padding: 0 10px;
|
||||||
|
margin-left: 10px;
|
||||||
|
border-radius: 15px;
|
||||||
|
white-space: nowrap;
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
#business-info h3 {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
text-decoration: underline;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#business-info p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#feedback {
|
#feedback {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
width:fit-content;
|
||||||
background-color: var(--color-mid-green);
|
margin: auto;
|
||||||
border: solid var(--color-destin-sand);
|
|
||||||
border-radius: 15px;
|
|
||||||
width: 90vw;
|
|
||||||
margin-top: 30px;
|
|
||||||
box-shadow: var(--shadow-medium);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#feedback h2 {
|
#feedback h2 {
|
||||||
background-color: var(--color-light-teal);
|
margin-top: 5px;
|
||||||
border: solid var(--color-destin-sand);
|
margin-bottom: 20px;
|
||||||
border-radius: 10px;
|
margin-left: auto;
|
||||||
width: 50vw;
|
margin-right: auto;
|
||||||
padding: 5px 10px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-left: 25vw;
|
background-color: var(--color-mid-green);
|
||||||
margin-right: 25vw;
|
border: solid 2px var(--color-destin-sand);
|
||||||
text-shadow: 0.5px 0.5px 2px var(--color-dark-green),
|
text-shadow: var(--text-outline-heading);
|
||||||
-0.5px -0.5px 2px var(--color-dark-green),
|
border-radius: 15px;
|
||||||
-0.5px 0.5px 2px var(--color-dark-green),
|
font-size: 1.6rem;
|
||||||
0.5px -0.5px 2px var(--color-dark-green);
|
color: var(--color-destin-sand);
|
||||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
width: fit-content;
|
||||||
|
padding: 0 50px;
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
#feedback h3 {
|
.special {
|
||||||
color: #00231c;
|
font-size: 1.3rem;
|
||||||
font-weight: bold;
|
font-weight: 500px;
|
||||||
width: 85vw;
|
|
||||||
text-align: center;
|
|
||||||
margin-left: 7.5vw;
|
|
||||||
margin-right: 7.5vw;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#feedback p {
|
#feedback p {
|
||||||
color: #00231c;
|
font-size: 1.2rem;
|
||||||
width: 85vw;
|
color: var(--color-dark-green);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-left: 7.5vw;
|
margin: 0 20px;
|
||||||
margin-right: 7.5vw;
|
padding: 0 20px;
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#feedback-form form {
|
.inputs {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: 20px;
|
justify-content: space-between;
|
||||||
align-items: baseline;
|
align-items: center;
|
||||||
width: 95%;
|
|
||||||
margin-top: 20px; /* Adds some spacing above the form */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#customer-info {
|
#customer-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-content: center;
|
align-items: center;
|
||||||
width: 95%; /* Adjusted width */
|
gap: 10px;
|
||||||
gap: 25px; /* Adds spacing between input fields */
|
width: 500px; /* Adjusted width */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#customer-info input {
|
#name-field,
|
||||||
background-color: var(--color-destin-sand);
|
#phone-field,
|
||||||
border: solid var(--color-dark-green);
|
#email-field {
|
||||||
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 90%; /* Adjusted width */
|
font-size: 1.2rem;
|
||||||
|
color: var(--color-dark-green);
|
||||||
|
width: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
#customer-message #message-field textarea {
|
#name-field input,
|
||||||
width: 50vw; /* Takes full width of the section */
|
#phone-field input,
|
||||||
height: 30vh; /* Adjust height as needed */
|
#email-field input {
|
||||||
background-color: var(--color-destin-sand);
|
width: 300px;
|
||||||
border: solid var(--color-dark-green);
|
height: 30px;
|
||||||
border-radius: 15px;
|
border: solid 2px var(--color-dark-green);
|
||||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
|
border-radius: 10px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
padding: 0 10px;
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
#form-submit-btn {
|
.message-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: 10px;
|
align-items: center;
|
||||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#message-field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 500px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--color-dark-green);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#message {
|
||||||
|
border: solid 2px var(--color-dark-green);
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
#form-submit {
|
#form-submit {
|
||||||
padding: 10px 20px;
|
font-size: 1.4rem;
|
||||||
background-color: var(--color-light-teal);
|
background-color: var(--color-destin-sand);
|
||||||
border: solid var(--color-destin-sand);
|
border: var(--color-dark-green);
|
||||||
border-radius: 10px;
|
|
||||||
color: var(--color-dark-green);
|
color: var(--color-dark-green);
|
||||||
font-size: 1rem;
|
margin-top: 10px;
|
||||||
cursor: pointer;
|
border-radius: 10px;
|
||||||
margin-bottom: 10px;
|
padding: 5px 10px;
|
||||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
|
box-shadow: var(--shadow-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
#form-submit:hover {
|
|
||||||
background-color: var(--color-destin-sand);
|
|
||||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,4 +1,13 @@
|
|||||||
/* Global Styles */
|
/* Global Styles */
|
||||||
|
/* Override Font Awesome font-face globally to prevent CLS */
|
||||||
|
@font-face {
|
||||||
|
font-family: "Font Awesome 6 Brands";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: url("https://ka-f.fontawesome.com/releases/v7.0.1/webfonts/free-fa-brands-400.woff2") format("woff2");
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-size: 17px; /* Base font size for scaling */
|
font-size: 17px; /* Base font size for scaling */
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
@@ -9,7 +18,7 @@ body {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-family: 'Calibri', sans-serif;
|
font-family: 'Calibri', sans-serif;
|
||||||
font-size: 1rem; /* Default font size based on 16px */
|
font-size: 1rem; /* Default font size based on 17px */
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@@ -17,56 +26,53 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body h1 {
|
body h1 {
|
||||||
text-shadow: 0.5px 0.5px .5px var(--color-destin-sand), /* Bottom-right top shadow */
|
text-shadow: var(--text-outline-light);
|
||||||
-0.5px -0.5px .5px var(--color-destin-sand), /* Top-left top shadow */
|
|
||||||
-0.5px 0.5px .5px var(--color-destin-sand), /* Bottom-left top shadow */
|
|
||||||
0.5px -0.5px .5px var(--color-destin-sand); /* Top-right top shadow */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Title Large (Arial Bold 30px) */
|
/* Title Large (Arial Bold ~32px) */
|
||||||
h1 {
|
h1 {
|
||||||
font-family: 'Arial', sans-serif;
|
font-family: 'Arial', sans-serif;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 1.875rem; /* 30px for title */
|
font-size: 1.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Title (Arial Bold 25px) */
|
/* Title (Arial Bold ~27px) */
|
||||||
h2 {
|
h2 {
|
||||||
font-family: 'Arial', sans-serif;
|
font-family: 'Arial', sans-serif;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 1.5625rem;
|
font-size: 1.5625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Subtitle (Comfortaa Normal 15px) */
|
/* Subtitle (Comfortaa Normal ~16px) */
|
||||||
h3 {
|
h3 {
|
||||||
font-family: 'Comfortaa', sans-serif;
|
font-family: 'Comfortaa', sans-serif;
|
||||||
font-size: .9375rem ; /* 15px for subtitle */
|
font-size: .9375rem ;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Body Large (Calibri Normal 20px) */
|
/* Body Large (Calibri Normal ~21px) */
|
||||||
p.body-large {
|
p.body-large {
|
||||||
font-family: 'Calibri', sans-serif;
|
font-family: 'Calibri', sans-serif;
|
||||||
font-size: 1.25rem; /* 20px for body large */
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Body Strong (Calibri Bold 16px) */
|
/* Body Strong (Calibri Bold 17px) */
|
||||||
strong {
|
strong {
|
||||||
font-family: 'Calibri', sans-serif;
|
font-family: 'Calibri', sans-serif;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 1rem; /* 16px for body strong */
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Body (Calibri Normal 16px) */
|
/* Body (Calibri Normal 17px) */
|
||||||
p.body {
|
p.body {
|
||||||
font-family: 'Calibri', sans-serif;
|
font-family: 'Calibri', sans-serif;
|
||||||
font-size: 1rem; /* 16px for regular body text */
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Captions (Arial Bold 11px) */
|
/* Captions (Arial Bold ~12px) */
|
||||||
figcaption {
|
figcaption {
|
||||||
font-family: 'Arial', sans-serif;
|
font-family: 'Arial', sans-serif;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: .6875rem; /* 11px for captions */
|
font-size: .6875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 780px) {
|
@media (max-width: 780px) {
|
||||||
@@ -75,10 +81,11 @@ figcaption {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
.main-content-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
max-width: 1440px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
@@ -13,7 +13,7 @@
|
|||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
box-shadow: var(--shadow-strong);
|
box-shadow: var(--shadow-strong);
|
||||||
max-width: 325px;
|
max-width: 225px;
|
||||||
border: solid var(--color-destin-sand);
|
border: solid var(--color-destin-sand);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
@@ -79,3 +79,9 @@
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.categories ul li.active {
|
||||||
|
background-color: var(--color-destin-sand);
|
||||||
|
color: var(--color-dark-green);
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
|
}
|
||||||
@@ -15,17 +15,47 @@ h1 {
|
|||||||
border: solid var(--color-mid-green);
|
border: solid var(--color-mid-green);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
color: var(--color-dark-green);
|
color: var(--color-dark-green);
|
||||||
text-decoration: underline;
|
|
||||||
text-shadow: var(--text-outline-heading);
|
text-shadow: var(--text-outline-heading);
|
||||||
padding: 5px 100px;
|
padding: 5px 100px;
|
||||||
box-shadow: var(--shadow-subtle);
|
box-shadow: var(--shadow-subtle);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.notice, .com-link {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: var(--color-dark-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.com-link {
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.com-link:hover {
|
||||||
|
color: var(--color-soft-golden);
|
||||||
|
}
|
||||||
|
|
||||||
#calendar-events-container {
|
#calendar-events-container {
|
||||||
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 20px;
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
border: none;
|
border: none;
|
||||||
|
background-color: var(--color-soft-golden);
|
||||||
|
border: solid 3px var(--color-destin-sand);
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 10px;
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.events {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upcoming-events {
|
.upcoming-events {
|
||||||
@@ -196,7 +226,7 @@ li.enav {
|
|||||||
border: solid var(--color-destin-sand);
|
border: solid var(--color-destin-sand);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
margin-botom: 0;
|
margin-bottom: 0;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
@@ -210,7 +240,7 @@ li.enav {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: var(--color-pale-green);
|
background-color: var(--color-pale-green);
|
||||||
border: solid var(--color-dark-green);
|
border: solid var(--color-destin-sand);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
padding: 0px 20px 10px 20px;
|
padding: 0px 20px 10px 20px;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
@@ -228,6 +258,8 @@ li.enav {
|
|||||||
border: solid 0.5px var(--color-dark-green);
|
border: solid 0.5px var(--color-dark-green);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 2px 20px;
|
padding: 2px 20px;
|
||||||
|
box-shadow: var(--shadow-subtle);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.event-card h3.workshop {
|
.event-card h3.workshop {
|
||||||
|
|||||||
@@ -1,6 +1,80 @@
|
|||||||
/* CSS Style Rules for "Credits & Attributions" */
|
/* CSS Style Rules for "Credits & Attributions" */
|
||||||
.credits-container {
|
.credits-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
background-color: var(--color-soft-golden);
|
||||||
|
border: solid 3px var(--color-destin-sand);
|
||||||
|
border-radius: 15px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
padding: 10px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.credits-container a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--color-dark-green);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
background-color: var(--color-pale-green);
|
||||||
|
border: solid 3px var(--color-destin-sand);
|
||||||
|
border-radius: 15px;
|
||||||
|
margin: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
gap: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.cred-attr {
|
||||||
|
font-size: 2.25rem;
|
||||||
|
background-color: var(--color-mid-green);
|
||||||
|
color: var(--color-destin-sand);
|
||||||
|
border: solid var(--color-destin-sand);
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 0 100px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
width: fit-content;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: var(--text-outline-heading);
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-box, .images-box {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: var(--color-destin-sand);
|
||||||
|
border: solid 3px var(--color-mid-green);
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-box {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.videos, .images {
|
||||||
|
font-size: 1.85rem;
|
||||||
|
background-color: var(--color-light-teal);
|
||||||
|
color: var(--color-dark-green);
|
||||||
|
border: solid var(--color-destin-sand);
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 0 50px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: fit-content;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: var(--text-outline-light);
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro {
|
.intro {
|
||||||
@@ -10,13 +84,22 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.thanks {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.strong-thanks {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
#tip-desc {
|
#tip-desc {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.credits-list {
|
.videos-credits-list,
|
||||||
|
.images-credits-list {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0 30px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -25,6 +108,7 @@
|
|||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 0.5rem; /* spacing between thumb and text */
|
gap: 0.5rem; /* spacing between thumb and text */
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumb {
|
.thumb {
|
||||||
@@ -65,3 +149,4 @@
|
|||||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
}
|
}
|
||||||
#footer-nav {
|
#footer-nav {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul, #footer-nav ul {
|
nav ul, #footer-nav ul {
|
||||||
@@ -19,7 +20,6 @@ nav ul, #footer-nav ul {
|
|||||||
position: relative;
|
position: relative;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin-top: 20px;
|
|
||||||
background-color: var(--color-destin-sand);
|
background-color: var(--color-destin-sand);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
@@ -145,4 +145,17 @@ footer div label {
|
|||||||
#copyright {
|
#copyright {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--color-dark-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
#copyright a {
|
||||||
|
color: var(--color-dark-green);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
text-decoration: one;
|
||||||
|
}
|
||||||
|
|
||||||
|
#copyright a:hover {
|
||||||
|
color: var(--color-destin-white);
|
||||||
}
|
}
|
||||||
@@ -8,15 +8,23 @@
|
|||||||
#gallery-top {
|
#gallery-top {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
align-items: top;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-side {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 95vw;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#product-carousel-feature {
|
#product-carousel-feature {
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#product-carousel-feature h2 {
|
#product-carousel-feature h2 {
|
||||||
@@ -29,7 +37,6 @@
|
|||||||
border: solid var(--color-destin-sand);
|
border: solid var(--color-destin-sand);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
transform: translateX(30px);
|
|
||||||
box-shadow: var(--shadow-medium);
|
box-shadow: var(--shadow-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -38,27 +45,26 @@
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 65vw;
|
width: 60vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
#product-carousel {
|
#product-carousel {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row; /* Flexbox layout for horizontal row */
|
flex-direction: row; /* Flexbox layout for horizontal row */
|
||||||
gap: 20px; /* Space between product cards */
|
gap: 10px; /* Space between product cards */
|
||||||
overflow-x: hidden; /* Changed from 'auto' to 'hidden' */
|
overflow-x: hidden; /* Changed from 'auto' to 'hidden' */
|
||||||
scroll-behavior: smooth; /* Smooth scrolling for buttons */
|
scroll-behavior: smooth; /* Smooth scrolling for buttons */
|
||||||
padding: 10px; /* Optional padding inside the carousel */
|
padding: 10px; /* Optional padding inside the carousel */
|
||||||
white-space: nowrap; /* Prevent wrapping to a new row */
|
white-space: nowrap; /* Prevent wrapping to a new row */
|
||||||
transform: translateX(4vw);
|
min-height: 550px;
|
||||||
min-height: 600px;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-card {
|
.product-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 300px;
|
width: 250px;
|
||||||
min-width: 300px;
|
min-width: 250px;
|
||||||
max-height: 350px;
|
max-height: 350px;
|
||||||
flex: 0 0 auto; /* Prevent resizing of cards */
|
flex: 0 0 auto; /* Prevent resizing of cards */
|
||||||
border: 1px solid var(--color-dark-green);
|
border: 1px solid var(--color-dark-green);
|
||||||
@@ -67,6 +73,7 @@
|
|||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
white-space: normal;
|
||||||
background-color: var(--color-destin-sand);
|
background-color: var(--color-destin-sand);
|
||||||
box-shadow: var(--shadow-subtle);
|
box-shadow: var(--shadow-subtle);
|
||||||
transition: all 0.5s ease-in-out; /* Added for smooth transitions */
|
transition: all 0.5s ease-in-out; /* Added for smooth transitions */
|
||||||
@@ -93,10 +100,9 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* New style for the centered card */
|
|
||||||
.product-card.is-centered {
|
.product-card.is-centered {
|
||||||
width: 340px;
|
width: 340px;
|
||||||
transform: scale(1.4);
|
transform: scale(1.2);
|
||||||
box-shadow: var(--shadow-strong);
|
box-shadow: var(--shadow-strong);
|
||||||
background-color: var(--color-destin-sand);
|
background-color: var(--color-destin-sand);
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
@@ -105,12 +111,11 @@
|
|||||||
#scroll-left, #scroll-right {
|
#scroll-left, #scroll-right {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: var(--color-dark-green);
|
background-color: var(--color-dark-green);
|
||||||
color: white;
|
color: var(--color-destin-sand);
|
||||||
border: none;
|
border: none;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
transform: translateX(4.5vw);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
@@ -163,4 +168,8 @@
|
|||||||
color: var(--color-destin-sand);
|
color: var(--color-destin-sand);
|
||||||
box-shadow: var(--shadow-medium);
|
box-shadow: var(--shadow-medium);
|
||||||
}
|
}
|
||||||
/* |--↑-↑-↑ End gallery.html ↑-↑-↑--| */
|
|
||||||
|
.right-side {
|
||||||
|
margin-left: 48px;
|
||||||
|
margin-top: 52px;
|
||||||
|
}
|
||||||
@@ -1,79 +1,70 @@
|
|||||||
/* |--↓-↓-↓ Start Header ↓-↓-↓--| */
|
/* |--↓-↓-↓ Start Header ↓-↓-↓--| */
|
||||||
header {
|
header {
|
||||||
padding: 20px;
|
padding-top: 20px;
|
||||||
background-color: var(--color-light-teal);
|
background-color: var(--color-light-teal);
|
||||||
border-bottom: 3px solid var(--color-mid-green);
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-container {
|
.header-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
max-width: 1400px;
|
max-width: 1440px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
gap: 20px; /* Adds space between columns */
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Left column - Logo */
|
.logo-name-cart {
|
||||||
.header-left {
|
|
||||||
flex: 0 0 150px; /* Fixed width for logo */
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Center column - Business name and navigation */
|
|
||||||
.header-center {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0; /* Prevents flex item from overflowing */
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Right column - Shopping cart */
|
.logo-box {
|
||||||
.header-right {
|
|
||||||
flex: 0 0 150px; /* Fixed width for shopping cart */
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-start;
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Logo styles */
|
img.logo {
|
||||||
header .logo {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 180px;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
header .logo img {
|
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 180px;
|
||||||
height: auto;
|
height: 180px;
|
||||||
margin-left: 50px;
|
|
||||||
filter: drop-shadow(0 0 2px var(--color-soft-golden)) drop-shadow(0 0 0px var(--color-dark-green));
|
filter: drop-shadow(0 0 2px var(--color-soft-golden)) drop-shadow(0 0 0px var(--color-dark-green));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Business name and navigation container */
|
.name-box {
|
||||||
.business-name-container {
|
display: flex;
|
||||||
width: 100%;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.business-name {
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
display: block;
|
||||||
|
font-size: 4rem;
|
||||||
|
color: var(--color-dark-green);
|
||||||
|
margin: 10px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 15px;
|
text-shadow: var(--text-outline-business);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-container {
|
.cart-box {
|
||||||
width: 100%;
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
z-index: 1;
|
||||||
|
align-self: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Shopping cart button */
|
|
||||||
#shopping-cart {
|
#shopping-cart {
|
||||||
position: static;
|
position: block;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
margin-left: 75px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: var(--color-destin-sand);
|
background-color: var(--color-destin-sand);
|
||||||
color: var(--color-dark-green);
|
color: var(--color-dark-green);
|
||||||
@@ -82,149 +73,8 @@ header .logo img {
|
|||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
box-shadow: var(--shadow-strong);
|
box-shadow: var(--shadow-strong);
|
||||||
border: none;
|
border: none;
|
||||||
display: flex;
|
width: 60px;
|
||||||
justify-content: center;
|
height: 55px;
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.business-name {
|
|
||||||
font-family: 'Georgia', serif;
|
|
||||||
display: block;
|
|
||||||
font-size: 3.6rem;
|
|
||||||
color: var(--color-dark-green); /* Dark green for the title */
|
|
||||||
margin: 10px 0;
|
|
||||||
text-align: center;
|
|
||||||
text-shadow: var(--text-outline-business);
|
|
||||||
}
|
|
||||||
|
|
||||||
header p.tagline {
|
|
||||||
font-family: 'Arial', sans-serif;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color: var(--color-mid-green); /* Pale green for the tagline */
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-toggle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 780px) {
|
|
||||||
/* --- Main Header Container --- */
|
|
||||||
header {
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-main {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-and-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Logo --- */
|
|
||||||
header .logo {
|
|
||||||
position: static;
|
|
||||||
width: 100px; /* Smaller logo for compact header */
|
|
||||||
}
|
|
||||||
|
|
||||||
header .logo img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Business Name --- */
|
|
||||||
.business-name {
|
|
||||||
font-size: 1.8rem; /* Smaller name for mobile */
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Header Icons --- */
|
|
||||||
.header-icons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#shopping-cart {
|
|
||||||
position: static;
|
|
||||||
padding: 0;
|
|
||||||
background: none;
|
|
||||||
box-shadow: none;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-toggle {
|
|
||||||
display: block;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--color-dark-green);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Compact Navigation Menu --- */
|
|
||||||
nav {
|
|
||||||
display: none;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 10px;
|
|
||||||
background-color: var(--color-destin-sand);
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: var(--shadow-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.is-open {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul {
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 5px 0; /* Reduced vertical padding */
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li a {
|
|
||||||
padding: 10px 0; /* Reduced padding for each link */
|
|
||||||
font-size: 1rem; /* Smaller font size for links */
|
|
||||||
text-align: center;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li a.current-page {
|
|
||||||
background: none;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
margin-top: 20px;
|
|
||||||
background-color: var(--color-destin-sand);
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
width: 100%;
|
|
||||||
box-shadow: var(--shadow-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
#shopping-cart {
|
|
||||||
position: absolute;
|
|
||||||
top: 100px;
|
|
||||||
right: 100px;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: var(--color-destin-sand);
|
|
||||||
color: var(--color-dark-green);
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 5;
|
|
||||||
transition: background-color 0.3s ease, color 0.3s ease;
|
|
||||||
box-shadow: var(--shadow-strong);
|
|
||||||
border: none;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#shopping-cart:hover {
|
#shopping-cart:hover {
|
||||||
@@ -234,16 +84,38 @@ nav {
|
|||||||
box-shadow: var(--shadow-medium);
|
box-shadow: var(--shadow-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-bottom: solid var(--color-dark-green);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
background-color: var(--color-destin-sand);
|
||||||
|
padding: 2px 50px;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: var(--shadow-subtle);
|
||||||
|
}
|
||||||
|
|
||||||
nav ul {
|
nav ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
|
||||||
|
|
||||||
nav ul {
|
|
||||||
gap: 40px;
|
gap: 40px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul li {
|
nav ul li {
|
||||||
@@ -264,7 +136,7 @@ nav ul li {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.community-link {
|
.community-link {
|
||||||
font-size: 0.9em;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul li a {
|
nav ul li a {
|
||||||
|
|||||||
@@ -2,8 +2,8 @@
|
|||||||
.main-content-container {
|
.main-content-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
gap: 50px;
|
gap: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.promo-item,
|
.promo-item,
|
||||||
@@ -15,14 +15,21 @@
|
|||||||
.promo-item.visible,
|
.promo-item.visible,
|
||||||
.testimonial-item.visible,
|
.testimonial-item.visible,
|
||||||
.featured-item.active {
|
.featured-item.active {
|
||||||
display: block; /* Show visible or active items */
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center; /* Show visible or active items */
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-item:active {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#left-side,
|
#left-side,
|
||||||
#category-nav {
|
#category-nav {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
box-shadow: var(--shadow-strong);
|
box-shadow: var(--shadow-strong);
|
||||||
max-width: 325px;
|
max-width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#left-side {
|
#left-side {
|
||||||
@@ -60,8 +67,8 @@
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
max-height: 200px;
|
max-height: 250px;
|
||||||
min-height: 200px;
|
min-height: 250px;
|
||||||
max-width: 350px;
|
max-width: 350px;
|
||||||
box-shadow: var(--shadow-strong);
|
box-shadow: var(--shadow-strong);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -93,19 +100,23 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.testimonial-item {
|
.testimonial-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
background-color: var(--color-destin-sand);
|
background-color: var(--color-destin-sand);
|
||||||
color: var(--color-dark-green);
|
color: var(--color-dark-green);
|
||||||
border: solid var(--color-dark-green);
|
border: solid var(--color-dark-green);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
max-height: 200px;
|
max-height: 275px;
|
||||||
max-width: 350px;
|
max-width: 350px;
|
||||||
min-height: 200px;
|
min-height: 275px;
|
||||||
box-shadow: var(--shadow-strong);
|
box-shadow: var(--shadow-strong);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* FEATURED ITEMS */
|
/* FEATURED ITEMS */
|
||||||
#featured-container {
|
#featured-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -125,7 +136,7 @@
|
|||||||
color: var(--color-destin-sand);
|
color: var(--color-destin-sand);
|
||||||
background-color: var(--color-mid-green);
|
background-color: var(--color-mid-green);
|
||||||
border: solid var(--color-destin-sand);
|
border: solid var(--color-destin-sand);
|
||||||
border-radius: 10px;
|
border-radius: 15px;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
padding: 0 50px;
|
padding: 0 50px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
@@ -170,6 +181,8 @@
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
box-shadow: var(--shadow-strong);
|
box-shadow: var(--shadow-strong);
|
||||||
|
width: 480px;
|
||||||
|
height: 320px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#featured-list {
|
#featured-list {
|
||||||
|
|||||||
@@ -25,6 +25,12 @@
|
|||||||
-0.5px 0.5px 1px var(--color-destin-sand),
|
-0.5px 0.5px 1px var(--color-destin-sand),
|
||||||
0.5px -0.5px 1px var(--color-destin-sand);
|
0.5px -0.5px 1px var(--color-destin-sand);
|
||||||
|
|
||||||
|
--text-outline-light:
|
||||||
|
0.5px 0.5px .5px var(--color-destin-sand),
|
||||||
|
-0.5px -0.5px .5px var(--color-destin-sand),
|
||||||
|
-0.5px 0.5px .5px var(--color-destin-sand),
|
||||||
|
0.5px -0.5px .5px var(--color-destin-sand);
|
||||||
|
|
||||||
/* Layered Text Shadow */
|
/* Layered Text Shadow */
|
||||||
--text-shadow-layered:
|
--text-shadow-layered:
|
||||||
0.5px 0.5px 1px var(--color-dark-green),
|
0.5px 0.5px 1px var(--color-dark-green),
|
||||||
|
|||||||
Reference in New Issue
Block a user