This commit is contained in:
Robin Hägg 2015-09-11 17:20:26 +02:00
parent efce4fa2dc
commit 23879f81e5
7 changed files with 113 additions and 61 deletions

View File

@ -7,7 +7,7 @@
<meta property="og:description" content="We design, install and support modern technology for the modern home. We offer many services including but not limited to Home Entertainment, Security and Intergation" />
<meta property="og:type" content="website" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="viewport" content="initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
@ -33,7 +33,10 @@
<a class="nav security col m-3" href="services/security">Security</a>
<a class="nav integration col m-3" href="services/integration">Integration</a>
</div>
<div class="prev-next" data-view="PrevNext"></div>
<div class="prev-next" data-view="PrevNext">
<a class="next arrow"></a>
<a class="prev arrow"></a>
</div>
<main>
{?error}

View File

@ -8,60 +8,54 @@
</nav>
</div>
<div class="slide-container col s-12 m-10 l-8 s-centered">
<div class="col s-12 homeowners slide active">
<div class="row">
<div class="col m-6 ratio-port">
<h2>Preparing your home for the future</h2>
<h3>Working together to help you understand whats possible.</h3>
<a class="bluebutton mtb nav" href="/services">Our Services</a>
<a class="bluebutton mtb nav" href="/contact">Contact Us</a>
</div>
<div class="col m-6 ratio-port">
<h4>Flexible and reliable</h4>
<p>We design our systems to adapt to your requirements whist ensuring dependability, and we work to the same exacting standards.</p>
<h4>Communication is key</h4>
<p>Full disclosure at every stage of your project allow us to be more efficient and effective at what we do, and keeps you better informed in the process.</p>
<h4>Unrivalled support</h4>
<p>Looking after your equipment once weve finished is an integral part of our service, keeping you and your system fully up to date.</p>
</div>
<div class="homeowners slide active">
<div class="col m-6 ratio-port">
<h2>Preparing your home for the future</h2>
<h3>Working together to help you understand whats possible.</h3>
<a class="bluebutton mtb nav" href="/services">Our Services</a>
<a class="bluebutton mtb nav" href="/contact">Contact Us</a>
</div>
<div class="col m-6 ratio-port">
<h4>Flexible and reliable</h4>
<p>We design our systems to adapt to your requirements whist ensuring dependability, and we work to the same exacting standards.</p>
<h4>Communication is key</h4>
<p>Full disclosure at every stage of your project allow us to be more efficient and effective at what we do, and keeps you better informed in the process.</p>
<h4>Unrivalled support</h4>
<p>Looking after your equipment once weve finished is an integral part of our service, keeping you and your system fully up to date.</p>
</div>
</div>
<div class="col s-12 developers slide">
<div class="row">
<div class="col m-6 ratio-port">
<h2>Taking projects from inception to completion</h2>
<h3>Our ability to work alongside your team increases efficiency.</h3>
<a class="bluebutton mtb nav" href="/contact">Contact us</a>
</div>
<div class="col m-6 ratio-port">
<h4>Spanning all markets</h4>
<p>We work in a variety of demanding sectors, transferring the comfort, usability and functionally that you would expect at home, to projects all over the world.</p>
<h4>Time management</h4>
<p>Diligent planning and effective communication allows us to deliver the required technology on schedule, increasing job efficiency and productivity.</p>
<h4>Exceptional results</h4>
<p>Good quality cabling infrastructure is at the heart of our installs, and gives you the capacity to raise or lower the specification, whilst future-proofing the property in process.</p>
</div>
<div class="developers slide">
<div class="col m-6 ratio-port">
<h2>Taking projects from inception to completion</h2>
<h3>Our ability to work alongside your team increases efficiency.</h3>
<a class="bluebutton mtb nav" href="/contact">Contact us</a>
</div>
<div class="col m-6 ratio-port">
<h4>Spanning all markets</h4>
<p>We work in a variety of demanding sectors, transferring the comfort, usability and functionally that you would expect at home, to projects all over the world.</p>
<h4>Time management</h4>
<p>Diligent planning and effective communication allows us to deliver the required technology on schedule, increasing job efficiency and productivity.</p>
<h4>Exceptional results</h4>
<p>Good quality cabling infrastructure is at the heart of our installs, and gives you the capacity to raise or lower the specification, whilst future-proofing the property in process.</p>
</div>
</div>
<div class="col s-12 designers slide">
<div class="row">
<div class="col m-6 ratio-port">
<h2>Beautiful system design, seamlessly integrated</h2>
<h3>Even cables can look good, whether visible or hidden</h3>
<a class="bluebutton mtb nav" href="/contact">Contact us</a>
</div>
<div class="col m-6 ratio-port">
<h4>Complimenting your vision</h4>
<p>We work closely with interior designers to ensure that the technology perfectly matches the decor, for a modern look and sleek finish.</p>
<h4>Client consultation</h4>
<p>Technology exists in a variety of different styles, its important that it not only looks great but functions exactly as intended - this is achieved through detailed client consultation at every stage of the project.</p>
<h4>Quality through design</h4>
<p>Our experience in selecting the correct products for the desired application paired with meticulous attention to detail results in immaculate installations, perfectly placed.</p>
</div>
<div class="designers slide">
<div class="col m-6 ratio-port">
<h2>Beautiful system design, seamlessly integrated</h2>
<h3>Even cables can look good, whether visible or hidden</h3>
<a class="bluebutton mtb nav" href="/contact">Contact us</a>
</div>
<div class="col m-6 ratio-port">
<h4>Complimenting your vision</h4>
<p>We work closely with interior designers to ensure that the technology perfectly matches the decor, for a modern look and sleek finish.</p>
<h4>Client consultation</h4>
<p>Technology exists in a variety of different styles, its important that it not only looks great but functions exactly as intended - this is achieved through detailed client consultation at every stage of the project.</p>
<h4>Quality through design</h4>
<p>Our experience in selecting the correct products for the desired application paired with meticulous attention to detail results in immaculate installations, perfectly placed.</p>
</div>
</div>
</div>
<div class="col">
{>"partials/footer"/}
{>"partials/footer"/}
</div>
</div>

