slider styles fix

ungleich_page/static/ungleich_page/css/ungleich.css

@@ -122,27 +122,52 @@
 }
 
 .header_slider {
-    height: 100vh;
+    height: 95vh;
-}
-
-.header_slider > .carousel {
-    height: 100%;
-}
-
-.header_slider > .carousel .carousel-inner {
-    height: 100%;
 }
 
+.header_slider > .carousel,
+.header_slider > .carousel .carousel-inner,
 .header_slider > .carousel .item {
     height: 100%;
 }
 
+.header_slider .carousel-control .fa {
+    font-size: 2em;
+    position: absolute;
+    top: 50%;
+    margin-top: -50px;
+}
+
+.header_slider .carousel-control .fa-angle-left {
+    left: 5px;
+}
+.header_slider .carousel-control .fa-angle-right {
+    right: 5px;
+}
+
 .header_slider > .carousel .item .container {
-    padding-top: 25px;
+    overflow: auto;
+    padding: 50px 25px 75px;
     height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-end;
+}
+
+@media (min-width: 768px) {
+    .header_slider .carousel-control .fa-angle-left {
+        left: 25px;
+    }
+    .header_slider .carousel-control .fa-angle-right {
+        right: 25px;
+    }
+    .header_slider .carousel-control .fa {
+        font-size: 4em;
+    }
+    .header_slider > .carousel .item .container {
+        overflow: auto;
+        padding: 100px 50px;
+    }
 }
 
 .header_slider > .carousel .bg_img {
@@ -156,6 +181,36 @@
     background-position: center;
 }
 
+.header_slider .intro-cap {
+    padding-bottom: 25px;
+    font-weight: bold;
+    text-align: right;
+}
+
+@media (min-width: 768px) {
+    .header_slider .intro-cap {
+        font-size: 2.25em;
+    }
+}
+
+@media (min-width: 992px) {
+    .header_slider .intro-cap {
+        font-size: 3.25em;
+    }
+}
+
+.header_slider .intro_lead {
+    color: #fff;
+    font-size: 1.75em;
+    text-align: right;
+    line-height: 1.4;
+}
+
+@media (max-width: 768px) {
+    .header_slider .intro_lead {
+        font-size: 1.2em;
+    }
+}
 
 .timeline>li .timeline-panel {
     display: flex;

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-ride="carousel" data-interval="2000">
+  <div id="carousel-header-ungleich" class="carousel slide" data-interval="2000">
     <!-- Indicators -->
     <ol class="carousel-indicators">
       <li data-target="#carousel-header-ungleich" data-slide-to="0" class="active"></li>
@@ -14,12 +14,10 @@
       <div class="item active">
         <div class="bg_img" style="background-image:url({% static 'ungleich_page/img/header-bg.jpg' %})"></div>
         <div class="container">
-          <div>
-            <img src="{% static 'ungleich_page/img/logo_200x200.svg'%}" heigh="300" alt="" class="logo-image" img-responsive="" width="300">
           <div class="intro-cap">
             {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
           </div>
-          </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>
         </div>
       </div>
       <div class="item">
@@ -28,6 +26,7 @@
           <div class="intro-cap">
             {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
           </div>
+          <p class="intro_lead">Ruby on Rails, Django, Nothing else.</p>
         </div>
       </div>
       <div class="item">
@@ -39,5 +38,13 @@
         </div>
       </div>
     </div>
+    <a class="left carousel-control" href="#carousel-header-ungleich" role="button" data-slide="prev">
+      <span class="fa fa-angle-left" aria-hidden="true"></span>
+      <span class="sr-only">Previous</span>
+    </a>
+    <a class="right carousel-control" href="#carousel-header-ungleich" role="button" data-slide="next">
+      <span class="fa fa-angle-right" aria-hidden="true"></span>
+      <span class="sr-only">Next</span>
+    </a>
   </div>
 </header>