[IMP]Improved code for parallax.
bzr revid: bth@tinyerp.com-20131022090654-sobvpbizpzovr5ee
This commit is contained in:
parent
9bd0b9a9f4
commit
e546cc4550
|
@ -1,154 +0,0 @@
|
|||
/****************************
|
||||
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;
|
||||
}
|
|
@ -438,3 +438,7 @@ a[data-publish][data-publish='on']:hover .css_published {
|
|||
::selection {
|
||||
background: rgba(150, 150, 220, 0.3);
|
||||
}
|
||||
|
||||
.pt90 {
|
||||
padding-top: 90px;
|
||||
}
|
||||
|
|
|
@ -335,3 +335,6 @@ a[data-publish]
|
|||
|
||||
::selection
|
||||
background: rgba(150, 150, 220, 0.3)
|
||||
|
||||
.pt90
|
||||
padding-top: 90px
|
||||
|
|
|
@ -8,7 +8,6 @@
|
|||
<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">
|
||||
|
@ -462,30 +461,12 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
|
|||
<div class="oe_structure"/>
|
||||
<div class="container mb32">
|
||||
<div class="row col-wrap" id="aboutus">
|
||||
<section class="headertop needhead col-sm-12 text-center parallax" 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-12 text-center" data-snippet-id="parallax">
|
||||
<div class="parallax oe_structure oe_big" style="background-image: url('/website/static/src/img/parallax/background1.jpg')" data-stellar-background-ratio="0.3">
|
||||
<h1 class="pt90">About us</h1>
|
||||
<h3 class="text-muted">A passion for great products</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8 mt16">
|
||||
<p>
|
||||
We are a team of passionated people whose goal is to improve everyone's
|
||||
|
|
Loading…
Reference in New Issue