<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Arabella Hill</title>
<!-- Bootstrap -->
<script type="text/javascript" src="js/scroll.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="https://use.fontawesome.com/9be29f1b6e.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid" id="header">
<div class="page-header" class="img-responsive" id="main-logo">
<img src="img/arabella.jpg" class="img-responsive">
</div>
</div>
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="" src="">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</li>
<li><a href="#">Services</li>
<li><a href="#">About</li>
<li><a href="#">Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/forest.jpg" alt="forest" class="img-responsive">
</div>
<div class="item">
<img src="img/snowtiger.jpg" alt="meow" class="img-responsive">
</div>
<div class="item">
<img src="img/tiger.jpg" alt="meowwww!" class="img-responsive">
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
<div id="first-section" class="jumbotron">
<div class="row">
<div class="col-sm-4">
<img src="img/forestbeautiful.jpg" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="img/moss.jpg" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="img/beautiful.jpg" class="img-responsive">
</div>
</div>
</div>
<div id="second-section" class="jumbotron">
<div class="container">
<br >
<p class="text-center">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit, neque eget faucibus bibendum, ligula diam gravida risus, sed faucibus felis velit gravida tellus. Phasellus vitae tempor ante, in eleifend eros. Morbi eu felis placerat, convallis orci vitae, rutrum nulla. Integer sed est euismod, tristique diam tincidunt, faucibus ex. Aliquam dui odio, fringilla sit amet nulla eget, vehicula semper ante. Suspendisse commodo felis orci, non ullamcorper ex faucibus ut. Fusce tempus scelerisque justo, pharetra efficitur risus porttitor quis. Vestibulum et tellus ligula.
Sed molestie iaculis massa, nec ornare justo vehicula ac. Aliquam laoreet nisl volutpat sem sodales vehicula. Donec et porta sem. Vivamus aliquam facilisis ipsum sit amet rutrum. Aliquam lobortis interdum auctor. Aliquam ut vulputate dui. Integer eu blandit erat. Etiam quam ligula, porttitor in porta sit amet, sodales quis magna. Mauris non gravida arcu, id imperdiet metus. Mauris eu viverra justo, quis pretium turpis.
Mauris laoreet ante et elementum mollis. Nunc tempor nisi id facilisis porttitor. Integer ante metus, ullamcorper at egestas a, vehicula in ligula. Donec sed lacus est. Aenean blandit tincidunt dolor nec lacinia. Praesent finibus turpis ultrices, semper libero at, semper sapien. Morbi molestie ex congue risus porttitor, nec feugiat orci pulvinar.
</p>
</div>
</div>
<section class="module parallax parallax-1">
<div class="container">
<h1>Services</h1>
</div>
</section>
<section class="module content">
<div class="container">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit vitae purus quis imperdiet. Aenean elementum porta erat, at posuere est elementum non. Sed ut lorem eu ante ornare tristique quis eu odio. Proin nibh ligula, semper eget mauris nec, egestas mattis libero. Vestibulum auctor tellus vel augue rutrum lacinia. Nunc nec felis velit. Nulla augue magna, vehicula in convallis sed, pretium nec odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis a mauris vestibulum, ornare elit ac, consectetur sem. Pellentesque sem neque, ultricies nec lobortis eget, pellentesque nec lorem. Phasellus feugiat varius nisl, vel efficitur eros ultrices et. Sed sollicitudin, massa sit amet finibus eleifend, leo magna rhoncus sem, suscipit lacinia nulla mauris nec nibh. Aliquam ut massa id justo ullamcorper dictum vel rhoncus urna.
</p>
</div>
</section>
</div>
<section class="module parallax parallax-2">
<div class="container" class="img-responsive">
<h1>Gardens</h1>
</div>
</section>
<div class="container" id="gallery-container">
<div class="row" id="gallery-row">
<div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
<img src="img/decking.jpg">
</div>
<div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
<img src="img/decking.jpg">
</div>
<div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
<img src="img/decking.jpg">
</div>
<div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4" >
<img src="img/decking.jpg">
</div>
<div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
<img src="img/decking.jpg">
</div>
<div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
<img src="img/decking.jpg">
</div>
<div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
<img src="img/decking.jpg">
</div>
<div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
<img src="img/decking.jpg">
</div>
<div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
<img src="img/decking.jpg">
</div>
</div>
</div>
</section>
<div class="content">
</div>
<footer id="myFooter">
<div class="container">
<p class="footer-copyright">© 2017 Copyright Text</p>
</div>
<div class="footer-social">
<a href="#" class="social-icons"><i class="fa fa-facebook"></i></a>
<a href="#" class="social-icons"><i class="fa fa-google-plus"></i></a>
<a href="#" class="social-icons"><i class="fa fa-twitter"></i></a>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
.navbar-default
{
background-color: #fbfbfb;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
.page-header {
max-width: 100%;
max-height: 100%;
}
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
.img-responsive {
max-width: 40%;
margin-right: 50px;
}
.jumbotron {
background-color: white;
}
.jumbotron img{
display:block;
margin-left:auto;
margin-right:auto;
}
.navbar {
}
.scroll-top {
position:fixed;
bottom:0;
right:6%;
z-index:100;
background: #f2f3f2;
font-size:24px;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
.scroll-top a:link,.scroll-top a:visited {
color:#222;
}
.navbar-nav {
margin-left: 50px;
margin-top: -5px;
}
#main-logo > img {
margin: auto;
}
#test {
margin-left: auto;
margin-right: auto;
}
.col-lg-12 {
max-height: 100%;
background-color: transparent;
}
#services{
height: 500px;
background-color: transparent;
}
.img-circle {
border-radius: 50%;
}
.row img {
max-width: 100%;
width: 1000px;
padding: 5px;
}
.container-fluid {
padding-right: 0px;
padding-left: 0px;
}
#first-section {
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
}
#first-section .row .col-sm-4 {
height: 350px;
border-left: 4px solid black;
border-top: 4px solid black;
padding: 0;
height: 337px;
}
#first-section .row img {
padding: 0;
height: 333px;
}
#gallery-row {
margin-top: 15px;
}
.col-md-4 img {
height: 333px;
padding: 10px;
}
#second-section {
height: 600px;
background-color: #fbfbfb;
padding: 5px;
border-top: 3px solid black;
border-bottom: 2px solid black;
}
#second-section > div > p {
font-size: 15px;
margin-top: -80px;
}
#second-section .container {
margin-top: 140px;
}
#test {
max-width: 100%;
max-height: 100%;
height: 250px;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
.col-xxs-12 {
padding: 0;
}
@media only screen and (max-width : 480px) {
.navbar-default .navbar-nav>li>a {
font-size: 11px;
}
}
@media only screen and (max-width : 500px) {
.col-xs-6 {
width: 100%;
}
}
@media only screen and (max-width: 540px ) {
#second-section > div > p {
font-size: 14px;
}
section.module p:last-child{
font-size: 14px;
}
}
ul.nav.navbar-nav {
margin-left: -7px;
background-color: white;
}
div.navbar-header {
background-color: white;
}
img.img-responsive {
height: 267px;
padding: 0;
padding-bottom: -500px;
max-height: 100%;
max-width: 100%;
height: 270px;
}
#first-section .row .col-md-4 {
height: 274px;
}
.text-center p {
font-size: 1px;
}
section.module:last-child {
margin-bottom: 0;
}
section.module h2 {
margin-bottom: 40px;
font-family: "Roboto Slab", serif;
font-size: 30px;
}
section.module p {
margin-bottom: 40px;
font-size: 16px;
font-weight: 300;
}
section.module p:last-child {
margin-bottom: 0;
}
section.module.content {
padding: 40px 0;
height: 600px;
}
section.module.parallax {
height: 600px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover !important;
margin-top: -30px;
}
section.module.parallax h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 48px;
line-height: 600px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
background-image: url("../img/snowtiger.jpg");
background-repeat:no-repeat;
background-size: contain;
background-position:center;
background-size: 100%;
max-width: 100%;
height: auto2s;
}
section.module.parallax-2 {
background-image: url("../img/tiger.jpg");
}
section {
border-bottom: 2px solid black;
}
#myFooter{
padding-top:32px;
}
#myFooter .container{
text-align: center;
}
#myFooter .footer-copyright{
margin-bottom: 35px;
text-align: center;
color: #777;
}
#myFooter ul{
list-style-type: none;
padding: 0;
margin-bottom: 18px;
}
#myFooter a{
color: #282b2d;
font-size: 18px;
}
#myFooter li{
display: inline-block;
margin: 0px 15px;
line-height: 2;
}
#myFooter .footer-social{
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
background-color: #fdfdfd;
}
#myFooter .fa{
font-size: 36px;
margin-right: 15px;
margin-left: 20px;
background-color: white;
color: #d0d0d0;
border-radius: 51%;
padding: 10px;
height: 60px;
width: 60px;
text-align: center;
line-height: 43px;
text-decoration: none;
transition:color 0.2s;
}
#myFooter .fa-facebook:hover{
color: #2b55ff;
}
#myFooter .fa-facebook:focus{
color: #2b55ff;
}
#myFooter .fa-google-plus:hover{
color:red;
}
#myFooter .fa-google-plus:focus{
color:red;
}
#myFooter .fa-twitter:hover{
color: #00aced;
}
#myFooter .fa-twitter:focus{
color:#00aced;
}
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 300) {
$("#nav").addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$("#nav").removeClass('navbar-fixed');
}
});
});
