Merge pull request #538 from tiwariav/task/3905/ungleich_header_slider

Task/3905/ungleich landing header slider

datacenterlight/static/datacenterlight/css/landing-page.css

@@ -7,7 +7,7 @@
 body,
 html {
     width: 100%;
-    height: 100%;
+    min-height: 100%;
 }
 
 body,

digitalglarus/static/digitalglarus/css/agency.css

@@ -964,40 +964,6 @@ section h3.section-comment {
 	color: #494949;
 }
 
-small-comment {
-	font-family: "Open Sans", "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
-	margin-bottom:  none;
-	font-transform: none;
-	font-size:10px;
-	font-weight:400;
-	color: #777
-}
-
-logo-image {
-    z-index: 100;
-    position: absolute;
-    left: 0;
-    width: 80px;
-    height: 80px;
-    margin-left: 0;
-    border: 7px solid #f1f1f1;
-    border-radius: 100%;
-    text-align: center;
-    color: #fff;
-    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 +972,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

@@ -960,40 +960,6 @@ section h3.section-comment {
 	color: #494949;
 }
 
-small-comment {
-	font-family: "Open Sans", "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
-	margin-bottom:  none;
-	font-transform: none;
-	font-size:10px;
-	font-weight:400;
-	color: #777
-}
-
-logo-image {
-    z-index: 100;
-    position: absolute;
-    left: 0;
-    width: 80px;
-    height: 80px;
-    margin-left: 0;
-    border: 7px solid #f1f1f1;
-    border-radius: 100%;
-    text-align: center;
-    color: #fff;
-    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 +968,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/locale/de/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-11-06 00:24+0530\n"
+"POT-Creation-Date: 2017-11-26 00:34+0530\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -102,6 +102,15 @@ msgstr ""
 "ungleich startet das Projekt <a href=\"https://www.alplora.ch/de/\">AlpLora</"
 "a>, mit dem Tiere via LoRaWAN geortet werden können"
 
+msgid "ungleich starts to give basic computer courses for refugees."
+msgstr "ungleich bietet einen PC-Grundkurs für Flüchtlinge an."
+
+msgid ""
+"ungleich starts computer learning club for locals, \"Digitale Building "
+"ungleich.\""
+msgstr ""
+"ungleich gründet den Verein Digitale Bildung ungleich für Ortsansässige."
+
 msgid ""
 "ungleich sells <a href=\"https://www.alplora.ch/de/\">Alplora</a> to an IoT "
 "startup in canton Zürich."

ungleich_page/static/ungleich_page/css/agency.css

@@ -4,9 +4,21 @@
  * For details, see http://www.apache.org/licenses/LICENSE-2.0.
  */
 
+html {
+    overflow-x: hidden;
+}
+
 body {
     overflow-x: hidden;
-    font-family: "Ralesay" , "Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+}
+
+.row-eq-height {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .text-muted {
@@ -198,8 +210,8 @@ fieldset[disabled] .btn-xl.active {
 }
 
 .navbar-default .navbar-toggle {
-    border-color: #fed136;
-    background-color: #fed136;
+    /*border-color: #fed136;
+    background-color: #fed136;*/
 }
 
 .navbar-default .navbar-toggle .icon-bar {
@@ -237,6 +249,10 @@ fieldset[disabled] .btn-xl.active {
     background-color: #fec503;
 }
 
+.navbar-default .navbar-brand {
+   padding: 12px;
+}
+
 @media(min-width:768px) {
     .navbar-default {
 	padding: 25px 0;
@@ -263,23 +279,19 @@ fieldset[disabled] .btn-xl.active {
 	background-color: #222;
     }
 
-    .navbar-default.navbar-shrink .navbar-brand {
-	   font-size: 1.5em;
+    .navbar-default .navbar-brand {
        padding: 8px;
     }
 }
 
+.navbar-default .navbar-brand > img {
+    height: 100%;
+}
+
 header {
     text-align: center;
     color: #fff;
-    background-attachment: scroll;
-    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;
+    background: rgba(0,0,0,0.25);
 }
 
 header .intro-text {
@@ -329,29 +341,42 @@ header .intro-text .intro-heading {
 }
 
 section {
-    padding: 100px 0;
+    padding: 75px 0;
+}
+
+@media(max-width:767px) {
+    section {
+        padding: 50px 0;
+    }
 }
 
 section h2.section-heading {
 	margin-top: 0;
 	margin-bottom: 15px;
-	font-size: 40px;
+	font-size: 26px;
 	color: #494949;
 }
 
 section h3.section-subheading {
-	margin-bottom: 75px;
+	margin-bottom: 50px;
 	text-transform: none;
 	font-family: 'Raleway', "Helvetica Neue", "Open Sans", "Droid Serif", Helvetica, Arial, sans-serif;
-	font-size: 18px;
+	font-size: 16px;
 	font-weight: 400;
 	color: #494949;
-	line-height: normal;
+	line-height: 1.4;
 }
 
 @media(min-width:768px) {
     section {
-	padding: 150px 0;
+	   padding: 125px 0;
+    }
+    section h2.section-heading {
+        font-size: 40px;
+    }
+    section h3.section-subheading {
+        font-size: 18px;
+        margin-bottom: 75px;
     }
 }
 
@@ -418,7 +443,7 @@ section h3.section-subheading {
 }
 
 #portfolio .portfolio-item .portfolio-caption h4 {
-	margin: 0;
+	margin: 0 0 17px;
 	text-transform: none;
 	color: #494949;
 }
@@ -437,7 +462,7 @@ section h3.section-subheading {
 	display: inline-block
 }
 
-@media(min-width:767px) {
+@media(min-width:768px) {
     #portfolio .portfolio-item {
 	margin: 0 0 30px;
     }
@@ -547,6 +572,10 @@ section h3.section-subheading {
     color: inherit;
 }
 
+.timeline .timeline-heading h4 {
+    margin-bottom: 7px;
+}
+
 .timeline .timeline-heading h4.subheading {
     text-transform: none;
 }
@@ -562,14 +591,14 @@ section h3.section-subheading {
     }
 
     .timeline>li {
-	margin-bottom: 100px;
+	margin-bottom: 75px;
 	min-height: 100px;
     }
 
     .timeline>li .timeline-panel {
 	float: left;
 	width: 41%;
-	padding: 0 20px 20px 30px;
+	padding: 0 20px 20px;
 	text-align: right;
     }
 
@@ -588,7 +617,7 @@ section h3.section-subheading {
 
     .timeline>li.timeline-inverted>.timeline-panel {
 	float: right;
-	padding: 0 30px 20px 20px;
+	padding: 0 20px 20px;
 	text-align: left;
     }
 }
@@ -599,7 +628,7 @@ section h3.section-subheading {
     }
 
     .timeline>li .timeline-panel {
-	padding: 0 20px 20px;
+	padding: 10px 20px 20px;
     }
 
     .timeline>li .timeline-image {
@@ -615,7 +644,7 @@ section h3.section-subheading {
     }
 
     .timeline>li.timeline-inverted>.timeline-panel {
-	padding: 0 20px 20px;
+	padding: 10px 20px 20px;
     }
 }
 
@@ -625,7 +654,7 @@ section h3.section-subheading {
     }
 
     .timeline>li .timeline-panel {
-	padding: 0 20px 20px 100px;
+	padding: 10px 20px 20px 100px;
     }
 
     .timeline>li .timeline-image {
@@ -644,7 +673,7 @@ section h3.section-subheading {
 }
 
 .team-member {
-    margin-bottom: 50px;
+    margin-bottom: 25px;
     text-align: center;
 }
 
@@ -654,11 +683,27 @@ section h3.section-subheading {
 }
 
 .team-member h4 {
-    margin-top: 25px;
-    margin-bottom: 0;
+    margin-top: 10px;
+    margin-bottom: 10px;
     text-transform: none;
 }
 
+@media(max-width:767px) {
+    .team-member .team-member-caption p {
+        line-height: 1.5;
+    }
+}
+
+@media(min-width:768px) {
+    .team-member {
+        margin-bottom: 50px;
+    }
+    .team-member h4 {
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+}
+
 .team-member p {
     margin-top: 0;
 }
@@ -668,15 +713,33 @@ aside.clients img {
 }
 
 section#contact {
-    background-color: #222;
-    background-image: url(../img/map-image.png);
-    background-position: center;
-    background-repeat: no-repeat;
+    position: relative;
+    background: rgba(0,0,0,0.75);
+}
+
+section#contact .bg_img {
+    filter: blur(1px);
+}
+
+section#contact a {
+    color: #79bcf7;
 }
 
 section#contact .section-heading {
 	color: #fff;
-	font-size: 36px;
+	font-size: 32px;
+}
+
+@media(max-width:767px) {
+    aside.clients img {
+        margin: 20px auto;
+    }
+    section#contact .section-heading {
+        font-size: 26px;
+    }
+    section#contact .intro-smallcap {
+        font-size: 18px;
+    }
 }
 
 section#contact .form-group {
@@ -890,61 +953,15 @@ section h3.section-comment {
 	color: #494949;
 }
 
-small-comment {
-	font-family: "Open Sans", "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
-	margin-bottom:  none;
-	font-transform: none;
-	font-size:10px;
-	font-weight:400;
-	color: #777
-}
-
-logo-image {
-    z-index: 100;
-    position: absolute;
-    left: 0;
-    width: 80px;
-    height: 80px;
-    margin-left: 0;
-    border: 7px solid #f1f1f1;
-    border-radius: 100%;
-    text-align: center;
-    color: #fff;
-    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;
   border: 0;
   background-color: #fed136;
 }
-@media (min-width: 740px)
-.carousel-inner, .text-carousel .carousel-inner {
+
+@media (min-width: 740px) {
+    .carousel-inner, .text-carousel .carousel-inner {
         min-height: 225px;
+    }
 }
 
 .carousel-text {
@@ -952,7 +969,16 @@ h6 intro-smallcap {
 	font-family:'Raleway' , Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
 	font-size : 20px;
 	font-weight : 100;
-	lign-heignt: 2px;
 	color : #666;
 	text-align : center;
 }
+
+@media (max-width: 767px) {
+    .carousel-text {
+        height: 220px;
+        overflow: scroll;
+    }
+    .carousel-author {
+        height: 72px;
+    }
+}

ungleich_page/static/ungleich_page/css/ungleich.css

@@ -1,3 +1,17 @@
+.btn-trans {
+    color: #fff;
+    border: 2px solid #fff;
+    padding: 4px 18px;
+    letter-spacing: 0.6px;
+}
+
+.btn-trans:focus,
+.btn-trans:active,
+.btn-trans:hover {
+    background: #fff;
+    color: #333;
+}
+
 #page-top #services .container .row .col-lg-12.text-center .section-heading {
     font-style: normal;
     color: #494949;
@@ -19,18 +33,16 @@
 }
 
 .intro-cap {
+    margin-top: 25px;
+    margin-bottom: 15px;
     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;
@@ -90,12 +102,11 @@
 #portfolio .portfolio-item .portfolio-caption {
     height: 250px;
     overflow: hidden;
-    paddding: 10px;
 }
 
 .img-client {
   margin: 30px auto 30px auto;
-  height: 64px !important;
+  max-height: 64px !important;
 }
 
 .team-member .team-member-caption {
@@ -119,30 +130,138 @@
   #portfolio .portfolio-item .portfolio-caption {
     height: auto;
     overflow: hidden;
-    paddding: 10px;
+  }
+}
+
+@media (max-width: 767px) {
+    .intro-smallcap.sm_left,
+    .section-heading.sm_left,
+    .section-subheading.sm_left {
+        padding-left: 15px;
+        padding-right: 15px;
     }
 }
 
 .header_slider {
-    height: 100vh;
+    height: 95vh;
 }
 
-.header_slider > .carousel {
+.header_slider > .carousel,
+.header_slider > .carousel .carousel-inner,
+.header_slider > .carousel .item {
+    height: 100%;
+}
+
+.header_slider .carousel-indicators li.active {
+  background-color: #ffffff;
+}
+
+.header_slider .carousel-control {
+    display: none;
+}
+
+.header_slider .carousel-control .fa {
+    font-size: 2em;
+    position: absolute;
+    top: 50%;
+    margin-top: -50px;
+}
+
+.header_slider > .carousel .item .container {
+    overflow: auto;
+    padding: 50px 20px 60px;
+    height: 100%;
     display: flex;
     flex-direction: column;
+    justify-content: flex-end;
+}
+
+.header_slider .intro-cap {
+    text-align: right;
+    line-height: 1.1;
+    font-size: 23px;
+    margin-bottom: 12px;
+}
+
+.header_slider .btn-trans {
+    align-self: flex-end;
+    z-index: 2;
+    position: relative;
+}
+
+@media (min-width: 768px) {
+    .header_slider .intro-cap {
+        font-size: 2.25em;
+        margin-bottom: 20px;
+    }
+    .header_slider .carousel-control {
+        width: 50px;
+        display: block;
+    }
+    .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: 75px 50px;
+    }
+}
+
+@media (min-width: 992px) {
+    .header_slider .intro-cap {
+        font-size: 3.25em;
+    }
+}
+
+.header_slider .intro_lead {
+    color: #fff;
+    font-size: 1.55em;
+    text-align: right;
+    line-height: 1.4;
+    margin-bottom: 20px;
+}
+
+@media (max-width: 768px) {
+    .header_slider .intro_lead {
+        font-size: 1.1em;
+        margin-bottom: 15px;
+    }
+
+    .header_slider .carousel-indicators li {
+        margin: 1px 7px;
+        width: 16px;
+        height: 16px;
+    }
+    .header_slider .carousel-indicators li.active {
+        margin: 0 7px;
+        width: 18px;
+        height: 18px;
+    }
+}
+
+.bg_img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
     height: 100%;
-    align-items: stretch;
+    background-size: cover;
+    background-position: center;
 }
 
-.header_slider > .carousel .item {
-    padding-top: 150px;
-}
-
-
 .timeline>li .timeline-panel {
     display: flex;
+    flex-direction: column;
     min-height: 80px;
-    align-items: center;
+    align-items: stretch;
+    justify-content: center;
     padding-bottom: 15px;
 }
 
@@ -158,6 +277,12 @@
     padding-bottom: 0;
 }
 
+@media (max-width: 767px) {
+    .sm_left {
+        text-align: left !important;
+    }
+}
+
 
 @media (min-width: 768px) and (max-width: 991px) {
     .timeline>li .timeline-panel {
@@ -167,7 +292,12 @@
 
 @media (min-width: 992px) {
     .timeline>li .timeline-panel {
-        min-height: 170px;
+        min-height: 150px;
     }
 }
 
+@media (min-width: 1200px) {
+    .timeline>li .timeline-panel {
+        min-height: 170px;
+    }
+}

ungleich_page/templates/ungleich_page/includes/_about.html

@@ -9,7 +9,7 @@
     <ul class="timeline">
       <li>
         <div class="timeline-image">
-          <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/1.jpg' %}" alt="">
+          <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/2000.jpg' %}">
         </div>
         <div class="timeline-panel wow slideInLeft">
           <div class="timeline-heading">
@@ -23,7 +23,7 @@
       </li>
       <li class="timeline-inverted">
         <div class="timeline-image">
-          <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/2.jpg' %}" alt="">
+          <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/2013.jpg' %}">
         </div>
         <div class="timeline-panel wow slideInRight">
           <div class="timeline-heading">
@@ -37,7 +37,7 @@
       </li>
       <li>
         <div class="timeline-image">
-          <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/6.jpg' %}" alt="">
+          <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/2014.jpg' %}">
         </div>
         <div class="timeline-panel wow slideInLeft">
           <div class="timeline-heading">
@@ -51,40 +51,68 @@
       </li>
       <li class="timeline-inverted">
         <div class="timeline-image">
-          <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/4.jpg' %}" alt="">
+          <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/2015.jpg' %}">
         </div>
         <div class="timeline-panel wow slideInRight">
           <div class="timeline-heading">
-            <h4> 2015</h4>
+            <h4>2015</h4>
           </div>
           <div class="timeline-body">
             <p>{% trans "ungleich introduces HA-Hosting" %} </p>
             <p>{% trans "and introduces affordable 24X7 support." %}</p>
-            <p>{% trans "ungleich launches" %}<a href="https://digitalglarus.ch">
-                {% trans "Digital Glarus project" %}</a></p>
+            <p>
+              {% trans "ungleich launches" %}
+              <a href="https://digitalglarus.ch">{% trans "Digital Glarus project" %}</a>
+            </p>
           </div>
         </div>
       </li>
       <li>
         <div class="timeline-image">
-          <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/7.png' %}" alt="">
+          <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/2016a.jpg' %}">
         </div>
         <div class="timeline-panel wow slideInLeft">
           <div class="timeline-heading">
-            <h4> 2016</h4>
+            <h4>2016</h4>
           </div>
           <div class="timeline-body">
             <p>{% blocktrans %}ungleich launches <a href="https://www.alplora.ch/de/">Alplora</a>, an animal tracking service with LoraWAN technology.{% endblocktrans %}</p>
           </div>
         </div>
       </li>
+      <li>
+        <div class="timeline-image">
+          <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/2016b.jpg' %}">
+        </div>
+        <div class="timeline-panel wow slideInLeft">
+          <div class="timeline-heading">
+            <h4>2016</h4>
+          </div>
+          <div class="timeline-body">
+            <p>{% trans "ungleich starts to give basic computer courses for refugees." %}</p>
+          </div>
+        </div>
+      </li>
       <li class="timeline-inverted">
         <div class="timeline-image">
-          <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/8.png' %}" alt="">
+          <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/2017a.jpg' %}">
         </div>
         <div class="timeline-panel wow slideInRight">
           <div class="timeline-heading">
-            <h4> 2017</h4>
+            <h4>2017</h4>
+          </div>
+          <div class="timeline-body">
+            <p>{% trans 'ungleich starts computer learning club for locals, "Digitale Building ungleich."' %}</p>
+          </div>
+        </div>
+      </li>
+      <li class="timeline-inverted">
+        <div class="timeline-image">
+          <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/2017b.jpg' %}">
+        </div>
+        <div class="timeline-panel wow slideInRight">
+          <div class="timeline-heading">
+            <h4>2017</h4>
           </div>
           <div class="timeline-body">
             <p>{% blocktrans %}ungleich sells <a href="https://www.alplora.ch/de/">Alplora</a> to an IoT startup in canton Zürich.{% endblocktrans %}</p>
@@ -94,8 +122,11 @@
       </li>
       <li>
         <div class="timeline-image wow slideInDown">
+        </div>
+        <div class="timeline-panel wow slideInLeft">
+          <div class="timeline-heading timeline-heading-last">
             <h4>{% trans "and" %}<br>{% trans "the story continues!" %}</h4>
-          <p>&nbsp;</p>
+          </div>
         </div>
       </li>
     </ul>

ungleich_page/templates/ungleich_page/includes/_contact_us.html

@@ -2,6 +2,7 @@
 {% load i18n %}
 
 <section id="contact">
+    <div class="bg_img" style="background-image:url({% static 'digitalglarus/img/header_bg_2.png' %})"></div>
     <div class="container">
         <div class="wow fadeInDown">
             <div class="text-center wow fadeInDown">
@@ -13,17 +14,15 @@
                     </div>
                 {% endfor %}
                 <h2 class="section-heading">{% trans "Contact Us" %}</h2>
-                <br>
-
-                <h3 class="intro-smallcap">
+                <h3 class="intro-smallcap sm_left" style="line-height: 1.2;">
                     {% trans "Join us at" %} <a href="{% url 'digitalglarus:landing' %}">{% trans "Digital Glarus" %}</a>, {% trans "a great co-working space in the middle of Alps!" %} <br>
                     {% trans "You can contact us at" %}
                 </h3>
-                <h3 class="intro-smallcap">
+                <h3 class="intro-smallcap sm_left">
                     <a href="mailto:info@ungleich.ch"><i class="fa fa-envelope"></i> info@ungleich.ch</a>
                 </h3>
 
-                <h3 class="intro-smallcap"><i class="fa fa-phone"></i> (044) 534-66-22</h3>
+                <h3 class="intro-smallcap sm_left"><i class="fa fa-phone"></i> (044) 534-66-22</h3>
                 <!-- <h3 class="intro-smallcap">{% trans "or" %}</h3> -->
 
                 <!-- <h3 class="intro-smallcap">{% trans "Contact Us" %}</h3> -->

ungleich_page/templates/ungleich_page/includes/_header.html

@@ -1,17 +1,53 @@
-{% load static %}
-{% load i18n %}
+{% load static i18n %}
 
-<header>
+<header class="header_slider">
+  <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>
+      <li data-target="#carousel-header-ungleich" data-slide-to="1"></li>
+      <li data-target="#carousel-header-ungleich" data-slide-to="2"></li>
+    </ol>
+
+    <!-- Wrapper for slides -->
+    <div class="carousel-inner" role="listbox">
+      <div class="item active">
+        <div class="bg_img" style="background-image:url({% static 'ungleich_page/img/header-bg.jpg' %})"></div>
         <div class="container">
-		<div class="intro-text">
-		  <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">
-		    <span class="intro-cap">
             {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
-		    </span>
           </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>
+          <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="container">
+          <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>
+          <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/portfolio/startup-framework-preview.jpg' %})"></div>
+        <div class="container">
+          <div class="intro-cap">
+            {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
+          </div>
+          <a class="btn btn-trans" href="">Learn More</a>
+        </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>

ungleich_page/templates/ungleich_page/includes/_portfolio.html

@@ -3,35 +3,30 @@
 
 <section id="portfolio" class="bg-light-gray">
 	<div class="container">
-		<div class="row">
-		  <div class="col-lg-12 text-center wow fadeInDown">
+	  <div class="text-center wow fadeInUp">
 	    <h2 class="section-heading">{% trans "Our Products" %}</h2>
-		    <h3 class="section-subheading text-muted" style="line-height: 1.8;">{% blocktrans %}Our products include an innovative datacenter,<br>affordable VM hosting, and high speed fiber internet for canton Glarus.{% endblocktrans %}</h3>
-		  </div>
+	    <h3 class="section-subheading text-muted sm_left" style="line-height: 1.5;">{% blocktrans %}Our products include an innovative datacenter,<br>affordable VM hosting, and high speed fiber internet for canton Glarus.{% endblocktrans %}</h3>
 	  </div>
 		<div class="row">
 		  <div class="col-md-4 col-sm-6 portfolio-item wow fadeInUp" data-wow-delay="0.25s">
 		    <a href="{% url 'datacenterlight:index' %}"><img src="{% static 'ungleich_page/img/portfolio/datacenterlight.png' %}" class="img-responsive inline-block" alt=""></a>
 		    <div class="portfolio-caption inline-block">
 		      <h4>{% trans "Data Center Light" %}</h4>
-		      <p>&nbsp;</p>
-		      <p class="text-muted">{% trans "We offer the most affordable hosting in Switzerland. Data Center Light has full FOSS stack, 100% IPv6 and 100% SSD. Choose any configuration among CentOS, Debian, Ubuntu, Devuan, and FreeBSD." %} </p>
+		      <p class="text-muted sm_left">{% trans "We offer the most affordable hosting in Switzerland. Data Center Light has full FOSS stack, 100% IPv6 and 100% SSD. Choose any configuration among CentOS, Debian, Ubuntu, Devuan, and FreeBSD." %}</p>
 		    </div>
 		  </div>
 		  <div class="col-md-4 col-sm-6 portfolio-item wow fadeInUp" data-wow-delay="0.5s">
 		    <a href="{% url 'rails.hosting' %}"><img src="{% static 'ungleich_page/img/portfolio/startup-framework.png' %}" class="img-responsive inline-block" alt=""></a>
 		    <div class="portfolio-caption inline-block">
 		      <h4>{% trans "Rails Hosting" %} </h4>
-		      <p>&nbsp;</p>
-		      <p class="text-muted">{% trans "Ready to go live with your Ruby on Rails application? We offer you ready-to-deploy virtual machines or configure your existing infrastructure for Ruby on Rails." %}</p>
+		      <p class="text-muted sm_left">{% trans "Ready to go live with your Ruby on Rails application? We offer you ready-to-deploy virtual machines or configure your existing infrastructure for Ruby on Rails." %}</p>
 		    </div>
 		  </div>
 		  <div class="col-md-4 col-sm-6 portfolio-item wow fadeInUp" data-wow-delay="0.75s">
 		    <a href="{% url 'datacenterlight:glasfaser' %}"><img src="{% static 'ungleich_page/img/portfolio/glasfaser.png' %}" class="img-responsive inline-block" alt=""></a>
 		    <div class="portfolio-caption inline-block">
 		      <h4>{% trans "High Speed Internet" %}</h4>
-		      <p>&nbsp;</p>
-		      <p class="text-muted">{% trans "We offer high speed fiber internet in Glarus Süd, Glarus and Glarus Nord. Experience 100 Mbit/s and see how speed can change everything." %}</p>
+		      <p class="text-muted sm_left">{% trans "We offer high speed fiber internet in Glarus Süd, Glarus and Glarus Nord. Experience 100 Mbit/s and see how speed can change everything." %}</p>
 		    </div>
 		  </div>
 		</div>

ungleich_page/templates/ungleich_page/includes/_services.html

@@ -5,7 +5,7 @@
   <div class="container">
 	  <div class="text-center wow fadeInDown">
 	    <h2 class="section-heading">{% trans "our services" %}</h2>
-	    <h3 class="section-subheading text-muted">
+	    <h3 class="section-subheading text-muted sm_left">
 	    	{% trans "We support our clients in all areas of Unix infrastructure." %}<br/>
 	    	{% trans "Our top notch configuration management is refreshingly simple and reliable." %}
 	    </h3>
@@ -16,8 +16,7 @@
 		      <img src="{% static 'ungleich_page/img/team/5.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/hosting.png' %}" class="img-responsive img-circle img-toggle" alt="">
 		      <div class="team-member-caption inline-block">
 						<h4 class="portfolio-caption">{% trans "Hosting" %}</h4>
-						<p>&nbsp;</p>
-						<p><span class="text-muted">{% trans "Ruby on Rails. Java hosting, Django hosting, we make it everything run smooth and safe." %}</span></p>
+						<p class="text-muted">{% trans "Ruby on Rails. Java hosting, Django hosting, we make it everything run smooth and safe." %}</p>
 		      </div>
 		    </div>
 		  </div>
@@ -26,8 +25,7 @@
 		      <img src="{% static 'ungleich_page/img/team/4.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/configuration.png' %}" class="img-responsive img-circle img-toggle" alt="">
 		      <div class="team-member-caption inline-block">
 						<h4 class="portfolio-caption">{% trans "Configuration as a Service" %}</h4>
-						<p>&nbsp;</p>
-						<p><span class="text-muted">{% trans "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." %}</span></p>
+						<p class="text-muted">{% trans "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>
@@ -36,7 +34,6 @@
 		      <img src="{% static 'ungleich_page/img/team/6.jpg' %}"  data-replaced="{% static 'ungleich_page/img/services/linux.png' %}" class="img-responsive img-circle img-toggle cursor-pointer" alt="">
 		      <div class="team-member-caption inline-block">
 			      <h4 class="portfolio-caption">{% trans "Linux System Engineering" %}</h4>
-			      <p>&nbsp;</p>
 						<p class="text-muted">{% trans "Let your developers develop! We take care of your system administration. Gentoo, Archlinux, Debian, Ubuntu, and many more." %}</p>
 		      </div>
 		    </div>

ungleich_page/templates/ungleich_page/includes/_softwares.html

@@ -4,112 +4,112 @@
 	<div class="container">
 		<div class="row">
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/envato.jpg' %}" class="img-responsive img-centered" alt="">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/envato.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/designmodo.jpg' %}" alt="" class="img-responsive img-centered" height="51">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/designmodo.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/themeforest.jpg' %}" class="img-responsive img-centered" alt="">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/themeforest.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/creative-market.jpg' %}" class="img-responsive img-centered" alt="">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/creative-market.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		</div>
 		<div class="row">
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/logobig.jpg' %}" alt="" class="img-responsive img-centered" height="61" width="196">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/logobig.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/Gentoo-site_logo.png' %}" alt="" class="img-responsive img-centered" height="50">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/Gentoo-site_logo.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/debian.jpg' %}" alt="" class="img-responsive img-centered" height="36" width="145">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/debian.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/CentOS.jpg' %}" alt="" class="img-responsive img-centered" height="50" width="147">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/CentOS.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		</div>
 
 		<div class="row">
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/cdistbyungleich.jpg' %}" alt="" class="img-responsive img-centered" height="50" width="101">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/cdistbyungleich.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/Puppet.png' %}" alt="" class="img-responsive img-centered" height="50" width="161">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/Puppet.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/freebsd.png' %}" alt="" class="img-responsive img-centered" height="58" width="175">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/freebsd.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/NetBSD.png' %}" alt="" class="img-responsive img-centered" height="60" width="85">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/NetBSD.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		</div>
 		<div class="row">
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/openbsd.png' %}" alt="" class="img-responsive img-centered" height="50" width="196">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/openbsd.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/postsql.jpg' %}" alt="" class="img-responsive img-centered" height="72" width="197">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/postsql.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/mysql.png' %}" alt="" class="img-responsive img-centered" height="59" width="130">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/mysql.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/apache.png' %}" alt="" class="img-responsive img-centered" height="50" width="173">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/apache.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		</div>
 		<div class="row">
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/opennebula.png' %}" alt="" class="img-responsive img-centered" height="50" width="196">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/opennebula.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/gluster.png' %}" alt="" class="img-responsive img-centered" height="51" width="185">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/gluster.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/ceph.jpg' %}" alt="" class="img-responsive img-centered" height="40" width="145">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/ceph.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		  <div class="col-xs-3 col-md-3">
-		    <a href="#">
-		      <img src="{% static 'ungleich_page/img/logos/qemu.png' %}" alt="" class="img-responsive img-centered" height="44" width="133">
+		    <a href="#" class="center-block">
+		      <img src="{% static 'ungleich_page/img/logos/qemu.jpg' %}" class="img-responsive img-centered">
 		    </a>
 		  </div>
 		</div>

ungleich_page/templates/ungleich_page/includes/_team.html

@@ -39,7 +39,7 @@
 			    than before."
 			    {% endblocktrans %}
 			  			</p>
-				  		<p class="text-center">
+				  		<p class="text-center carousel-author">
 				    		<strong>- Luciano Franceschina</strong>, CTO at Teralytics
 				  		</p>
 						</div>
@@ -55,7 +55,7 @@
 			    saving, which is crucial for IT companies like ours."
 			   	{% endblocktrans %}
 			  			</p>
-						  <p class="text-center">
+						  <p class="text-center carousel-author">
 						    <strong> - Beat Seeliger </strong>, CTO at Panter AG
 						  </p>
 						</div>
@@ -76,7 +76,7 @@
 			    solid infrastructures."
 			    {% endblocktrans %}
 						  </p>
-						  <p class="text-center">
+						  <p class="text-center carousel-author">
 			  	{% blocktrans %}
 			    <strong>- Sebastian Plattner,</strong>
 			    Teamleader Development Cyber Security Products at RUAG