Homepage videos, font size edit

martinoak · Mar 17, 2024 · b901133 · b901133
1 parent b210b6a
commit b901133
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 26 deletions.
diff --git a/public/css/ud-styles.css b/public/css/ud-styles.css
@@ -410,23 +410,23 @@ p {
 .ud-hero-content .ud-hero-title {
   color: var(--white);
   font-weight: 700;
-  font-size: 45px;
-  line-height: 60px;
+  font-size: 55px;
+  line-height: 65px;
   text-align: center;
   margin-bottom: 30px;
 }
 
 @media only screen and (min-width: 768px) and (max-width: 991px) {
   .ud-hero-content .ud-hero-title {
-    font-size: 38px;
-    line-height: 50px;
+    font-size: 44px;
+    line-height: 56px;
   }
 }
 
 @media (max-width: 767px) {
   .ud-hero-content .ud-hero-title {
-    font-size: 26px;
-    line-height: 38px;
+    font-size: 32px;
+    line-height: 44px;
   }
 }
 

diff --git a/public/hero-1.mp4 b/public/hero-1.mp4
diff --git a/public/hero-2.mp4 b/public/hero-2.mp4
diff --git a/public/hero-3.mp4 b/public/hero-3.mp4
diff --git a/public/hero-4.mp4 b/public/hero-4.mp4
diff --git a/public/hero-5.mp4 b/public/hero-5.mp4
diff --git a/resources/views/home.latte b/resources/views/home.latte
@@ -55,30 +55,31 @@
         </div>
     </header>
 
-    <!--
+
     <section id="home" style="position: relative; overflow: hidden;">
-            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1;"></div>
-            <video autoplay muted loop id="myVideo" style="width: 100%; height: auto; z-index: 0;">
-                <source src="{asset('hero.mp4')}" type="video/mp4">
-            </video>
-            <div class="container" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; z-index: 2;">
-                <div class="row">
-                    <div class="col-lg-12">
-                        <div class="ud-hero-content">
-                            <h1 class="ud-hero-title">
-                                Čištění interiérů Kondrac
-                            </h1>
-                            <p class="ud-hero-desc">
-                                Vaše auto vyčistíme rychle, levně a kvalitně!
-                            </p>
-                        </div>
+        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1;"></div>
+        {var $fileName = 'hero-' . rand(1, 5) . '.mp4'}
+        <video autoplay muted loop id="hpVideo" style="width: 100%; object-fit: cover; z-index: 0;">
+            <source src="{asset($fileName)}" type="video/mp4">
+        </video>
+        <div class="container" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; z-index: 2;">
+            <div class="row">
+                <div class="col-lg-12">
+                    <div class="ud-hero-content">
+                        <h1 class="ud-hero-title">
+                            Čištění interiérů Kondrac
+                        </h1>
+                        <p class="ud-hero-desc">
+                            Vaše auto vyčistíme rychle, levně a kvalitně!
+                        </p>
                     </div>
                 </div>
             </div>
-        </section>
-    -->
+        </div>
+    </section>
 
-    <section class="ud-hero" id="home">
+
+{*    <section class="ud-hero" id="home">
         <div class="container">
             <div class="row">
                 <div class="col-lg-12">
@@ -93,7 +94,7 @@
                 </div>
             </div>
         </div>
-    </section>
+    </section>*}
 
     <section id="features" class="ud-features">
         <div class="container">
@@ -517,6 +518,14 @@
 {block bottomscripts}
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" defer></script>
     <script src="{asset('js/main.js')}?m={filemtime(public_path('js/main.js'))}"></script>
+    <script>
+        let video = document.getElementById("hpVideo");
+        video.style.maxHeight = window.innerHeight + "px";
+        video.style.minHeight = window.innerHeight + "px";
+        video.onended = function() {
+            video.play();
+        };
+    </script>
     <script type="text/javascript">
         document.getElementById("demandForm").addEventListener("submit", function() {
             document.getElementById("sendDemandButton").setAttribute("disabled", "disabled");