image set to background of each slide instead of a common background
This commit is contained in:
parent
8976f4a8b5
commit
38c0c653df
6 changed files with 63 additions and 137 deletions
|
@ -67,7 +67,7 @@ h6 {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 400px){
|
@media only screen and (max-width: 400px){
|
||||||
h1, h2 {
|
h1, h2 {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
@ -404,8 +404,8 @@ section h3.section-subheading {
|
||||||
@media(min-width:768px) {
|
@media(min-width:768px) {
|
||||||
section {
|
section {
|
||||||
padding: 50px 0;
|
padding: 50px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
.service-heading {
|
.service-heading {
|
||||||
margin: 15px 0;
|
margin: 15px 0;
|
||||||
|
@ -416,7 +416,7 @@ section h3.section-subheading {
|
||||||
|
|
||||||
.no-padding {
|
.no-padding {
|
||||||
padding:0;
|
padding:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-gutter > [class*='col-'] {
|
.no-gutter > [class*='col-'] {
|
||||||
padding-top:0;
|
padding-top:0;
|
||||||
|
@ -987,17 +987,6 @@ logo-image {
|
||||||
background-color: #a1cfd7;
|
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 {
|
.intro-small {
|
||||||
font-family: 'Montserrat' ,'Raleway', "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif;
|
font-family: 'Montserrat' ,'Raleway', "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
@ -1006,26 +995,7 @@ intro-cap {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #FFF;
|
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 {
|
.darkened-container {
|
||||||
/* Fallback for web browsers that doesn't support RGBa */
|
/* Fallback for web browsers that doesn't support RGBa */
|
||||||
background: rgb(0, 0, 0);
|
background: rgb(0, 0, 0);
|
||||||
|
@ -1043,7 +1013,7 @@ h6 intro-smallcap {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.43;
|
line-height: 1.43;
|
||||||
height: 86px; /* this is wrong */
|
height: 86px; /* this is wrong */
|
||||||
/*color: #484848;*/
|
/*color: #484848;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-indicators li {
|
.carousel-indicators li {
|
||||||
|
@ -1143,7 +1113,7 @@ body {
|
||||||
|
|
||||||
.carousel-control {
|
.carousel-control {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
/* Background images are set within the HTML using inline CSS, not here */
|
/* Background images are set within the HTML using inline CSS, not here */
|
||||||
|
|
||||||
|
@ -1231,7 +1201,7 @@ hr {
|
||||||
padding-top: 2em;
|
padding-top: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.donate {
|
.donate {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -400,8 +400,8 @@ section h3.section-subheading {
|
||||||
@media(min-width:768px) {
|
@media(min-width:768px) {
|
||||||
section {
|
section {
|
||||||
padding: 50px 0;
|
padding: 50px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
.service-heading {
|
.service-heading {
|
||||||
margin: 15px 0;
|
margin: 15px 0;
|
||||||
|
@ -412,7 +412,7 @@ section h3.section-subheading {
|
||||||
|
|
||||||
.no-padding {
|
.no-padding {
|
||||||
padding:0;
|
padding:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-gutter > [class*='col-'] {
|
.no-gutter > [class*='col-'] {
|
||||||
padding-top:0;
|
padding-top:0;
|
||||||
|
@ -983,17 +983,6 @@ logo-image {
|
||||||
background-color: #a1cfd7;
|
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 {
|
.intro-small {
|
||||||
font-family: 'Montserrat' ,'Raleway', "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif;
|
font-family: 'Montserrat' ,'Raleway', "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
@ -1002,26 +991,7 @@ intro-cap {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #FFF;
|
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 {
|
.darkened-container {
|
||||||
/* Fallback for web browsers that doesn't support RGBa */
|
/* Fallback for web browsers that doesn't support RGBa */
|
||||||
background: rgb(0, 0, 0);
|
background: rgb(0, 0, 0);
|
||||||
|
@ -1039,7 +1009,7 @@ h6 intro-smallcap {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.43;
|
line-height: 1.43;
|
||||||
height: 86px; /* this is wrong */
|
height: 86px; /* this is wrong */
|
||||||
/*color: #484848;*/
|
/*color: #484848;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-indicators li {
|
.carousel-indicators li {
|
||||||
|
@ -1139,7 +1109,7 @@ body {
|
||||||
|
|
||||||
.carousel-control {
|
.carousel-control {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
/* Background images are set within the HTML using inline CSS, not here */
|
/* Background images are set within the HTML using inline CSS, not here */
|
||||||
|
|
||||||
|
|
|
@ -10,17 +10,13 @@
|
||||||
|
|
||||||
.intro-cap {
|
.intro-cap {
|
||||||
font-family: 'Raleway', 'Helvetica Neue', 'Open Sans Bold', Helvetica, Arial, 'Arial Bold', sans-serif;
|
font-family: 'Raleway', 'Helvetica Neue', 'Open Sans Bold', Helvetica, Arial, 'Arial Bold', sans-serif;
|
||||||
font-size: 26px;
|
font-size: 24px;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro-cap {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-smallcap {
|
.intro-smallcap {
|
||||||
font-family: 'Raleway' , "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif;
|
font-family: 'Raleway' , "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
|
|
|
@ -262,24 +262,16 @@ fieldset[disabled] .btn-xl.active {
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.navbar-default.navbar-shrink .navbar-brand {
|
.navbar-default .navbar-brand {
|
||||||
font-size: 1.5em;
|
padding: 8px;
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
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 {
|
header .intro-text {
|
||||||
|
@ -913,29 +905,6 @@ logo-image {
|
||||||
background-color: #fed136;
|
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 {
|
.carousel-indicators li.active, .text-carousel .carousel-indicators li.active {
|
||||||
width: 15px;
|
width: 15px;
|
||||||
height: 15px;
|
height: 15px;
|
||||||
|
|
|
@ -8,18 +8,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro-cap {
|
.intro-cap {
|
||||||
|
margin-top: 25px;
|
||||||
|
margin-bottom: 25px;
|
||||||
font-family: 'Raleway', 'Helvetica Neue', 'Open Sans Bold', Helvetica, Arial, 'Arial Bold', sans-serif;
|
font-family: 'Raleway', 'Helvetica Neue', 'Open Sans Bold', Helvetica, Arial, 'Arial Bold', sans-serif;
|
||||||
font-size: 26px;
|
font-size: 24px;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro-cap {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-smallcap {
|
.intro-smallcap {
|
||||||
font-family: 'Raleway' , "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif;
|
font-family: 'Raleway' , "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
|
@ -117,12 +115,28 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.header_slider > .carousel {
|
.header_slider > .carousel {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
align-items: stretch;
|
}
|
||||||
|
|
||||||
|
.header_slider > .carousel .carousel-inner {
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header_slider > .carousel .item {
|
.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%;
|
||||||
}
|
}
|
|
@ -1,8 +1,7 @@
|
||||||
{% load static %}
|
{% load static i18n %}
|
||||||
{% load i18n %}
|
|
||||||
|
|
||||||
<header class="header_slider">
|
<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 -->
|
<!-- Indicators -->
|
||||||
<ol class="carousel-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="0" class="active"></li>
|
||||||
|
@ -13,23 +12,31 @@
|
||||||
<!-- Wrapper for slides -->
|
<!-- Wrapper for slides -->
|
||||||
<div class="carousel-inner" role="listbox">
|
<div class="carousel-inner" role="listbox">
|
||||||
<div class="item active">
|
<div class="item active">
|
||||||
|
<img class="bg_img" src="{% static 'ungleich_page/img/header-bg.jpg' %}">
|
||||||
<div class="container">
|
<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 & Maintain <br> Your Linux Infrastructure " %}
|
||||||
<span class="intro-cap">
|
</div>
|
||||||
{% trans "We Design, Configure & Maintain <br> Your Linux Infrastructure " %}
|
</div>
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<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 & Maintain <br> Your Linux Infrastructure " %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<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 & Maintain <br> Your Linux Infrastructure " %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue