362 lines
17 KiB
HTML
362 lines
17 KiB
HTML
<!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>
|