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

This commit is contained in:
Arvind Tiwari 2017-11-25 02:34:26 +05:30
parent 8976f4a8b5
commit 38c0c653df
6 changed files with 63 additions and 137 deletions

View file

@ -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;
} }

View file

@ -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 */

View file

@ -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;

View file

@ -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;

View file

@ -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%;
} }

View file

@ -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 &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> </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 &amp; 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 &amp; Maintain <br> Your Linux Infrastructure " %}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>