From 9f08c5d6dc73a4a3bef650ef039ee9da1c1bf18a Mon Sep 17 00:00:00 2001
From: vista-man <524715@vistacollege.nl>
Date: Tue, 8 Apr 2025 13:26:57 +0200
Subject: [PATCH] refactor video section layout and styles for improved
 presentation

---
 index.html | 13 +++++++------
 style.css  | 19 +++++++++++++++++++
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 9c26b99..e2a5c04 100644
--- a/index.html
+++ b/index.html
@@ -42,14 +42,15 @@
         </div>
       </nav>
 
-      <H1>KAMPIOENEN VAN DE NACH</H1>
-
-      <video autoplay loop class="background-video">
-        <source src="img/yt1z.net - Spik Span - Kampioene van de nach de11devande11de 2023 (720p) (1).mp4" type="video/mp4">
-
+    <div class="video-container text-center">
+        <h1>KAMPIOENEN VAN DE NACH</h1>
+        <video autoplay loop class="background-video">
+            <source src="img/yt1z.net - Spik Span - Kampioene van de nach de11devande11de 2023 (720p) (1).mp4" type="video/mp4">
+        </video>
         <div class="inhoud">
-          <button onclick="toggleVideo()">⏯ Video pauzeren/afspelen</button>
+            <button onclick="toggleVideo()">⏯ Video pauzeren/afspelen</button>
         </div>
+    </div>
 
         
     <!-- <div class="container mt-5">
diff --git a/style.css b/style.css
index ef8955f..1d82b68 100644
--- a/style.css
+++ b/style.css
@@ -85,4 +85,23 @@
 
 .item button {
     width: 100%;
+}
+
+.video-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin-top: 20px;
+}
+
+.background-video {
+    max-width: 100%;
+    height: auto;
+    margin-top: 15px;
+}
+
+.inhoud button {
+    margin-top: 10px;
 }
\ No newline at end of file