View File

@ -15,6 +15,6 @@ $(function() {
app.burger = new app.views.BurgerHover({ el: $('header') });
Backbone.history.start({ silent: true, pushState: true });
$(document.head).append('<style> .splash,.splashspacer{height: ' + Math.max(window.innerHeight, window.innerWidth) + 'px !important;}</style>')
$(document.head).append('<style> .splash,.splashspacer{height: ' + Math.max(window.innerHeight) + 'px !important;}</style>')
});

View File

@ -12,7 +12,7 @@ module.exports = {
toggle: function() {
$(window).scrollTop();
this.$el.toggleClass('visible');
if(this.$el.hasClass('visible')) {
if(this.$el.hasClass('visible') && window.innerWidth <= 800) {
$(document.body).css('overflow-y','hidden')
}else{
$(document.body).css('overflow-y','scroll')

View File

@ -22,6 +22,8 @@ module.exports = {
thisView.next()
}
});
},
attach: function()
{

View File

@ -19,15 +19,37 @@
* { color:$softwhite; }
h1 {
margin-top:0;
font-size:7vw;
font-weight: 600;
@media all and(max-width:800px){font-size:10vw;}
font-size: 5em;
@media all and (min-width:100px){font-size:10px;}
@media all and (min-width:150px){font-size:12px;}
@media all and (min-width:200px){font-size:16px;}
@media all and (min-width:250px){font-size:20px;}
@media all and (min-width:300px){font-size:30px;}
@media all and (min-width:400px){font-size:40px;}
@media all and (min-width:500px){font-size:50px;}
@media all and (min-width:640px){font-size:50px;}
@media all and (min-width:740px){font-size:60px;}
@media all and (min-width:880px){font-size:70px;}
@media all and (min-width:1000px){font-size:80px;}
@media all and (min-width:1440px){font-size:120px;}
}
h2 {
font-size:3vw;
border-right:2px solid $htblue;
padding-right:2%;
@media all and(max-width:800px){font-size:5vw;}
font-size: 3em;
@media all and (min-width:100px){font-size:5px;}
@media all and (min-width:150px){font-size:6px;}
@media all and (min-width:200px){font-size:8px;}
@media all and (min-width:250px){font-size:10px;}
@media all and (min-width:300px){font-size:15px;}
@media all and (min-width:400px){font-size:20px;}
@media all and (min-width:500px){font-size:25px;}
@media all and (min-width:640px){font-size:25px;}
@media all and (min-width:740px){font-size:30px;}
@media all and (min-width:880px){font-size:35px;}
@media all and (min-width:1000px){font-size:40px;}
@media all and (min-width:1440px){font-size:60px;}
}
}
@ -183,7 +205,7 @@
}
}
.splashspacer{
margin-top:-50px;
margin-top:-75px;
min-height:600px;
width:100%;
}
@ -561,9 +583,7 @@
.slide {
opacity:0;
transition: opacity 1s ease,z-index 0s linear 1s;
margin:auto;
&.homeowners, &.developers {position:absolute;top:0;}
&.homeowners,&.developers {position:absolute;top:0;}
&.active {
opacity:1;
z-index:1;

View File

@ -59,7 +59,41 @@ html {
}
}
}
.prev-next {
.arrow {
cursor: pointer;
position:absolute;
top:50vh;
height:60px;
width:60px;
border-radius:100%;
text-align: center;
opacity: 0.6;
transition: transform 0.3s linear;
z-index:2;
}
.prev {
left:40px;
background:url(/img/prev-arrow.svg) center/cover;
}
.next {
right:40px;
background:url(/img/next-arrow.svg) center/cover;
}
@media all and(orientation:portrait) {
.prev{transform:rotateX(90deg) !important}
.next{transform:rotateX(90deg) !important}
}
@media all and(max-width:1440px) {
.prev{transform:rotateX(90deg) !important}
.next{transform:rotateX(90deg) !important}
}
.hidden {
&.prev{transform:rotateX(90deg) !important}
&.next{transform:rotateX(90deg) !important}
}
}
.snap-top-menu {
@media all and(min-height:900px){
margin-top:60px;
@ -94,7 +128,6 @@ html {
&.snap-top-static.hidden {
opacity:0;
}
display:none;
}
//Header
@ -264,7 +297,7 @@ body {
}
&.anim-fade .page {
&.animate {
transition: opacity 0.5s ease-out;
transition: opacity 0.5s linear;
position: absolute;
}
&.leave {