Update index.html

FekraSolutions · web-flow · commit ab30f0f38f4e · 2025-01-21T17:26:32.000+02:00
diff --git a/index.html b/index.html
@@ -93,45 +93,47 @@
   height: 50px;
   cursor: pointer;
 }
-                .background-video {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            z-index: -1;
-        }
-        .content {
-            position: relative;
-            z-index: 1;
-            font-family: Arial, sans-serif;
-            text-align: center;
-            margin-top: 20%;
-        }
+               .background-video {
+    position: absolute; /* Ensures it overlays content */
+    top: 50px; /* Adjust as needed to position it below the language selector */
+    left: 0;
+    width: 100%; /* Keep full width or adjust */
+    max-height: 300px; /* Limit height to avoid fullscreen effect */
+    object-fit: cover; /* Maintain aspect ratio */
+    z-index: 0; /* Ensure it appears above the background but below content */
+}
+.label-container {
+    position: relative; /* Keeps labels on top of the video */
+    z-index: 1;
+}
+
     </style>
 </head>
 <body>
+    <!-- Language Selector -->
     <div style="position: absolute; top: 10px; left: 10px;">
         <img src="media/Tlogo.png" alt="Language" style="height: 40px; margin-left: 2px;">
         <select id="languageSelect" style="margin-left: 10px; position: relative; top: -12px;">
             <option value="en">English</option>
             <option value="ar">العربية</option>
         </select>
     </div>
-        <!-- Background Video -->
+
+    <!-- Background Video -->
     <video class="background-video" autoplay muted playsinline id="backgroundVideo">
         <source src="media/intro.mp4" type="video/mp4">
         Your browser does not support the video tag.
     </video>
+
+    <!-- Label Buttons -->
     <div class="label-container">
         <div class="label" onclick="location.href='apps.html'">Applications</div>
         <div class="label" onclick="location.href='services.html'">Our Services</div>
         <div class="label" onclick="location.href='blog.html'">BLOG</div>
         <div class="label" onclick="location.href='about.html'">About us</div>
         <div id="contact-us-container">
-  <div id="contact-us-button" class="label">Contact us</div>
-</div>
+            <div id="contact-us-button" class="label">Contact us</div>
+        </div>
     </div>
     <script>
     document.getElementById("languageSelect").addEventListener("change", function () {
