PLZ
This commit is contained in:
Robin Hägg
parent
4583540797
commit
ece4b18951
@ -15,10 +15,12 @@
|
||||
<link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<header data-view="BurgerHover">
|
||||
<header>
|
||||
<div class="company">
|
||||
<a class="nav" href="/"><h1 class="logo"><img src="/img/home-technology-logo.svg"><strong>Home</strong>Technology</h1></a>
|
||||
</div>
|
||||
<img class="burger" src="/img/menu.svg">
|
||||
<div class="coverer"> </div>
|
||||
{>"partials/navigation":navigation page=page /}
|
||||
</header>
|
||||
<div class="snap-top-menu snap-top-persistant" data-view="SnapTop">
|
||||
@ -26,6 +28,7 @@
|
||||
<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>
|
||||
<main>
|
||||
|
||||
{?error}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<div class="row page about">
|
||||
<div class="col minimummer s-12 m-10 l-8 s-centered">
|
||||
<div class="col minimummer s-12 m-12 l-9 s-centered">
|
||||
<div class="row">
|
||||
<div class="col m-12 l-6">
|
||||
<div class="col m-6 l-6">
|
||||
<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-12 l-6" data-view="ContactUs">
|
||||
<div class="col m-6 l-6" data-view="ContactUs">
|
||||
<h1>One company<br><strong>One solution</strong></h1>
|
||||
<p>We're all about keeping things simple. Our systems are easy-to-use, our process is clear and well defined and our complete technology service incorporates every aspect, from project inception to the final-comission. We provide extensive demonstrations and continuing support for every client, so you'll never feel that the technology is too much to handle.</p>
|
||||
</div>
|
||||
@ -13,7 +13,7 @@
|
||||
</div>
|
||||
<div class="col customers-say">
|
||||
<div class="row">
|
||||
<h2><strong>Here's what some of our<br> customers have to say</strong></h2>
|
||||
<h2><strong>Here's what some of<br> our customers have to say</strong></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<div class="row page contact">
|
||||
<div class="col minimummer s-12 m-10 l-8 s-centered">
|
||||
<div class="col minimummer s-12 m-12 l-9 s-centered">
|
||||
<div class="row">
|
||||
<div class="col m-12 l-6">
|
||||
<div class="col m-6 l-6">
|
||||
<h1><strong>Contact</strong>Us</h1>
|
||||
<p>If you are thinking about starting a new project or already have one on the go, we wolud love to be involved. To discuss your best options, contact us using the details below and we will be happy to help.</p>
|
||||
<p>Alternatively, leave us your contact details and a message using the form and we'll get back to you.<br /></p>
|
||||
@ -9,7 +9,7 @@
|
||||
<strong>hello@home-technology.com</strong><br /><br />
|
||||
<span>HomeTechnology<br>Steels Lane<br>Oxshott<br>Surrey KT22 0RT</span></p>
|
||||
</div>
|
||||
<div class="col m-12 l-6" data-view="ContactUs">
|
||||
<div class="col m-6 l-6" data-view="ContactUs">
|
||||
<h1><strong>Message</strong>Us</h1>
|
||||
<form method="POST">
|
||||
<div class="formCover">
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="splash-text">
|
||||
<div class="col">
|
||||
<h2>Beautiful entertainment, immaculately <i>installed</i>.</h2><p>Enjoy quality time with the people who matter. Intricate design, intuitive control and flawless functionality are at the heart of our entertainment systems; we’re redefining playtime, one home at a time.</p>
|
||||
<a href="#content"><img src="/img/scroll-hinter.svg" class="scroll2me"></a>
|
||||
<a href="#content" data-view="Scroll2Me"><img src="/img/scroll-hinter.svg" class="scroll2me"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -19,68 +19,95 @@
|
||||
<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>
|
||||
</div>
|
||||
<div class="row six-display">
|
||||
<div class="row six-display fade-mode t0-active" data-view="EntertainmentSlider">
|
||||
<div class="col s-12 m-6 l-4 t1 tt">
|
||||
<div class="front">
|
||||
<h3>Audio Visual</h3>
|
||||
<p>Like you've never seen it before</p>
|
||||
</div>
|
||||
<div class="back">
|
||||
<h3>Audio Visual</h3>
|
||||
<p>From high fidelity audio to Ultra HD video, our team have a wealth of experience in supplying, installing and supporting the very best whole-home audio visual systems on the market. Ease of operation is an integral part of every setup, whilst maintaining a clean and unobtrusive design that will allow you to experience music and film exactly as the creators intended.</p>
|
||||
</div>
|
||||
<div class="front">
|
||||
<h3>Audio Visual</h3>
|
||||
<p>Like you've never seen it before</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s-12 m-6 l-4 t2 tt">
|
||||
<div class="front">
|
||||
<h3>Multiroom Audio</h3>
|
||||
<p>Your music, all around your home</p>
|
||||
</div>
|
||||
<div class="back">
|
||||
<h3>Multiroom Audio</h3>
|
||||
<p>The ability to move freely around your home whilst listening to your favourite music is a fantastic addition to any property. Seamless incorporation of audio equipment with wireless functionality provides a refined listening experience that’s extremely simple to use, and enjoyable to share with friends and family.</p>
|
||||
</div>
|
||||
<div class="front">
|
||||
<h3>Multiroom Audio</h3>
|
||||
<p>Your music, all around your home</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s-12 m-6 l-4 t3 tt">
|
||||
<div class="front">
|
||||
<h3>Media</h3>
|
||||
<p>Access your favourite content, everywhere</p>
|
||||
</div>
|
||||
<div class="back">
|
||||
<h3>Media</h3>
|
||||
<p>The things we watch, listen to and share with friends and family define personal entertainment. We believe that these things should be available all the time and everywhere you go, and as such, develop our media distribution systems to present your favourite digital content, all around your home, at the touch of a button.</p>
|
||||
</div>
|
||||
<div class="front">
|
||||
<h3>Media</h3>
|
||||
<p>Access your favourite content, everywhere</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s-12 m-6 l-4 t4 tt">
|
||||
<div class="front">
|
||||
<h3>Bespoke Design</h3>
|
||||
<p>Customised to perfection</p>
|
||||
</div>
|
||||
<div class="back">
|
||||
<h3>Bespoke Design</h3>
|
||||
<p>All of our entertainment services require detailed custom planning and support, but if you have something extraordinary in mind, we can work with you to make this a reality, the only limit is your imagination. Delivery has to be met with perfection, minimising spatial presence and maximising user enjoyment.</p>
|
||||
</div>
|
||||
<div class="front">
|
||||
<h3>Bespoke Design</h3>
|
||||
<p>Customised to perfection</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s-12 m-6 l-4 t5 tt">
|
||||
<div class="front">
|
||||
<h3>Cinema</h3>
|
||||
<p>Ultra-HD is just the beginning</p>
|
||||
</div>
|
||||
<div class="back">
|
||||
<h3>Cinema</h3>
|
||||
<p>Our immersive media rooms combine awe-inspiring visuals with breathtaking audio to make sure you see every detail and feel every moment. By working with the finest suppliers of cinema equipment, perfectly suited to your budget, our team can deliver a system that not only impresses, but defies belief.</p>
|
||||
</div>
|
||||
<div class="front">
|
||||
<h3>Cinema</h3>
|
||||
<p>Ultra-HD is just the beginning</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s-12 m-6 l-4 t6 tt">
|
||||
<div class="front">
|
||||
<h3>Control</h3>
|
||||
<p>Simple, yet powerful</p>
|
||||
</div>
|
||||
<div class="back">
|
||||
<h3>Control</h3>
|
||||
<p>Technology is only as useful as it is usable, and even complex systems can be intricately designed so that front-end control is simple and user-friendly. We offer varying levels of control with our entertainment setups and can supply you with a fully programmed ‘Smart Control’ or replace conventional remotes with dedicated app support, empowering your smartphone or tablet.</p>
|
||||
</div>
|
||||
<div class="front">
|
||||
<h3>Control</h3>
|
||||
<p>Simple, yet powerful</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">Nassawassapaheem</div>
|
||||
<div class="col slide-container">
|
||||
<div class="t0-slide slide">
|
||||
<h3>Click any of the categories above</h3>
|
||||
</div>
|
||||
<div class="t1-slide slide">
|
||||
<h3>Audio Visual</h3>
|
||||
<p>From high fidelity audio to Ultra HD video, our team have a wealth of experience in supplying, installing and supporting the very best whole-home audio visual systems on the market. Ease of operation is an integral part of every setup, whilst maintaining a clean and unobtrusive design that will allow you to experience music and film exactly as the creators intended.</p>
|
||||
</div>
|
||||
<div class="t2-slide slide">
|
||||
<h3>Multiroom Audio</h3>
|
||||
<p>The ability to move freely around your home whilst listening to your favourite music is a fantastic addition to any property. Seamless incorporation of audio equipment with wireless functionality provides a refined listening experience that’s extremely simple to use, and enjoyable to share with friends and family.</p>
|
||||
</div>
|
||||
<div class="t3-slide slide">
|
||||
<h3>Media</h3>
|
||||
<p>The things we watch, listen to and share with friends and family define personal entertainment. We believe that these things should be available all the time and everywhere you go, and as such, develop our media distribution systems to present your favourite digital content, all around your home, at the touch of a button.</p>
|
||||
</div>
|
||||
<div class="t4-slide slide">
|
||||
<h3>Bespoke Design</h3>
|
||||
<p>All of our entertainment services require detailed custom planning and support, but if you have something extraordinary in mind, we can work with you to make this a reality, the only limit is your imagination. Delivery has to be met with perfection, minimising spatial presence and maximising user enjoyment.</p>
|
||||
</div>
|
||||
<div class="t5-slide slide">
|
||||
<h3>Cinema</h3>
|
||||
<p>Our immersive media rooms combine awe-inspiring visuals with breathtaking audio to make sure you see every detail and feel every moment. By working with the finest suppliers of cinema equipment, perfectly suited to your budget, our team can deliver a system that not only impresses, but defies belief.</p>
|
||||
</div>
|
||||
<div class="t6-slide slide">
|
||||
<h3>Control</h3>
|
||||
<p>Technology is only as useful as it is usable, and even complex systems can be intricately designed so that front-end control is simple and user-friendly. We offer varying levels of control with our entertainment setups and can supply you with a fully programmed ‘Smart Control’ or replace conventional remotes with dedicated app support, empowering your smartphone or tablet.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col expertly-tailored">
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="splash-text">
|
||||
<div class="col">
|
||||
<h2>A connected home that just <i>works</i>.</h2><p>Your home really does have the capacity to evolve, becoming somewhere that’s smarter, more reliable and much more fun. But more than that, an integrated home can connect with you in amazing ways, welcome to the future.</p>
|
||||
<a href="#content"><img src="/img/scroll-hinter.svg" class="scroll2me"></a>
|
||||
<a href="#content" data-view="Scroll2Me"><img src="/img/scroll-hinter.svg" class="scroll2me"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="splash-text">
|
||||
<div class="col">
|
||||
<h2>Keeping an eye on what's <i>important</i>.</h2><p>Our lives are filled with things that we love, cherish and want to look after. Modern technology can keep us connected to these things, heightening our vigilance and enhancing our senses.</p>
|
||||
<a href="#content"><img src="/img/scroll-hinter.svg" class="scroll2me"></a>
|
||||
<a href="#content" data-view="Scroll2Me"><img src="/img/scroll-hinter.svg" class="scroll2me"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -11,6 +11,8 @@ app.module(require('spytext'));
|
||||
$(function() {
|
||||
app.navigation = new app.views.Navigation({ el: app.$('nav') });
|
||||
app.snaptop = new app.views.SnapTop({ el: app.$('.snap-top-persistant') });
|
||||
app.prevnext = new app.views.PrevNext({ el: $('.prev-next') });
|
||||
app.burger = new app.views.BurgerHover({ el: $('header') });
|
||||
|
||||
Backbone.history.start({ silent: true, pushState: true });
|
||||
console.log(app)
|
||||
|
||||
18
src/js/views/burger-hover.js
Normal file
18
src/js/views/burger-hover.js
Normal file
@ -0,0 +1,18 @@
|
||||
module.exports = {
|
||||
events: {
|
||||
"click .burger": "toggle",
|
||||
"click .coverer": "toggle",
|
||||
"click nav": "toggle"
|
||||
},
|
||||
attach: function(){
|
||||
console.log("att")
|
||||
$('.coverer').scroll(function(e){
|
||||
console.log("Scroll")
|
||||
e.preventDefault()
|
||||
})
|
||||
},
|
||||
toggle: function() {
|
||||
$(window).scrollTop();
|
||||
this.$el.toggleClass('visible');
|
||||
}
|
||||
}
|
||||
32
src/js/views/entertainment-slider.js
Normal file
32
src/js/views/entertainment-slider.js
Normal file
@ -0,0 +1,32 @@
|
||||
module.exports = {
|
||||
events: {
|
||||
"click .t1": "t1",
|
||||
"click .t2": "t2",
|
||||
"click .t3": "t3",
|
||||
"click .t4": "t4",
|
||||
"click .t5": "t5",
|
||||
"click .t6": "t6",
|
||||
},
|
||||
t0: function(e) {this.activate('t0')},
|
||||
t1: function(e) {this.activate('t1')},
|
||||
t2: function(e) {this.activate('t2')},
|
||||
t3: function(e) {this.activate('t3')},
|
||||
t4: function(e) {this.activate('t4')},
|
||||
t5: function(e) {this.activate('t5')},
|
||||
t6: function(e) {this.activate('t6')},
|
||||
activate: function(name) {
|
||||
if(this.$el.hasClass(name + '-active')) {
|
||||
return this.t0();
|
||||
}
|
||||
|
||||
this.$el.
|
||||
removeClass('t0-active').
|
||||
removeClass('t1-active').
|
||||
removeClass('t2-active').
|
||||
removeClass('t3-active').
|
||||
removeClass('t4-active').
|
||||
removeClass('t5-active').
|
||||
removeClass('t6-active').
|
||||
addClass(name + '-active')
|
||||
}
|
||||
};
|
||||
@ -5,5 +5,9 @@ module.exports = {
|
||||
SnapTop: require('./snap-top'),
|
||||
MarketsSlide: require('./markets-slide'),
|
||||
ContactUs: require('./contact-us'),
|
||||
ScrollPad: require('./scroll-pad')
|
||||
ScrollPad: require('./scroll-pad'),
|
||||
EntertainmentSlider: require('./entertainment-slider'),
|
||||
PrevNext: require('./prev-next'),
|
||||
Scroll2Me: require('./scroll2me'),
|
||||
BurgerHover: require('./burger-hover')
|
||||
};
|
||||
|
||||
92
src/js/views/prev-next.js
Normal file
92
src/js/views/prev-next.js
Normal file
@ -0,0 +1,92 @@
|
||||
module.exports = {
|
||||
pathOrder: ['/', '/process', '/services', '/markets', '/about', '/contact'],
|
||||
notVisibleOn: ['/services/entertainment', '/services/security', '/services/integration'],
|
||||
lastPath: '/',
|
||||
events:
|
||||
{
|
||||
"click .next": "next",
|
||||
"click .prev": "prev"
|
||||
},
|
||||
initialize: function(options)
|
||||
{
|
||||
this.listenTo(this.app.router, 'route', this.onRouteChange);
|
||||
|
||||
//Listen to keys
|
||||
var thisView = this;
|
||||
$("body").keydown(function(e) {
|
||||
|
||||
if(e.keyCode == 37 && thisView.notVisibleOn.indexOf(window.location.pathname) == -1) { // left
|
||||
thisView.prev()
|
||||
}
|
||||
else if(e.keyCode == 39 && thisView.notVisibleOn.indexOf(window.location.pathname) == -1) { // right
|
||||
thisView.next()
|
||||
}
|
||||
});
|
||||
},
|
||||
attach: function()
|
||||
{
|
||||
this.onRouteChange(null, [window.location.pathname.slice(1)])
|
||||
$(window).on( 'scroll', function(e)
|
||||
{
|
||||
if($(window).scrollTop() > 100)
|
||||
{
|
||||
$('.prev, .next').addClass('hidden')
|
||||
$('.up-button').addClass('unhidden')
|
||||
}
|
||||
else
|
||||
{
|
||||
$('.prev, .next').removeClass('hidden')
|
||||
$('.up-button').removeClass('unhidden')
|
||||
}
|
||||
});
|
||||
},
|
||||
onRouteChange: function(route, params)
|
||||
{
|
||||
var path = "/" + params[0];
|
||||
|
||||
if(this.notVisibleOn.indexOf(path) != -1) //If this is a subpage to services
|
||||
this.$el.hide()
|
||||
else
|
||||
this.$el.show()
|
||||
|
||||
//Valet shit
|
||||
if((this.notVisibleOn.indexOf(path) != -1 || path == '/services') && (this.notVisibleOn.indexOf(this.lastPath) != -1 || this.lastPath == '/services'))
|
||||
{
|
||||
$(document.body).removeClass('anim-fade anim-neg anim-pos')
|
||||
$(document.body).addClass('anim-fade')
|
||||
}
|
||||
else
|
||||
{
|
||||
if(this.notVisibleOn.indexOf(path) != -1)
|
||||
{
|
||||
path = '/services'
|
||||
}
|
||||
else if(this.notVisibleOn.indexOf(this.lastPath) != -1)
|
||||
{
|
||||
this.lastPath = '/services'
|
||||
}
|
||||
|
||||
if(this.pathOrder.indexOf(path) < this.pathOrder.indexOf(this.lastPath))
|
||||
{
|
||||
$(document.body).removeClass('anim-fade anim-neg anim-pos')
|
||||
$(document.body).addClass('anim-neg')
|
||||
}
|
||||
else
|
||||
{
|
||||
$(document.body).removeClass('anim-fade anim-neg anim-pos')
|
||||
$(document.body).addClass('anim-pos')
|
||||
}
|
||||
}
|
||||
this.lastPath = path;
|
||||
},
|
||||
prev: function()
|
||||
{
|
||||
var path = this.pathOrder[(this.pathOrder.indexOf(window.location.pathname) + this.pathOrder.length - 1) % this.pathOrder.length];
|
||||
Backbone.history.navigate(path, {trigger: true})
|
||||
},
|
||||
next: function()
|
||||
{
|
||||
var path = this.pathOrder[(this.pathOrder.indexOf(window.location.pathname) + 1) % this.pathOrder.length];
|
||||
Backbone.history.navigate(path, {trigger: true})
|
||||
}
|
||||
}
|
||||
@ -4,6 +4,7 @@ module.exports = {
|
||||
this.ipadImgEl = $('img', this.el);
|
||||
$(window).scroll(function(){
|
||||
thisView.ipadImgEl.css('top', thisView.$el.height() - Math.min(Math.max(window.pageYOffset+(window.innerHeight/1.1) - thisView.$el.offset().top, 0),thisView.$el.height()))
|
||||
console.log(Math.max(thisView.$el.height() - thisView.ipadImgEl.height(),0))
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
13
src/js/views/scroll2me.js
Normal file
13
src/js/views/scroll2me.js
Normal file
@ -0,0 +1,13 @@
|
||||
module.exports = {
|
||||
events: {
|
||||
"click": "scroll"
|
||||
},
|
||||
scroll: function(e) {
|
||||
var href = this.$el.attr('href');
|
||||
if(href){
|
||||
console.log(href)
|
||||
e.preventDefault();
|
||||
$('body,html').animate({scrollTop: $(href).offset().top + "px"}, 500)
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -5,25 +5,36 @@ module.exports = {
|
||||
this.onRouteChange(null,window.location.pathname.split("/").slice(1))
|
||||
},
|
||||
attach: function() {
|
||||
console.log("att")
|
||||
var thisView = this;
|
||||
$(window).scroll(function(e){
|
||||
if(window.location.pathname.indexOf('services') == -1){return thisView.$el.removeClass('fixed')}
|
||||
if(window.innerHeight > 900){thisView.plussy=60}else{thisView.plussy=0;}
|
||||
if(!thisView.forceHidden && $('.snap-top-static').offset().top < window.pageYOffset+thisView.plussy){
|
||||
var $sts = $('.snap-top-static');
|
||||
|
||||
if(!thisView.forceHidden && ($sts.length == 0 || $sts.offset().top < window.pageYOffset+thisView.plussy)){
|
||||
thisView.$el.addClass('fixed')
|
||||
$('.snap-top-static').addClass('hidden')
|
||||
$sts.addClass('hidden')
|
||||
}
|
||||
else {
|
||||
thisView.$el.removeClass('fixed')
|
||||
$('.snap-top-static').removeClass('hidden')
|
||||
$sts.removeClass('hidden')
|
||||
}
|
||||
});
|
||||
$(window).trigger('scroll');
|
||||
},
|
||||
onRouteChange: function(route, params) {
|
||||
if(params[0] != 'services'){
|
||||
console.log("Params", params)
|
||||
if((params[0] || "/").indexOf('services') == -1){
|
||||
this.forceHidden = true;
|
||||
this.$el.removeClass('fixed')
|
||||
}else{
|
||||
this.forceHidden = false;
|
||||
if(params[0] == 'services/integration' || params[0] == 'services/security' || params[0] == 'services/entertainment'){
|
||||
var thisView = this;
|
||||
setTimeout(function(){thisView.$el.addClass('fixed')},500)
|
||||
}else{
|
||||
this.$el.removeClass('fixed')
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 362 KiB After Width: | Height: | Size: 352 KiB |
@ -34,7 +34,7 @@
|
||||
&.entertainment {width:37%;}
|
||||
&.security {width:27%;}
|
||||
&.integration {width:33%;}
|
||||
margin: 0.5% 0.5%;
|
||||
margin: 1px 0.5%;
|
||||
font-size:1vw;
|
||||
@media all and(max-width:1024px){font-size:1.45vw;}
|
||||
@media all and(max-width:800px){
|
||||
@ -51,8 +51,9 @@
|
||||
}
|
||||
|
||||
.page.process {
|
||||
@include backgrounder("process-background", "jpg", "fixed no-repeat top/cover");
|
||||
@include backgrounder("process-background", "jpg", "no-repeat fixed center/cover");
|
||||
height:1%;
|
||||
width:100%;
|
||||
position:relative;
|
||||
|
||||
.process-band {
|
||||
@ -157,14 +158,15 @@
|
||||
|
||||
.servicepage {
|
||||
height:1%;
|
||||
position:none;
|
||||
* { color:$softwhite; }
|
||||
width:100%;
|
||||
|
||||
* { color:$softwhite; }
|
||||
|
||||
.splash {
|
||||
height:100%;
|
||||
min-height:500px;
|
||||
min-height:700px;
|
||||
width:100%;
|
||||
position:fixed;
|
||||
margin-top:-60px;
|
||||
z-index:1;
|
||||
.splash-text {
|
||||
position:absolute;
|
||||
@ -217,6 +219,7 @@
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
.back *{color:$softblack;}
|
||||
.front {
|
||||
h3, p{margin:0;background:$transblack;}
|
||||
h3 {
|
||||
@ -227,7 +230,6 @@
|
||||
padding-bottom:20px;
|
||||
}
|
||||
}
|
||||
.back{display:none;}
|
||||
&.t1 .front{background:url(/img/t1.jpg) no-repeat center/cover;}
|
||||
&.t2 .front{background:url(/img/t2.jpg) no-repeat center/cover;}
|
||||
&.t3 .front{background:url(/img/t3.jpg) no-repeat center/cover;}
|
||||
@ -236,9 +238,145 @@
|
||||
&.t6 .front{background:url(/img/t6.jpg) no-repeat center/cover;}
|
||||
}
|
||||
}
|
||||
|
||||
.six-display.flip-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;}
|
||||
.tt .front {transition:opacity 0.3s;}
|
||||
.t1:hover .front {opacity:0;}
|
||||
.t2:hover .front {opacity:0;}
|
||||
.t3:hover .front {opacity:0;}
|
||||
.t4:hover .front {opacity:0;}
|
||||
.t5:hover .front {opacity:0;}
|
||||
.t6:hover .front {opacity:0;}
|
||||
}
|
||||
|
||||
.six-display.slide-mode {
|
||||
.slide-container {
|
||||
padding:0;
|
||||
overflow:hidden;
|
||||
position:relative;
|
||||
height:200px;
|
||||
transition:height 0.3s;
|
||||
> .slide {
|
||||
position:absolute;
|
||||
width:100%;
|
||||
transition:left 0.3s;
|
||||
> * {
|
||||
color:$softblack;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.t0-active {
|
||||
.slide-container{height:100px;}
|
||||
}
|
||||
//Initial state
|
||||
&.t0-active {
|
||||
.t0-slide {left:0;}
|
||||
.t1-slide {left:100%;}
|
||||
.t2-slide {left:200%;}
|
||||
.t3-slide {left:300%;}
|
||||
.t4-slide {left:400%;}
|
||||
.t5-slide {left:500%;}
|
||||
.t6-slide {left:600%;}
|
||||
}
|
||||
|
||||
//Active states
|
||||
&.t1-active {
|
||||
.t0-slide {left:-100%;}
|
||||
.t1-slide {left:0%;}
|
||||
.t2-slide {left:100%;}
|
||||
.t3-slide {left:200%;}
|
||||
.t4-slide {left:300%;}
|
||||
.t5-slide {left:400%;}
|
||||
.t6-slide {left:500%;}
|
||||
}
|
||||
&.t2-active {
|
||||
.t0-slide {left:-200%;}
|
||||
.t1-slide {left:-100%;}
|
||||
.t2-slide {left:0%;}
|
||||
.t3-slide {left:100%;}
|
||||
.t4-slide {left:200%;}
|
||||
.t5-slide {left:300%;}
|
||||
.t6-slide {left:400%;}
|
||||
}
|
||||
&.t3-active {
|
||||
.t0-slide {left:-300%;}
|
||||
.t1-slide {left:-200%;}
|
||||
.t2-slide {left:-100%;}
|
||||
.t3-slide {left:0%;}
|
||||
.t4-slide {left:100%;}
|
||||
.t5-slide {left:200%;}
|
||||
.t6-slide {left:300%;}
|
||||
}
|
||||
&.t4-active {
|
||||
.t0-slide {left:-400%;}
|
||||
.t1-slide {left:-300%;}
|
||||
.t2-slide {left:-200%;}
|
||||
.t3-slide {left:-100%;}
|
||||
.t4-slide {left:0%;}
|
||||
.t5-slide {left:100%;}
|
||||
.t6-slide {left:200%;}
|
||||
}
|
||||
&.t5-active {
|
||||
.t0-slide {left:-500%;}
|
||||
.t1-slide {left:-400%;}
|
||||
.t2-slide {left:-300%;}
|
||||
.t3-slide {left:-200%;}
|
||||
.t4-slide {left:-100%;}
|
||||
.t5-slide {left:0%;}
|
||||
.t6-slide {left:100%;}
|
||||
}
|
||||
&.t6-active {
|
||||
.t0-slide {left:-600%;}
|
||||
.t1-slide {left:-500%;}
|
||||
.t2-slide {left:-400%;}
|
||||
.t3-slide {left:-300%;}
|
||||
.t4-slide {left:-200%;}
|
||||
.t5-slide {left:-100%;}
|
||||
.t6-slide {left:0%;}
|
||||
}
|
||||
}
|
||||
|
||||
.expertly-tailored {
|
||||
height:600px;
|
||||
min-height:50%;
|
||||
min-height:600px;
|
||||
background:url(/img/se-splash2.jpg) top/cover no-repeat;
|
||||
.blue-left{
|
||||
border-left:2px solid $htblue;
|
||||
@ -402,6 +540,9 @@
|
||||
line-height:40px;
|
||||
border-radius: 9px;
|
||||
font-weight:600;
|
||||
@media all and (max-width:400px){
|
||||
width:50%;
|
||||
}
|
||||
&.active {
|
||||
background:$hardblue;
|
||||
color:$softwhite;
|
||||
@ -428,9 +569,9 @@
|
||||
.page.about {
|
||||
height:1%;
|
||||
.minimummer {
|
||||
min-height:80%;
|
||||
min-height:50%;
|
||||
> .row > .col {
|
||||
padding: 5%;
|
||||
padding: 3%;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
@ -443,12 +584,16 @@
|
||||
}
|
||||
.customers-say {
|
||||
background:url(../img/customers-say.jpg) top/cover no-repeat;
|
||||
height:600px;
|
||||
min-height:600px;
|
||||
height:50%;
|
||||
@include std-shadow-in;
|
||||
position:relative;
|
||||
padding:5%;
|
||||
h2 {
|
||||
@include std-shadow-text;
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
bottom:5%;
|
||||
padding:5%;
|
||||
color:$softwhite;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@ -459,7 +604,7 @@
|
||||
.minimummer {
|
||||
min-height:80%;
|
||||
> .row > .col {
|
||||
padding: 5%;
|
||||
padding: 3%;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
|
||||
@ -62,11 +62,11 @@ html {
|
||||
|
||||
.snap-top-menu {
|
||||
@media all and(min-height:900px){
|
||||
margin-top:52px;
|
||||
margin-top:53px;
|
||||
}
|
||||
|
||||
padding:0 0 0 0;
|
||||
background:$softwhite;
|
||||
background:$softerwhite;
|
||||
a {
|
||||
line-height:40px;
|
||||
vertical-align:middle;
|
||||
@ -86,7 +86,7 @@ html {
|
||||
width:100%;
|
||||
}
|
||||
&.snap-top-persistant {
|
||||
z-index:10;
|
||||
z-index:9;
|
||||
&:not(.fixed){
|
||||
display:none;
|
||||
}
|
||||
@ -140,6 +140,54 @@ header {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burger {display:none;}
|
||||
.coverer{width:0px;height:0px;
|
||||
transition:background 1s ease;}
|
||||
@media all and(max-width:800px){
|
||||
.burger {
|
||||
display:block;
|
||||
height:60px;
|
||||
position:absolute;
|
||||
height:60px;
|
||||
width:50px;
|
||||
right:2%;
|
||||
}
|
||||
&.visible {
|
||||
position:fixed;
|
||||
nav > ul{right:0;}
|
||||
|
||||
.coverer{
|
||||
display:block;
|
||||
position:fixed;
|
||||
width:100%;
|
||||
height:100%;
|
||||
top:53px;
|
||||
left:0;
|
||||
background:$transblack;
|
||||
}
|
||||
}
|
||||
nav {
|
||||
>ul {
|
||||
z-index:12;
|
||||
display:block;
|
||||
position:fixed;
|
||||
top:53px;
|
||||
height:100%;
|
||||
background:tomato;
|
||||
right:-100%;
|
||||
transition:right 0.5s ease;
|
||||
min-width:200px;
|
||||
width:25%;
|
||||
>li {
|
||||
margin:0;
|
||||
text-align: center;
|
||||
width:100%;
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.company {
|
||||
float:left;
|
||||
h1 {
|
||||
@ -153,6 +201,9 @@ header {
|
||||
margin:0;
|
||||
line-height: 60px;
|
||||
font-size:1.6em;
|
||||
@media all and(max-width:400px){
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -175,34 +226,68 @@ body {
|
||||
min-height: calc(100% - 60px);
|
||||
margin: -7px auto;
|
||||
> .page {
|
||||
&:not(.servicepage) {
|
||||
margin-top:60px;
|
||||
}
|
||||
@media all and(min-height:900px){
|
||||
margin-top:60px;
|
||||
}
|
||||
|
||||
|
||||
position:absolute;
|
||||
overflow-y: visible;
|
||||
width: 100%;
|
||||
height:1%;
|
||||
min-height: 100%;
|
||||
min-height: calc(100% - 60px);
|
||||
// &.animate {
|
||||
// transition: opacity 0.2s ease-out;
|
||||
// float: left;
|
||||
// position: relative;
|
||||
// }
|
||||
// &.leave {
|
||||
// margin-right: -100%;
|
||||
// }
|
||||
// &.leave.active {
|
||||
// opacity: 0;
|
||||
// }
|
||||
// &.enter {
|
||||
// opacity: 0;
|
||||
// }
|
||||
// &.enter.active, &.leave {
|
||||
// opacity: 1;
|
||||
// }
|
||||
}
|
||||
}
|
||||
&.anim-fade .page {
|
||||
&.animate {
|
||||
transition: opacity 0.5s ease-out;
|
||||
}
|
||||
&.leave {
|
||||
margin-right: -100%;
|
||||
}
|
||||
&.leave.active {
|
||||
opacity: 0;
|
||||
}
|
||||
&.enter {
|
||||
opacity: 0;
|
||||
}
|
||||
&.enter.active, &.leave {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.anim-pos .page {
|
||||
&.animate {
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
&.leave {
|
||||
transform:translate(-100%,0)
|
||||
}
|
||||
&.leave.active {
|
||||
transform:translate(-100%,0)
|
||||
}
|
||||
&.enter {
|
||||
transform:translate(100%,0)
|
||||
}
|
||||
&.enter.active, &.leave {
|
||||
transform:translate(0,0)
|
||||
}
|
||||
}
|
||||
&.anim-neg .page {
|
||||
&.animate {
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
&.leave {
|
||||
transform:translate(100%,0)
|
||||
}
|
||||
&.leave.active {
|
||||
transform:translate(100%,0)
|
||||
}
|
||||
&.enter {
|
||||
transform:translate(-100%,0)
|
||||
}
|
||||
&.enter.active, &.leave {
|
||||
transform:translate(0,0)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,6 +10,7 @@ $htblue-solid: rgba(20, 157, 237, 1);
|
||||
$hardblue: #0b244c;
|
||||
|
||||
$softwhite: rgba(255,255,255,0.95);
|
||||
$softerwhite: rgba(255,255,255,0.8);
|
||||
$transwhite: rgba(255,255,255,0.7);
|
||||
$softgrey: #707070;
|
||||
$chillwhite: #efefef;
|
||||
|
||||
48
src/svg/menu.svg
Normal file
48
src/svg/menu.svg
Normal file
@ -0,0 +1,48 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- License Agreement at http://iconmonstr.com/license/ -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
width="512px"
|
||||
height="512px"
|
||||
viewBox="0 0 512 512"
|
||||
enable-background="new 0 0 512 512"
|
||||
xml:space="preserve"
|
||||
id="svg2"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="iconmonstr-menu-icon.svg"><metadata
|
||||
id="metadata9"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs7" /><sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1618"
|
||||
inkscape:window-height="904"
|
||||
id="namedview5"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.3432007"
|
||||
inkscape:cx="257.58231"
|
||||
inkscape:cy="256"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg2" /><path
|
||||
id="menu-icon"
|
||||
d="M462,163.5H50v-65h412V163.5z M462,223.5H50v65h412V223.5z M462,348.5H50v65h412V348.5z"
|
||||
style="fill:#ffffff;opacity:0.95" /></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Loading…
Reference in New Issue
Block a user