fuck
This commit is contained in:
parent
181795fcb2
commit
0c7e0693d3
@ -11,6 +11,11 @@
|
|||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
|
||||||
|
<meta name="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 name="keywords" content="Technology,Automation,Integration,Home">
|
||||||
|
<meta name="author" content="HomeTechnology">
|
||||||
|
<title>HomeTechnology</title>
|
||||||
|
|
||||||
<link type="text/css" rel="stylesheet" href="/css/main.css" />
|
<link type="text/css" rel="stylesheet" href="/css/main.css" />
|
||||||
<link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
|
<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>
|
</head>
|
||||||
|
|||||||
@ -13,8 +13,8 @@
|
|||||||
<div class="col m-6 ratio-port">
|
<div class="col m-6 ratio-port">
|
||||||
<h2>Preparing your home for the future</h2>
|
<h2>Preparing your home for the future</h2>
|
||||||
<h3>Working together to help you understand what’s possible.</h3>
|
<h3>Working together to help you understand what’s possible.</h3>
|
||||||
<a class="bluebutton mtb nav" href="/services">What we do</a>
|
<a class="bluebutton mtb nav" href="/services">Our Services</a>
|
||||||
<a class="bluebutton mtb nav" href="/process">How we do it</a>
|
<a class="bluebutton mtb nav" href="/contact">Contact Us</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="col m-6 ratio-port">
|
<div class="col m-6 ratio-port">
|
||||||
<h4>Flexible and reliable</h4>
|
<h4>Flexible and reliable</h4>
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
<li><a class="nav" href="/services/integration">Integration</a></li>
|
<li><a class="nav" href="/services/integration">Integration</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="col s-4 m-2 contact">
|
<div class="col s-4 m-3 contact">
|
||||||
<h3><a class="nav" href="/contact">Contact</a></h3>
|
<h3><a class="nav" href="/contact">Contact</a></h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a class="nav" href="/contact">Email & Phone</a></li>
|
<li><a class="nav" href="/contact">Email & Phone</a></li>
|
||||||
|
|||||||
@ -5,14 +5,17 @@ module.exports = {
|
|||||||
"click nav": "toggle"
|
"click nav": "toggle"
|
||||||
},
|
},
|
||||||
attach: function(){
|
attach: function(){
|
||||||
console.log("att")
|
|
||||||
$('.coverer').scroll(function(e){
|
$('.coverer').scroll(function(e){
|
||||||
console.log("Scroll")
|
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
toggle: function() {
|
toggle: function() {
|
||||||
$(window).scrollTop();
|
$(window).scrollTop();
|
||||||
this.$el.toggleClass('visible');
|
this.$el.toggleClass('visible');
|
||||||
|
if(this.$el.hasClass('visible')) {
|
||||||
|
$(document.body).css('overflow-y','hidden')
|
||||||
|
}else{
|
||||||
|
$(document.body).css('overflow-y','scroll')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -3,8 +3,8 @@ module.exports = {
|
|||||||
var thisView = this;
|
var thisView = this;
|
||||||
this.ipadImgEl = $('img', this.el);
|
this.ipadImgEl = $('img', this.el);
|
||||||
$(window).scroll(function(){
|
$(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()))
|
thisView.ipadImgEl.css('top', Math.max(thisView.$el.height() - Math.min(Math.max(window.pageYOffset+(window.innerHeight/1.1) - thisView.$el.offset().top, 0),thisView.$el.height()), thisView.$el.height() - thisView.ipadImgEl.height()))
|
||||||
console.log(Math.max(thisView.$el.height() - thisView.ipadImgEl.height(),0))
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 113 KiB After Width: | Height: | Size: 99 KiB |
@ -8,6 +8,7 @@
|
|||||||
background:$transblack;
|
background:$transblack;
|
||||||
min-height:500px;
|
min-height:500px;
|
||||||
height:100%;
|
height:100%;
|
||||||
|
height:calc(100% - 150px);
|
||||||
.set-btm{
|
.set-btm{
|
||||||
width:100%;
|
width:100%;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
@ -51,7 +52,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.page.process {
|
.page.process {
|
||||||
.bgel{position:fixed;top:0;width:100%;height:100%;@include backgrounder("process-background", "jpg", "no-repeat center/cover");}
|
.bgel{
|
||||||
|
position:fixed;
|
||||||
|
top:0;
|
||||||
|
width:100%;
|
||||||
|
height:120vh;
|
||||||
|
@include backgrounder("process-background", "jpg", "no-repeat center/cover");
|
||||||
|
min-height:500px;
|
||||||
|
}
|
||||||
|
overflow:visible;
|
||||||
height:1%;
|
height:1%;
|
||||||
width:100%;
|
width:100%;
|
||||||
|
|
||||||
@ -162,7 +171,7 @@
|
|||||||
* { color:$softwhite; }
|
* { color:$softwhite; }
|
||||||
|
|
||||||
.splash {
|
.splash {
|
||||||
height:100%;
|
height:105vh;
|
||||||
min-height:500px;
|
min-height:500px;
|
||||||
width:100%;
|
width:100%;
|
||||||
position:fixed;
|
position:fixed;
|
||||||
@ -172,7 +181,7 @@
|
|||||||
}
|
}
|
||||||
.splash-text {
|
.splash-text {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
bottom:20%;
|
bottom:23%;
|
||||||
left:0;
|
left:0;
|
||||||
right:0;
|
right:0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -183,7 +192,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.splashspacer{
|
.splashspacer{
|
||||||
height:100%;
|
height:105vh;
|
||||||
min-height:500px;
|
min-height:500px;
|
||||||
width:100%;
|
width:100%;
|
||||||
}
|
}
|
||||||
@ -588,7 +597,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.customers-say {
|
.customers-say {
|
||||||
background:url(../img/customers-say.jpg) top/cover no-repeat;
|
background:url(../img/customers-say.jpg) top left/cover no-repeat;
|
||||||
min-height:600px;
|
min-height:600px;
|
||||||
height:50%;
|
height:50%;
|
||||||
@include std-shadow-in;
|
@include std-shadow-in;
|
||||||
@ -597,9 +606,11 @@
|
|||||||
h2 {
|
h2 {
|
||||||
@include std-shadow-text;
|
@include std-shadow-text;
|
||||||
position:absolute;
|
position:absolute;
|
||||||
bottom:5%;
|
bottom:3%;
|
||||||
padding:5%;
|
padding:3%;
|
||||||
color:$softwhite;
|
color:$softwhite;
|
||||||
|
font-size:4em;
|
||||||
|
@media all and(max-width:900px){font-size: 2.8em;}
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -62,7 +62,7 @@ html {
|
|||||||
|
|
||||||
.snap-top-menu {
|
.snap-top-menu {
|
||||||
@media all and(min-height:900px){
|
@media all and(min-height:900px){
|
||||||
margin-top:53px;
|
margin-top:60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
padding:0 0 0 0;
|
padding:0 0 0 0;
|
||||||
@ -99,6 +99,7 @@ html {
|
|||||||
//Header
|
//Header
|
||||||
header {
|
header {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
|
top:0;
|
||||||
@media all and(min-height:900px){
|
@media all and(min-height:900px){
|
||||||
position:fixed;
|
position:fixed;
|
||||||
}
|
}
|
||||||
@ -106,7 +107,6 @@ header {
|
|||||||
@include std-shadow;
|
@include std-shadow;
|
||||||
background:$softblack;
|
background:$softblack;
|
||||||
width:100%;
|
width:100%;
|
||||||
padding-top:2px;
|
|
||||||
height:60px;
|
height:60px;
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
padding-right:3%;
|
padding-right:3%;
|
||||||
@ -123,6 +123,27 @@ header {
|
|||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
vertical-align:-50%;
|
vertical-align:-50%;
|
||||||
|
|
||||||
|
&.current > a:before {
|
||||||
|
opacity:1;
|
||||||
|
}
|
||||||
|
|
||||||
|
> a {
|
||||||
|
font-variant:small-caps;
|
||||||
|
font-size: 1.1em;
|
||||||
|
font-weight:600 !important;
|
||||||
|
position:relative;
|
||||||
|
&:before {
|
||||||
|
position:absolute;
|
||||||
|
bottom:-3px;
|
||||||
|
left:5px;
|
||||||
|
right:5px;
|
||||||
|
content:" ";
|
||||||
|
border-bottom:1.7px solid $softwhite;
|
||||||
|
opacity:0;
|
||||||
|
transition:opacity 0.5s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
font-weight: 600 !important;
|
font-weight: 600 !important;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
@ -162,7 +183,7 @@ header {
|
|||||||
position:fixed;
|
position:fixed;
|
||||||
width:100%;
|
width:100%;
|
||||||
height:100%;
|
height:100%;
|
||||||
top:53px;
|
top:60px;
|
||||||
left:0;
|
left:0;
|
||||||
background:$transblack;
|
background:$transblack;
|
||||||
}
|
}
|
||||||
@ -172,9 +193,9 @@ header {
|
|||||||
z-index:12;
|
z-index:12;
|
||||||
display:block;
|
display:block;
|
||||||
position:fixed;
|
position:fixed;
|
||||||
top:53px;
|
top:60px;
|
||||||
height:100%;
|
height:100%;
|
||||||
background:tomato;
|
background:$softerblack;
|
||||||
right:-100%;
|
right:-100%;
|
||||||
transition:right 0.5s ease;
|
transition:right 0.5s ease;
|
||||||
min-width:200px;
|
min-width:200px;
|
||||||
@ -214,7 +235,7 @@ header {
|
|||||||
|
|
||||||
|
|
||||||
//Default body styles
|
//Default body styles
|
||||||
html,body{position:relative; height:100%;width:100%;}
|
html,body{position:absolute; min-height:110vh;width:100%;}
|
||||||
body {
|
body {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
@ -224,6 +245,7 @@ body {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
min-height: calc(100% - 60px);
|
min-height: calc(100% - 60px);
|
||||||
|
min-height:110vh;
|
||||||
margin: -7px auto;
|
margin: -7px auto;
|
||||||
> .page {
|
> .page {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
|
|||||||
@ -69,7 +69,7 @@
|
|||||||
box-shadow: 3px 3px 30px 0 rgba(0,0,0,.1);
|
box-shadow: 3px 3px 30px 0 rgba(0,0,0,.1);
|
||||||
}
|
}
|
||||||
@mixin std-shadow-text {
|
@mixin std-shadow-text {
|
||||||
text-shadow: 3px 3px 30px rgba(0,0,0,.1);
|
text-shadow: 3px 3px 10px rgba(0,0,0,.1);
|
||||||
}
|
}
|
||||||
@mixin std-shadow-in {
|
@mixin std-shadow-in {
|
||||||
box-shadow: inset 3px 3px 30px 0 rgba(0,0,0,.1);
|
box-shadow: inset 3px 3px 30px 0 rgba(0,0,0,.1);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user