Files
preview_sites/templates/windowcleaning/site/index.html
T

810 lines
25 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name = "format-detection" content = "telephone=no" />
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/camera.css">
<link rel="stylesheet" href="css/contact-form.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.2.1.js"></script>
<script src="js/camera.js"></script>
<script src='//maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false'></script>
<!--[if (gt IE 9)|!(IE)]><!-->
<script src="js/jquery.mobile.customized.min.js"></script>
<script src="js/wow/wow.js"></script>
<script>
$(document).ready(function () {
if ($('html').hasClass('desktop')) {
new WOW().init();
}
});
</script>
<!--<![endif]-->
<script src="js/TMForm.js"></script>
<script src="js/modal.js"></script>
<!--[if lt IE 9]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body id="home" class="home hashAncor">
<div class="content-load-spinner"></div>
<div class="top_section">
<div class="left_txt wow fadeInLeft">
<p class="txt1">8901 Marmora Road, Glasgow, D04 89GR</p>
<p class="txt2"><i class="fa fa-phone"></i>+1 959 603 6035</p>
</div>
<ul class="soc_icons_top wow fadeInRight">
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<!--========================================================
HEADER
=========================================================-->
<header id="header">
<div id="stuck_container">
<h1><a href="index.html"><img src="images/logo.png" alt="Window"></a></h1>
<nav>
<ul class="sf-menu">
<li><a href="#about">About Us<strong></strong></a>
<ul class="submenu">
<li><a href="#">Quisque nulla</a></li>
<li><a href="#">Vestibulum libero nis</a></li>
<li><a href="#">Porta vel scelerisque eget</a>
<ul class="submenu2">
<li><a href="#">News</a></li>
<li><a href="#">Archive</a></li>
</ul>
</li>
<li><a href="#">Malesuada at neque</a></li>
<li><a href="#">Vivamus eget nibh</a></li>
</ul>
</li>
<li><a href="#services">Services<strong></strong></a></li>
<li><a href="#testimonials">Testimonials<strong></strong></a></li>
<li><a href="#tips">Tips<strong></strong></a></li>
<li id="last-li"><a href="#contacts">Contacts<strong></strong></a></li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
<!--========================================================
CONTENT
=========================================================-->
<section id="content">
<!-- start Camera -->
<div class="camera_main_container wow fadeIn">
<div class="slider_wrapper">
<div class="" id="camera_wrap">
<div data-src="images/slide1.jpg">
<div class="caption fadeIn">
<div class="caption_bg">
<span class="slider_txt1">We've got window cleaning <br>down to a science!</span>
</div>
</div>
</div>
<div data-src="images/slide2.jpg">
<div class="caption fadeIn">
<div class="caption_bg">
<span class="slider_txt1">Professional window cleaning!</span>
</div>
</div>
</div>
<div data-src="images/slide3.jpg">
<div class="caption fadeIn">
<div class="caption_bg">
<span class="slider_txt1">100% Guarantee on our work</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end Camera -->
<section id="about" class="hashAncor txt_cntr">
<div class="container">
<h2>Welcome!</h2>
<div class="row">
<div class="grid_8 preffix_2">
<p class="marTop1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vesean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis nque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio.</p>
</div>
</div>
<div class="row">
<div class="grid_4">
<i class="fa fa-clock-o icon1 color1 wow flipInX" data-wow-delay="0.0s"></i>
<h3 class="wow flipInY" data-wow-duration="" data-wow-delay="0.1s">How Often?</h3>
<p class="wow flipInY" data-wow-duration="" data-wow-delay="0.2s">Lorem ipsum dolor sit amet, couer adicing elit. Praesent vesean nonummt mauris. Pasellus porta. Fusce suscipit vars mi. Cciis nque penatibus et magnis dis parturient montes, nascmus. Nulla dui. Fusce feugiat malesuada odio.</p>
</div>
<div class="grid_4">
<i class="fa fa-star icon1 color2 wow flipInX" data-wow-delay="0.3s"></i>
<h3 class="wow flipInY" data-wow-duration="" data-wow-delay="0.4s">Premium Services</h3>
<p class="wow flipInY" data-wow-duration="" data-wow-delay="0.5s">Lorem ipsum dolor sit amet, couer adicing elit. Praesent vesean nonummt mauris. Pasellus porta. Fusce suscipit vars mi. Cciis nque penatibus et magnis dis parturient montes, nascmus. Nulla dui. Fusce feugiat malesuada odio.</p>
</div>
<div class="grid_4">
<i class="fa fa-thumbs-o-up icon1 color3 wow flipInX" data-wow-delay="0.6s"></i>
<h3 class="wow flipInY" data-wow-duration="" data-wow-delay="0.7s">Stay Satisfied</h3>
<p class="wow flipInY" data-wow-duration="" data-wow-delay="0.8s">Lorem ipsum dolor sit amet, couer adicing elit. Praesent vesean nonummt mauris. Pasellus porta. Fusce suscipit vars mi. Cciis nque penatibus et magnis dis parturient montes, nascmus. Nulla dui. Fusce feugiat malesuada odio.</p>
</div>
</div>
</div>
</section>
<section class="box-1" data-stellar-background-ratio="-0.1">
<div class="container">
<p class="txt3 wow fadeInUp">“Established in 1995, Window Cleaning Service has <br>replaced thousands and cleaned millions of windows <br>throughout the city.”</p>
</div>
</section>
<section id="services" class="hashAncor">
<div class="container">
<div class="row">
<div class="grid_3 wow fadeInLeft">
<p class="txt4">What we do</p>
</div>
<div class="grid_9 wow fadeInRight">
<p>Lorem ipsum dolor sit amet, couer adicing elit. Praesent vesean nauris. Pasellus porta. Fusce suscipit vars mi. Cciis nque penatibus et magnis dis parturient montes, nascmus. Nulla dui. Fusce feugiat malesuada odio i nunc odio, gravida at, cursus nec, luctus a, lorem.</p>
</div>
</div>
<div class="hline"></div>
<div class="row txt_cntr">
<div class="grid_4">
<div class="wrapper wow rotateInDownLeft" data-wow-delay="0.0s">
<img src="images/services_pic1.jpg" alt="" class="img1">
<h4>Vestibulum iaculis</h4>
<p>Lorem ipsum dolor sit amet, couer adicing elit. Praesent vesean nonummt mauris.</p>
<a href="#" class="more_btn">learn more</a>
</div>
<div class="wrapper marTop2 wow rotateInUpLeft" data-wow-delay="0.2s">
<img src="images/services_pic2.jpg" alt="" class="img1">
<h4>Vestibulum iaculis</h4>
<p>Lorem ipsum dolor sit amet, couer adicing elit. Praesent vesean nonummt mauris.</p>
<a href="#" class="more_btn">learn more</a>
</div>
</div>
<div class="grid_4">
<div class="wrapper wow fadeInDown" data-wow-delay="0.4s">
<img src="images/services_pic3.jpg" alt="" class="img1">
<h4>Vestibulum iaculis</h4>
<p>Lorem ipsum dolor sit amet, couer adicing elit. Praesent vesean nonummt mauris.</p>
<a href="#" class="more_btn">learn more</a>
</div>
<div class="wrapper marTop2 wow fadeInUp" data-wow-delay="0.6s">
<img src="images/services_pic4.jpg" alt="" class="img1">
<h4>Vestibulum iaculis</h4>
<p>Lorem ipsum dolor sit amet, couer adicing elit. Praesent vesean nonummt mauris.</p>
<a href="#" class="more_btn">learn more</a>
</div>
</div>
<div class="grid_4">
<div class="wrapper wow rotateInDownRight" data-wow-delay="0.8s">
<img src="images/services_pic5.jpg" alt="" class="img1">
<h4>Vestibulum iaculis</h4>
<p>Lorem ipsum dolor sit amet, couer adicing elit. Praesent vesean nonummt mauris.</p>
<a href="#" class="more_btn">learn more</a>
</div>
<div class="wrapper marTop2 wow rotateInUpRight" data-wow-delay="1.0s">
<img src="images/services_pic6.jpg" alt="" class="img1">
<h4>Vestibulum iaculis</h4>
<p>Lorem ipsum dolor sit amet, couer adicing elit. Praesent vesean nonummt mauris.</p>
<a href="#" class="more_btn">learn more</a>
</div>
</div>
</div>
</div>
</section>
<section id="testimonials" class="box-2 hashAncor" data-stellar-background-ratio="-0.1">
<div class="container">
<div class="row">
<div class="grid_10 preffix_1">
<div id="owl2">
<div class="item">
<blockquote>
<p class="bq_txt1 wow fadeInUp" data-wow-delay="0.5s">Lorem ipsum dolor sit amet, couer adicing elit. Praesent vesean nauris. Pasellus porta. Fusce suscipit vars mi. Cciis nque penatibus et magnis dis parturient montes, nascmus. Nulla dui. Fusce feugiat malesuada odio i nunc odio, gravida at, cursus nec, luctus a, lorem.</p>
<img src="images/qote_pic1.jpg" alt="" class="img2 img_rounded no_resize wow fadeInUp" data-wow-delay="0.8s">
<p class="bq_txt2 wow fadeInUp" data-wow-delay="1.1s">Helen Smith</p>
<p class="bq_txt3 wow fadeInUp" data-wow-delay="1.4s">Westigo Industries</p>
</blockquote>
</div>
<div class="item">
<blockquote>
<p class="bq_txt1">Lorem ipsum dolor sit amet, couer adicing elit. Praesent vesean nauris. Pasellus porta. Fusce suscipit vars mi. Cciis nque penatibus et magnis dis parturient montes, nascmus. Nulla dui. Fusce feugiat malesuada odio i nunc odio, gravida at, cursus nec, luctus a, lorem.</p>
<img src="images/qote_pic2.jpg" alt="" class="img2 img_rounded no_resize">
<p class="bq_txt2">Sarah Johnson</p>
<p class="bq_txt3">Westigo Industries</p>
</blockquote>
</div>
<div class="item">
<blockquote>
<p class="bq_txt1">Lorem ipsum dolor sit amet, couer adicing elit. Praesent vesean nauris. Pasellus porta. Fusce suscipit vars mi. Cciis nque penatibus et magnis dis parturient montes, nascmus. Nulla dui. Fusce feugiat malesuada odio i nunc odio, gravida at, cursus nec, luctus a, lorem.</p>
<img src="images/qote_pic1.jpg" alt="" class="img2 img_rounded no_resize">
<p class="bq_txt2">Helen Smith</p>
<p class="bq_txt3">Westigo Industries</p>
</blockquote>
</div>
<div class="item">
<blockquote>
<p class="bq_txt1">Lorem ipsum dolor sit amet, couer adicing elit. Praesent vesean nauris. Pasellus porta. Fusce suscipit vars mi. Cciis nque penatibus et magnis dis parturient montes, nascmus. Nulla dui. Fusce feugiat malesuada odio i nunc odio, gravida at, cursus nec, luctus a, lorem.</p>
<img src="images/qote_pic2.jpg" alt="" class="img2 img_rounded no_resize">
<p class="bq_txt2">Sarah Johnson</p>
<p class="bq_txt3">Westigo Industries</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="tips" class="hashAncor">
<div class="container txt_cntr">
<h2>Tips</h2>
<p class="marTop1">Praesent vesean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. </p>
<div class="row marTop3">
<div class="grid_4 wow fadeInLeft">
<figure class="figure1 wow fadeInLeft" data-wow-delay="0.0s">
<a href="images/tips_big_pic1.jpg" class="magnifier2" >
<img src="images/tips_pic1.jpg" alt="">
<span class="zoom"><span class="descr_txt">Lorem ipsum dolor sit amet, couer adicing elit. </span></span>
</a>
</figure>
<figure class="figure1 wow fadeInLeft" data-wow-delay="0.6s">
<a href="images/tips_big_pic2.jpg" class="magnifier2" >
<img src="images/tips_pic2.jpg" alt="">
<span class="zoom"><span class="descr_txt">Lorem ipsum dolor sit amet, couer adicing elit. </span></span>
</a>
</figure>
</div>
<div class="grid_4 wow fadeInLeft">
<figure class="figure1 wow fadeInDown" data-wow-delay="0.2s">
<a href="images/tips_big_pic3.jpg" class="magnifier2" >
<img src="images/tips_pic3.jpg" alt="">
<span class="zoom"><span class="descr_txt">Lorem ipsum dolor sit amet, couer adicing elit. </span></span>
</a>
</figure>
<figure class="figure1 wow fadeInUp" data-wow-delay="0.8s">
<a href="images/tips_big_pic4.jpg" class="magnifier2" >
<img src="images/tips_pic4.jpg" alt="">
<span class="zoom"><span class="descr_txt">Lorem ipsum dolor sit amet, couer adicing elit. </span></span>
</a>
</figure>
</div>
<div class="grid_4 wow fadeInLeft">
<figure class="figure1 wow fadeInRight" data-wow-delay="0.4s">
<a href="images/tips_big_pic5.jpg" class="magnifier2" >
<img src="images/tips_pic5.jpg" alt="">
<span class="zoom"><span class="descr_txt">Lorem ipsum dolor sit amet, couer adicing elit. </span></span>
</a>
</figure>
<figure class="figure1 wow fadeInRight" data-wow-delay="1.0s">
<a href="images/tips_big_pic6.jpg" class="magnifier2" >
<img src="images/tips_pic6.jpg" alt="">
<span class="zoom"><span class="descr_txt">Lorem ipsum dolor sit amet, couer adicing elit. </span></span>
</a>
</figure>
</div>
</div>
<a href="gallery.html" class="more_btn v2">view all</a>
</div>
</section>
<section id="contacts" class="hashAncor">
<div class="container">
<div class="row">
<div class="grid_3 wow fadeInLeft">
<p class="txt4">How to find</p>
</div>
<div class="grid_9 wow fadeInRight">
<p>Lorem ipsum dolor sit amet, couer adicing elit. Praesent vesean nauris. Pasellus porta. Fusce suscipit vars mi. Cciis nque penatibus et magnis dis parturient montes, nascmus. Nulla dui. Fusce feugiat malesuada odio i nunc odio, gravida at, cursus nec, luctus a, lorem.</p>
</div>
</div>
<div class="hline"></div>
<section class="content_map">
<div class="google-map-api">
<div id="map-canvas" class="gmap"></div>
</div>
</section>
<div class="hline"></div>
<div class="wrapper txt_cntr">
<h2 class="marTop4">Order a Service</h2>
<p class="marTop1">Praesent vesean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. </p>
</div>
<form id="contact-form">
<div class="contact-form-loader"></div>
<fieldset>
<label class="name">
<input type="text" name="name" placeholder="Your Name" value="" data-constraints="@Required @JustLetters" />
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid name.</span>
</label>
<div class="row">
<div class="grid_6">
<label class="email">
<input type="text" name="email" placeholder="Your Email" value="" data-constraints="@Required @Email" />
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid email.</span>
</label>
</div>
<div class="grid_6">
<label class="phone">
<input type="text" name="phone" placeholder="Your Phone Number" value="" data-constraints="@Required @JustNumbers" />
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid phone.</span>
</label>
</div>
</div>
<label class="message">
<textarea name="message" placeholder="Your Message" data-constraints='@Required @Length(min=20,max=999999)'></textarea>
<span class="empty-message">*This field is required.</span>
<span class="error-message">*The message is too short.</span>
</label>
<div class="btns">
<!-- <a href="#" class="more_btn" data-type="reset">Clear</a> -->
<a href="#" class="more_btn2" data-type="submit">Send</a>
</div>
</fieldset>
<div class="modal fade response-message">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
You message has been sent! We will be in touch soon.
</div>
</div>
</div>
</div>
</form>
</div>
</section>
</section>
<!--========================================================
FOOTER
=========================================================-->
<footer id="footer">
<div class="container">
<div class="row">
<div class="grid_12">
<ul class="soc_icons">
<li class=" wow fadeInUp" data-wow-delay="0.0s"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class=" wow fadeInUp" data-wow-delay="0.3s"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class=" wow fadeInUp" data-wow-delay="0.6s"><a href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
<div class="hline v3"></div>
<p class="txt_priv wow fadeInLeft"><span class="txt_upp">Window Cleaning Service</span> &copy; <span id="copyright-year"></span> <a href="privacy.html" class="link1">Privacy policy.</a> <a href="#" class="link1">Terms of use</a><br><!--{%FOOTER_LINK} --></p>
</div>
</div>
</div>
</footer>
<script src="js/script.js"></script>
<!--[if (gt IE 9)|!(IE)]><!-->
<script src="js/jquery.mobile.customized.min.js"></script>
<!--<![endif]-->
<script type="text/javascript">
$(document).ready(function(){
jQuery('#camera_wrap').camera({
loader: false,
pagination: true,
thumbnails: false,
height: '35.416666666%',
fx: 'curtainBottomLeft',
rows: '3',
slicedCols: '3',
slicedRows: '3',
caption: false
});
});
$(document).ready(function(){
// Initialize the gallery
$('.magnifier2').touchTouch();
});
</script>
<script src="js/owl.carousel.js"></script>
<script>
$(document).ready(function(){
/*carousel*/
var owl = $("#owl2");
owl.owlCarousel({
items : 1, //10 items above 1000px browser width
itemsDesktop : [995,1], //5 items between 1000px and 901px
itemsDesktopSmall : [767, 1], // betweem 900px and 601px
itemsTablet: [700, 1], //2 items between 600 and 0
itemsMobile : [479, 1], // itemsMobile disabled - inherit from itemsTablet option
navigation : false,
pagination : true
});
});
</script>
<script type="text/javascript">
google_api_map_init();
function google_api_map_init(){
var map;
var coordData = new google.maps.LatLng(parseFloat(40.646197), parseFloat(-73.9724068,14));
var marker;
var styleArray = [
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 29
},
{
"weight": 0.2
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 18
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 21
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36
},
{
"color": "#000000"
},
{
"lightness": 40
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 19
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
},
{
"weight": 1.2
}
]
}
]
var markerIcon = {
url: "images/gmap_marker.png",
size: new google.maps.Size(42, 65),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(21, 70)
};
function initialize() {
var mapOptions = {
zoom: 14,
center: coordData,
scrollwheel: false,
// styles: styleArray
}
var contentString = "<div></div>";
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200
});
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
marker = new google.maps.Marker({
map:map,
draggable:true,
position: coordData,
icon: markerIcon
});
}
google.maps.event.addDomListener(window, "load", initialize);
}
</script>
</body>
</html>