193 lines
5.3 KiB
HTML
193 lines
5.3 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</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">
|
|
<style>
|
|
style {
|
|
/* Custom styling */
|
|
.gallery-title {
|
|
font-size: 2.5rem;
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
color: #333;
|
|
}
|
|
|
|
.gallery-grid {
|
|
display: grid;
|
|
gap: 2rem;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.gallery-slide {
|
|
position: relative;
|
|
opacity-0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gallery-slide.active {
|
|
opacity-1;
|
|
}
|
|
|
|
.gallery-button {
|
|
margin-top: 1rem;
|
|
padding: 0.5rem 1rem;
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.gallery-button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
}
|
|
</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="../terms/index.html">
|
|
Terms
|
|
</a>
|
|
<!-- <div class="navbar-item "> -->
|
|
<a class="navbar-item is-tab is-active" href="../gallery/index.html">
|
|
Gallery
|
|
</a>
|
|
|
|
<!-- <div class="navbar-dropdown"> -->
|
|
<a class="navbar-item" href="../contact/index.html">
|
|
Contact
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar-end">
|
|
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section class="page-title">
|
|
<h1 class="gallery-title">My Gallery</h1>
|
|
</section>
|
|
|
|
<nav class="container">
|
|
<div class="row align-items-center">
|
|
<button class="left col-auto-6 gallery-button" type="button" id="previousBtn">
|
|
Previous
|
|
</button>
|
|
<!-- Slide content will go here -->
|
|
<img src="../assets/pics/classic/20240825_104716.webp" alt="">
|
|
<button class="right col-auto-6 gallery-button" type="button" id="nextBtn">
|
|
Next
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<!-- Slide 1 will go here -->
|
|
|
|
<!-- Slide 2 will go here -->
|
|
|
|
<!-- Slide 3 will go here -->
|
|
</div>
|
|
</div>
|
|
|
|
<button id="playBtn" class="col-auto-6 row-auto-1 gallery-button" style="margin-top: 0.5rem;">
|
|
Next Slide
|
|
</button>
|
|
|
|
<!-- JavaScript for slide transitions -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const slides = document.querySelectorAll('.gallery-slide');
|
|
let currentSlide = 0;
|
|
|
|
function showSlide(n) {
|
|
if (n > 0) {
|
|
currentSlide++;
|
|
}
|
|
|
|
slides.forEach(function(slide, index) {
|
|
slide.classList.remove('active');
|
|
});
|
|
|
|
slides[currentSlide].classList.add('active');
|
|
}
|
|
|
|
document.getElementById('nextBtn').addEventListener('click', function() {
|
|
showSlide(1);
|
|
});
|
|
|
|
document.getElementById('previousBtn').addEventListener('click', function() {
|
|
if (currentSlide > 0) {
|
|
currentSlide--;
|
|
showSlide(-1);
|
|
}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<!-- View switcher -->
|
|
<div class="col-auto-6">
|
|
<img src="your-image-container" alt="Gallery Image">
|
|
</div>
|
|
|
|
<button class="button view-switch-btn" type="button" id="viewSwitchBtn">
|
|
Switch View
|
|
</button>
|
|
|
|
</div>
|
|
<footer class="footer has-background-primary-light">
|
|
<div class="content has-text-centered">
|
|
<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>
|
|
<div id="footer"></div>
|
|
<script src="script.js"></script>
|
|
|
|
</body>
|
|
</html> |