add hero section with moving background

Author: Daniel1000c

index.html

@@ -20,13 +20,34 @@
             <i class='bx bx-menu'></i>
         </header>
         <main>
+
+            <!--Create hero section-->
+            <section class="heroSection">
+                
+                <!--Insert video background-->
+                <video autoplay loop muted playsinline class="videoBackground">
+                    <source src="videos/5586359_Coll_wavebreak_3d Animation_1920x1080.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+                <!--Create video overlay-->
+                <div class="videoOverlay"></div>
+
+                <!--Create video overlay text-->
+                <div class="heroContent">
+                    <h2>Welcome to ScriptLab</h2>
+
+                    <!--Insert projects link-->
+                    <a href="#projects">view projects</a>
+                </div>
+            </section>
+
             <!--About section-->
             <section>
-                <h2>Our Story</h2>
+                <h2>About ScriptLab</h2>
             </section>
 
             <!--Projects Section-->
-            <section>
+            <section id="projects">
                 <h2>Projects</h2>
 
                 <!--Create project grid container-->