Feat, Fix, and Refactor: Consolidate index page changes
Feat: Refactor index.njk to be data-driven and fix related rendering issues. Fix: Resolve layout and functionality bugs, including broken JavaScript for the featured item carousel, layout shifts in category navigation, and CSS issues with the testimonial carousel. Refactor: Centralize global styles using CSS custom property variables and clean up redundant CSS rules.
This commit is contained in:
@@ -25,7 +25,7 @@ pageScripts:
|
||||
|
||||
<div>
|
||||
<ul class="credits-list">
|
||||
{% for credit in credits.credits %}
|
||||
{% for credit in credits.CREDITS %}
|
||||
<li class="credit" data-tooltip="../images/_m-thumbs/{{ credit.category }}/{{ credit.fileName }}">
|
||||
<div class="thumb">
|
||||
<img class="thumb-inline"
|
||||
|
||||
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
198
src/index.njk
198
src/index.njk
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: base.njk
|
||||
metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
|
||||
seoIndexing: false
|
||||
title: "Landing - Bloom Valley Nursery Demo"
|
||||
stylesheet:
|
||||
- "/styles/variables.css"
|
||||
@@ -16,144 +17,71 @@ pageScripts:
|
||||
---
|
||||
|
||||
<!-- Main Content Section -->
|
||||
<div id="left-side">
|
||||
|
||||
<div id="left-aside">
|
||||
<section id="perks-feature-container" >
|
||||
<h2 id="perks-heading">Shopper Perks</h2>
|
||||
<div class="perk-item">
|
||||
<h3>- 50% Off Deal -</h3>
|
||||
<p>New subscribers to our newsletter this month will receive a coupon for 50% off their first purchase! Click here for details! Terms and conditions apply.</p>
|
||||
</div>
|
||||
<div class="perk-item">
|
||||
<h3>Exceptional Quality</h3>
|
||||
<p>Every plant is carefully cultivated from seed or bulb to maturity, offering you vibrant, healthy specimens.</p>
|
||||
</div>
|
||||
<div class="perk-item">
|
||||
<h3>Expert Guidance</h3>
|
||||
<p>Our knowledgeable team is here to help, from selecting the perfect plants to offering planting tips.</p>
|
||||
</div>
|
||||
<div class="perk-item">
|
||||
<h3>Eco-Friendly Practices</h3>
|
||||
<p>We prioritize sustainability by using environmentally conscious growing methods, so you can feel good about your choices.</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Promo Feature -->
|
||||
<section id="promos-container">
|
||||
<h2 id="promos-heading">Shopper Promos</h2>
|
||||
{% for promo in promotions.PROMOS %}
|
||||
<div id="{{ promo.id }}" class="promo-item">
|
||||
<h3 class="promo-title">{{ promo.title }}</h3>
|
||||
<p class="promo-description">{{ promo.description }}</p>
|
||||
<button type="button" class="ctaButton">{{ promo.ctaText }}</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
||||
<section id="testimonials-feature" >
|
||||
<h2>What Others Say</h2>
|
||||
<div class="testimonial-container">
|
||||
<div class="testimonial">
|
||||
<p>"My order arrived the very next day. The speed of delivery and high-quality products provided by Bloom Valley Nursery helped my project go smoothly from start to finish!"</p>
|
||||
<h3>- Caroline N.</h3>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<p>"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!"</p>
|
||||
<h3>- Morris F.</h3>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<p>"Bloom Valley Nursery's community garden inspired me take charge of my health. I was able to lose 50 pounds!"</p>
|
||||
<h3>- Gladis B.</h3>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Testimonials Feature -->
|
||||
<section id="testimonials-container">
|
||||
<h2 id="testimonials-heading">What Others Say</h2>
|
||||
{% for item in testimonials.TESTIMONIALS %}
|
||||
<div id="{{ id }}" class="testimonial-item">
|
||||
<h3 class="client-name">{{ item.clientName }} said<h3>
|
||||
<p class="client-quote">"{{ item.testimonial }}"</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!--<div id="featured-images">
|
||||
<div class="featured-item">
|
||||
<img src="image1.jpg" alt="Feature 1">
|
||||
</div>-->
|
||||
<div id="center">
|
||||
<section id="featured-container">
|
||||
<h2 class="featured-heading">Featured Items</h2>
|
||||
<ul id="featured-list">
|
||||
{% for item in inventory.INVENTORY %}
|
||||
{% if item.isFeatured %}
|
||||
<li>
|
||||
<div id="{{ item.skuID }}-{{ item.catNumber }}-{{ item.productNumber }}" class="featured-card">
|
||||
<a href="/gallery/">
|
||||
<h3 class="product-name">{{ item.productName }}</h3>
|
||||
<figure>
|
||||
<img src="images/_m-thumbs/{{ item.category }}/{{ item.imageFile }}" alt="{{ item.altText }}" class="featured-item">
|
||||
<figcaption class="short-description">{{ item.shortDescription }}</figcaption>
|
||||
</figure>
|
||||
<p class="price">${{ item.price }}</p>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section id="featured-container" >
|
||||
<h2> This Week's Featured Items</h2>
|
||||
<ul id="featured-images">
|
||||
<li>
|
||||
<a href="/gallery/" id="featured-aloe-plant">
|
||||
<figure>
|
||||
<img src="images/indoor/AloePlant.png" alt="An Aloe Vera plant in a turquoise ceramic planter." class="featured-item">
|
||||
<figcaption>Aloe Vera / Turquoise Planter</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery/" id="featured-bird-house">
|
||||
<figure>
|
||||
<img src="images/accessories/BirdHouse.png" alt="A handmade wooden birdhouse painted blue." class="featured-item">
|
||||
<figcaption>Handmade Wooden Birdhouse - Blue</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery/" id="featured-apple-tree">
|
||||
<figure>
|
||||
<img src="images/trees/AppleTree.png" alt="A Red Gala apple sapling in a burlap wrap." class="featured-item">
|
||||
<figcaption>Red Gala Apple Sapling - Burlap Bound</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery/" id="featured-potting-soil">
|
||||
<figure>
|
||||
<img src="images/accessories/PottingSoil.png" alt="A 10 lbs bag of potting soil." class="featured-item">
|
||||
<figcaption>Potting Soil - 10 lbs Bag</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery/" id="featured-spider-plant">
|
||||
<figure>
|
||||
<img src="images/indoor/SpiderPlant.png" alt="A Spider plant in a light gray ceramic planter." class="featured-item">
|
||||
<figcaption>Spider Plant / Light Gray Planter</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery/" id="featured-birch-tree">
|
||||
<figure>
|
||||
<img src="images/trees/BirchTree.png" alt="A Silver Birch sapling in a disposable plastic container." class="featured-item">
|
||||
<figcaption>Silver Birch Sapling - Containerized</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery/" id="featured-watering-can">
|
||||
<figure>
|
||||
<img src="images/accessories/WateringCan.png" alt="A blue painted aluminum watering can." class="featured-item">
|
||||
<figcaption>Painted Aluminum Watering Can - Blue</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery/" id="featured-string-of-pearls">
|
||||
<figure>
|
||||
<img src="images/indoor/StringofPearls.png" alt="String-of-pearls plant in hanging white ceramic planter." class="featured-item">
|
||||
<figcaption>String-of-Pearls Plant / Hanging White Planter</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery/" id="featured-maple-tree">
|
||||
<figure>
|
||||
<img src="images/trees/MapleTree.png" alt="A Japanese Maple sapling in a burlap wrap." class="featured-item">
|
||||
<figcaption>Japanese Maple Sapling - Burlap Bound</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<nav id="right-aside">
|
||||
<div id="category-nav-container">
|
||||
<h2>Shop by Category</h2>
|
||||
<div class="categories">
|
||||
<ul>
|
||||
<li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
|
||||
<li><a href="/gallery/?category=shrubs#" class="cat-btn">Shrubs</a></li>
|
||||
<li><a href="/gallery/?category=indoor#" class="cat-btn">Indoor</a></li>
|
||||
<li><a href="/gallery/?category=patio#" class="cat-btn">Patio</a></li>
|
||||
<li><a href="/gallery/?category=tools#" class="cat-btn">Tools</a></li>
|
||||
<li><a href="/gallery/?category=accessories#" class="cat-btn">Accessories</a></li>
|
||||
<li><a href="/gallery/?category=landscaping#" class="cat-btn">Landscaping</a></li>
|
||||
</ul>
|
||||
<div id="right-side">
|
||||
<nav id="category-nav">
|
||||
<div id="category-nav-container">
|
||||
<h2>Shop by Category</h2>
|
||||
<div class="categories">
|
||||
<ul>
|
||||
<li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
|
||||
<li><a href="/gallery/?category=shrubs#" class="cat-btn">Shrubs</a></li>
|
||||
<li><a href="/gallery/?category=indoor#" class="cat-btn">Indoor</a></li>
|
||||
<li><a href="/gallery/?category=patio#" class="cat-btn">Patio</a></li>
|
||||
<li><a href="/gallery/?category=tools#" class="cat-btn">Tools</a></li>
|
||||
<li><a href="/gallery/?category=accessories#" class="cat-btn">Accessories</a></li>
|
||||
<li><a href="/gallery/?category=landscaping#" class="cat-btn">Landscaping</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Content specific to this page goes here -->
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@@ -52,27 +52,27 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
document.body.appendChild(modal);
|
||||
}
|
||||
|
||||
// ================== SHOPPER PERKS CAROUSEL ==================
|
||||
const perks = document.querySelectorAll(".perk-item");
|
||||
let currentIndexPerks = 0;
|
||||
// ================== SHOPPER PROMO CAROUSEL ==================
|
||||
const promo = document.querySelectorAll(".promo-item");
|
||||
let currentIndexPromo = 0;
|
||||
|
||||
function showNextPerk() {
|
||||
perks.forEach(perk => {
|
||||
perk.classList.remove("visible");
|
||||
perk.style.display = "none";
|
||||
function showNextPromo() {
|
||||
promo.forEach(promo => {
|
||||
promo.classList.remove("visible");
|
||||
promo.style.display = "none";
|
||||
});
|
||||
|
||||
perks[currentIndexPerks].classList.add("visible");
|
||||
perks[currentIndexPerks].style.display = "block";
|
||||
promo[currentIndexPromo].classList.add("visible");
|
||||
promo[currentIndexPromo].style.display = "block";
|
||||
|
||||
currentIndexPerks = (currentIndexPerks + 1) % perks.length;
|
||||
currentIndexPromo = (currentIndexPromo + 1) % promo.length;
|
||||
}
|
||||
|
||||
showNextPerk();
|
||||
setInterval(showNextPerk, 2250);
|
||||
showNextPromo();
|
||||
setInterval(showNextPromo, 2250);
|
||||
|
||||
// ================== CUSTOMER HIGHLIGHTS CAROUSEL ==================
|
||||
const testimonials = document.querySelectorAll(".testimonial");
|
||||
const testimonials = document.querySelectorAll(".testimonial-item");
|
||||
let currentIndexTestimonials = 0;
|
||||
|
||||
function showNextTestimonial() {
|
||||
@@ -91,7 +91,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
setInterval(showNextTestimonial, 3500);
|
||||
|
||||
// ================== FEATURED ITEMS CAROUSEL ==================
|
||||
const featuredItems = document.querySelectorAll("#featured-images .featured-item");
|
||||
/*const featuredItems = document.querySelectorAll("#featured-images .featured-item");
|
||||
let currentIndex = 0;
|
||||
|
||||
function showNextItem() {
|
||||
@@ -101,12 +101,13 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
}
|
||||
|
||||
featuredItems[currentIndex].classList.add("active");
|
||||
setInterval(showNextItem, 3000);
|
||||
setInterval(showNextItem, 3000);*/
|
||||
|
||||
// ================== UPDATED FEATURED ITEMS CAROUSEL ==================
|
||||
const featuredItems = document.querySelectorAll(".featured-card");
|
||||
let currentIndexFeatured = 0;
|
||||
|
||||
function updateFeaturedImages() {
|
||||
function updateFeaturedItems() {
|
||||
featuredItems.forEach((item, index) => {
|
||||
const text = item.closest('a');
|
||||
if (text) text.style.display = (index === currentIndexFeatured ? "block" : "none");
|
||||
@@ -118,9 +119,9 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
function showNextFeatured() {
|
||||
currentIndexFeatured = (currentIndexFeatured + 1) % featuredItems.length;
|
||||
updateFeaturedImages();
|
||||
updateFeaturedItems();
|
||||
}
|
||||
|
||||
updateFeaturedImages();
|
||||
updateFeaturedItems();
|
||||
setInterval(showNextFeatured, 3000);
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/* |--↓-↓-↓ Start about.html ↓-↓-↓--| */
|
||||
/* |--↓-↓-↓ Start about.html ↓-↓-↓--| */
|
||||
.about {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -17,39 +17,36 @@
|
||||
display: block;
|
||||
align-items: center;
|
||||
width: 25vw;
|
||||
background-color:#f0c06d;
|
||||
border: solid #f7f7f7;
|
||||
background-color: var(--color-soft-golden);
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
#phone,
|
||||
#hours {
|
||||
background-color: #f7f7f7;
|
||||
border: solid #bdd4da;
|
||||
background-color: var(--color-destin-sand);
|
||||
border: solid var(--color-light-teal);
|
||||
border-radius: 10px;
|
||||
margin: 5px 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#business-info h3,
|
||||
#feedback-intro h2 {
|
||||
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);
|
||||
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);
|
||||
border: solid var(--color-destin-sand);
|
||||
max-width: 75vw;
|
||||
border-radius: 10px;
|
||||
padding-left: 10px;
|
||||
transform: translateX(0px);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
#business-info p {
|
||||
@@ -59,13 +56,13 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
|
||||
#business-info h4 {
|
||||
text-align: center;
|
||||
background-color: #bdd4da;
|
||||
border: solid #f7f7f7;
|
||||
background-color: var(--color-light-teal);
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 15px;
|
||||
padding: 0 10px;
|
||||
width: 50%;
|
||||
margin-left: 22.5%;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
#story {
|
||||
@@ -78,23 +75,23 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#story h2 {
|
||||
background-color: #96baa0;
|
||||
color: #f7f7f7;
|
||||
border: solid #f7f7f7;
|
||||
background-color: var(--color-mid-green);
|
||||
color: var(--color-destin-sand);
|
||||
border: solid var(--color-destin-sand);
|
||||
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 */
|
||||
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);
|
||||
width: 50%;
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
margin-right: 12.5%;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
#story p {
|
||||
color: #014038;
|
||||
color: var(--color-dark-green);
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -104,27 +101,27 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #96baa0;
|
||||
border: solid #f7f7f7;
|
||||
background-color: var(--color-mid-green);
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 15px;
|
||||
width: 90vw;
|
||||
margin-top: 30px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
#feedback h2 {
|
||||
background-color: #a4ccd6;
|
||||
border: solid #f7f7f7;
|
||||
background-color: var(--color-light-teal);
|
||||
border: solid var(--color-destin-sand);
|
||||
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 */
|
||||
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);
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
@@ -135,7 +132,6 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
text-align: center;
|
||||
margin-left: 7.5vw;
|
||||
margin-right: 7.5vw;
|
||||
|
||||
}
|
||||
|
||||
#feedback p {
|
||||
@@ -147,7 +143,7 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#feedback-form form{
|
||||
#feedback-form form {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
@@ -166,8 +162,8 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#customer-info input {
|
||||
background-color: #f7f7f7;
|
||||
border: solid #014038;
|
||||
background-color: var(--color-destin-sand);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 15px;
|
||||
width: 90%; /* Ensures the input fields fill the section width */
|
||||
height: 30px; /* Adjusts height to match the textarea */
|
||||
@@ -185,8 +181,8 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
#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;
|
||||
background-color: var(--color-destin-sand);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 15px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
@@ -200,10 +196,10 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
|
||||
#form-submit {
|
||||
padding: 10px 20px;
|
||||
background-color: #bdd4da;
|
||||
border: solid #f7f7f7;
|
||||
background-color: var(--color-light-teal);
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
color: #014038;
|
||||
color: var(--color-dark-green);
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
margin-bottom: 10px;
|
||||
@@ -211,7 +207,7 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#form-submit:hover {
|
||||
background-color: #f7f7f7;
|
||||
background-color: var(--color-destin-sand);
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
/* | ↑-↑-↑ End About.html ↑-↑-↑--| */
|
||||
/* | ↑-↑-↑ End About.html ↑-↑-↑--| */
|
||||
@@ -13,18 +13,16 @@ body {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #bdd4da; /* Sky Bloom */
|
||||
background-color: var(--color-light-teal); /* 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 */
|
||||
text-shadow: 0.5px 0.5px .5px var(--color-destin-sand), /* Bottom-right top shadow */
|
||||
-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) */
|
||||
h1 {
|
||||
font-family: 'Arial', sans-serif;
|
||||
@@ -72,12 +70,11 @@ figcaption {
|
||||
}
|
||||
|
||||
@media (max-width: 780px) {
|
||||
html{
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/* |--↓-↓-↓ Start Community.html ↓-↓-↓--| */
|
||||
/* |--↓-↓-↓ Start Community.html ↓-↓-↓--| */
|
||||
.community {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -10,17 +10,14 @@
|
||||
h1 {
|
||||
display: block;
|
||||
font-size: 2.3rem;
|
||||
background-color: #f7f7f7;
|
||||
border: solid #96baa0;
|
||||
background-color: var(--color-destin-sand);
|
||||
border: solid var(--color-mid-green);
|
||||
border-radius: 15px;
|
||||
color: #014038;
|
||||
color: var(--color-dark-green);
|
||||
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 */
|
||||
text-shadow: var(--text-outline-heading);
|
||||
padding: 5px 100px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
#calendar-events-container {
|
||||
@@ -30,14 +27,14 @@ h1 {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.calendar iframe{
|
||||
.calendar iframe {
|
||||
width: 975px;
|
||||
height: 750px;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #bdd4da;
|
||||
background-color: var(--color-light-teal);
|
||||
border-radius: 15px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
.upcoming-events {
|
||||
@@ -51,30 +48,30 @@ h1 {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: #f0c06d;
|
||||
border: solid #014038;
|
||||
background-color: var(--color-soft-golden);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
width: 80vw;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
.events h2 {
|
||||
font-size: 1.875rem;
|
||||
text-align: center;
|
||||
text-shadow: 0.5px 0.5px .5px #014038, /* Bottom-right top shadow */
|
||||
-0.5px -0.5px .5px #014038, /* Top-left top shadow */
|
||||
-0.5px 0.5px .5px #014038, /* Bottom-left top shadow */
|
||||
0.5px -0.5px .5px #014038; /* Top-right top shadow */
|
||||
color: #f7f7f7;
|
||||
background-color: #96baa0;
|
||||
border: solid #f7f7f7;
|
||||
text-shadow: 0.5px 0.5px .5px var(--color-dark-green),
|
||||
-0.5px -0.5px .5px var(--color-dark-green),
|
||||
-0.5px 0.5px .5px var(--color-dark-green),
|
||||
0.5px -0.5px .5px var(--color-dark-green);
|
||||
color: var(--color-destin-sand);
|
||||
background-color: var(--color-mid-green);
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: fit-content;
|
||||
padding: 0 50px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.upcoming-events {
|
||||
@@ -82,41 +79,39 @@ h1 {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: #CADCD0;
|
||||
border: solid #014038;
|
||||
background-color: var(--color-pale-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 15px;
|
||||
padding: 0px 20px 10px 20px;
|
||||
width: 95%;
|
||||
margin-top: 20px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
.zoho-event {
|
||||
background-color:#f7f7f7;
|
||||
border: solid #014038 2px;
|
||||
background-color: var(--color-destin-sand);
|
||||
border: solid var(--color-dark-green) 2px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.8);
|
||||
max-width: 1200px;
|
||||
|
||||
}
|
||||
|
||||
.zoho-event h3 {
|
||||
font-size: 1.875rem;
|
||||
text-align: center;
|
||||
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 */
|
||||
color: #014038;
|
||||
background-color: #bdd4da;
|
||||
border: solid #f7f7f7;
|
||||
text-shadow: 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);
|
||||
color: var(--color-dark-green);
|
||||
background-color: var(--color-light-teal);
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: fit-content;
|
||||
padding: 0 50px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.zoho-event p {
|
||||
@@ -137,22 +132,21 @@ h1 {
|
||||
|
||||
.event-list ul {
|
||||
list-style-type: none;
|
||||
|
||||
}
|
||||
|
||||
.event-list li {
|
||||
background-color: #f7f7f7;
|
||||
border: solid #bdd4da;
|
||||
background-color: var(--color-destin-sand);
|
||||
border: solid var(--color-light-teal);
|
||||
border-radius: 15px;
|
||||
text-align: center;
|
||||
padding: 5px 10px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
.events strong {
|
||||
color:#014038;
|
||||
color: var(--color-dark-green);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* | ↑-↑-↑ End Community.html ↑-↑-↑--| */
|
||||
/* | ↑-↑-↑ End Community.html ↑-↑-↑--| */
|
||||
@@ -1,4 +1,4 @@
|
||||
/* |--↓-↓-↓ Start gallery.html ↓-↓-↓--| */
|
||||
/* |--↓-↓-↓ Start gallery.html ↓-↓-↓--| */
|
||||
#main-gallery {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -10,31 +10,20 @@
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 95vw;
|
||||
gap: 20px
|
||||
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;
|
||||
text-shadow: var(--text-shadow-layered);
|
||||
color: var(--color-destin-sand);
|
||||
background-color: var(--color-mid-green);
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
padding-left: 20px;
|
||||
transform: translateX(30px);
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
#product-category-card {
|
||||
@@ -68,7 +57,7 @@
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
white-space: wrap;
|
||||
background-color: #f7f7f7; /* Optional background */
|
||||
background-color: var(--color-destin-sand); /* Optional background */
|
||||
}
|
||||
|
||||
.product-card img {
|
||||
@@ -81,7 +70,7 @@
|
||||
|
||||
#scroll-left, #scroll-right {
|
||||
cursor: pointer; /* Show pointer to indicate clickable buttons */
|
||||
background-color: #014038; /* Dark green background */
|
||||
background-color: var(--color-dark-green); /* Dark green background */
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
@@ -108,13 +97,13 @@
|
||||
|
||||
#main-gallery #right-aside h2 {
|
||||
font-size: 1.675rem;
|
||||
background-color: #bdd4da;
|
||||
color: #014038;
|
||||
border: solid #014038;
|
||||
background-color: var(--color-light-teal);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 5px;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#main-gallery .categories ul {
|
||||
@@ -126,25 +115,25 @@
|
||||
}
|
||||
|
||||
#main-gallery .categories ul li {
|
||||
border: solid #014038;
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 5px;
|
||||
background-color: #96baa0;
|
||||
background-color: var(--color-mid-green);
|
||||
margin-top: 20px;
|
||||
margin-right: 35px;
|
||||
min-width: 100%;
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#main-gallery .categories a {
|
||||
color: #014038;
|
||||
color: var(--color-dark-green);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
button#cart-details {
|
||||
background-color: #f7f7f7;
|
||||
border: solid #014038;
|
||||
background-color: var(--color-destin-sand);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 15px;
|
||||
color: #014038;
|
||||
color: var(--color-dark-green);
|
||||
font-weight: bold;
|
||||
font-size: 1.4em;
|
||||
text-align: center; /* Align text horizontally */
|
||||
@@ -152,7 +141,7 @@ button#cart-details {
|
||||
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);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
transform: translateX(-15vw) translateY(-5vh);
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
display: flex; /* Flexbox ensures content alignment */
|
||||
@@ -161,34 +150,33 @@ button#cart-details {
|
||||
}
|
||||
|
||||
button#cart-details:hover {
|
||||
background-color: #014033;
|
||||
color: #f7f7f7;
|
||||
border: solid #f7f7f7;
|
||||
background-color: var(--color-dark-green);
|
||||
color: var(--color-destin-sand);
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.add-to-cart-btn {
|
||||
cursor: pointer;
|
||||
background-color: #f7f7f7;
|
||||
border: solid #014038;
|
||||
color: #014038;
|
||||
background-color: var(--color-destin-sand);
|
||||
border: solid var(--color-dark-green);
|
||||
color: var(--color-dark-green);
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-strong);
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.add-to-cart-btn:hover {
|
||||
background-color: #014038;
|
||||
border: solid #f7f7f7;
|
||||
color: #f7f7f7;
|
||||
background-color: var(--color-dark-green);
|
||||
border: solid var(--color-destin-sand);
|
||||
color: var(--color-destin-sand);
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
/* |--↑-↑-↑ End gallery.html ↑-↑-↑--| */
|
||||
/* |--↑-↑-↑ End gallery.html ↑-↑-↑--| */
|
||||
@@ -1,8 +1,8 @@
|
||||
/* |--↓-↓-↓ Start Header ↓-↓-↓--| */
|
||||
/* |--↓-↓-↓ Start Header ↓-↓-↓--| */
|
||||
header {
|
||||
padding: 20px;
|
||||
background-color: #bdd4da;
|
||||
border-bottom: 3px solid #96baa0;
|
||||
background-color: var(--color-light-teal);
|
||||
border-bottom: 3px solid var(--color-mid-green);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@ header .logo img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-left: 50px;
|
||||
filter: drop-shadow(0 0 2px #f0c06d) drop-shadow(0 0 0px #014038);
|
||||
filter: drop-shadow(0 0 2px var(--color-soft-golden)) drop-shadow(0 0 0px var(--color-dark-green));
|
||||
}
|
||||
|
||||
/* Business name and navigation container */
|
||||
@@ -75,12 +75,12 @@ header .logo img {
|
||||
position: static;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
background-color: #f7f7f7;
|
||||
color: #014038;
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-strong);
|
||||
border: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -91,19 +91,16 @@ header .logo img {
|
||||
font-family: 'Georgia', serif;
|
||||
display: block;
|
||||
font-size: 3.6rem;
|
||||
color: #014038; /* Dark green for the title */
|
||||
color: var(--color-dark-green); /* Dark green for the title */
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
text-shadow: 0.5px 0.5px 1px #f7f7f7, /* Bottom-right top shadow */
|
||||
-0.5px -0.5px 1px #f7f7f7, /* Top-left top shadow */
|
||||
-0.5px 0.5px 1px #f7f7f7, /* Bottom-left top shadow */
|
||||
0.5px -0.5px 1px #f7f7f7; /* Top-right top shadow */
|
||||
text-shadow: var(--text-outline-heading);
|
||||
}
|
||||
|
||||
header p.tagline {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 1.4rem;
|
||||
color: #96baa0; /* Pale green for the tagline */
|
||||
color: var(--color-mid-green); /* Pale green for the tagline */
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -167,7 +164,7 @@ header p.tagline {
|
||||
display: block;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #014038;
|
||||
color: var(--color-dark-green);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -176,9 +173,9 @@ header p.tagline {
|
||||
display: none;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
background-color: #f7f7f7;
|
||||
background-color: var(--color-destin-sand);
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
nav.is-open {
|
||||
@@ -205,11 +202,11 @@ header p.tagline {
|
||||
|
||||
nav, #footer-nav {
|
||||
margin-top: 20px;
|
||||
background-color: #f7f7f7; /* White for navigation background */
|
||||
background-color: var(--color-destin-sand); /* 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);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
#shopping-cart {
|
||||
@@ -218,12 +215,12 @@ nav, #footer-nav {
|
||||
right: 100px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
background-color: #f7f7f7;
|
||||
color: #014038;
|
||||
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: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-strong);
|
||||
border: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -231,10 +228,10 @@ nav, #footer-nav {
|
||||
}
|
||||
|
||||
#shopping-cart:hover {
|
||||
background-color: #014038;
|
||||
color: #96baa0;
|
||||
border: solid #f7f7f7;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
background-color: var(--color-dark-green);
|
||||
color: var(--color-mid-green);
|
||||
border: solid var(--color-destin-sand);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
nav ul, #footer-nav ul {
|
||||
@@ -257,13 +254,13 @@ nav ul li, #footer-nav ul li {
|
||||
.current-page {
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
color: #014038;
|
||||
background-color: #96baa0;
|
||||
color: var(--color-dark-green);
|
||||
background-color: var(--color-mid-green);
|
||||
border: none;
|
||||
text-decoration: underline;
|
||||
white-space: wrap;
|
||||
text-align: center;
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.community-link {
|
||||
@@ -274,7 +271,7 @@ nav ul li a, #footer-nav ul li a {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #014038;
|
||||
color: var(--color-dark-green);
|
||||
text-decoration: underline;
|
||||
padding: 8px 15px;
|
||||
border-radius: 10px;
|
||||
@@ -282,14 +279,14 @@ nav ul li a, #footer-nav ul li a {
|
||||
}
|
||||
|
||||
nav ul li a:hover, #footer-nav ul li a:hover {
|
||||
background-color: #f7f7f7;
|
||||
color: #014038;
|
||||
border: solid .5px #014038;
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
border: solid .5px var(--color-dark-green);
|
||||
padding: 7px 14px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
/* |--↓-↓-↓ Start Footer ↓-↓-↓--| */
|
||||
/* |--↓-↓-↓ Start Footer ↓-↓-↓--| */
|
||||
#footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -310,7 +307,7 @@ nav ul li a:hover, #footer-nav ul li a:hover {
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
button#submit-btn {
|
||||
@@ -318,25 +315,25 @@ button#submit-btn {
|
||||
padding: 5px 10px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
footer div label {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #014038
|
||||
color: var(--color-dark-green);
|
||||
}
|
||||
|
||||
#newsletter-form {
|
||||
display: inline-block;
|
||||
background-color: #f0c06d;
|
||||
border: solid #f7f7f7;
|
||||
background-color: var(--color-soft-golden);
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
width: 60%;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
/* #footer-nav {
|
||||
@@ -348,7 +345,7 @@ footer div label {
|
||||
list-style-type: none;
|
||||
flex-direction: row;
|
||||
margin-top: 20px;
|
||||
background-color: #f7f7f7;
|
||||
background-color: var(--color-destin-sand);
|
||||
border-radius: 5px;
|
||||
width: fit-content;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
@@ -364,8 +361,8 @@ footer div label {
|
||||
#footer-nav ul li .current-page {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
color: #014038;
|
||||
background-color: #96baa0;
|
||||
color: var(--color-dark-green);
|
||||
background-color: var(--color-mid-green);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@@ -373,7 +370,7 @@ footer div label {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #014038;
|
||||
color: var(--color-dark-green);
|
||||
text-decoration: none;
|
||||
padding: 8px 15px;
|
||||
border-radius: 5px;
|
||||
@@ -381,9 +378,9 @@ footer div label {
|
||||
}
|
||||
|
||||
#footer-nav ul li a:hover {
|
||||
background-color: #f7f7f7;
|
||||
color: #014038;
|
||||
border: solid #014038;
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
} */
|
||||
|
||||
@@ -410,13 +407,13 @@ text-align: center;
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 0 10px;
|
||||
color: #014038;
|
||||
color: var(--color-dark-green);
|
||||
}
|
||||
|
||||
#social-media ul li a {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 1rem;
|
||||
color: #014038; /* Dark green for the links */
|
||||
color: var(--color-dark-green); /* Dark green for the links */
|
||||
text-decoration: none;
|
||||
padding: 8px 15px;
|
||||
border-radius: 5px;
|
||||
@@ -424,10 +421,9 @@ text-align: center;
|
||||
}
|
||||
|
||||
#social-media ul li a:hover {
|
||||
background-color: #f0c06d;
|
||||
color: #f7f7f7;
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
|
||||
background-color: var(--color-soft-golden);
|
||||
color: var(--color-destin-sand);
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#copyright {
|
||||
|
||||
@@ -1,68 +1,68 @@
|
||||
|
||||
.perk-item,
|
||||
.testimonial,
|
||||
.promo-item,
|
||||
.testimonial-item,
|
||||
.featured-item {
|
||||
display: none; /* Hide all by default */
|
||||
}
|
||||
|
||||
.perk-item.visible,
|
||||
.testimonial.visible,
|
||||
.promo-item.visible,
|
||||
.testimonial-item.visible,
|
||||
.featured-item.active {
|
||||
display: block; /* Show visible or active items */
|
||||
}
|
||||
|
||||
#left-aside,
|
||||
#right-aside {
|
||||
#left-side,
|
||||
#category-nav {
|
||||
flex: 1;
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#left-aside {
|
||||
#left-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #f0c06d;
|
||||
border: solid #f7f7f7;
|
||||
background-color: var(--color-soft-golden);
|
||||
border: solid var(--color-destin-sand);
|
||||
padding: 5px 10px;
|
||||
margin-top: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#left-aside h2 {
|
||||
border: solid #014038;
|
||||
background-color: #bdd4da;
|
||||
#left-side h2 {
|
||||
border: solid var(--color-dark-green);
|
||||
background-color: var(--color-light-teal);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#perks-feature-container {
|
||||
background-color: #96baa0;
|
||||
color: #014038;
|
||||
border: solid #014038;
|
||||
#promos-container {
|
||||
background-color: var(--color-mid-green);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
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);
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.perk-item {
|
||||
background-color: #f7f7f7;
|
||||
color: #014038;
|
||||
border: solid #014038;
|
||||
.promo-item {
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
white-space: normal;
|
||||
max-height: 175px;
|
||||
min-height: 175px;
|
||||
max-width: 400px;
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-strong);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#perks-heading {
|
||||
#promos-heading, #testimonials-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);
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#featured-container {
|
||||
@@ -79,26 +79,15 @@
|
||||
#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;
|
||||
text-shadow: var(--text-shadow-layered);
|
||||
color: var(--color-destin-sand);
|
||||
background-color: var(--color-mid-green);
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
margin-left: 30px;
|
||||
width: fit-content;
|
||||
padding: 0 20px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
#featured-container ul {
|
||||
@@ -109,31 +98,36 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#featured-images {
|
||||
border: solid #96baa0;
|
||||
#featured-list {
|
||||
border: solid var(--color-mid-green);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
#featured-images a {
|
||||
color: #014038;
|
||||
background-color: #f7f7f7;
|
||||
#featured-list a {
|
||||
color: var(--color-dark-green);
|
||||
background-color: var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
color:#014038;
|
||||
color:var(--color-dark-green);
|
||||
}
|
||||
|
||||
#featured-images img {
|
||||
#featured-list {
|
||||
min-width: 710px;
|
||||
background-color: var(--color-destin-sand);
|
||||
}
|
||||
|
||||
#featured-list img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#featured-images {
|
||||
#featured-list {
|
||||
overflow: hidden; /* Hide anything outside the container */
|
||||
/*text-align: center;
|
||||
width: 100%; */
|
||||
@@ -144,79 +138,96 @@ figcaption {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
#featured-images img {
|
||||
display: none; /* Hide all items initially */
|
||||
#featured-list img {
|
||||
max-width: 100%; /* Ensure images are responsive */
|
||||
height: auto; /* Maintain aspect ratio */
|
||||
background-color: #96baa0;
|
||||
border: solid #014038;
|
||||
background-color: var(--color-mid-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#testimonials-feature{
|
||||
background-color: #96baa0;
|
||||
color: #014038;
|
||||
border: solid #014038;
|
||||
h3.product-name {
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 5px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
p.short-description {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
#featured-container a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/* --- TESTIMONIALS --- */
|
||||
|
||||
#testimonials-container{
|
||||
background-color: var(--color-mid-green);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
margin-top: 10px;
|
||||
white-space: normal;
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#testimonials-feature h2 {
|
||||
#testimonials-container h2 {
|
||||
font-size: 1.675rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.testimonial {
|
||||
background-color: #f7f7f7;
|
||||
color: #014038;
|
||||
border: solid #014038;
|
||||
.testimonial-item {
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
white-space: normal;
|
||||
max-height: 175px;
|
||||
max-width: 400px;
|
||||
min-height: 175px;
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-strong);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#right-aside {
|
||||
|
||||
/* --- CATEGORY NAVIGATION --- */
|
||||
#category-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #f0c06d;
|
||||
background-color: var(--color-soft-gold);
|
||||
padding: 5px 10px;
|
||||
margin-top: 10px;
|
||||
margin-left: 20px;
|
||||
border: solid #f7f7f7;
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#category-nav-container {
|
||||
background-color: #f7f7f7;
|
||||
color: #014038;
|
||||
border: solid #014038;
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
width: 90%;
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#right-aside h2 {
|
||||
#category-nav h2 {
|
||||
font-size: 1.675rem;
|
||||
background-color: #bdd4da;
|
||||
color: #014038;
|
||||
border: solid #014038;
|
||||
background-color: var(--color-light-teal);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.categories ul {
|
||||
@@ -228,17 +239,17 @@ figcaption {
|
||||
}
|
||||
|
||||
.categories ul li {
|
||||
border: solid #014038;
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
background-color: #96baa0;
|
||||
background-color: var(--color-mid-green);
|
||||
margin-top: 20px;
|
||||
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);
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.categories a {
|
||||
color: #014038;
|
||||
color: var(--color-dark-green);
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
@@ -246,9 +257,9 @@ figcaption {
|
||||
}
|
||||
|
||||
.categories ul li:hover {
|
||||
background-color: #f7f7f7;
|
||||
color: #014038;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.categories ul li a:hover {
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
:root {
|
||||
/* Colors */
|
||||
--color-destin-sand: #f7f7f7;
|
||||
--color-dark-green: #014038;
|
||||
--color-mid-green: #96baa0;
|
||||
--color-pale-green: #cadcd0;
|
||||
--color-light-teal: #bdd4da;
|
||||
--color-soft-golden: #f0c06d;
|
||||
|
||||
/* Box Shadows */
|
||||
--shadow-subtle: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
--shadow-medium: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
--shadow-strong: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
|
||||
/* Text Outline */
|
||||
--text-outline-heading:
|
||||
0.5px 0.5px 1px var(--color-dark-green),
|
||||
-0.5px -0.5px 1px var(--color-dark-green),
|
||||
-0.5px 0.5px 1px var(--color-dark-green),
|
||||
0.5px -0.5px 1px var(--color-dark-green);
|
||||
|
||||
/* Layered Text Shadow */
|
||||
--text-shadow-layered:
|
||||
0.5px 0.5px 1px var(--color-dark-green),
|
||||
-0.5px -0.5px 1px var(--color-dark-green),
|
||||
-0.5px 0.5px 1px var(--color-dark-green),
|
||||
0.5px -0.5px 1px var(--color-dark-green),
|
||||
0.5px 0.5px .5px var(--color-light-teal),
|
||||
-0.5px -0.5px .5px var(--color-light-teal),
|
||||
-0.5px 0.5px .5px var(--color-light-teal),
|
||||
0.5px -0.5px .5px var(--color-light-teal),
|
||||
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);
|
||||
}
|
||||
Reference in New Issue
Block a user