header text background options

ungleich_page/static/ungleich_page/css/ungleich.css

@@ -3,6 +3,7 @@
     border: 2px solid #fff;
     padding: 4px 18px;
     letter-spacing: 0.6px;
+    background: rgba(0,0,0,0.35);
 }
 
 .btn-trans:focus,
@@ -186,7 +187,7 @@
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    background: rgba(0,0,0,0.5);
+    /* background: rgba(0,0,0,0.5); */
 }
 
 .header_slider > .carousel .item {
@@ -198,7 +199,7 @@
     line-height: 1.1;
     font-size: 23px;
     margin-bottom: 12px;
-    text-shadow: 0px 3px 15px #000;
+    padding: 30px;
 }
 
 .header_slider .btn-trans {
@@ -244,6 +245,7 @@
     text-align: right;
     line-height: 1.4;
     margin-bottom: 20px;
+    padding: 15px;
 }
 
 @media (max-width: 768px) {
@@ -344,4 +346,46 @@
     .timeline>li .timeline-panel {
         min-height: 170px;
     }
+}
+
+.header_slider_box {
+    position: relative;
+    text-shadow: 0px 3px 5px rgba(0,0,0,0.5);
+    background: rgba(0,0,0,0.35);
+    box-shadow: 0 0 5px rgba(0,0,0,0.7);
+}
+
+.cam_corner:after,
+.cam_corner:before{
+    position: absolute;
+    content: ' ';
+    z-index: 5;
+    width: 50px;
+    height: 50px;
+    background: transparent;
+    display: block;
+}
+
+.cam_corner:after {
+    top: -2px;
+    right: -2px;
+    border-top: 2px solid rgba(255,255,255,0.5);
+    border-right: 2px solid rgba(255,255,255,0.5);
+}
+
+.cam_corner:before {
+    bottom: -2px;
+    left: -2px;
+    border-bottom: 2px solid rgba(255,255,255,0.5);
+    border-left: 2px solid rgba(255,255,255,0.5);
+}
+
+.bg_vid_back:after {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.35);
 }

ungleich_page/templates/ungleich_page/includes/_header.html

@@ -13,21 +13,21 @@
     <div class="carousel-inner" role="listbox">
       <div class="item active">
         <div class="bg_vid">
-          <video id="bg_vid" autoplay muted loop>
+          <video id="bg_vid" autoplay muted>
-            <source src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/nanos.mp4" type="video/mp4">
+            <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">
+          <div class="intro-cap header_slider_box cam_corner">
             {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
           </div>
-          <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>
+          <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>
           <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">
+        <div class="bg_vid bg_vid_back">
           <video id="bg_vid" autoplay muted loop>
             <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
           </video>
@@ -42,8 +42,8 @@
       </div>
       <div class="item">
         <div class="bg_vid">
-          <video id="bg_vid" autoplay muted loop>
+          <video id="bg_vid" autoplay muted>
-            <source src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/nico-cable.mp4" type="video/mp4">
+            <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
           </video>
         </div>
         <div class="container">