fuck
This commit is contained in:
Robin Hägg
parent
bdbf73f9fc
commit
8db5e69a4a
@ -56,6 +56,7 @@
|
||||
|
||||
<h4>Lighting & Climate</h4>
|
||||
Discover the wonders of intelligent lighting and smart climate control, drastically improving your home’s energy efficiency in the process.
|
||||
<div class="row center-bb"><a class="bluebutton nav" href="/contact">Contact Us</a></div>
|
||||
</div>
|
||||
<div class="col m-6 ipad" data-view="ScrollPad">
|
||||
<div class="inner-container">
|
||||
|
||||
@ -80,6 +80,7 @@
|
||||
|
||||
<p>No two properties are the same, so we put lots of emphasis on pre-installation planning and system design to create a network that is secure, effective and perfectly situated.</p>
|
||||
</div>
|
||||
<div class="col"><a class="bluebutton nav mtb" href="/contact">Contact Us</a></div>
|
||||
</div>
|
||||
</div>
|
||||
{>"partials/footer"/}
|
||||
|
||||
@ -30,7 +30,7 @@ module.exports = {
|
||||
addClass(name + '-active')
|
||||
|
||||
//Scroll into view
|
||||
if(window.innerHeight > 900){
|
||||
if(window.innerHeight > 900 && window.innerWidth > 1024){
|
||||
$pct = $('.slide-container');
|
||||
var $win = $('body,html,main');
|
||||
var minScrollVal = $pct.offset().top + 200 - window.innerHeight;
|
||||
@ -38,6 +38,16 @@ module.exports = {
|
||||
}
|
||||
},
|
||||
initialize: function(){
|
||||
if(window.innerHeight > 900 && window.innerWidth > 1024){
|
||||
this.$el.removeClass('fade-mode')
|
||||
}
|
||||
var thisView = this;
|
||||
$( window ).resize(function() {
|
||||
if(window.innerHeight > 900 && window.innerWidth > 1024){
|
||||
thisView.$el.removeClass('fade-mode')
|
||||
}else{
|
||||
thisView.$el.addClass('fade-mode')
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
@ -213,9 +213,6 @@
|
||||
z-index:2;
|
||||
background:$hardgrey;
|
||||
text-align:center;
|
||||
h2 {
|
||||
font-weight:600;
|
||||
}
|
||||
.top-icon-row {
|
||||
text-align:center;
|
||||
margin-top:-35px;
|
||||
@ -252,12 +249,36 @@
|
||||
.front {
|
||||
h3, p{margin:0;background:$transblack;}
|
||||
h3 {
|
||||
margin-top:0;
|
||||
padding-top:120px;
|
||||
margin-top:100px;
|
||||
padding-top:20px;
|
||||
text-transform: uppercase;
|
||||
position:relative;
|
||||
&:before {
|
||||
content:"";
|
||||
position:absolute;
|
||||
height:150px;
|
||||
width:100%;
|
||||
top:-150px;
|
||||
left:0;
|
||||
background:$transblack;
|
||||
transition:opacity 0.5s;
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
p {
|
||||
padding-bottom:150px;
|
||||
position:relative;
|
||||
padding-bottom:20px;
|
||||
&:before {
|
||||
content:"";
|
||||
position:absolute;
|
||||
height:150px;
|
||||
width:100%;
|
||||
bottom:-150px;
|
||||
left:0;
|
||||
background:$transblack;
|
||||
transition:opacity 0.5s;
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.t1 .front{background:url(/img/t1.jpg) no-repeat center/cover;}
|
||||
@ -269,104 +290,40 @@
|
||||
}
|
||||
.hover-wrap:hover{
|
||||
.tt:hover {
|
||||
h3 {
|
||||
margin-top:100px;
|
||||
padding-top:20px;
|
||||
}
|
||||
p {
|
||||
padding-bottom:20px;
|
||||
}
|
||||
h3:before,p:before{opacity:0;}
|
||||
}
|
||||
}
|
||||
&.t1-active {
|
||||
.hover-wrap:not(:hover){
|
||||
.t1{
|
||||
h3{margin-top:100px;padding-top:20px;}
|
||||
p{padding-bottom:20px;}
|
||||
}
|
||||
.t1{h3:before,p:before{opacity:0;}}
|
||||
}
|
||||
}
|
||||
&.t2-active {
|
||||
.hover-wrap:not(:hover){
|
||||
.t2{
|
||||
h3{margin-top:100px;padding-top:20px;}
|
||||
p{padding-bottom:20px;}
|
||||
}
|
||||
.t2{h3:before,p:before{opacity:0;}}
|
||||
}
|
||||
}
|
||||
&.t3-active {
|
||||
.hover-wrap:not(:hover){
|
||||
.t3{
|
||||
h3{margin-top:100px;padding-top:20px;}
|
||||
p{padding-bottom:20px;}
|
||||
}
|
||||
.t3{h3:before,p:before{opacity:0;}}
|
||||
}
|
||||
}
|
||||
&.t4-active {
|
||||
.hover-wrap:not(:hover){
|
||||
.t4{
|
||||
h3{margin-top:100px;padding-top:20px;}
|
||||
p{padding-bottom:20px;}
|
||||
}
|
||||
.t4{h3:before,p:before{opacity:0;}}
|
||||
}
|
||||
}
|
||||
&.t5-active {
|
||||
.hover-wrap:not(:hover){
|
||||
.t5{
|
||||
h3{margin-top:100px;padding-top:20px;}
|
||||
p{padding-bottom:20px;}
|
||||
}
|
||||
.t5{h3:before,p:before{opacity:0;}}
|
||||
}
|
||||
}
|
||||
&.t6-active {
|
||||
.hover-wrap:not(:hover){
|
||||
.t6{
|
||||
h3{margin-top:100px;padding-top:20px;}
|
||||
p{padding-bottom:20px;}
|
||||
.t6{h3:before,p:before{opacity:0;}}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and(max-height: 900px){
|
||||
.six-display:not(.fade-mode) {
|
||||
.slide-container {display:none;}
|
||||
.back,.front {
|
||||
//Flip animation
|
||||
backface-visibility:hidden;
|
||||
transform-style: preserve-3d;
|
||||
transition:transform 0.3s ease;
|
||||
transform:rotateX(0deg) rotateY(0deg);
|
||||
}
|
||||
.t1 .back,.t3 .back,.t5 .back {transform:rotateX(180deg);}
|
||||
.t2 .back,.t4 .back,.t6 .back {transform:rotateY(180deg);}
|
||||
&.t1-active {
|
||||
.t1 .front {transform:rotateX(180deg);}
|
||||
.t1 .back {transform:rotateX(0deg);}
|
||||
}
|
||||
&.t2-active {
|
||||
.t2 .front {transform:rotateY(180deg);}
|
||||
.t2 .back {transform:rotateY(0deg);}
|
||||
}
|
||||
&.t3-active {
|
||||
.t3 .front {transform:rotateX(180deg);}
|
||||
.t3 .back {transform:rotateX(0deg);}
|
||||
}
|
||||
&.t4-active {
|
||||
.t4 .front {transform:rotateY(180deg);}
|
||||
.t4 .back {transform:rotateY(0deg);}
|
||||
}
|
||||
&.t5-active {
|
||||
.t5 .front {transform:rotateX(180deg);}
|
||||
.t5 .back {transform:rotateX(0deg);}
|
||||
}
|
||||
&.t6-active {
|
||||
.t6 .front {transform:rotateY(180deg);}
|
||||
.t6 .back {transform:rotateY(0deg);}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.six-display.fade-mode {
|
||||
.slide-container {display:none;}
|
||||
@ -481,8 +438,9 @@
|
||||
padding-right:5%;
|
||||
margin-top:10%;
|
||||
margin-bottom:10%;
|
||||
h3 {
|
||||
h2 {
|
||||
margin-top:10px;
|
||||
font-weight:100;
|
||||
}
|
||||
}
|
||||
padding:5%;
|
||||
@ -509,24 +467,31 @@
|
||||
.how-we-build {
|
||||
background:$softwhite;
|
||||
img {
|
||||
margin-top:50px;
|
||||
width:50px;
|
||||
height:50px;
|
||||
border-radius:5px;
|
||||
background:$softblack;
|
||||
}
|
||||
* {color:$softblack;}
|
||||
h3{font-size:3.5em;}
|
||||
h4{font-size:2em;margin-bottom:50px;}
|
||||
h5{font-size:1.5em;}
|
||||
}
|
||||
.whole-home-control {
|
||||
background:url(/img/room-integration.jpg) center/cover no-repeat;
|
||||
* {text-align:left;}
|
||||
*:not(.bluebutton) {text-align:left;}
|
||||
.center-bb{margin-top:100px;text-align: center;}
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
padding:3%;
|
||||
.ipad {
|
||||
min-height:450px;
|
||||
img {
|
||||
position:absolute;
|
||||
top:0;
|
||||
transition:top 0.05s;
|
||||
margin-top:50px;
|
||||
transition:top 1s;
|
||||
width:80%;
|
||||
}
|
||||
}
|
||||
@ -568,7 +533,7 @@
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
margin-top:8%;
|
||||
margin-top:25px;
|
||||
}
|
||||
|
||||
&:hover p {
|
||||
@ -599,16 +564,23 @@
|
||||
}
|
||||
|
||||
.camera {
|
||||
padding:5%;
|
||||
padding:3%;
|
||||
background:url(/img/axis-camera-big2.png) left top/contain no-repeat $softwhite;
|
||||
.camera-space {
|
||||
min-height:200px;
|
||||
}
|
||||
.text-pad {
|
||||
text-align: left;
|
||||
h2 {font-weight:100}
|
||||
h2 {
|
||||
font-weight:100;
|
||||
font-size:2.7em;
|
||||
margin-bottom:50px;
|
||||
}
|
||||
*{color:$softblack;}
|
||||
}
|
||||
.bluebutton {
|
||||
margin-top:100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -659,6 +631,9 @@
|
||||
opacity:1;
|
||||
z-index:1;
|
||||
}
|
||||
.bluebutton {
|
||||
width:48%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -367,7 +367,8 @@ body {
|
||||
footer {
|
||||
background:$softblack;
|
||||
border-top:2px solid $softwhite;
|
||||
padding:2%;
|
||||
padding-top:35px;
|
||||
padding-top:35px;
|
||||
*:not(.company-name):not(strong) {font-weight:500;}
|
||||
h3, h2, *:not(li) > a {
|
||||
color:$softwhite;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user