Add different backgrounds for other 2 colorful sections

This commit is contained in:
JC Brand 2014-05-06 22:30:37 +02:00
parent 3d2137a677
commit c38c5e4ae3
3 changed files with 43 additions and 7 deletions

View File

@ -128,13 +128,16 @@ a:focus {
} }
} }
.intro { .features-section, .outro, .intro {
display: table; display: table;
width: 100%; width: 100%;
height: auto; height: auto;
padding: 100px 0; padding: 100px 0;
text-align: center; text-align: center;
color: #fff; color: #fff;
}
.intro {
background: url(images/header.jpg) no-repeat bottom center scroll; background: url(images/header.jpg) no-repeat bottom center scroll;
background-color: #000; background-color: #000;
-webkit-background-size: cover; -webkit-background-size: cover;
@ -143,6 +146,22 @@ a:focus {
-o-background-size: cover; -o-background-size: cover;
} }
.features-section {
background: url('images/bgtr.svg') top right no-repeat,
url('images/bgbl.svg') bottom left no-repeat,
url('images/bgbl.svg') bottom left no-repeat,
url('images/overlay.png'),
linear-gradient(45deg, #b39c68, #a56365, #412e4c);
}
.outro {
height: 100%;
background: url('images/bgtr.svg') top right no-repeat,
url('images/bgbl.svg') bottom left no-repeat,
url('images/overlay.png'),
linear-gradient(45deg, #384955, #655361, #85505f);
}
.intro-body { .intro-body {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;

View File

@ -103,7 +103,7 @@
</div> </div>
</section> </section>
<section class="intro content-section" id="features"> <section class="features-section content-section" id="features">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-lg-4">
@ -188,7 +188,7 @@
</div> </div>
</section> </section>
<section class="intro content-section" id="contact"> <section class="outro content-section" id="contact">
<div class="intro-body"> <div class="intro-body">
<div class="container"> <div class="container">
<div class="row"> <div class="row">

View File

@ -133,22 +133,39 @@ a:focus {
} }
// Full Page Image Intro Section // Full Page Image Intro Section
.features-section, .outro, .intro {
.intro {
display: table; display: table;
width: 100%; width: 100%;
height: auto; height: auto;
padding: 100px 0; padding: 100px 0;
text-align: center; text-align: center;
color: @light; color: #fff;
}
.intro {
background: url(images/header.jpg) no-repeat bottom center scroll; background: url(images/header.jpg) no-repeat bottom center scroll;
background-color: @dark; background-color: #000;
-webkit-background-size: cover; -webkit-background-size: cover;
-moz-background-size: cover; -moz-background-size: cover;
background-size: cover; background-size: cover;
-o-background-size: cover; -o-background-size: cover;
} }
.features-section {
background: url('images/bgtr.svg') top right no-repeat,
url('images/bgbl.svg') bottom left no-repeat,
url('images/bgbl.svg') bottom left no-repeat,
url('images/overlay.png'),
linear-gradient(45deg, #b39c68, #a56365, #412e4c);
}
.outro {
background: url('images/bgtr.svg') top right no-repeat,
url('images/bgbl.svg') bottom left no-repeat,
url('images/overlay.png'),
linear-gradient(45deg, #384955, #655361, #85505f);
}
.intro-body { .intro-body {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;