added video to homepage and black as pre-commit

company_site/public/templates/base.html

@@ -25,6 +25,51 @@
       color: white;
       text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
     }
+
+    .hero {
+      
+      height: 60vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      color: white;
+      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+    }
+
+    /* Video styling */
+    .hero video {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      height: 60vh;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transform: translate(-50%, -50%);
+      z-index: -1; /* Place the video behind the content */
+      opacity: 0.7; /* Adjust opacity to darken the video */
+    }
+
+    /* Overlay to darken the video */
+    .hero::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5); /* Adjust the opacity here */
+      z-index: -1; /* Place the overlay behind the content */
+    }
+
+    /* Hero content styling */
+    .hero-content {
+      z-index: 1; /* Ensure content is above the video and overlay */
+      color: white;
+      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+    }
+
     .hero-section h1 {
       font-size: 4rem;
       font-weight: bold;

company_site/public/templates/public/new_index.html

@@ -1,11 +1,21 @@
 {% extends "base.html" %}
+{% load static %}
 
 {% block content %}
   <!-- Hero Section -->
-  <div class="hero-section">
-    <h1>AI ML Operations, LLC</h1>
-    <br />&nbsp;
-    <p>Taking AI and ML from concept to Production</p>
+  <div class="hero">
+   <!-- Video element -->
+    <video autoplay muted loop playsinline>
+      <source src="{% static 'public/videos/main.mp4' %}" type="video/mp4">
+      Your browser does not support the video tag.
+    </video>
+
+    <!-- Hero content -->
+    <div class="hero-content">
+      <h1>AI ML Operations, LLC</h1>
+      <p>Taking concepts to production</p>
+      
+    </div>
   </div>
 
   <!-- About Us Section -->