chris/beachPartyBalloons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve contact page layout and visual design

Browse Source 
Add a gradient hero header, three icon-based contact tiles (address,
phone, hours), and a "Send a Message" heading above the form to give
the page more structure and visual interest.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chris 2026-06-12 19:38:39 -04:00
parent 418fef1a15
commit 5cd7b29b63
2 changed files with 79 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
main-site/contact/index.html
View File

@ -30,14 +30,37 @@
<div id="site-nav"></div> <div id="site-nav"></div>
<button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button> <button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button>
<div class="is-flex-direction-column is-dark"> <section class="contact-hero">
<h2 class="is-size-4" style="text-align: center;"> <h1 class="is-size-2 has-text-weight-bold">Contact Us</h1>
<a target="_blank" href="https://maps.app.goo.gl/gRk6NztgMRUsSVJf9">554 Boston Post Road, Milford, CT 06460</a> <p class="is-size-5 mt-2">Have questions or ready to plan your event? We'd love to hear from you.</p>
</h2> </section>
<h2 class="is-size-4" style="text-align: center;"><a href="tel:2032835626">203.283.5626</a></h2>
<div class="contact-tiles">
<div class="contact-tile">
<i class="fas fa-map-marker-alt"></i>
<div>
<div class="contact-tile-label">Visit Us</div>
<a target="_blank" href="https://maps.app.goo.gl/gRk6NztgMRUsSVJf9">554 Boston Post Road<br>Milford, CT 06460</a>
</div>
</div>
<div class="contact-tile">
<i class="fas fa-phone"></i>
<div>
<div class="contact-tile-label">Call Us</div>
<a href="tel:2032835626">203.283.5626</a>
</div>
</div>
<div class="contact-tile">
<i class="fas fa-clock"></i>
<div>
<div class="contact-tile-label">Shop Hours</div>
<span>Tue–Fri 10:00–5:00<br>Saturday 9:00–3:00</span>
</div>
</div>
</div> </div>
<div class="form-container"> <div class="form-container">
<h2 class="is-size-4 has-text-centered mb-4">Send a Message</h2>
<form id="contactForm" novalidate> <form id="contactForm" novalidate>
<!-- Honeypot: hidden from humans, filled by bots --> <!-- Honeypot: hidden from humans, filled by bots -->
<div style="display:none;" aria-hidden="true"> <div style="display:none;" aria-hidden="true">

51
main-site/style.css
View File

@ -353,6 +353,57 @@ form{
border-color: #1b1b1b; border-color: #1b1b1b;
} }
.contact-hero {
background: linear-gradient(135deg, #12b7ad, #1078c2);
color: #fff;
text-align: center;
padding: 3rem 1.5rem 2.5rem;
}
.contact-tiles {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
max-width: 820px;
margin: -1.5rem auto 2rem;
padding: 0 1rem;
}
.contact-tile {
background: #fff;
border-radius: 14px;
box-shadow: 0 10px 22px rgba(24, 40, 72, 0.08);
border: 1px solid #e6dfc8;
padding: 1.25rem 1.5rem;
display: flex;
align-items: flex-start;
gap: 1rem;
flex: 1;
min-width: 200px;
}
.contact-tile i {
color: #12b7ad;
font-size: 1.4rem;
margin-top: 0.15rem;
flex-shrink: 0;
}
.contact-tile-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #888;
margin-bottom: 0.25rem;
}
.contact-tile a,
.contact-tile span {
color: #363636;
line-height: 1.5;
}
.gallery-hero { .gallery-hero {
background: linear-gradient(135deg, #12b7ad, #1078c2); background: linear-gradient(135deg, #12b7ad, #1078c2);
color: #fff; color: #fff;