Order form
This commit is contained in:
Flatlogic Bot
parent
f9549456ea
commit
d8875292fa
@ -64,8 +64,26 @@ body {
|
||||
border: 1px solid #00BFFF;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
transition: transform 0.8s ease-out, opacity 0.8s ease-out, box-shadow 0.3s;
|
||||
box-shadow: 0 0 5px #00BFFF, 0 0 10px #00BFFF, 0 0 15px #00BFFF;
|
||||
opacity: 0; /* Start hidden */
|
||||
}
|
||||
|
||||
.exhibit-card.hidden-left {
|
||||
transform: translateX(-100px);
|
||||
}
|
||||
|
||||
.exhibit-card.hidden-right {
|
||||
transform: translateX(100px);
|
||||
}
|
||||
|
||||
.exhibit-card.hidden-bottom {
|
||||
transform: translateY(100px);
|
||||
}
|
||||
|
||||
.exhibit-card.visible {
|
||||
opacity: 1;
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
|
||||
.exhibit-card:hover {
|
||||
@ -93,6 +111,11 @@ body {
|
||||
text-shadow: 0 0 3px #FFFFFF, 0 0 8px #00BFFF;
|
||||
}
|
||||
|
||||
section h2 {
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0 0 8px #FFFFFF, 0 0 15px #00BFFF, 0 0 20px #00BFFF;
|
||||
}
|
||||
|
||||
.full-width-section {
|
||||
height: 70vh;
|
||||
background-size: cover;
|
||||
@ -123,3 +146,56 @@ body {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#tickets {
|
||||
position: relative;
|
||||
background: url('https://noma.org/wp-content/uploads/2019/04/Screenshot-2019-04-30-10.10.43.png') no-repeat center center/cover;
|
||||
}
|
||||
|
||||
#tickets::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#tickets .container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.ticket-form-container {
|
||||
background-color: rgba(16, 16, 32, 0.85);
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #00BFFF;
|
||||
box-shadow: 0 0 15px #00BFFF;
|
||||
}
|
||||
|
||||
.ticket-form-container .form-label {
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0 0 5px #FFFFFF, 0 0 10px #00BFFF;
|
||||
}
|
||||
|
||||
.ticket-form-container .form-control,
|
||||
.ticket-form-container .form-select {
|
||||
background-color: #000010;
|
||||
color: #FFFFFF;
|
||||
border: 1px solid #00BFFF;
|
||||
}
|
||||
|
||||
.ticket-form-container .form-control:focus,
|
||||
.ticket-form-container .form-select:focus {
|
||||
background-color: #000010;
|
||||
color: #FFFFFF;
|
||||
border-color: #FF00FF;
|
||||
box-shadow: 0 0 10px #FF00FF;
|
||||
}
|
||||
|
||||
.ticket-form-container .form-control::-webkit-calendar-picker-indicator {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
const hiddenElements = document.querySelectorAll('.hidden-left, .hidden-right, .hidden-bottom');
|
||||
hiddenElements.forEach(el => observer.observe(el));
|
||||
});
|
||||
51
index.php
51
index.php
@ -38,7 +38,7 @@
|
||||
<h2 class="text-center mb-5">Featured Exhibits</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="exhibit-card">
|
||||
<div class="exhibit-card hidden-left">
|
||||
<img src="https://picsum.photos/seed/exhibit1/800/600" alt="Abstract digital sculpture with flowing lights.">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Luminous Forms</h5>
|
||||
@ -47,7 +47,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="exhibit-card">
|
||||
<div class="exhibit-card hidden-bottom">
|
||||
<img src="https://picsum.photos/seed/exhibit2/800/600" alt="Interactive holographic display of ancient artifacts.">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Holo-Relics</h5>
|
||||
@ -56,7 +56,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="exhibit-card">
|
||||
<div class="exhibit-card hidden-right">
|
||||
<img src="https://picsum.photos/seed/exhibit3/800/600" alt="A virtual reality experience of a surreal landscape.">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">VR Dreams</h5>
|
||||
@ -89,6 +89,51 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="tickets" class="section">
|
||||
<div class="container">
|
||||
<h2 class="text-center mb-5">Buy Tickets</h2>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6">
|
||||
<div class="ticket-form-container">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="ticket-type" class="form-label">Tariff</label>
|
||||
<select class="form-select" id="ticket-type" aria-label="Select ticket type">
|
||||
<option selected>Choose tariff...</option>
|
||||
<option value="adult">Adult</option>
|
||||
<option value="child">Child</option>
|
||||
<option value="family">Family</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="ticket-quantity" class="form-label">Number of tickets</label>
|
||||
<select class="form-select" id="ticket-quantity" aria-label="Select number of tickets">
|
||||
<option value="1" selected>1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="visit-date" class="form-label">Date of visit</label>
|
||||
<input type="date" class="form-control" id="visit-date">
|
||||
</div>
|
||||
<div class="text-center mt-4">
|
||||
<button type="submit" class="btn btn-primary btn-lg">Buy Now</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="py-4 text-center text-muted">
|
||||
<div class="container">
|
||||
<p>© 2025 Digital Museum. All rights reserved.</p>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user