fix: Updated style rules to fix issues with component placement on landing page

This commit is contained in:
2025-09-07 20:25:14 -05:00
parent 601ff81c62
commit 20e2569ad9
8 changed files with 589 additions and 542 deletions

View File

@@ -1,58 +1,61 @@
<!-- Footer Section -->
<footer role="contentinfo">
<div id="newsletter-container">
<div class="footer-container">
<div id="newsletter-container">
<form id="newsletter-form">
<label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
<input
type="email"
id="email-input"
placeholder="Subscribe@BloomValleyNursery.com"
/>
<button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
Subscribe Now!
</button>
</form>
</div>
<div class="footer-nav-links">
<nav id="footer-nav">
<ul>
<li><a href="/" {% if currentPage == 'index' %}class="current-page" aria-current="page"{% endif %}>Home</a></li>
<li><a href="/gallery/" {% if currentPage == 'gallery' %}class="current-page" aria-current="page"{% endif %}>Gallery</a></li>
<li><a href="/about/" {% if currentPage == 'about' %}class="current-page" aria-current="page"{% endif %}>About Us</a></li>
<li><a href="/community/" {% if currentPage == 'community' %}class="current-page" aria-current="page"{% endif %}>Community Events</a></li>
</ul>
</nav>
</div>
<form id="newsletter-form">
<label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
<input
type="email"
id="email-input"
placeholder="Subscribe@BloomValleyNursery.com"
/>
<button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
Subscribe Now!
</button>
</form>
<div id="social-media">
<h3>Check us out on social media!</h3>
<ul class="social-icons">
<li id="pinterest">
<a href="#" aria-label="Follow us on Pinterest"
><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
<li id="facebook">
<a href="#" aria-label="Follow us on Facebook"
><i class="fa-brands fa-facebook fa-lg"></i
></a>
</li>
<li id="instagram">
<a href="#" aria-label="Follow us on Instagram"
><i class="fa-brands fa-instagram fa-lg"></i
></a>
</li>
<li id="twitter">
<a href="#" aria-label="Follow us on X (Twitter)"
><i class="fa-brands fa-square-x-twitter fa-lg"></i
></a>
</li>
<li id="youtube">
<a href="#" aria-label="View our Youtube channel"
><i class="fa-brands fa-youtube fa-lg"></i
></a>
</li>
</ul>
</div>
<div id="copyright">&copy; 2025, Derek L. Seitz, <a href="https://dlseitz.dev">dlseitz.dev</a>. Images used with permissions from <a href="/credits/" target="_blank" rel="noopener noreferrer">these contributors</a>.</div>
</div>
<nav id="footer-nav">
<ul>
<li><a href="/" {% if currentPage == 'index' %}class="current-page" aria-current="page"{% endif %}>Home</a></li>
<li><a href="/gallery/" {% if currentPage == 'gallery' %}class="current-page" aria-current="page"{% endif %}>Gallery</a></li>
<li><a href="/about/" {% if currentPage == 'about' %}class="current-page" aria-current="page"{% endif %}>About Us</a></li>
<li><a href="/community/" {% if currentPage == 'community' %}class="current-page" aria-current="page"{% endif %}>Community Events</a></li>
</ul>
</nav>
<div id="social-media">
<h3>Check us out on social media!</h3>
<ul class="social-icons">
<li id="pinterest">
<a href="#" aria-label="Follow us on Pinterest"
><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
<li id="facebook">
<a href="#" aria-label="Follow us on Facebook"
><i class="fa-brands fa-facebook fa-lg"></i
></a>
</li>
<li id="instagram">
<a href="#" aria-label="Follow us on Instagram"
><i class="fa-brands fa-instagram fa-lg"></i
></a>
</li>
<li id="twitter">
<a href="#" aria-label="Follow us on X (Twitter)"
><i class="fa-brands fa-square-x-twitter fa-lg"></i
></a>
</li>
<li id="youtube">
<a href="#" aria-label="View our Youtube channel"
><i class="fa-brands fa-youtube fa-lg"></i
></a>
</li>
</ul>
</div>
<div id="copyright">&copy; 2025, Derek L. Seitz, <a href="https://dlseitz.dev">dlseitz.dev</a>. Images used with permissions from <a href="/credits/" target="_blank" rel="noopener noreferrer">these contributors</a>.</div>
</footer>

View File

@@ -37,7 +37,7 @@
<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"></i>
<i class="fa-solid fa-cart-shopping fa-2xl"></i>
</button>
</div>
</div>