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
				
			
		| 
						 | 
				
			
			@ -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);
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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);
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -262,24 +262,16 @@ fieldset[disabled] .btn-xl.active {
 | 
			
		|||
	padding: 10px 0;
 | 
			
		||||
	background-color: #222;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .navbar-default.navbar-shrink .navbar-brand {
 | 
			
		||||
	   font-size: 1.5em;
 | 
			
		||||
       padding: 8px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.navbar-default .navbar-brand {
 | 
			
		||||
   padding: 8px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
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 {
 | 
			
		||||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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%;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -1,8 +1,7 @@
 | 
			
		|||
{% load static %}
 | 
			
		||||
{% load i18n %}
 | 
			
		||||
{% load static 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>
 | 
			
		||||
    			  <img src="{% static 'ungleich_page/img/logo_200x200.svg'%}" heigh="300" alt="" class="logo-image" img-responsive="" width="300" />
 | 
			
		||||
    			  <p></p><p></p><br>
 | 
			
		||||
            <img src="{% static 'ungleich_page/img/logo_200x200.svg'%}" heigh="300" alt="" class="logo-image" img-responsive="" width="300">
 | 
			
		||||
            <div class="intro-cap">
 | 
			
		||||
    			    <span class="intro-cap">
 | 
			
		||||
              {% trans "We  Design, Configure & Maintain <br> Your Linux Infrastructure " %}
 | 
			
		||||
    			    </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 & 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 & Maintain <br> Your Linux Infrastructure " %}
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue