feat: add carousel component to enhance user experience and visual appeal

index.html

@@ -42,7 +42,7 @@
         </div>
       </nav>
 
-    <div class="container mt-5">
+    <!-- <div class="container mt-5">
         <h1 class="text-center">Koop je tickets voor Spik en Span!</h1>
         <form id="ticketForm" action="process_ticket.php" method="POST" class="mt-4">
             <div class="mb-3">
@@ -68,7 +68,31 @@
             <button type="submit" class="btn btn-primary">Koop Tickets</button>
         </form>
         <div id="qrCodeContainer" class="mt-5 text-center"></div>
+    </div>-->
+
+    <div id="carouselExampleIndicators" class="carousel slide size">
+        <div class="carousel-indicators">
+          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
         </div>
+        <div class="carousel-inner">
+          <div class="carousel-item active">
+            <img src="img/vrij.jpg" class="d-block w-100" alt="...">
+          </div>
+          <div class="carousel-item">
+            <img src="img/za.jpg" class="d-block w-100" alt="...">
+          </div>
+        </div>
+        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Previous</span>
+        </button>
+        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Next</span>
+        </button>
+      </div>
+
 </body>
 
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

style.css

@@ -8,12 +8,12 @@
 }
 
 
- body {
+body {
     margin: 0;
     font-family: Arial, sans-serif;
     }
       
-    .navbar {
+.navbar {
     display: flex;
     align-items: right;
     justify-content: right;
@@ -42,3 +42,8 @@
         color: rgb(0, 0, 0);
         font-size: 18px;
          }
+
+.size {
+    width: 33.33%;
+    height: 25%;
+}