carousel height changed to min height, other style fixes

ungleich_page/static/ungleich_page/css/ungleich.css

@@ -1,3 +1,9 @@
+@media (min-width: 768px) and (max-width: 991px) {
+    .navbar > .container {
+        width: 100%;
+    }
+}
+
 .btn-trans {
     color: #fff;
     border: 2px solid #fff;
@@ -143,14 +149,14 @@
     }
 }
 
-.header_slider {
+.header_slider > .carousel .carousel-inner {
-    height: 95vh;
+    min-height: 95vh;
+    display: flex;
 }
 
-.header_slider > .carousel,
+.header_slider > .carousel .carousel-inner > .next,
-.header_slider > .carousel .carousel-inner,
+.header_slider > .carousel .carousel-inner > .prev {
-.header_slider > .carousel .item {
+    bottom: 0;
-    height: 100%;
 }
 
 .header_slider .carousel-indicators {
@@ -180,6 +186,11 @@
     margin-top: -50px;
 }
 
+.header_slider > .carousel .item {
+    background: rgba(0,0,0,0.5);
+    flex: 1;
+}
+
 .header_slider > .carousel .item .container {
     overflow: auto;
     padding: 50px 20px 60px;
@@ -190,16 +201,12 @@
     /* background: rgba(0,0,0,0.5); */
 }
 
-.header_slider > .carousel .item {
-    background: rgba(0,0,0,0.5);
-}
-
 .header_slider .intro-cap {
     text-align: right;
     line-height: 1.1;
     font-size: 23px;
     margin-bottom: 12px;
-    padding: 30px;
+    padding: 30px 0;
 }
 
 .header_slider .btn-trans {
@@ -245,7 +252,7 @@
     text-align: right;
     line-height: 1.4;
     margin-bottom: 20px;
-    padding: 15px;
+    padding: 15px 0;
 }
 
 @media (max-width: 768px) {

ungleich_page/templates/ungleich_page/includes/_header.html

@@ -1,7 +1,7 @@
 {% load static i18n %}
 
 <header class="header_slider">
-  <div id="carousel-header-ungleich" class="carousel slide" data-interval="8000" data-ride="carousel">
+  <div id="carousel-header-ungleich" class="carousel slide" data-interval="8000">
     <!-- Indicators -->
     <ol class="carousel-indicators">
       <li data-target="#carousel-header-ungleich" data-slide-to="0" class="active"></li>
@@ -12,43 +12,43 @@
     <!-- Wrapper for slides -->
     <div class="carousel-inner" role="listbox">
       <div class="item active">
-        <div class="bg_vid">
+        <div class="bg_vid bg_vid_back">
-          <video id="bg_vid" autoplay muted>
+          <video autoplay muted loop>
-            <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
+            <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/nico-cable.mp4">
           </video>
         </div>
         <div class="container">
-          <div class="intro-cap header_slider_box cam_corner">
+          <div class="intro-cap">
-            {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
+            {% trans "We  Design, Configure &amp; Maintain<br>Your Linux Infrastructure " %}
           </div>
-          <p class="intro_lead header_slider_box">Ruby on Rails, Django, Java, Webserver, Mailserver, any infrastructure that needs to configured, we provide comprehensive solutions. Amazon, rackspace or bare metal servers, we configure for you.</p>
+          <p class="intro_lead">Ruby on Rails, Django, Java, Webserver, Mailserver, any infrastructure that needs to configured, we provide comprehensive solutions. Amazon, rackspace or bare metal servers, we configure for you.</p>
           <a class="btn btn-trans" href="">Learn More</a>
         </div>
       </div>
       <div class="item">
         <!-- <div class="bg_img" style="background-image:url({% static 'ungleich_page/img/glasfaser/header-nico-sans.jpg' %})"></div> -->
         <div class="bg_vid bg_vid_back">
-          <video id="bg_vid" autoplay muted loop>
+          <video autoplay muted loop>
             <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
           </video>
         </div>
         <div class="container">
           <div class="intro-cap">
-            {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
+            {% trans "We  Design, Configure &amp; Maintain<br>Your Linux Infrastructure " %}
           </div>
           <p class="intro_lead">Ruby on Rails, Django, Nothing else.</p>
           <a class="btn btn-trans" href="">Learn More</a>
         </div>
       </div>
       <div class="item">
-        <div class="bg_vid">
+        <div class="bg_vid bg_vid_back">
-          <video id="bg_vid" autoplay muted>
+          <video autoplay muted loop>
-            <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
+            <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/nanos.mp4">
           </video>
         </div>
         <div class="container">
           <div class="intro-cap">
-            {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
+            {% trans "We  Design, Configure &amp; Maintain<br>Your Linux Infrastructure " %}
           </div>
           <a class="btn btn-trans" href="">Learn More</a>
         </div>