clean up old files
This commit is contained in:
parent
6e09f0a32c
commit
cf995f2e80
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -1,3 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5510
|
||||
"liveServer.settings.port": 5511
|
||||
}
|
||||
@ -101,11 +101,12 @@
|
||||
<h1 class="section-title has-text-centered">Beach Party Balloons: A celebration of joy and creativity</h1>
|
||||
|
||||
<div class="article">
|
||||
<p class="has-text-centered">Since 2016, Beach Party Balloons has been steadfastly dedicated to providing exceptional family-friendly entertainment in Milford, Connecticut. Our journey began with the establishment of our sister company, Painted You, which laid the foundation for crafting unforgettable experiences through creative party services.</p>
|
||||
<p class="has-text-centered">Since 2016, Beach Party Balloons has been steadfastly dedicated to providing exceptional family-friendly entertainment in Milford, Connecticut.
|
||||
Our journey began with the establishment of our sister company, Painted You, which laid the foundation for crafting unforgettable experiences through creative party services.</p>
|
||||
</div>
|
||||
|
||||
<div class="article">
|
||||
<p class="has-text-centered">In 2016, Melissa spearheaded the opening of Beach Party Balloons at Walnut Beach, bringing her unwavering passion for joy and magic to the community. Fast forward to today, we have relocated to a new venue at 554 Boston Post Road, continuing our legacy with enhanced innovation and growth.</p>
|
||||
<p class="has-text-centered">In 2016, Melissa spearheaded the opening of Beach Party Balloons at Walnut Beach, bringing her unwavering passion for joy and magic to the community. Fast forward to today, we have relocated to a new venue at 554 Boston Post Road, continuing our legacy with enhanced innovation and growth. In 2025, Chris, a long time employee, purchased the business from Melissa. </p>
|
||||
</div>
|
||||
<div class="article">
|
||||
<p class="has-text-centered">
|
||||
|
||||
@ -116,6 +116,6 @@
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../script.js"></script>
|
||||
|
||||
<script defer data-domain="beachpartyballoons.com" src="https://metrics.beachpartyballoons.com/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -159,6 +159,6 @@
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../script.js"></script>
|
||||
|
||||
<script defer data-domain="beachpartyballoons.com" src="https://metrics.beachpartyballoons.com/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,221 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&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" />
|
||||
<style>
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer; /* Make images clickable */
|
||||
}
|
||||
|
||||
.gallery img:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 5px;
|
||||
color: #4a4a4a;
|
||||
font-family: 'Autour One', cursive;
|
||||
}
|
||||
|
||||
.modal{
|
||||
--bulma-modal-content-width: 95vw;
|
||||
--bulma-modal-content-height: 95vh;
|
||||
|
||||
}
|
||||
.modal-image {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
object-fit: contain; /* Ensures the whole image is visible without cropping */
|
||||
display: block;
|
||||
}
|
||||
.modal-card {
|
||||
width: auto;
|
||||
max-width: 90vw; /* Ensures the modal is responsive */
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent; /* Keeps the background consistent */
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
.modal-content {
|
||||
overflow-y: none;
|
||||
max-height: 95vh;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.modal-card-title {
|
||||
font-family: 'Autour One', cursive;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.modal-card-body{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
body.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
.delete{
|
||||
margin-left: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand is-size-1">
|
||||
<a class="navbar-item" href="../../index.html">
|
||||
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
|
||||
</a>
|
||||
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbarBasicExample" class="navbar-menu has-text-right">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="../../index.html">Home</a>
|
||||
<a class="navbar-item" href="../../about/index.html">About Us</a>
|
||||
<a class="navbar-item" href="../../faq/index.html">FAQ</a>
|
||||
<a class="navbar-item" href="../../terms/index.html">Terms</a>
|
||||
<a class="navbar-item is-tab is-active" href="../../gallery/index.html">Gallery</a>
|
||||
<a class="navbar-item" href="../../contact/index.html">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button>
|
||||
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="../index.html">Gallery</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Centerpieces</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-centered has-text-dark">Centerpieces</h1>
|
||||
<div class="gallery">
|
||||
<div class="gallery-item">
|
||||
<figure class="image is-square">
|
||||
<img loading=lazy src="../../assets/pics/gallery/centerpiece/20230108_112718.jpg}.webp" alt="Cocktail Arrangements" data-target="modal1" aria-haspopup="true">
|
||||
</figure>
|
||||
<p class="caption">Cocktail Arrangements</p>
|
||||
</div>
|
||||
<div class="modal" id="modal1">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title has-size-4">Cocktail Arrangements</p>
|
||||
<button class="delete" aria-label="close" data-action="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<img class="modal-image" src="../../assets/pics/gallery/centerpiece/20230108_112718.jpg}.webp" alt="Cocktail Arrangements">
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
function openModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
modal.classList.add('is-active');
|
||||
document.body.classList.add('modal-open'); // Prevent background scroll
|
||||
}
|
||||
|
||||
function closeModal(modal) {
|
||||
modal.classList.remove('is-active');
|
||||
document.body.classList.remove('modal-open'); // Allow scrolling again
|
||||
}
|
||||
|
||||
const images = document.querySelectorAll('.gallery img');
|
||||
images.forEach(image => {
|
||||
image.addEventListener('click', () => {
|
||||
const targetModal = image.dataset.target;
|
||||
openModal(targetModal);
|
||||
});
|
||||
});
|
||||
|
||||
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
|
||||
closeButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const modal = button.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
|
||||
const modalBackgrounds = document.querySelectorAll('.modal-background');
|
||||
modalBackgrounds.forEach(background => {
|
||||
background.addEventListener('click', () => {
|
||||
const modal = background.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<div>
|
||||
<a target="_blank" href="https://mastodon.social/@beachpartyballoons@mastodon.social"><i class="fa-brands fa-mastodon is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://www.facebook.com/beachpartyballoons"><i class="fa-brands fa-facebook-f is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://www.instagram.com/beachpartyballoons/"><i class="fa-brands fa-instagram is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://bsky.app/profile/beachpartyballoons.bsky.social">
|
||||
<i class="fa-brands fa-bluesky is-size-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h7>Copyright © <span id="year"></span> Beach Party Balloons</h7>
|
||||
<h7>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</h7>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../../script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,212 +0,0 @@
|
||||
|
||||
/*
|
||||
font
|
||||
*/
|
||||
/*
|
||||
body
|
||||
*/
|
||||
body {
|
||||
font-family: "Montserrat Alternates", sans-serif;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
sprite svg
|
||||
*/
|
||||
.sprite-svg {
|
||||
display: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/*
|
||||
title
|
||||
*/
|
||||
h1 {
|
||||
padding: 40px 0 40px;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/*
|
||||
images wrapper
|
||||
*/
|
||||
.wrapper {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
-moz-columns: 1;
|
||||
columns: 1;
|
||||
-moz-column-gap: 0;
|
||||
column-gap: 0;
|
||||
-moz-column-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
margin: 20px auto 50px;
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
.wrapper {
|
||||
-moz-columns: 2;
|
||||
columns: 2;
|
||||
}
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
.wrapper {
|
||||
-moz-columns: 3;
|
||||
columns: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-image {
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
}
|
||||
.grid-image img {
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.zoom-wrapper {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
background-color: black;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.zoom-wrapper:target {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@-webkit-keyframes top-animation {
|
||||
from {
|
||||
top: -100px;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes top-animation {
|
||||
from {
|
||||
top: -100px;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.zoom-wrapper__image {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
max-width: 1000px;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* animation */
|
||||
-webkit-animation-name: top-animation;
|
||||
animation-name: top-animation;
|
||||
-webkit-animation-duration: 0.5s;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.cell {
|
||||
box-flex: 1;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.zoom-image {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
/*
|
||||
arrow navigation
|
||||
*/
|
||||
.navigation-arrow {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
perspective: 1000px;
|
||||
perspective-origin: 100% 50%;
|
||||
}
|
||||
|
||||
.navigation-arrow__left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.navigation-arrow__next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.navigation-arrow__image {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.navigation-arrow__prev .navigation-arrow__image {
|
||||
left: 40px;
|
||||
transform: rotateY(90deg);
|
||||
transform-origin: 0% 50%;
|
||||
}
|
||||
.navigation-arrow__next .navigation-arrow__image {
|
||||
right: 40px;
|
||||
transform: rotateY(-90deg);
|
||||
transform-origin: 100% 50%;
|
||||
}
|
||||
.navigation-arrow__image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
.navigation-arrow__prev:hover .navigation-arrow__image, .navigation-arrow__next:hover .navigation-arrow__image {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
|
||||
.navigation-arrow__icon {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 100px;
|
||||
padding: 6px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.navigation-arrow__icon svg.icon {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
fill: #000000;
|
||||
position: relative;
|
||||
stroke-width: 2;
|
||||
stroke: #000000;
|
||||
}
|
||||
|
||||
.zoom-wrapper__close {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
right: 10px;
|
||||
z-index: 100 !important;
|
||||
color: #ffffff;
|
||||
font-size: 40px;
|
||||
text-decoration: none;
|
||||
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
@ -1,139 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Beach Party Balloons - Gallery</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<link rel="stylesheet" href="classic1.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand is-size-1">
|
||||
<a class="navbar-item" href="../../index.html">
|
||||
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbarBasicExample" class="navbar-menu has-text-right">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="../../index.html">Home</a>
|
||||
<a class="navbar-item" href="../../about/index.html">About Us</a>
|
||||
<a class="navbar-item" href="../../faq/index.html">FAQ</a>
|
||||
<a class="navbar-item" href="../../terms/index.html">Terms</a>
|
||||
<a class="navbar-item is-tab is-active" href="../../gallery/index.html">Gallery</a>
|
||||
<a class="navbar-item" href="../../contact/index.html">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Images used to open the lightbox -->
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<img src="../../assets/pics/gallery/classic/20230617_131551.webp" onclick="openModal();currentSlide(1)" class="hover-shadow">
|
||||
</div>
|
||||
<div class="column">
|
||||
<img src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" onclick="openModal();currentSlide(2)" class="hover-shadow">
|
||||
</div>
|
||||
|
||||
|
||||
<!-- The Modal/Lightbox -->
|
||||
<div id="myModal" class="modal">
|
||||
<span class="close cursor" onclick="closeModal()">×</span>
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="mySlides">
|
||||
<div class="numbertext">1 / 4</div>
|
||||
<img src="../../assets/pics/gallery/classic/20230617_131551.webp" style="width:100%">
|
||||
</div>
|
||||
|
||||
<div class="mySlides">
|
||||
<div class="numbertext">2 / 4</div>
|
||||
<img src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" style="width:100%">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Next/previous controls -->
|
||||
<a class="prev" onclick="plusSlides(-1)">❮</a>
|
||||
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||
|
||||
<!-- Caption text -->
|
||||
<div class="caption-container">
|
||||
<p id="caption"></p>
|
||||
</div>
|
||||
|
||||
<!-- Thumbnail image controls -->
|
||||
<div class="column">
|
||||
<img class="demo" src="../../assets/pics/gallery/classic/20230617_131551.webp" onclick="currentSlide(1)" alt="Nature">
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<img class="demo" src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" onclick="currentSlide(2)" alt="Snow">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
// Open the Modal
|
||||
function openModal() {
|
||||
document.getElementById("myModal").style.display = "block";
|
||||
}
|
||||
|
||||
// Close the Modal
|
||||
function closeModal() {
|
||||
document.getElementById("myModal").style.display = "none";
|
||||
}
|
||||
|
||||
var slideIndex = 1;
|
||||
showSlides(slideIndex);
|
||||
|
||||
// Next/previous controls
|
||||
function plusSlides(n) {
|
||||
showSlides(slideIndex += n);
|
||||
}
|
||||
|
||||
// Thumbnail image controls
|
||||
function currentSlide(n) {
|
||||
showSlides(slideIndex = n);
|
||||
}
|
||||
|
||||
function showSlides(n) {
|
||||
var i;
|
||||
var slides = document.getElementsByClassName("mySlides");
|
||||
var dots = document.getElementsByClassName("demo");
|
||||
var captionText = document.getElementById("caption");
|
||||
if (n > slides.length) {slideIndex = 1}
|
||||
if (n < 1) {slideIndex = slides.length}
|
||||
for (i = 0; i < slides.length; i++) {
|
||||
slides[i].style.display = "none";
|
||||
}
|
||||
for (i = 0; i < dots.length; i++) {
|
||||
dots[i].className = dots[i].className.replace(" active", "");
|
||||
}
|
||||
slides[slideIndex-1].style.display = "block";
|
||||
dots[slideIndex-1].className += " active";
|
||||
captionText.innerHTML = dots[slideIndex-1].alt;
|
||||
}
|
||||
</script>
|
||||
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<p>Copyright © <span id="year"></span> Beach Party Balloons</p>
|
||||
<p>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,125 +0,0 @@
|
||||
.row > .column {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Create four equal columns that floats next to eachother */
|
||||
.column {
|
||||
float: left;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/* The Modal (background) */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
padding-top: 100px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
/* Modal Content */
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background-color: #fefefe;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
/* The Close Button */
|
||||
.close {
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
right: 25px;
|
||||
font-size: 35px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Hide the slides by default */
|
||||
.mySlides {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Next & previous buttons */
|
||||
.prev,
|
||||
.next {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: auto;
|
||||
padding: 16px;
|
||||
margin-top: -50px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
transition: 0.6s ease;
|
||||
border-radius: 0 3px 3px 0;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
/* Position the "next button" to the right */
|
||||
.next {
|
||||
right: 0;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
/* On hover, add a black background color with a little bit see-through */
|
||||
.prev:hover,
|
||||
.next:hover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* Number text (1/3 etc) */
|
||||
.numbertext {
|
||||
color: #f2f2f2;
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Caption text */
|
||||
.caption-container {
|
||||
text-align: center;
|
||||
background-color: black;
|
||||
padding: 2px 16px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
img.demo {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.active,
|
||||
.demo:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
img.hover-shadow {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.hover-shadow:hover {
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
@ -1,361 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Beach Party Balloons - Gallery</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<link rel="stylesheet" href="classic.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand is-size-1">
|
||||
<a class="navbar-item" href="../../index.html">
|
||||
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbarBasicExample" class="navbar-menu has-text-right">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="../../index.html">Home</a>
|
||||
<a class="navbar-item" href="../../about/index.html">About Us</a>
|
||||
<a class="navbar-item" href="../../faq/index.html">FAQ</a>
|
||||
<a class="navbar-item" href="../../terms/index.html">Terms</a>
|
||||
<a class="navbar-item is-tab is-active" href="../../gallery/index.html">Gallery</a>
|
||||
<a class="navbar-item" href="../../contact/index.html">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- <section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-centered has-text-dark">Gallery</h1>
|
||||
<div class="gallery">
|
||||
<label class="item" style="background-image:url(../../assets/pics/gallery/classic/20230617_131551.webp);"><p class="has-text-dark has-text-centered has-background-grey-lighter" id="cap">Classic Arch</p></label>
|
||||
<label class="item" style="background-image:url(../../assets/pics/gallery/classic/_Photos_20241207_083534.webp);"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
|
||||
<div class='sprite-svg'>
|
||||
<svg height='64' viewbox='0 0 64 64' width='64'>
|
||||
<path d='M46.077 55.738c0.858 0.867 0.858 2.266 0 3.133s-2.243 0.867-3.101 0l-25.056-25.302c-0.858-0.867-0.858-2.269 0-3.133l25.056-25.306c0.858-0.867 2.243-0.867 3.101 0s0.858 2.266 0 3.133l-22.848 23.738 22.848 23.738z' id='arrow-left-1'></path>
|
||||
</svg>
|
||||
<svg height='64' viewbox='0 0 64 64' width='64'>
|
||||
<path d='M17.919 55.738c-0.858 0.867-0.858 2.266 0 3.133s2.243 0.867 3.101 0l25.056-25.302c0.858-0.867 0.858-2.269 0-3.133l-25.056-25.306c-0.858-0.867-2.243-0.867-3.101 0s-0.858 2.266 0 3.133l22.848 23.738-22.848 23.738z' id='arrow-right-1'></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h1>minimal mosaic</h1>
|
||||
<div class='wrapper'>
|
||||
<a class='grid-image' href='#img1'>
|
||||
<img alt='image 1' src='../../assets/pics/gallery/classic/20230617_131551.webp'>
|
||||
</a>
|
||||
<a class='grid-image' href='#img2'>
|
||||
<img alt='image 2' src='../../assets/pics/gallery/classic/_Photos_20241207_083534.webp'>
|
||||
</a>
|
||||
<a class='grid-image' href='#img3'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1367179/pexels-photo-1367179.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</a>
|
||||
<a class='grid-image' href='#img4'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1367105/pexels-photo-1367105.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</a>
|
||||
<a class='grid-image' href='#img5'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1292115/pexels-photo-1292115.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</a>
|
||||
<a class='grid-image' href='#img6'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/794079/pexels-photo-794079.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</a>
|
||||
<a class='grid-image' href='#img7'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/640809/pexels-photo-640809.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</a>
|
||||
<a class='grid-image' href='#img8'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1000559/pexels-photo-1000559.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</a>
|
||||
<a class='grid-image' href='#img9'>
|
||||
<img alt='image 4' src='https://images.pexels.com/photos/708921/pexels-photo-708921.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class='zoom-wrapper' id='img1'>
|
||||
<div class='zoom-wrapper__image'>
|
||||
<div class='cell'>
|
||||
<img alt='image 1' class='zoom-image' src='../../assets/pics/gallery/classic/20230617_131551.webp'>
|
||||
</div>
|
||||
</div>
|
||||
<a class='zoom-wrapper__close' href='#'>×</a>
|
||||
<a class='navigation-arrow navigation-arrow__next' href='#img2'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 2' src=''>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class='zoom-wrapper' id='img2'>
|
||||
<div class='zoom-wrapper__image'>
|
||||
<div class='cell'>
|
||||
<img alt='image 2' class='zoom-image' src='../../assets/pics/gallery/classic/_Photos_20241207_083534.webp''>
|
||||
</div>
|
||||
</div>
|
||||
<a class='zoom-wrapper__close' href='#'>×</a>
|
||||
<a class='navigation-arrow navigation-arrow__prev' href='#img1'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 1' src='https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<a class='navigation-arrow navigation-arrow__next' href='#img3'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1367179/pexels-photo-1367179.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class='zoom-wrapper' id='img3'>
|
||||
<div class='zoom-wrapper__image'>
|
||||
<div class='cell'>
|
||||
<img alt='image 3' class='zoom-image' src='https://images.pexels.com/photos/1367179/pexels-photo-1367179.jpeg?auto=compress&cs=tinysrgb&w=1000'>
|
||||
</div>
|
||||
</div>
|
||||
<a class='zoom-wrapper__close' href='#'>×</a>
|
||||
<a class='navigation-arrow navigation-arrow__prev' href='#img2'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 2' src='https://images.pexels.com/photos/774861/pexels-photo-774861.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<a class='navigation-arrow navigation-arrow__next' href='#img4'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1367105/pexels-photo-1367105.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class='zoom-wrapper' id='img4'>
|
||||
<div class='zoom-wrapper__image'>
|
||||
<div class='cell'>
|
||||
<img alt='image 3' class='zoom-image' src='https://images.pexels.com/photos/1367105/pexels-photo-1367105.jpeg?auto=compress&cs=tinysrgb&w=1000'>
|
||||
</div>
|
||||
</div>
|
||||
<a class='zoom-wrapper__close' href='#'>×</a>
|
||||
<a class='navigation-arrow navigation-arrow__prev' href='#img3'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1367179/pexels-photo-1367179.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<a class='navigation-arrow navigation-arrow__next' href='#img5'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1292115/pexels-photo-1292115.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class='zoom-wrapper' id='img5'>
|
||||
<div class='zoom-wrapper__image'>
|
||||
<div class='cell'>
|
||||
<img alt='image 3' class='zoom-image' src='https://images.pexels.com/photos/1292115/pexels-photo-1292115.jpeg?auto=compress&cs=tinysrgb&w=1000'>
|
||||
</div>
|
||||
</div>
|
||||
<a class='zoom-wrapper__close' href='#'>×</a>
|
||||
<a class='navigation-arrow navigation-arrow__prev' href='#img4'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1367105/pexels-photo-1367105.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<a class='navigation-arrow navigation-arrow__next' href='#img6'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/794079/pexels-photo-794079.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class='zoom-wrapper' id='img6'>
|
||||
<div class='zoom-wrapper__image'>
|
||||
<div class='cell'>
|
||||
<img alt='image 3' class='zoom-image' src='https://images.pexels.com/photos/794079/pexels-photo-794079.jpeg?auto=compress&cs=tinysrgb&w=1000'>
|
||||
</div>
|
||||
</div>
|
||||
<a class='zoom-wrapper__close' href='#'>×</a>
|
||||
<a class='navigation-arrow navigation-arrow__prev' href='#img5'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1292115/pexels-photo-1292115.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<a class='navigation-arrow navigation-arrow__next' href='#img7'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/640809/pexels-photo-640809.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class='zoom-wrapper' id='img7'>
|
||||
<div class='zoom-wrapper__image'>
|
||||
<div class='cell'>
|
||||
<img alt='image 3' class='zoom-image' src='https://images.pexels.com/photos/640809/pexels-photo-640809.jpeg?auto=compress&cs=tinysrgb&w=1000'>
|
||||
</div>
|
||||
</div>
|
||||
<a class='zoom-wrapper__close' href='#'>×</a>
|
||||
<a class='navigation-arrow navigation-arrow__prev' href='#img6'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/794079/pexels-photo-794079.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<a class='navigation-arrow navigation-arrow__next' href='#img8'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1000559/pexels-photo-1000559.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class='zoom-wrapper' id='img8'>
|
||||
<div class='zoom-wrapper__image'>
|
||||
<div class='cell'>
|
||||
<img alt='image 3' class='zoom-image' src='https://images.pexels.com/photos/1000559/pexels-photo-1000559.jpeg?auto=compress&cs=tinysrgb&w=1000'>
|
||||
</div>
|
||||
</div>
|
||||
<a class='zoom-wrapper__close' href='#'>×</a>
|
||||
<a class='navigation-arrow navigation-arrow__prev' href='#img7'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/640809/pexels-photo-640809.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<a class='navigation-arrow navigation-arrow__next' href='#img9'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 4' src='https://images.pexels.com/photos/708921/pexels-photo-708921.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class='zoom-wrapper' id='img9'>
|
||||
<div class='zoom-wrapper__image'>
|
||||
<div class='cell'>
|
||||
<img alt='image 4' class='zoom-image' src='https://images.pexels.com/photos/708921/pexels-photo-708921.jpeg?auto=compress&cs=tinysrgb&w=1000'>
|
||||
</div>
|
||||
</div>
|
||||
<a class='zoom-wrapper__close' href='#'>×</a>
|
||||
<a class='navigation-arrow navigation-arrow__prev' href='#img8'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1000559/pexels-photo-1000559.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<p>Copyright © <span id="year"></span> Beach Party Balloons</p>
|
||||
<p>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll(".item").forEach(item => {
|
||||
item.addEventListener("click", function () {
|
||||
expandImage(this);
|
||||
});
|
||||
});
|
||||
function expandImage(element) {
|
||||
let expandedItem = document.querySelector('.item.expanded');
|
||||
// If another image is expanded, remove it
|
||||
if (expandedItem && expandedItem !== element) {
|
||||
expandedItem.classList.remove('expanded');
|
||||
}
|
||||
// Toggle expansion and update caption class
|
||||
element.classList.toggle('expanded');
|
||||
document.querySelector("#cap").classList.add('is-size-2');
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -12,17 +12,17 @@ for ext in "${IMAGE_EXTENSIONS[@]}"; do
|
||||
for filename in $(find "$INPUT_DIR" -type f -name "$ext"); do
|
||||
# Determine the output file name based on the original extension
|
||||
case "$ext" in
|
||||
*.heic)
|
||||
CONVERTED_FILE="${filename%.}.webp"
|
||||
*.heic|*.HEIC)
|
||||
CONVERTED_FILE="${filename%}.webp"
|
||||
;;
|
||||
*.jpg|*.jpeg)
|
||||
CONVERTED_FILE="${filename%.}.webp"
|
||||
*.jpg|*.jpeg|*.JPG|*.JPEG)
|
||||
CONVERTED_FILE="${filename%}.webp"
|
||||
;;
|
||||
*.png)
|
||||
CONVERTED_FILE="${filename%.}.webp"
|
||||
*.png|*.PNG)
|
||||
CONVERTED_FILE="${filename%}.webp"
|
||||
;;
|
||||
*.gif)
|
||||
CONVERTED_FILE="${filename%.}.webp"
|
||||
*.gif|*.GIF)
|
||||
CONVERTED_FILE="${filename%}.webp"
|
||||
;;
|
||||
*) # Default case for unknown file types (if you add more later)
|
||||
echo "Unknown file type: $filename"
|
||||
|
||||
@ -1,236 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&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" />
|
||||
<style>
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer; /* Make images clickable */
|
||||
}
|
||||
|
||||
.gallery img:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 5px;
|
||||
color: #4a4a4a;
|
||||
font-family: 'Autour One', cursive;
|
||||
}
|
||||
|
||||
.modal{
|
||||
--bulma-modal-content-width: 95vw;
|
||||
--bulma-modal-content-height: 95vh;
|
||||
|
||||
}
|
||||
.modal-image {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
object-fit: contain; /* Ensures the whole image is visible without cropping */
|
||||
display: block;
|
||||
}
|
||||
.modal-card {
|
||||
width: auto;
|
||||
max-width: 90vw; /* Ensures the modal is responsive */
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent; /* Keeps the background consistent */
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
.modal-content {
|
||||
overflow-y: none;
|
||||
max-height: 95vh;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.modal-card-title {
|
||||
font-family: 'Autour One', cursive;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.modal-card-body{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
body.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
.delete{
|
||||
margin-left: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand is-size-1">
|
||||
<a class="navbar-item" href="../../index.html">
|
||||
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
|
||||
</a>
|
||||
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbarBasicExample" class="navbar-menu has-text-right">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="../../index.html">Home</a>
|
||||
<a class="navbar-item" href="../../about/index.html">About Us</a>
|
||||
<a class="navbar-item" href="../../faq/index.html">FAQ</a>
|
||||
<a class="navbar-item" href="../../terms/index.html">Terms</a>
|
||||
<a class="navbar-item is-tab is-active" href="../../gallery/index.html">Gallery</a>
|
||||
<a class="navbar-item" href="../../contact/index.html">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button>
|
||||
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="../index.html">Gallery</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Classic</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-centered has-text-dark">Classic Balloon Décor</h1>
|
||||
<div class="gallery">
|
||||
<div class="gallery-item">
|
||||
<figure class="image is-square">
|
||||
<img loading=lazy src="../../assets/pics/gallery/classic/20230617_131551.webp" alt="20' Classic Arch" data-target="modal1" aria-haspopup="true">
|
||||
</figure>
|
||||
<p class="caption">20' Classic Arch</p>
|
||||
</div>
|
||||
<div class="modal" id="modal1">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">20' Classic Arch</p>
|
||||
<button class="delete" aria-label="close" data-action="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<img class="modal-image" src="../../assets/pics/gallery/classic/20230617_131551.webp" alt="20' Classic Arch">
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<figure class="image is-square">
|
||||
<img loading=lazy src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" alt="Classic Columns" data-target="modal2" aria-haspopup="true">
|
||||
</figure>
|
||||
<p class="caption">Classic Columns</p>
|
||||
</div>
|
||||
<div class="modal" id="modal2">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Classic Columns</p>
|
||||
<button class="delete" aria-label="close" data-action="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<img class="modal-image" src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" alt="Classic Columns">
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
function openModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
modal.classList.add('is-active');
|
||||
}
|
||||
|
||||
function closeModal(modal) {
|
||||
modal.classList.remove('is-active');
|
||||
}
|
||||
|
||||
const images = document.querySelectorAll('.gallery img');
|
||||
images.forEach(image => {
|
||||
image.addEventListener('click', () => {
|
||||
const targetModal = image.dataset.target;
|
||||
openModal(targetModal);
|
||||
});
|
||||
});
|
||||
|
||||
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
|
||||
closeButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const modal = button.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
|
||||
const modalBackgrounds = document.querySelectorAll('.modal-background');
|
||||
modalBackgrounds.forEach(background => {
|
||||
background.addEventListener('click', () => {
|
||||
const modal = background.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<div>
|
||||
<a target="_blank" href="https://mastodon.social/@beachpartyballoons@mastodon.social"><i class="fa-brands fa-mastodon is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://www.facebook.com/beachpartyballoons"><i class="fa-brands fa-facebook-f is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://www.instagram.com/beachpartyballoons/"><i class="fa-brands fa-instagram is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://bsky.app/profile/beachpartyballoons.bsky.social">
|
||||
<i class="fa-brands fa-bluesky is-size-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h7>Copyright © <span id="year"></span> Beach Party Balloons</h7>
|
||||
<h7>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</h7>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../../script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -136,6 +136,6 @@
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../script.js"></script>
|
||||
|
||||
<script defer data-domain="beachpartyballoons.com" src="https://metrics.beachpartyballoons.com/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,237 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&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" />
|
||||
<style>
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer; /* Make images clickable */
|
||||
}
|
||||
|
||||
.gallery img:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 5px;
|
||||
color: #4a4a4a;
|
||||
font-family: 'Autour One', cursive;
|
||||
}
|
||||
|
||||
.modal{
|
||||
--bulma-modal-content-width: 95vw;
|
||||
--bulma-modal-content-height: 95vh;
|
||||
|
||||
}
|
||||
.modal-image {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
object-fit: contain; /* Ensures the whole image is visible without cropping */
|
||||
display: block;
|
||||
}
|
||||
.modal-card {
|
||||
width: auto;
|
||||
max-width: 90vw; /* Ensures the modal is responsive */
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent; /* Keeps the background consistent */
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
.modal-content {
|
||||
overflow-y: none;
|
||||
max-height: 95vh;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.modal-card-title {
|
||||
font-family: 'Autour One', cursive;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.modal-card-body{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
body.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
.delete{
|
||||
margin-left: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand is-size-1">
|
||||
<a class="navbar-item" href="../../index.html">
|
||||
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
|
||||
</a>
|
||||
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbarBasicExample" class="navbar-menu has-text-right">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="../../index.html">Home</a>
|
||||
<a class="navbar-item" href="../../about/index.html">About Us</a>
|
||||
<a class="navbar-item" href="../../faq/index.html">FAQ</a>
|
||||
<a class="navbar-item" href="../../terms/index.html">Terms</a>
|
||||
<a class="navbar-item is-tab is-active" href="../../gallery/index.html">Gallery</a>
|
||||
<a class="navbar-item" href="../../contact/index.html">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="../index.html">Gallery</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Organic</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-centered has-text-dark">Organic Balloon Décor</h1>
|
||||
<div class="gallery">
|
||||
<div class="gallery-item">
|
||||
<figure class="image is-square">
|
||||
<img loading=lazy src="../../assets/pics/gallery/organic/20241121_200047~2.jpg" alt="" data-target="modal1" aria-haspopup="true">
|
||||
</figure>
|
||||
<p class="caption"></p>
|
||||
</div>
|
||||
<div class="modal" id="modal1">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title has-size-4"></p>
|
||||
<button class="delete" aria-label="close" data-action="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<img class="modal-image" src="../../assets/pics/gallery/organic/20241121_200047~2.jpg" alt="">
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<figure class="image is-square">
|
||||
<img loading=lazy src="../../assets/pics/gallery/organic/20250202_133930~2.jpg" alt="" data-target="modal2" aria-haspopup="true">
|
||||
</figure>
|
||||
<p class="caption"></p>
|
||||
</div>
|
||||
<div class="modal" id="modal2">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title has-size-4"></p>
|
||||
<button class="delete" aria-label="close" data-action="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<img class="modal-image" src="../../assets/pics/gallery/organic/20250202_133930~2.jpg" alt="">
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
function openModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
modal.classList.add('is-active');
|
||||
}
|
||||
|
||||
function closeModal(modal) {
|
||||
modal.classList.remove('is-active');
|
||||
}
|
||||
|
||||
const images = document.querySelectorAll('.gallery img');
|
||||
images.forEach(image => {
|
||||
image.addEventListener('click', () => {
|
||||
const targetModal = image.dataset.target;
|
||||
openModal(targetModal);
|
||||
});
|
||||
});
|
||||
|
||||
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
|
||||
closeButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const modal = button.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
|
||||
const modalBackgrounds = document.querySelectorAll('.modal-background');
|
||||
modalBackgrounds.forEach(background => {
|
||||
background.addEventListener('click', () => {
|
||||
const modal = background.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<div>
|
||||
<a target="_blank" href="https://mastodon.social/@beachpartyballoons@mastodon.social"><i class="fa-brands fa-mastodon is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://www.facebook.com/beachpartyballoons"><i class="fa-brands fa-facebook-f is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://www.instagram.com/beachpartyballoons/"><i class="fa-brands fa-instagram is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://bsky.app/profile/beachpartyballoons.bsky.social">
|
||||
<i class="fa-brands fa-bluesky is-size-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h7>Copyright © <span id="year"></span> Beach Party Balloons</h7>
|
||||
<h7>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</h7>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../../script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,200 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&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" />
|
||||
<style>
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer; /* Make images clickable */
|
||||
}
|
||||
|
||||
.gallery img:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 5px;
|
||||
color: #4a4a4a;
|
||||
font-family: 'Autour One', cursive;
|
||||
}
|
||||
|
||||
.modal{
|
||||
--bulma-modal-content-width: 95vw;
|
||||
--bulma-modal-content-height: 95vh;
|
||||
|
||||
}
|
||||
.modal-image {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
object-fit: contain; /* Ensures the whole image is visible without cropping */
|
||||
display: block;
|
||||
}
|
||||
.modal-card {
|
||||
width: auto;
|
||||
max-width: 90vw; /* Ensures the modal is responsive */
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent; /* Keeps the background consistent */
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
.modal-content {
|
||||
overflow-y: none;
|
||||
max-height: 95vh;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.modal-card-title {
|
||||
font-family: 'Autour One', cursive;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.modal-card-body{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
body.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
.delete{
|
||||
margin-left: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand is-size-1">
|
||||
<a class="navbar-item" href="../../index.html">
|
||||
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
|
||||
</a>
|
||||
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbarBasicExample" class="navbar-menu has-text-right">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="../../index.html">Home</a>
|
||||
<a class="navbar-item" href="../../about/index.html">About Us</a>
|
||||
<a class="navbar-item" href="../../faq/index.html">FAQ</a>
|
||||
<a class="navbar-item" href="../../terms/index.html">Terms</a>
|
||||
<a class="navbar-item is-tab is-active" href="../../gallery/index.html">Gallery</a>
|
||||
<a class="navbar-item" href="../../contact/index.html">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button>
|
||||
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="../index.html">Gallery</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Sculptures and Themes</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-centered has-text-dark">Sculptures and Themes</h1>
|
||||
<div class="gallery">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
function openModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
modal.classList.add('is-active');
|
||||
}
|
||||
|
||||
function closeModal(modal) {
|
||||
modal.classList.remove('is-active');
|
||||
}
|
||||
|
||||
const images = document.querySelectorAll('.gallery img');
|
||||
images.forEach(image => {
|
||||
image.addEventListener('click', () => {
|
||||
const targetModal = image.dataset.target;
|
||||
openModal(targetModal);
|
||||
});
|
||||
});
|
||||
|
||||
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
|
||||
closeButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const modal = button.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
|
||||
const modalBackgrounds = document.querySelectorAll('.modal-background');
|
||||
modalBackgrounds.forEach(background => {
|
||||
background.addEventListener('click', () => {
|
||||
const modal = background.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<div>
|
||||
<a target="_blank" href="https://mastodon.social/@beachpartyballoons@mastodon.social"><i class="fa-brands fa-mastodon is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://www.facebook.com/beachpartyballoons"><i class="fa-brands fa-facebook-f is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://www.instagram.com/beachpartyballoons/"><i class="fa-brands fa-instagram is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://bsky.app/profile/beachpartyballoons.bsky.social">
|
||||
<i class="fa-brands fa-bluesky is-size-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h7>Copyright © <span id="year"></span> Beach Party Balloons</h7>
|
||||
<h7>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</h7>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../../script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -191,7 +191,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
<script src="script.js"></script>
|
||||
<script defer data-domain="preview.beachpartyballoons.com" src="https://metric.chrisedwards.tech/js/script.js"></script>
|
||||
<script defer data-domain="beachpartyballoons.com" src="https://metrics.beachpartyballoons.com/js/script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,35 +0,0 @@
|
||||
<?php
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
// Validate and sanitize inputs
|
||||
$name = htmlspecialchars(trim($_POST['name']));
|
||||
$email = filter_var(trim($_POST['email']), FILTER_SANITIZE_EMAIL);
|
||||
$message = htmlspecialchars(trim($_POST['message']));
|
||||
|
||||
// Check if the email is valid
|
||||
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
|
||||
echo "Invalid email address.";
|
||||
exit;
|
||||
}
|
||||
|
||||
// Prepare email
|
||||
$to = "info@beachpartyballons.com"; // Replace with your business email
|
||||
$headers = "From: $name <$email>\r\n";
|
||||
$headers .= "Reply-To: $email\r\n";
|
||||
$headers .= "Content-Type: text/plain; charset=UTF-8\r\n";
|
||||
|
||||
$email_body = "You have received a new message from your website contact form.\n\n";
|
||||
$email_body .= "Name: $name\n";
|
||||
$email_body .= "Email: $email\n";
|
||||
$email_body .= "Phone: $phone\n";
|
||||
$email_body .= "Message:\n$message\n";
|
||||
|
||||
// Send email
|
||||
if (mail($to, $subject, $email_body, $headers)) {
|
||||
echo "Message sent successfully!";
|
||||
} else {
|
||||
echo "Failed to send message. Please try again later.";
|
||||
}
|
||||
} else {
|
||||
echo "Invalid request.";
|
||||
}
|
||||
?>
|
||||
@ -197,6 +197,6 @@ h1{
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../script.js"></script>
|
||||
|
||||
<script defer data-domain="beachpartyballoons.com" src="https://metrics.beachpartyballoons.com/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user