chris 483b36999b Mirror contact tiles to homepage, consolidate hours into tile
Replace plain-text address/phone/hours on the homepage with the same
three-tile card layout used on the contact page. Consolidates the
separate hours section into the tile, removing the duplicate. Dynamic
#status and #hours-* IDs are preserved inside the tile for script.js.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-12 19:43:29 -04:00

347 lines
15 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<script defer data-domain="beachpartyballoons.com" src="https://metrics.beachpartyballoons.com/js/script.hash.outbound-links.js"></script>
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/favicon/site.webmanifest">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beach Party Balloons — Milford, CT</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Autour+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="/nav.js" defer></script>
<meta name="description" content="Balloon decorations, walk-in arrangements & delivery in Milford, CT. Custom designs for birthdays, weddings, corporate events & more. Walk-ins welcome!">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Beach Party Balloons">
<meta property="og:title" content="Beach Party Balloons — Milford, CT">
<meta property="og:description" content="Balloon decorations, walk-in arrangements & delivery in Milford, CT. Custom designs for birthdays, weddings, corporate events & more. Walk-ins welcome!">
<meta property="og:url" content="https://beachpartyballoons.com/">
<meta property="og:image" content="https://beachpartyballoons.com/assets/pics/classic/hero.webp">
<meta property="og:image:alt" content="Beach Party Balloons">
<meta name="twitter:card" content="summary_large_image">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Beach Party Balloons",
"image": "https://beachpartyballoons.com/assets/logo/BeachPartyBalloons-logo.webp",
"url": "https://beachpartyballoons.com",
"telephone": "+12032835626",
"priceRange": "$$",
"address": {
"@type": "PostalAddress",
"streetAddress": "554 Boston Post Road",
"addressLocality": "Milford",
"addressRegion": "CT",
"postalCode": "06460",
"addressCountry": "US"
},
"geo": {
"@type": "GeoCoordinates",
"latitude": 41.2305385,
"longitude": -73.0657635
},
"openingHoursSpecification": [
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Tuesday","Wednesday","Thursday","Friday"],
"opens": "10:00",
"closes": "17:00"
},
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Saturday"],
"opens": "09:00",
"closes": "15:00"
}
],
"sameAs": [
"https://www.facebook.com/beachpartyballoons",
"https://www.instagram.com/beachpartyballoons/",
"https://bsky.app/profile/beachpartyballoons.bsky.social"
]
}
</script>
</head>
<body>
<div id="site-nav"></div>
<div class="update">
<div id="message"></div>
</div>
<button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button>
<div class="container is-justify-content-center padding">
<figure class="image">
<img src="assets/pics/classic/hero.webp" alt="Image 1" >
<img class="is-overlay" src="assets/logo/BeachPartyBalloons-logo.webp" alt="Image 2" style="width: 50%; height: auto; margin: auto;">
</figure>
</div>
<div class="has-text-centered mt-4 mb-2">
<h1 class="is-size-3">Visit our store</h1>
</div>
<div class="contact-tiles">
<div class="contact-tile">
<i class="fas fa-map-marker-alt"></i>
<div>
<div class="contact-tile-label">Address</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">Phone</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>
<p id="status"></p>
<p id="hours-tuesday-friday">Tuesday Friday: 10:005:00</p>
<p id="hours-saturday">Saturday: 9:003:00</p>
<p id="hours-sunday-monday">Sunday Monday: Closed</p>
</div>
</div>
</div>
<div class="py-2 has-text-centered">
<a href="#contact-form">
<button class="button is-info">Contact Us</button>
</a>
</div>
<div class="container is-justify-content-center padding">
<img src="assets/pics/organic/img1.webp" alt="Image 1" >
</div>
<p class="is-size-5 has-text-centered">Walk-ins welcome!</p>
<p class="is-size-6 has-text-centered"> Pick up a balloon arrangement for birthdays or any occasion. We will make it while you wait! </p>
<p class="is-size-6 has-text-centered">We have hundreds of foil balloon choices in stock and over 70 latex colors! </p>
<p class="is-size-5 has-text-centered">...Or consult with one of our designers about your balloon decorating needs.</p>
<div class="container is-justify-content-center padding">
<img src="assets/pics/organic/img2.webp" alt="Image 1" >
</div>
<p class="is-size-5 has-text-centered">Delivery available!</p>
<p class="is-size-5 has-text-centered"> Have your balloons delivered! Our delivery staff will make sure your order arrives safe and sound!</p>
<div class="container is-justify-content-center padding">
<img src="assets/pics/helium/img1.webp" alt="Image 1" >
</div>
<div class="form-container" id="contact-form">
<h2 class="is-size-3 has-text-centered">Contact Us</h2>
<form id="contactForm" novalidate>
<!-- Honeypot: hidden from humans, filled by bots -->
<div style="display:none;" aria-hidden="true">
<input type="text" name="website" tabindex="-1" autocomplete="off">
</div>
<div class="columns is-mobile">
<div class="column">
<div class="field">
<label class="label">First name <span class="has-text-danger">*</span></label>
<div class="control">
<input class="input" type="text" name="firstName" placeholder="Jane" required autocomplete="given-name">
</div>
<p class="help is-danger" id="err-firstName" style="display:none;"></p>
</div>
</div>
<div class="column">
<div class="field">
<label class="label">Last name <span class="has-text-danger">*</span></label>
<div class="control">
<input class="input" type="text" name="lastName" placeholder="Smith" required autocomplete="family-name">
</div>
<p class="help is-danger" id="err-lastName" style="display:none;"></p>
</div>
</div>
</div>
<div class="field">
<label class="label">Email <span class="has-text-danger">*</span></label>
<div class="control">
<input class="input" type="email" name="email" placeholder="you@example.com" required autocomplete="email">
</div>
<p class="help is-danger" id="err-email" style="display:none;"></p>
</div>
<div class="field">
<label class="label">Phone Number <span class="has-text-danger">*</span></label>
<div class="control">
<input class="input" type="tel" name="phone" placeholder="(203) 555-0123" required autocomplete="tel">
</div>
<p class="help is-danger" id="err-phone" style="display:none;"></p>
</div>
<div class="columns is-mobile">
<div class="column">
<div class="field">
<label class="label">Event Type</label>
<div class="control">
<div class="select is-fullwidth">
<select name="eventType">
<option value="">Select a type…</option>
<option value="Birthday">Birthday</option>
<option value="Corporate">Corporate</option>
<option value="Wedding">Wedding</option>
<option value="Walk-in">Walk-in</option>
<option value="Other">Other</option>
</select>
</div>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label">Event Date</label>
<div class="control">
<input class="input" type="date" name="eventDate">
</div>
</div>
</div>
</div>
<div class="field">
<label class="label">Message <span class="has-text-danger">*</span></label>
<div class="control">
<textarea class="textarea" name="message" placeholder="Tell us about your event…" rows="4" required></textarea>
</div>
<p class="help is-danger" id="err-message" style="display:none;"></p>
</div>
<div class="field">
<label class="label">Photos <span class="has-text-grey is-size-7">(up to 3 images)</span></label>
<div class="control">
<div id="dropzone">
<p><i class="fas fa-images"></i> Drag &amp; drop photos here, or <span class="has-text-info" style="text-decoration:underline;">browse</span></p>
<p class="is-size-7 has-text-grey mt-1">JPEG · PNG · HEIC · WebP — max 10 MB each</p>
<input id="photoInput" type="file" name="photos" accept="image/*" multiple style="display:none;">
</div>
<div id="photoPreview"></div>
<p id="photoError" class="help is-danger" style="display:none;">Maximum 3 photos — extras were ignored.</p>
</div>
</div>
<div id="formAlert" class="notification" style="display:none;"></div>
<div class="field">
<altcha-widget
challenge="/api/altcha"
style="--altcha-color-border: #dbdbdb; --altcha-border-radius: 4px; --altcha-color-text: #363636;"
></altcha-widget>
<p class="help is-danger" id="err-altcha" style="display:none;">Please complete the verification.</p>
</div>
<div class="field">
<div class="control">
<button type="submit" id="submitBtn" class="button is-info is-fullwidth">Send Message</button>
</div>
</div>
</form>
</div>
<hr class="section-divider">
<section class="section reviews-section">
<div class="container has-text-centered">
<h2 class="is-size-3">Google Reviews</h2>
<p class="is-size-6 has-text-grey">See what clients are saying, or leave a review after your event.</p>
<div class="reviews-summary mt-4">
<div class="reviews-stars" aria-label="Average rating: 5.0 out of 5">
<span></span><span></span><span></span><span></span><span></span>
</div>
<p class="is-size-5 has-text-weight-semibold">Rated <span id="reviewsRatingValue">5.0</span> on Google</p>
<p class="is-size-7 has-text-grey">Based on <span id="reviewsCountValue">100+ reviews</span></p>
</div>
<div class="reviews-grid mt-5" id="reviewsGrid">
<article class="review-card">
<p>"Stunning balloon arch and super easy to work with. Our guests loved it!"</p>
<p class="review-author">— Jordan M., Corporate Event</p>
</article>
<article class="review-card">
<p>"Professional setup and gorgeous colors. Made our celebration unforgettable."</p>
<p class="review-author">— Maria L., Birthday Party</p>
</article>
<article class="review-card">
<p>"Fast, friendly, and beautiful designs. Will book again for our next event."</p>
<p class="review-author">— Alex T., School Event</p>
</article>
</div>
<div class="buttons is-centered mt-4">
<a class="button is-info" target="_blank" rel="noopener" href="https://www.google.com/maps/place/Beach+Party+Balloons/@41.2305385,-73.0657635,17z/data=!3m1!4b1!4m6!3m5!1s0x89e80c66edb1f163:0xd0209d75415d0e41!8m2!3d41.2305385!4d-73.0657635!16s%2Fg%2F11bxc5f6tk?entry=ttu&g_ep=EgoyMDI1MTIwOS4wIKXMDSoASAFQAw%3D%3D">Read reviews</a>
<a class="button is-light" target="_blank" rel="noopener" href="https://g.page/r/CUEOXUF1nSDQEBE/review">Leave a review</a>
</div>
</div>
</section>
<section class="section trusted-section">
<div class="container">
<div class="has-text-centered mb-5">
<h2 class="is-size-3">Trusted by</h2>
<p class="is-size-6 has-text-grey">Brands and organizations we have had the joy of celebrating with.</p>
</div>
<div class="trusted-logos">
<figure class="trusted-logo">
<img src="assets/trusted/512px-Subway_icon.svg.webp" alt="Subway logo" loading="lazy">
</figure>
<figure class="trusted-logo">
<img src="assets/trusted/Yale_press_logo.webp" alt="Yale logo" loading="lazy">
</figure>
<figure class="trusted-logo">
<img src="assets/trusted/256px-Quinnipiac_University_logo_(2017).svg.webp" alt="Quinnipiac University logo" loading="lazy">
</figure>
<figure class="trusted-logo">
<img src="assets/trusted/512px-University_of_New_Haven_logo.webp" alt="University of New Haven logo" loading="lazy">
</figure>
<figure class="trusted-logo">
<img src="assets/trusted/Planet_Fitness_(2).webp" alt="Planet Fitness logo" loading="lazy">
</figure>
<figure class="trusted-logo">
<img src="assets/trusted/Mohegan-Sun-Logo.webp" alt="Mohegan Sun logo" loading="lazy">
</figure>
<figure class="trusted-logo">
<img src="assets/trusted/Post_university_of_conn_logo.webp" alt="Post University logo" loading="lazy">
</figure>
<figure class="trusted-logo">
<img src="assets/trusted/logo-full-color.webp" alt="Edge Fitness logo" loading="lazy">
</figure>
<figure class="trusted-logo">
<img src="assets/trusted/lincoln-culinary.webp" alt="Lincoln Culinary Institute logo" loading="lazy">
</figure>
<figure class="trusted-logo">
<img src="assets/trusted/amazon.webp" alt="Amazon logo" loading="lazy">
</figure>
<figure class="trusted-logo trusted-logo--dark">
<img src="assets/trusted/woodwinds-2024-logo-white.webp" alt="Woodwinds logo" loading="lazy">
</figure>
<figure class="trusted-logo">
<img src="assets/trusted/sallys-apizza.webp" alt="Sally's Apizza logo" loading="lazy">
</figure>
</div>
</div>
</section>
<div id="site-footer"></div>
<script src="script.js"></script>
<script src="easter-egg.js"></script>
<script src="update.js"></script>
<script src="reviews-data.js"></script>
<script src="reviews.js?v=6"></script>
<script src="contact-form.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/altcha@3.1.0/dist/main/altcha.min.js" type="module"></script>
</body>
</html>