index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Stone Surface Design</title>
        <meta name="viewport" content="width=device-width, initial-scale=2.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'> 

        <!--Le HTML5 shim, for IE6-8 support of HTML5 elements--> 
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
       <!-- Le styles -->
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="css/font-awesome.css" media="all" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" media="all" />
        <link rel="stylesheet" type="text/css" href="css/jquery.fancybox-thumbs.css?v=1.0.2" />
        <link href="css/animate.css" rel="stylesheet" type="text/css" />
        <link href="css/isotope.css" rel="stylesheet" type="text/css" />
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <link href="css/style-responsive.css" rel="stylesheet" type="text/css" />
        <link href="css/narrow.css" rel="stylesheet" type="text/css" />
        <link href="css/msgBox.css" rel="stylesheet" type="text/css" />
        <!-- Le fav and touch icons -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
        <link rel="shortcut icon" href="ico/favicon.png">


    </head>

    <body>

        <!--################ NAVIGATION START ################-->

        <div class="navbar-wrapper" >
            <div class="navbar navbar-fixed-top" id="navigation">
                <div class="navbar-inner">
                    <div class="container">
                        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="brand" href="#">  <img src="images/logo.png" width="150" id="logokhan"></a>
                        <div class="nav-collapse collapse">
                            <ul class="nav pull-right">

                                <li class="active">
                                    <a href="#features">Home</a>

                                </li>
                                <!--<li class="">-->
                                    <!--<a href="#features">Features</a>-->
                                <!--</li>-->
                                <li class="">
                                    <a href="#support">Services</a>
                                </li>
                                <li class="">
                                    <a href="#port">Gallery</a>
                                </li>
                                <!--<li class="">-->
                                    <!--<a href="#testimonials">Testimonials</a>-->
                                <!--</li>-->
                                

                                <li class="dropdown">
                                    <a href="" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a>
                                    <div class="dropdown-menu" style="padding: 15px;">
                                        <ul class="unstyled footer-links">
                                            <li><a href="http://www.silestoneusa.com/colors/" target="_blank" class="flink">Silestone</a></li>
                                            <li><a href="http://bottegastone.com/material-selector/" target="_blank" class="flink">Natural Stone</a></li>
                                            <!--<li><a href="#" class="flink">Blog</a></li>-->
                                            <!--<li><a href="#" class="flink">Contact</a></li>-->
                                            <!--<li><a href="#" class="flink">Privacy Policy</a></li>-->
                                            <!--<li><a href="#" class="flink">Terms of Use</a></li>-->
                                        </ul>

                                    </div>
                                </li>

                                <li class="">
                                    <a href="#contact">Request an estimate</a>
                                </li>


                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!--################ NAVIGATION END ################-->

        <!--################ WRAP START ################-->

        <div id="wrap">


            <!--################ MAIN CONTAINER START ################-->


            <!--################ FEATURES SECTION START ################-->
            <section  id="features" >

                <div id="features-banner" data-stellar-background-ratio="0" >

                    <h1>Stone Surface Design</h1>
                    <p class="sub-heading-support">we make it simple</p>
                </div>

                <div class="container">

                    <div class="row margintop20">

                        <div class="span4">
                            <h2 class="text-center">Kitchen</h2>
                            <p>We can transform your kitchen from drab to contemporary. Our kitchen services include, granite design and tile work on countertops, backsplashes and Islands.  </p>
                        </div><!-- /span4 -->
                        <div class="span4">
                            <h2 class="text-center">Bath</h2>
                            <p>Your bathroom can go from traditional to modern with our customized and unique granite counter tops, baths and tile work. </p>

                        </div><!-- /span4 -->
                        <div class="span4">
                            <h2 class="text-center">Fireplace</h2>
                            <p>Customize your house and make it a home by allowing us to help you redesign your basic fireplace into to a new-aged, modern fireplace made of beautiful granite.</p>

                        </div><!-- /span4 -->
                    </div>
                    <hr class="line">
                    

                </div>


            </section>


            <!--################ FEATURES SECTION END ################-->


            <!--################ SUPPORT SECTION START ################-->


            <section id="support" class="paddingbottom40">
                <div id="support-banner" data-stellar-background-ratio="0.5" >

                    <div id="carousel_fade_1" class="carousel slide carousel-fade">

                        <div class="carousel-inner">
                            <div class="item active">
                                <h1><i class="icon-globe"></i> Custom Design</h1>
                                <!--<p class="sub-heading-support">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. </p>-->


                            </div>
                            <div class="item">
                                <h1><i class="icon-gift"></i> Countertops</h1>
                                <!--<p class="sub-heading-support">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. </p>-->
                            </div>
                            <div class="item">
                                <h1><i class="icon-star"></i> Quality Installs</h1>
                                <!--<p class="sub-heading-support">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. </p>-->

                            </div>

                        </div>
                        <button class="carousel-control left car-button" href="#carousel_fade_1" data-slide="prev"><i class="icon-chevron-left"></i></button>
                        <button class="carousel-control right car-button" href="#carousel_fade_1" data-slide="next"><i class="icon-chevron-right"></i></button>

                    </div>
                </div>
                <div class="container">

                    <div class="row center">


                        <div class="span4 margintop20">
                            <div class="row left">
                                <div class="span1">
                                    <i class=" support-icon color1"></i>
                                </div>
                                <div class="span3">
                                    <h2>Kitchen</h2>
                                    <ul class="unstyled">
                                        <li><i class="icon-ok"></i> Granite Countertops</li>
                                        <li><i class="icon-ok"></i> Tile Backsplashes</li>
                                        <li><i class="icon-ok"></i> Islands</li>
                                        <li><i class="icon-ok"></i> Custom Design</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="span4 margintop20">
                            <div class="row left">
                                <div class="span1"><i class=" support-icon color2"></i></div>
                                <div class="span3">
                                    <h2>Bath</h2>
                                    <ul class="unstyled">
                                        <li><i class="icon-ok"></i> Custom Sinks</li>
                                        <li><i class="icon-ok"></i> Granite or Tile installations</li>
                                        <li><i class="icon-ok"></i> Ask us about anything</li>
                                    </ul></div>
                            </div>
                        </div>
                        <div class="span4 margintop20">
                            <div class="row left">
                                <div class="span1"><i class=" support-icon color3"></i></div>
                                <div class="span3">
                                    <h2>Fireplaces</h2>
                                    <ul class="unstyled">
                                        <li><i class="icon-ok"></i> Custom Granite Fireplaces</li>
                                        <li><i class="icon-ok"></i> Elegant Designs</li>
                                    </ul></div>
                            </div>
                        </div>


                    </div>


                </div>

            </section>

            <!--################ PORTFOLIO SECTION START ################-->
            <section id="port">
            <section class="portfolio home-portfolio">

                <div class="container" id="portfolio">

                    <div class="row">
                        <div class="span12 center">
                            <h1 class="big-heading">Gallery</h1>
                            <h4 class="sub-heading">see come of our projects...</h4>


                        </div>


                    </div>
                    <div class="row">
                        <div class="span12">
                            <div id="filters_container">
                                <ul id="filters">
                                    <li><a id="all" href="#" data-filter="*" class="active">All</a></li>
                                    <li class="separator">/</li>
                                    <li><a href="#" data-filter=".tile">Tile</a></li>
                                    <li class="separator">/</li>
                                    <li><a href="#" data-filter=".one">One</a></li>
                                    <li class="separator">/</li>
                                    <li><a href="#" data-filter=".two">Two</a></li>

                                </ul>
                            </div>
                        </div>
                    </div>        
                    <div class="row" id="portfolio-container">

                    </div>
                </div>


            </section>
            </section>


            <section id="call-to-action" class="margintop20 marginbot20">

                <div class="call-to-action-link">
                    <a href="#"><span>Choose US for your Next Project →</span></a>
                </div>

            </section>


            <!--################ CONTACT SECTION START ################-->


            <section id="contact" class="margintop40">
                <div id="contact-background" data-stellar-background-ratio="0" >

                    <h1>Request an estimate</h1>
                    <p class="sub-heading-contact">WE WANT TO HEAR FROM YOU</p>
                </div>
                <div class="container">
                    <div class="row margintop20">


                        <div class="span6">
                            <h2 class="big-h2-heading"><i  class="icon-envelope-alt"></i> Contact Us</h2>
                            <p>Send us a message and we will return contact you right away!</p>
                            
                                    <div class="clearfix">
                                        <label for="name"><span>Name:</span></label>
                                        <div class="input">
                                            <input  id="name" name="name" type="text" value="" class="input-xlarge">

                                        </div>


                                    </div>

                                    <div class="clearfix">
                                        <label for="email"><span>Email:</span></label>
                                        <div class="input">
                                            <input  id="email" name="email" type="text" value="" class="input-xlarge">
                                        </div>
                                    </div>
                                    
                                    <div class="clearfix">
                                        <label for="phone"><span>Phone:</span></label>
                                        <div class="input">
                                            <input  id="phone" name="phone" type="text" value="" class="input-xlarge">
                                        </div>
                                    </div>

                                    <div class="clearfix">
                                        <label for="message"><span>Message:</span></label>
                                        <div class="input">
                                            <textarea tabindex="3" class="input-xlarge" id="message" name="body" rows="7"></textarea>
                                        </div>
                                    </div>

                                    <div class="actions">
                                        <button id="sendContact" tabindex="3" class="btn btn-landing ">Send</button>
                                    </div>

                                
                        </div>
                        <div class="span5 offset1">
                            <!--<h2 class="big-h2-heading"><i  class="icon-map-marker"></i> Find Us</h2>-->
                            <!--<p>Let us know what you think and we will get back to you with a cool reply!</p>-->
                            <!--<p><i  class="icon-road"></i> Street Name - 1215/3, Our Land, Earth</p>-->
                            <!--<p><i  class="icon-home"></i> London</p>-->
                            <!--<p><i  class="icon-phone"></i> +1-234-56789</p>-->
                            <!--<iframe id="small-map" width="350" height="320" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="https://maps.google.pl/maps?f=q&amp;source=s_q&amp;hl=pl&amp;geocode=&amp;q=Los+Angeles,+Kalifornia,+Stany+Zjednoczone&amp;aq=0&amp;oq=Los&amp;sll=50.143066,18.85267&amp;sspn=0.057207,0.168915&amp;t=m&amp;ie=UTF8&amp;hq=&amp;hnear=Los+Angeles,+Hrabstwo+Los+Angeles,+Kalifornia,+Stany+Zjednoczone&amp;ll=34.052234,-118.243685&amp;spn=0.036979,0.084457&amp;z=14&amp;iwloc=near&amp;output=embed"></iframe>-->


                        </div>
                    </div>
                </div>


            </section>


            <!--################ CONTACT SECTION END ################-->


        </div>

        <!--################ PUSH WILL KEEP THE FOOTER AT BOTTOM IF YOU WANT TO CREATE OTHER PAGES ################-->

        <div id="push"></div>


        <!--################ FOOTER START ################-->

        <footer id="footer">
            <div class="container">
                <div class="row">
                    <div class="span4">
                        <!--<h2>about us...</h2>-->
                        <img src="images/logo.png" >

                        <!--<p><br /Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam.</p>-->
                        <p><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam.</p>
                        <p class="copyright">
                            © 2013 Joshua Taylor Lunsford
                        </p>
                    </div>
                    <div class="span2">
                        <h2>links </h2>
                        <ul class="unstyled footer-links">
                            <li><a href="http://www.silestoneusa.com/colors/" class="flink">Silestone</a></li>
                            <!--<li><a href="#" class="flink">The Team</a></li>-->
                            <!--<li><a href="#" class="flink">Blog</a></li>-->
                            <!--<li><a href="#" class="flink">Contact</a></li>-->
                            <!--<li><a href="#" class="flink">Privacy Policy</a></li>-->
                            <!--<li><a href="#" class="flink">Terms of Use</a></li>-->
                        </ul>
                    </div>

                    <div class="span3">
                        <h2>subscribe </h2>
                        <a href="#" class="social-network sn2 facebook"></a>


                    </div>

                    <div class="span3">
                        <h2 class="center"><i class="icon-twitter"></i></h2>
                        <ul id="twitter" class="unstyled">

                        </ul>
                    </div>


                </div>
            </div>

        </footer>


        <!--################ FOOTER END ################-->


        <!--################ JAVASCRIPTS ################-->

        <!-- Placed at the end of the document so the pages load faster -->
        <script src="js/jquery.js"></script>
        <script src="js/modernizr.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/jquery.fitvids.js"></script>
        <script src="js/jquery.easing.1.3.js"></script>
        <script src="js/twitter.js"></script>
        <script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
        <script type="text/javascript" src="js/jquery.fancybox-thumbs.js?v=1.0.2"></script>
        <script type="text/javascript" src="js/jquery.fancybox-media.js?v=1.0.0"></script>
        <script src="js/stellar.js"></script>
        <script src="js/nicescroll.min.js"></script>
        <script src="js/jquery.isotope.min.js"></script>
        <script src="js/custom.js"></script>
        <script src="js/custom-home.js"></script>
        <script src="js/portfolio.js"></script>
        <script src="js/jquery.flexslider.js"></script>
        <script src="js/retina.js"></script>
        <script src="js/underscore.js"></script>
        <script src="js/msgBox.js"></script>
        
        
        <script type="text/javascript">
            $(function() {
                $("#sendContact").click(function(){
                    $.ajax({
                        type : "GET",
                        dataType : "jsonp",
                        url: 'http://stonesurfacedesignservices.aws.af.cm/email?subject=New lead for '+$('#name').val()+'&emailbody=Reply to:'+encodeURIComponent($('#email').val()+'\r\nContact Number: '+$('#phone').val()+'\r\nContact Comment:'+$('#message').val()),
                        success: function(data){
                            console.log(data);
                            $.msgBox({
                                title: "Thank You from Stone Surface Design",
                                content: "We appreciate your business!",
                                type: "info",
                                showButtons:false,
                                opacity:0.9,
                                autoClose:true
                            });
                        }
                    });
                });

                $.getJSON('https://graph.facebook.com/146468118881697/photos', function(data) {

                    
                    _.each(data.data, function(image){
                        if(image.height>100&&image.width>100)
                            $('#portfolio-container').append('' +
                                    '<div class="span3 project art tile">' +
                                    '   <img width="'+image.width+'" height="'+image.height+'" src="'+image.source+'" />' +
                                    '<span class="overlay"></span>' +
                                    '<div class="cnt">' +
                                    '<h6>'+image.name+'</h6>' +
                                    '<a href="'+image.source+'" class="fancybox-media btn btn-normal" >View details</a>' +
                                    '</div>' +
                                    '</div>');

                    });
                    
                    
                     $.getJSON('https://graph.facebook.com/146467615548414/photos', function(data) {

                    
                        _.each(data.data, function(image){
                            if(image.height>100&&image.width>100)
                                $('#portfolio-container').append('' +
                                        '<div class="span3 project art two">' +
                                        '   <img width="'+image.width+'" height="'+image.height+'" src="'+image.source+'" />' +
                                        '<span class="overlay"></span>' +
                                        '<div class="cnt">' +
                                        '<h6>'+image.name+'</h6>' +
                                        '<a href="'+image.source+'" class="fancybox-media btn btn-normal" >View details</a>' +
                                        '</div>' +
                                        '</div>');
    
                        });
                        
                        
                        $.getJSON('https://graph.facebook.com/146467382215104/photos', function(data) {

                    
                            _.each(data.data, function(image){
                                if(image.height>100&&image.width>100)
                                    $('#portfolio-container').append('' +
                                            '<div class="span3 project art one">' +
                                            '   <img width="'+image.width+'" height="'+image.height+'" src="'+image.source+'" />' +
                                            '<span class="overlay"></span>' +
                                            '<div class="cnt">' +
                                            '<h6>'+image.name+'</h6>' +
                                            '<a href="'+image.source+'" class="fancybox-media btn btn-normal" >View details</a>' +
                                            '</div>' +
                                            '</div>');
        
                            });


                            var $container = $('#portfolio-container'),
                                    $filters = $("#filters a");
        
                            $container.imagesLoaded(function() {
                                $container.isotope({
                                    itemSelector: '.project',
                                    masonry: {
                                        columnWidth: 0
                                    }
                                });
                            });
        
                            // filter items when filter link is clicked
                            $filters.click(function() {
                                $filters.removeClass("active");
                                $(this).addClass("active");
                                var selector = $(this).data('filter');
                                $container.isotope({filter: selector});
                                return false;
                            });
                        });
                     });
                });

            });
        </script>
        <!--     
        *************** RETINA JS FUNCTIONALITY   ****************
        
        The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote
        high-resolution image variants on your server.
        
        For example, if you have an image on your page that looks like this:
        <img src="/images/my_image.png" />
        
        The script will check your server to see if an alternative image exists at this path:
        "/images/my_image@2x.png"
        
        That's it! 
        :)

        <!--RETINA JS END-->


        <!--REGISTER MODAL --> 

        <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3>Create a New Account</h3>
            </div>
            <div class="modal-body">

                <form class="form-vertical form-modal">
                    <fieldset>

                        <!-- Form Name -->


                        <!-- Text input-->
                        <div class="control-group">
                            <label class="control-label">Name</label>
                            <div class="controls">
                                <input id="textinput" name="textinput" type="text" placeholder="" class="input-xxlarge">

                            </div>
                        </div>

                        <!-- Text input-->
                        <div class="control-group">
                            <label class="control-label">Email</label>
                            <div class="controls">
                                <input id="textinput" name="textinput" type="text" placeholder="" class="input-xxlarge">

                            </div>
                        </div>


                    </fieldset>
                </form>


            </div>
            <div class="modal-footer">

                <button id="singlebutton" name="singlebutton" class="btn btn-primary">Create New Account</button>
            </div>
        </div>

        <!--REGISTER MODAL END--> 


<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-42417527-1', 'stonesurfacedesign.com');
  ga('send', 'pageview');

</script>

    </body>
</html>