fuck
This commit is contained in:
Robin Hägg
parent
0415784dca
commit
859e702235
@ -2,7 +2,7 @@
|
||||
<div class="col minimummer s-12 m-12 l-9 s-centered">
|
||||
<div class="row">
|
||||
<div class="col m-6 l-6">
|
||||
<h1><strong>Fresh new ideas &</strong> <br>ways of thinking</h1>
|
||||
<h1><strong>Fresh new ideas &</strong> <br>ways of thinking</h1>
|
||||
<p>Remaining at the forefront of home technology is an integral aspect of providing a great service. This allows us to offer cutting-edge solutions to a variety of applications, future-proofing yourself and your property for years to come. We thrive on challenging ourselves to design systems that not only meet your expectations, but blows them away.</p>
|
||||
</div>
|
||||
<div class="col m-6 l-6" data-view="ContactUs">
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row content-row">
|
||||
<div class="col s-12 m-9 l-8 s-centered">
|
||||
<div class="col s-12 m-9 l-8 s-centered intro">
|
||||
<h2>Entertainment</h2>
|
||||
<p>There are many different elements that make for great entertainment. Our expertise in perfectly matching the correct level of technology to the application leaves you with a personalised, unique setup that you’ll never want to turn off. Have a look at what we do below.</p>
|
||||
</div>
|
||||
@ -58,7 +58,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s-12 m-6 l-4 t4 tt flip-container verical">
|
||||
<div class="col s-12 m-6 l-4 t4 tt flip-container vertical">
|
||||
<div class="flipper">
|
||||
<div class="back">
|
||||
<h3>Bespoke Design</h3>
|
||||
@ -82,7 +82,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s-12 m-6 l-4 t6 tt flip-container verical">
|
||||
<div class="col s-12 m-6 l-4 t6 tt flip-container vertical">
|
||||
<div class="flipper">
|
||||
<div class="back">
|
||||
<h3>Control</h3>
|
||||
@ -131,13 +131,17 @@
|
||||
<div class="col">
|
||||
<h2>Entertainment technology, expertly tailored to your project</h2>
|
||||
</div>
|
||||
<div class="col m-6 blue-left">
|
||||
<h3>Immersion through design</h3>
|
||||
<p>Entertainment technology can be perfectly crafted and professionally delivered to provide you and your property with a system that will grab your attention and not let go of it until the end. Captivation is key, contact us to experience it for yourself.</p>
|
||||
</div>
|
||||
<div class="col m-6 blue-left">
|
||||
<h3>Personalised support</h3>
|
||||
<p>Every installation we complete comes with unlimited support for one year, free of charge. Our dedicated helpline is always open, even on weekends, so whatever your query, we’re always happy to help. To learn more about our aftercare services, get in touch.</p>
|
||||
<div class="col m-12 l-8 s-centered">
|
||||
<div class="row">
|
||||
<div class="col m-6 blue-left">
|
||||
<h3>Immersion through design</h3>
|
||||
<p>Entertainment technology can be perfectly crafted and professionally delivered to provide you and your property with a system that will grab your attention and not let go of it until the end. Captivation is key, contact us to experience it for yourself.</p>
|
||||
</div>
|
||||
<div class="col m-6 blue-left">
|
||||
<h3>Personalised support</h3>
|
||||
<p>Every installation we complete comes with unlimited support for one year, free of charge. Our dedicated helpline is always open, even on weekends, so whatever your query, we’re always happy to help. To learn more about our aftercare services, get in touch.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a class="bluebutton nav" href="/contact">Get Started</a>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row content-row">
|
||||
<div class="col s-12 m-9 l-8 s-centered">
|
||||
<div class="col s-12 m-9 l-8 s-centered intro">
|
||||
<h2>Integration</h2>
|
||||
<p>We’re working closely with homeowners, property developers and interior designers to future-proof the next generation of housing. Integration is a process that enables audio, video, security, lighting and much more to interact together in harmony; increasing usability, reliability, energy efficiency and saleability in the process.</p>
|
||||
</div>
|
||||
@ -49,13 +49,13 @@
|
||||
<div class="col m-6">
|
||||
<h3>Whole home control, single app</h3>
|
||||
<h4>Audio Visual</h4>
|
||||
Choose your room, select what you want to watch or listen to and sit back and enjoy your entertainment, at the touch of a button.
|
||||
<p>Choose your room, select what you want to watch or listen to and sit back and enjoy your entertainment, at the touch of a button.</p>
|
||||
|
||||
<h4>Security</h4>
|
||||
View live camera feeds, lockup remotely or speak with someone at the gate. We can help keep your home within reach, wherever you are in the world.
|
||||
<p>View live camera feeds, lockup remotely or speak with someone at the gate. We can help keep your home within reach, wherever you are in the world.</p>
|
||||
|
||||
<h4>Lighting & Climate</h4>
|
||||
Discover the wonders of intelligent lighting and smart climate control, drastically improving your home’s energy efficiency in the process.
|
||||
<p>Discover the wonders of intelligent lighting and smart climate control, drastically improving your home’s energy efficiency in the process.</p>
|
||||
<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">
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row content-row">
|
||||
<div class="col s-12 m-9 l-8 s-centered">
|
||||
<div class="col s-12 m-9 l-8 s-centered intro">
|
||||
<h2>Security</h2>
|
||||
<p>Whole home security is all about correct coverage, ensuring your home has the right detection mechanisms for the property type. The security systems we supply, install and look after are designed to interact with one another, offering unbeatable protection whilst keeping you fully informed.</p>
|
||||
</div>
|
||||
|
||||
@ -43,16 +43,26 @@ module.exports = {
|
||||
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
|
||||
}
|
||||
|
||||
if(window.innerHeight > 900 && window.innerWidth > 1024 && !isIE()){
|
||||
this.$el.removeClass('fade-mode')
|
||||
}
|
||||
var thisView = this;
|
||||
$( window ).resize(function() {
|
||||
if(window.innerHeight > 900 && window.innerWidth > 1024 && !isIE()){
|
||||
thisView.$el.removeClass('fade-mode')
|
||||
if(window.innerHeight > 900 && window.innerWidth > 1024){
|
||||
thisView.$el.removeClass('fade-mode').removeClass('flip-mode')
|
||||
}else{
|
||||
if(!isIE()) {
|
||||
thisView.$el.removeClass('fade-mode').addClass('flip-mode')
|
||||
}else{
|
||||
thisView.$el.addClass('fade-mode')
|
||||
}
|
||||
}
|
||||
$( window ).resize(function() {
|
||||
if(window.innerHeight > 900 && window.innerWidth > 1024){
|
||||
thisView.$el.removeClass('fade-mode').removeClass('flip-mode')
|
||||
}else{
|
||||
if(!isIE()) {
|
||||
thisView.$el.removeClass('fade-mode').addClass('flip-mode')
|
||||
}else{
|
||||
thisView.$el.addClass('fade-mode')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
@ -75,6 +75,9 @@
|
||||
|
||||
.page.process {
|
||||
@include backgrounder("process-background", "jpg", "no-repeat center/cover");
|
||||
@media all and(orientation:portrait){
|
||||
@include backgrounder("process-background-portrait", "jpg", "no-repeat center/cover");
|
||||
}
|
||||
width:100%;
|
||||
min-height: 125%;
|
||||
|
||||
@ -131,9 +134,10 @@
|
||||
|
||||
.page.services {
|
||||
h1 {
|
||||
margin-top:50px;
|
||||
text-align:center;
|
||||
text-transform: uppercase;
|
||||
font-size: 2.7em;
|
||||
font-size: 2.5em;
|
||||
span {
|
||||
@include underlineH(25%, $softblack);
|
||||
}
|
||||
@ -193,8 +197,9 @@
|
||||
position:absolute;
|
||||
}
|
||||
.splash-text {
|
||||
*{@include std-shadow-text;}
|
||||
position:absolute;
|
||||
bottom:23%;
|
||||
bottom:20%;
|
||||
left:0;
|
||||
right:0;
|
||||
text-align: center;
|
||||
@ -224,6 +229,19 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-row {
|
||||
.intro{
|
||||
h2 {
|
||||
font-weight:600;
|
||||
color:$softerwhite;
|
||||
}
|
||||
p {
|
||||
font-weight:600;
|
||||
color:$softerwhite;
|
||||
}
|
||||
margin-bottom:5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entertainment {
|
||||
@ -234,16 +252,20 @@
|
||||
background:$softwhite;
|
||||
border:1px solid $softwhite;
|
||||
.tt {
|
||||
height:320px;
|
||||
height:325px;
|
||||
border:1px solid transparent;
|
||||
padding:0;
|
||||
cursor:pointer;
|
||||
.front, .back {
|
||||
height:320px;
|
||||
height:325px;
|
||||
position:absolute;
|
||||
height:100%;
|
||||
width:100%;
|
||||
overflow:hidden;
|
||||
p{
|
||||
padding-left:2%;
|
||||
padding-right:2%;
|
||||
}
|
||||
}
|
||||
.back *{color:$softblack;}
|
||||
.front {
|
||||
@ -336,58 +358,44 @@
|
||||
.t6:hover .front {opacity:0;}
|
||||
}
|
||||
.six-display.flip-mode {
|
||||
.flip-container {
|
||||
perspective: 1000;
|
||||
}
|
||||
.flip-container:hover .flipper, .flip-container.hover .flipper {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.slide-container {display:none;}
|
||||
.flip-container {perspective: 1000;}
|
||||
// .flip-container:hover .flipper, .flip-container.hover .flipper {transform: rotateY(180deg);}
|
||||
// .vertical.flip-container:hover .flipper {transform: rotateX(-180deg);}
|
||||
|
||||
&.t1-active {.t1 .flipper{transform: rotateY(180deg);}}
|
||||
&.t2-active {.t2 .flipper{transform: rotateX(-180deg);}}
|
||||
&.t3-active {.t3 .flipper{transform: rotateY(180deg);}}
|
||||
&.t4-active {.t4 .flipper{transform: rotateX(-180deg);}}
|
||||
&.t5-active {.t5 .flipper{transform: rotateY(180deg);}}
|
||||
&.t6-active {.t6 .flipper{transform: rotateX(-180deg);}}
|
||||
.flipper {
|
||||
transition: 0.6s;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
position: absolute;
|
||||
top:0;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
|
||||
}
|
||||
.front, .back {
|
||||
backface-visibility: hidden;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.front {
|
||||
z-index: 2;
|
||||
/* for firefox 31 */
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
.back {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.back {transform: rotateY(180deg);}
|
||||
.vertical.flip-container {position: relative;}
|
||||
.vertical .back {transform: rotateX(180deg);}
|
||||
.vertical.flip-container .flipper {transform-origin: 100% 50%; /* half of height */}
|
||||
|
||||
.vertical.flip-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vertical .back {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.vertical.flip-container .flipper {
|
||||
transform-origin: 100% 50%; /* half of height */
|
||||
}
|
||||
|
||||
.vertical.flip-container:hover .flipper {
|
||||
transform: rotateX(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.six-display {
|
||||
.six-display:not(.flip-mode) {
|
||||
.slide-container {
|
||||
padding:0;
|
||||
overflow:hidden;
|
||||
@ -398,6 +406,8 @@
|
||||
position:absolute;
|
||||
width:100%;
|
||||
transition:left 0.3s;
|
||||
padding-left:9%;
|
||||
padding-right:9%;
|
||||
h3{
|
||||
text-transform: uppercase;
|
||||
span{@include underlineH(25%, $softblack);}
|
||||
@ -509,16 +519,15 @@
|
||||
* {color:$softblack;}
|
||||
h3 {
|
||||
@include underlineH(40%, $softblack);
|
||||
margin-bottom:5%;
|
||||
margin-bottom:9%;
|
||||
}
|
||||
}
|
||||
.ff3 {background:url(/img/ff3.jpg) no-repeat center/cover;}
|
||||
.ff4 {background:url(/img/ff4.jpg) no-repeat center/cover;}
|
||||
.ff3 {background:url(/img/ff3.jpg) no-repeat top/cover;}
|
||||
.ff4 {background:url(/img/ff4.jpg) no-repeat top left/cover;}
|
||||
|
||||
.how-we-build {
|
||||
background:$softwhite;
|
||||
img {
|
||||
margin-top:50px;
|
||||
width:50px;
|
||||
height:50px;
|
||||
border-radius:5px;
|
||||
@ -527,7 +536,8 @@
|
||||
* {color:$softblack;}
|
||||
h3{font-size:3.5em;}
|
||||
h4{font-size:2em;margin-bottom:50px;}
|
||||
h5{font-size:1.5em;}
|
||||
h5{font-size:1.5em;margin-top:10px;}
|
||||
>.col {margin-bottom:25px;}
|
||||
}
|
||||
.whole-home-control {
|
||||
background:url(/img/room-integration.jpg) center/cover no-repeat;
|
||||
@ -538,6 +548,14 @@
|
||||
padding:3%;
|
||||
h3 {
|
||||
font-size:2.7em;
|
||||
@include std-shadow-text;
|
||||
}
|
||||
h4 {
|
||||
font-size:1.9em;
|
||||
@include std-shadow-text;
|
||||
}
|
||||
p {
|
||||
max-width:90%;
|
||||
}
|
||||
.ipad {
|
||||
min-height:450px;
|
||||
@ -546,7 +564,7 @@
|
||||
top:0;
|
||||
margin-top:50px;
|
||||
transition:top 1s;
|
||||
width:80%;
|
||||
width:95%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -627,13 +645,13 @@
|
||||
text-align: left;
|
||||
h2 {
|
||||
font-weight:100;
|
||||
font-size:2.7em;
|
||||
font-size:2.5em;
|
||||
margin-bottom:50px;
|
||||
}
|
||||
*{color:$softblack;}
|
||||
}
|
||||
.bluebutton {
|
||||
margin-top:100px;
|
||||
margin-top:80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -644,10 +662,11 @@
|
||||
//@include backgrounder("markets-background-header", "jpg", "no-repeat top/cover");
|
||||
@include std-shadow-in;
|
||||
background:url(../img/markets-background-full.jpg) no-repeat bottom/cover;
|
||||
padding:4%;
|
||||
padding:3.5%;
|
||||
text-align: center;
|
||||
h1,a{color:$softwhite;font-weight:600;}
|
||||
h1{@include std-shadow-text;font-size:2.7em;}
|
||||
h1{@include std-shadow-text;font-size:2.2em;}
|
||||
|
||||
.slide-picker {
|
||||
@include std-shadow;
|
||||
margin:auto;
|
||||
@ -664,8 +683,8 @@
|
||||
line-height:40px;
|
||||
border-radius: 9px;
|
||||
font-weight:600;
|
||||
@media all and (max-width:400px){
|
||||
width:50%;
|
||||
@media all and (max-width:450px){
|
||||
width:80%;
|
||||
}
|
||||
&.active {
|
||||
background:$hardblue;
|
||||
@ -679,11 +698,15 @@
|
||||
position:relative;
|
||||
.slide {
|
||||
opacity:0;
|
||||
transition: opacity 1s ease,z-index 0s linear 1s;
|
||||
transition: opacity 0.5s ease,z-index 0s linear 0.5s,transform 0.2s;
|
||||
h2{font-weight:600;}
|
||||
.bluebutton{margin-bottom:5px;}
|
||||
&.homeowners,&.developers {position:absolute;top:0;}
|
||||
transform: scalex(98/100) scaley(98/100);
|
||||
&.active {
|
||||
opacity:1;
|
||||
z-index:1;
|
||||
transform: scalex(1) scaley(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -697,8 +720,7 @@
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
font-size:2.7em;
|
||||
margin-bottom:50px;
|
||||
font-size:2.5em;
|
||||
strong {
|
||||
color: $htblue;
|
||||
font-weight: 500;
|
||||
@ -717,15 +739,17 @@
|
||||
bottom:0;
|
||||
padding:2%;
|
||||
color:$softwhite;
|
||||
font-size:2.7em;
|
||||
font-size:2.5em;
|
||||
}
|
||||
}
|
||||
.testimonials {
|
||||
padding:5%;
|
||||
p {font-style: italic;}
|
||||
.prevbtn,.nextbtn {
|
||||
width:30px;
|
||||
height:30px;
|
||||
width:40px;
|
||||
height:40px;
|
||||
cursor:pointer;
|
||||
margin-bottom:20px;
|
||||
@media all and(min-width:640px){
|
||||
position:absolute;
|
||||
top:50%;
|
||||
@ -737,7 +761,7 @@
|
||||
@media all and(min-width:640px){right:-60px;}
|
||||
}
|
||||
.prevbtn {
|
||||
float:right;
|
||||
float:left;
|
||||
@media all and(min-width:640px){left:-60px;}
|
||||
}
|
||||
}
|
||||
|
||||
@ -65,7 +65,7 @@ html {
|
||||
.arrow {
|
||||
cursor: pointer;
|
||||
position:absolute;
|
||||
top:50vh;
|
||||
top:55vh;
|
||||
height:60px;
|
||||
width:60px;
|
||||
border-radius:100%;
|
||||
@ -102,13 +102,14 @@ html {
|
||||
}
|
||||
|
||||
padding:0 0 0 0;
|
||||
background:$softerwhite;
|
||||
background:$softwhite;
|
||||
.col{
|
||||
width:33%;
|
||||
margin:0 0;
|
||||
display:inline-block;
|
||||
text-align:center;
|
||||
height:40px;
|
||||
padding:0;
|
||||
a {
|
||||
position:relative;
|
||||
line-height:40px;
|
||||
@ -116,15 +117,16 @@ html {
|
||||
font-size:1.5em;
|
||||
text-transform:uppercase;
|
||||
img {display:none;}
|
||||
@media all and (max-width:640px) {
|
||||
font-size:3.5vw;
|
||||
}
|
||||
@media all and (min-width:800px) {
|
||||
padding-left:35px;
|
||||
&.entertainment{background:url(/img/icon-entertainment-black.svg) left/contain no-repeat;}
|
||||
&.security{background:url(/img/icon-security-black.svg) left/contain no-repeat;}
|
||||
&.integration{background:url(/img/icon-integration-black.svg) left/contain no-repeat;}
|
||||
}
|
||||
@media all and (max-width:600px) {font-size:20px;}
|
||||
@media all and (max-width:500px) {font-size:15px;}
|
||||
@media all and (max-width:400px) {font-size:12px;}
|
||||
@media all and (max-width:321px) {font-size:10px;}
|
||||
}
|
||||
}
|
||||
&.fixed {
|
||||
@ -134,6 +136,7 @@ html {
|
||||
}
|
||||
&.snap-top-persistant {
|
||||
z-index:9;
|
||||
@include std-shadow;
|
||||
&:not(.fixed){
|
||||
display:none;
|
||||
}
|
||||
@ -198,6 +201,7 @@ header {
|
||||
line-height:55px;
|
||||
&:hover {
|
||||
color:$htblue-solid !important;
|
||||
&:before{border-bottom:1.7px solid $htblue-solid;}
|
||||
}
|
||||
}
|
||||
&:first-child { padding-left: 0; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user