Order form

assets/css/custom.css

@@ -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);
+}

assets/js/main.js

@@ -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));
+});

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>&copy; 2025 Digital Museum. All rights reserved.</p>