image set to background of each slide instead of a common background

digitalglarus/static/digitalglarus/css/agency.css

@@ -987,17 +987,6 @@ logo-image {
     background-color: #a1cfd7;
 }
 
-
-intro-cap {
-    margin-bottom: 25px;
-    text-transform: uppercase;
-    font-family: 'Raleway', "Helvetica Neue", "Helvetica Neue", Helvetica,Arial,sans-serif;
-	font-size: 24px;
-    font-weight: 400;
-    line-height: 50px;
-	color:#fff
-    background-color: #a1cfd7;
-}
 .intro-small {
     font-family: 'Montserrat' ,'Raleway', "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif;
     font-size: 20px;
@@ -1006,26 +995,7 @@ intro-cap {
     text-transform: uppercase;
     color: #FFF;
 }
-intro-headline {
+
-    margin-bottom: 25px;
-    text-transform: uppercase;
-    font-family: 'Raleway', "Helvetica Neue", "Helvetica Neue", Helvetica,Arial,sans-serif;
-	font-size: 24px;
-    font-weight: 400;
-    line-height: 100px;
-	color:#fff
-    background-color: #a1cfd7;
-}
-h6 intro-smallcap {
-    margin-bottom: 25px;
-    text-transform: none;
-    font-family:'Raleway' , Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
-	font-size: 18px;
-    font-weight: 400;
-    line-height: 50px;
-	color:#fff
-    background-color: #a1cfd7;
-}
 .darkened-container {
 	/* Fallback for web browsers that doesn't support RGBa */
     background: rgb(0, 0, 0);

digitalglarus/static/digitalglarus/css/agency1.css

@@ -983,17 +983,6 @@ logo-image {
     background-color: #a1cfd7;
 }
 
-
-intro-cap {
-    margin-bottom: 25px;
-    text-transform: uppercase;
-    font-family: 'Raleway', "Helvetica Neue", "Helvetica Neue", Helvetica,Arial,sans-serif;
-	font-size: 24px;
-    font-weight: 400;
-    line-height: 50px;
-	color:#fff
-    background-color: #a1cfd7;
-}
 .intro-small {
     font-family: 'Montserrat' ,'Raleway', "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif;
     font-size: 20px;
@@ -1002,26 +991,7 @@ intro-cap {
     text-transform: uppercase;
     color: #FFF;
 }
-intro-headline {
+
-    margin-bottom: 25px;
-    text-transform: uppercase;
-    font-family: 'Raleway', "Helvetica Neue", "Helvetica Neue", Helvetica,Arial,sans-serif;
-	font-size: 24px;
-    font-weight: 400;
-    line-height: 100px;
-	color:#fff
-    background-color: #a1cfd7;
-}
-h6 intro-smallcap {
-    margin-bottom: 25px;
-    text-transform: none;
-    font-family:'Raleway' , Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
-	font-size: 18px;
-    font-weight: 400;
-    line-height: 50px;
-	color:#fff
-    background-color: #a1cfd7;
-}
 .darkened-container {
 	/* Fallback for web browsers that doesn't support RGBa */
     background: rgb(0, 0, 0);

digitalglarus/static/digitalglarus/css/ungleich.css

@@ -10,17 +10,13 @@
 
 .intro-cap {
     font-family: 'Raleway', 'Helvetica Neue', 'Open Sans Bold', Helvetica, Arial, 'Arial Bold', sans-serif;
-    font-size: 26px;
+    font-size: 24px;
     font-style: normal;
     font-weight: 200;
     text-transform: uppercase;
     color: #FFF;
 }
 
-.intro-cap {
-    font-size: 24px;
-}
-
 .intro-smallcap {
     font-family: 'Raleway' , "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif;
     font-size: 22px;

ungleich_page/static/ungleich_page/css/agency.css

@@ -262,24 +262,16 @@ fieldset[disabled] .btn-xl.active {
 	padding: 10px 0;
 	background-color: #222;
     }
+}
 
-    .navbar-default.navbar-shrink .navbar-brand {
+.navbar-default .navbar-brand {
-	   font-size: 1.5em;
+   padding: 8px;
-       padding: 8px;
-    }
 }
 
 header {
     text-align: center;
     color: #fff;
-    background-attachment: scroll;
+    background: rgba(0,0,0,0.25);
-    background-image: url(../img/header-bg.jpg);
-    background-position: center center;
-    background-repeat: none;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    background-size: cover;
-    -o-background-size: cover;
 }
 
 header .intro-text {
@@ -913,29 +905,6 @@ logo-image {
     background-color: #fed136;
 }
 
-
-intro-cap {
-    margin-bottom: 25px;
-    text-transform: uppercase;
-    font-family: 'Raleway', "Helvetica Neue", "Helvetica Neue", Helvetica,Arial,sans-serif;
-	font-size: 24px;
-    font-weight: 400;
-    line-height: 50px;
-	color:#fff
-    background-color: #fed136;
-}
-h6 intro-smallcap {
-    margin-bottom: 25px;
-    text-transform: none;
-    font-family:'Raleway' , Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
-	font-size: 18px;
-    font-weight: 400;
-    line-height: 50px;
-	color:#fff
-    background-color: #fed136;
-}
-
-
 .carousel-indicators li.active, .text-carousel .carousel-indicators li.active {
   width: 15px;
   height: 15px;

ungleich_page/static/ungleich_page/css/ungleich.css

@@ -8,18 +8,16 @@
 }
 
 .intro-cap {
+    margin-top: 25px;
+    margin-bottom: 25px;
     font-family: 'Raleway', 'Helvetica Neue', 'Open Sans Bold', Helvetica, Arial, 'Arial Bold', sans-serif;
-    font-size: 26px;
+    font-size: 24px;
     font-style: normal;
     font-weight: 200;
     text-transform: uppercase;
     color: #FFF;
 }
 
-.intro-cap {
-    font-size: 24px;
-}
-
 .intro-smallcap {
     font-family: 'Raleway' , "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif;
     font-size: 22px;
@@ -117,12 +115,28 @@
 }
 
 .header_slider > .carousel {
-    display: flex;
-    flex-direction: column;
     height: 100%;
-    align-items: stretch;
+}
+
+.header_slider > .carousel .carousel-inner {
+    height: 100%;
 }
 
 .header_slider > .carousel .item {
-    padding-top: 150px;
+    height: 100%;
+}
+
+.header_slider > .carousel .item .container {
+    padding-top: 25px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.header_slider > .carousel .bg_img {
+    position: absolute;
+    top: 0;
+    z-index: -1;
+    width: 100%;
 }

ungleich_page/templates/ungleich_page/includes/_header.html

@@ -1,8 +1,7 @@
-{% load static %}
+{% load static i18n %}
-{% load i18n %}
 
 <header class="header_slider">
-  <div id="carousel-header-ungleich" class="carousel slide" data-ride="carousel" data-interval="5000">
+  <div id="carousel-header-ungleich" class="carousel slide" data-ride="carousel" data-interval="2000">
     <!-- Indicators -->
     <ol class="carousel-indicators">
       <li data-target="#carousel-header-ungleich" data-slide-to="0" class="active"></li>
@@ -13,23 +12,31 @@
     <!-- Wrapper for slides -->
     <div class="carousel-inner" role="listbox">
       <div class="item active">
+        <img class="bg_img" src="{% static 'ungleich_page/img/header-bg.jpg' %}">
         <div class="container">
-    			<div>
+          <div>
-    			  <img src="{% static 'ungleich_page/img/logo_200x200.svg'%}" heigh="300" alt="" class="logo-image" img-responsive="" width="300" />
+            <img src="{% static 'ungleich_page/img/logo_200x200.svg'%}" heigh="300" alt="" class="logo-image" img-responsive="" width="300">
-    			  <p></p><p></p><br>
+            <div class="intro-cap">
-    			  <div class="intro-cap">
+              {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
-    			    <span class="intro-cap">
+            </div>
-    			      {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
+          </div>
-    			    </span>
-    			  </div>
-    			</div>
         </div>
       </div>
       <div class="item">
-        <h1 style="color: #fff; margin-top: 150px;">slide 2</h1>
+        <img class="bg_img" src="{% static 'ungleich_page/img/glasfaser/header-nico-sans.jpg' %}">
+        <div class="container">
+          <div class="intro-cap">
+            {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
+          </div>
+        </div>
       </div>
       <div class="item">
-        <h1 style="color: #fff; margin-top: 150px;">slide 3</h1>
+        <img class="bg_img" src="{% static 'ungleich_page/img/portfolio/startup-framework-preview.jpg' %}">
+        <div class="container">
+          <div class="intro-cap">
+            {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
+          </div>
+        </div>
       </div>
     </div>
   </div>