[IMP]Added parallax slide.

bzr revid: bth@tinyerp.com-20131018141002-e72q1zczka6hdllb
This commit is contained in:
bth-openerp
2013-10-18 19:40:02 +05:30
parent b6b6dd70fc
commit cec7310d82
6 changed files with 181 additions and 4 deletions
+154
View File
@@ -0,0 +1,154 @@
/****************************
SCROLL&STRAP TEMPLATE V 1.0.
http://sitediscount.ru
******************************/
/************************ HEADER ************************************************/
section #header-section {
padding-bottom:70px;
display:inline-block;
min-height:750px;
position:relative;
padding-top:0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
overflow:hidden;
}
#header-section {
background: #222 url(../img/background1.jpg) bottom center no-repeat fixed;
height: 650px;
height: 650px;
/*width: 100%;
max-width:100%;*/
width:1352px;
z-index: -999;
padding-top:0px;
margin-left:-92px;
}
#header-section .hero-unit {
z-index: 1;
}
#header-section .wrap-hero{
position:fixed;
top:200px;
text-align:center;
width:100%;
left:0px;
min-width:100%;
display:block;
}
#header-section .logowrap{
position:absolute;
top:10px;
}
#header-section .hero-unit.hide{
filter: alpha(opacity=0);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* IE 5.5+*/
-moz-opacity: 0; /* Mozilla 1.6 - */
-khtml-opacity: 0; /* Konqueror 3.1, Safari 1.1 */
opacity: 0; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
#header-section .hero-unit{
background:none;
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
text-align:center;
max-width:1350px;
color:#fff;
text-shadow: 0 1px 2px #000000;
margin-left:auto;
margin-right:auto;
}
.inner-wrap-hero{
padding:10px 20px;
text-align:center;
}
#header-section .hero-unit h1 span{
/*margin-top:0px;
font-size:65px;*/
display:inline-block;
font-size:70px;
color: #fff/*rgba(250, 250, 250, 1)*/;
line-height: 60px;
font-weight: 400px;
/*margin:5px 0px -5px;*/
padding:15px 20px;
text-shadow:none;
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
/*opacity: 0;*/
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-webkit-transition:all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
#header-section .hero-unit h1 span.active{
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
transform: scale(1,1);
-ms-transform: scale(1,1); /* IE 9 */
-webkit-transform: scale(1,1); /* Safari and Chrome */
-o-transform: scale(1,1); /* Opera */
-moz-transform: scale(1,1); /* Firefox */
}
#header-section .hero-unit span{
margin:10px 0 10px;
display:inline-block;
font-weight:300;
}
#header-section .hero-unit span:first-child{
border-top: 1px rgba(250, 250, 250, 1);
border-bottom: 1px rgba(250, 250, 250, 1);
background: rgba(0, 0, 0, 0.0.5);
}
#header-section .hero-unit div.logo a img{
width:400px;
}
@@ -367,6 +367,7 @@ footer {
background: #eee top center no-repeat fixed;
width: 100%;
background-size: 100%;
padding: 0px;
}
.parallax_full.oe_small .container {
height: 200px;
@@ -282,6 +282,7 @@ footer
background: #eee top center no-repeat fixed
width: 100%
background-size: 100%
padding: 0px
&.oe_small .container
height: 200px
&.oe_medium .container
Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

+25 -4
View File
@@ -8,6 +8,7 @@
<template id="website.theme" name="Theme">
<link id="bootstrap_css" rel='stylesheet' href='/website/static/lib/bootstrap/css/bootstrap.css' t-ignore="true"/>
<link id="website_css" rel='stylesheet' href='/website/static/src/css/website.css' t-ignore="true"/>
<link id="website_css" rel='stylesheet' href='/website/static/src/css/style.css' t-ignore="true"/>
</template>
<template id="layout" name="Main layout">
@@ -454,10 +455,30 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
<div class="oe_structure"/>
<div class="container mb32">
<div class="row col-wrap" id="aboutus">
<div class="col-sm-12 text-center parallax_full" data-snippet-id="parallax" style="background-image: url('/website/static/src/img/banner/business_guy.jpg')">
<h1>About us</h1>
<h3 class="text-muted">Great Product for Great People</h3>
</div>
<section class="headertop needhead col-sm-12 text-center parallax_full" id="header-section" style="background-position: 50% -64px;" data-snippet-id="parallax">
<header class="container">
<div class="row-fluid">
<div class="wrap-hero">
<div class="hero-unit text-center">
<!--LOGO-->
<div class="logo">
<a href="#" title="openerp">
<img src="/website/static/src/img/logo.png" alt="logo"/>
</a>
</div>
<!--/ LOGO-->
<div class="inner-wrap-hero">
<h1 class="text-center main-color">
<span class="active">Great Product for Great People</span>
</h1>
</div>
</div>
</div><!-- / HERO UNIT-->
</div><!-- / HERO WRAP-->
</header><!-- / HEADER MARKETING SLOGAN container-->
</section>
<div class="col-sm-8 mt16">
<p>
We are a team of passionated people whose goal is to improve everyone's