charlenopires/Single-Page-Site-Layout.markdown

## index.html
<html>
<head>
  <meta http-equiv="Content-Language" content="en-us">
  <title> Gonzales Firewood & Tree Service </title>

  <style>
    @import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700|Montserrat:400,700|Roboto:400,300italic,100italic,100,300,400italic,500,500italic,700,700italic,900,900italic);
  </style>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

	<script>
    $(function() {
      $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
          }
        }
      });
    });
	</script>

</head>

<body>
  <div class="page-container">

    <nav>
      <div class="shade">
        <ul>
          <li><a href="#welcome"> Welcome </a></li>
          <li><a href="#about"> About </a></li>
          <li><a href="#union"> Union </a></li>
          <li><a href="#school"> School </a></li>
          <li><a href="#contact"> Contact </a></li>
        </ul>
      </div>
    </nav>

    <div id ="welcome"> </div>
    <div class="section welcome">
      <h1> Updog </h1>
      <h2> Colorado's premier firewood, landscaping and tree-maintenance professionals. </h2>
      <h3> Licensed and insured. </h3>
    </div>

    <div id="about"> </div>
    <div class="section about">
    </div>

    <div id ="union"> </div>
    <div class="section union">
    </div>

    <div id ="recent"> </div>
    <div class="section recent">
    </div>

    <div id ="school"> </div>
    <div class="section school">
    </div>

    <div id ="uwyo"> </div>
    <div class="section uwyo">
    </div>

    <div id ="contact"> </div>
    <div class="section contact">
    </div>

    <div id ="site"> </div>
    <div class="section site">
    </div>

  </div>

</body>
</html>

## Single-Page-Site-Layout.markdown

      
    Raw
  

              Single-Page-Site-Layout.markdown
            
          
    Single-Page Site Layout

A pure CSS/HTML single-page website layout that'e easy to customize and update.
A Pen by Jacob Chavez on CodePen.
License.

  
## style.css
*
{
  box-sizing:border-box;
  -moz-box-sizing:border-box;
}

::selection
{
  color:#fff;
  background: #7FBE56; /* Safari */
}

::-moz-selection
{
  color:#fff;
  background: #7FBE56; /* Firefox */
}


/*ANIMATIONS*/
@-webkit-keyframes flyIn
{
  from {padding: 0vh 80px 0px 80px;}
  to {padding: 45vh 80px 0px 80px;}
}
@keyframes flyIn
{
  from {padding: 0vh 80px 0px 80px;}
  to {padding: 45vh 80px 0px 80px;}
}

@-webkit-keyframes fade
{
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fade
{
  from {opacity: 0;}
  to {opacity: 1;}
}


/*BASICS*/
h1
{
  margin: 0;
  padding: 20px;
}

h2
{
  margin: 0;
  padding: 20px;
}

h3
{
  margin: 0;
  padding: 20px;
}

em
{
  margin: 0;
  padding: 20px;
}

body
{
  margin: 0px;
  background-color: #fff;
}


/*NAVIGATION*/
nav
{
  margin: 0px;
  position: fixed;
  float: right;
  font-family: 'Montserrat', sans-serif;
  font-style: none;
  font-weight: 400;
  font-size: 15px;
  color: #fff;
}

ul
{
  list-style-type:none;
  margin: 15px 20px 15px 20px;
  padding:0;
  overflow:hidden;
  float:right;
}

li
{
  float:left;
}

a:link,a:visited
{
  display:block;
  width: auto;
  color:#FFFFFF;
  text-align:center;
  padding: 12px 30px 12px 30px;
  text-decoration:none;
  text-transform:uppercase;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  transition: background-color .5s;
  -webkit-transition: background-color .5s;
  opacity: 1; !important
}

a:hover,a:active
{
  background-color:#7A991A;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

img
{
  border: 0px;
}


/*PAGES*/
.page-container
{
  margin: 0px auto;
  padding: 0px 0px 0px 0px;
  width:100%;
}

.section
{
  margin: 0;
  min-height: 100vh;
  height: auto;
}

.welcome
{
  background-color: #447821;
  background-image: url("");
  background-repeat:no-repeat;
  background-position:left top;
}
.welcome h1
{
  padding: 45vh 80px 0px 80px;
  font-family: 'Oswald', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 65px;
  line-height: 100%;
  text-transform: uppercase;
  color: #8dd35f;

  -webkit-animation: flyIn 2s, fade 2s;
  animation: flyIn 2s, fade 2s;
}
.welcome em
{
  padding: 0px;
  font-family: 'Oswald', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 65px;
  line-height: 100%;
  text-transform: uppercase;
  color: #fff;
}
.welcome h2
{
  padding: 16px 25% 0 80px;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  font-weight: 100;
  font-size: 32px;
  line-height: 120%;
  text-transform: none;
  color: #fff;
  -webkit-animation: fade 2s;
  animation: fade 2s;
}
.welcome h3
{
  padding: 16px 10% 50px 80px;
  font-family: 'Roboto', sans-serif;
  font-style: none;
  font-weight: 100;
  font-size: 18px;
  line-height: 100%;
  text-transform: none;
  color: #71c837;
  -webkit-animation: fade 2s;
  animation: fade 2s;
}

.about
{
  background-color: #fff;
}

.union
{
  background-color: #fff;
}

.recent
{
  background-color: #fff;
}

.school
{
  background-color: #fff;
}

.uwyo
{
  background-color: #fff;
}

.contact
{
  background-color: #fff;
}

.site
{
  background-color: #fff;
}

/*GRIDS*/
.grid
{
  overflow: hidden;
  width: 90%;
  padding: 20px 0px 0px 20px;
  margin: 0px auto;
}

.col
{
  float: left;
  padding-right: 20px;
}

.sixtySix
{
  width: 66.66%;
}

.thirtyThree
{
  width: 33.33%;
}

.fullWidth
{
  width:100%
}

.twentyFive
{
  width:25%
}

.half
{
  width: 50%;
}

.module
{
  padding: 20px;
  background-color: #313131;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}


/*SPACERS*/
.whiteSpace-small
{
  overflow: hidden;
  width: 100%;
  height: 10px;
}

.whiteSpace
{
  overflow: hidden;
  width: 100%;
  height: 20px;
}

.whiteSpace-medium
{
  overflow: hidden;
  width: 100%;
  height: 40px;
}

.whiteSpace-large
{
  overflow: hidden;
  width: 100%;
  height: 80px;
}

.whiteSpace-xLarge
{
  overflow: hidden;
  width: 100%;
  height: 160px;
}

.whiteSpace-xxLarge
{
  overflow: hidden;
  width: 100%;
  height: 320px;
}


/*DECORATIVE ELEMENTS*/
.logo
{
  overflow: scroll;
  float:left;
  margin: 10px;
  z-index: 1;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #7A991A;
  transition: margin .5s, height .5s, width .5s, border-radius .5s;
}

.logo:hover
{
  margin: 0px;
  padding: 20px;
  height: 200px;
  width: 100%;
  border-radius: 0px;
}

.shade
{
  float:left;
  position:inherit;
  background-color: #000;
  opacity: .5;
  height: auto;
  width: 100%;
  z-index: -1;
  transition: opacity .3s, background-color .3s;
  -webkit-transition: opacity .3s, background-color .3s;
}

.shade:hover
{
  opacity: 1;
  background-color: #222;
}
	<html>
	<head>
	<meta http-equiv="Content-Language" content="en-us">
	<title> Gonzales Firewood & Tree Service </title>

	<style>
	@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700\|Montserrat:400,700\|Roboto:400,300italic,100italic,100,300,400italic,500,500italic,700,700italic,900,900italic);
	</style>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

	<script>
	$(function() {
	$('a[href*=#]:not([href=#])').click(function() {
	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

	var target = $(this.hash);
	target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
	if (target.length) {
	$('html,body').animate({
	scrollTop: target.offset().top
	}, 1000);
	return false;
	}
	}
	});
	});
	</script>

	</head>

	<body>
	<div class="page-container">

	<nav>
	<div class="shade">
	<ul>
	<li><a href="#welcome"> Welcome </a></li>
	<li><a href="#about"> About </a></li>
	<li><a href="#union"> Union </a></li>
	<li><a href="#school"> School </a></li>
	<li><a href="#contact"> Contact </a></li>
	</ul>
	</div>
	</nav>

	<div id ="welcome"> </div>
	<div class="section welcome">
	<h1> Updog </h1>
	<h2> Colorado's premier firewood, landscaping and tree-maintenance professionals. </h2>
	<h3> Licensed and insured. </h3>
	</div>

	<div id="about"> </div>
	<div class="section about">
	</div>

	<div id ="union"> </div>
	<div class="section union">
	</div>

	<div id ="recent"> </div>
	<div class="section recent">
	</div>

	<div id ="school"> </div>
	<div class="section school">
	</div>

	<div id ="uwyo"> </div>
	<div class="section uwyo">
	</div>

	<div id ="contact"> </div>
	<div class="section contact">
	</div>

	<div id ="site"> </div>
	<div class="section site">
	</div>

	</div>

	</body>
	</html>
	*
	{
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	}

	::selection
	{
	color:#fff;
	background: #7FBE56; /* Safari */
	}

	::-moz-selection
	{
	color:#fff;
	background: #7FBE56; /* Firefox */
	}


	/ANIMATIONS/
	@-webkit-keyframes flyIn
	{
	from {padding: 0vh 80px 0px 80px;}
	to {padding: 45vh 80px 0px 80px;}
	}
	@keyframes flyIn
	{
	from {padding: 0vh 80px 0px 80px;}
	to {padding: 45vh 80px 0px 80px;}
	}

	@-webkit-keyframes fade
	{
	from {opacity: 0;}
	to {opacity: 1;}
	}
	@keyframes fade
	{
	from {opacity: 0;}
	to {opacity: 1;}
	}


	/BASICS/
	h1
	{
	margin: 0;
	padding: 20px;
	}

	h2
	{
	margin: 0;
	padding: 20px;
	}

	h3
	{
	margin: 0;
	padding: 20px;
	}

	em
	{
	margin: 0;
	padding: 20px;
	}

	body
	{
	margin: 0px;
	background-color: #fff;
	}


	/NAVIGATION/
	nav
	{
	margin: 0px;
	position: fixed;
	float: right;
	font-family: 'Montserrat', sans-serif;
	font-style: none;
	font-weight: 400;
	font-size: 15px;
	color: #fff;
	}

	ul
	{
	list-style-type:none;
	margin: 15px 20px 15px 20px;
	padding:0;
	overflow:hidden;
	float:right;
	}

	li
	{
	float:left;
	}

	a:link,a:visited
	{
	display:block;
	width: auto;
	color:#FFFFFF;
	text-align:center;
	padding: 12px 30px 12px 30px;
	text-decoration:none;
	text-transform:uppercase;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	transition: background-color .5s;
	-webkit-transition: background-color .5s;
	opacity: 1; !important
	}

	a:hover,a:active
	{
	background-color:#7A991A;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	}

	img
	{
	border: 0px;
	}


	/PAGES/
	.page-container
	{
	margin: 0px auto;
	padding: 0px 0px 0px 0px;
	width:100%;
	}

	.section
	{
	margin: 0;
	min-height: 100vh;
	height: auto;
	}

	.welcome
	{
	background-color: #447821;
	background-image: url("");
	background-repeat:no-repeat;
	background-position:left top;
	}
	.welcome h1
	{
	padding: 45vh 80px 0px 80px;
	font-family: 'Oswald', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 65px;
	line-height: 100%;
	text-transform: uppercase;
	color: #8dd35f;

	-webkit-animation: flyIn 2s, fade 2s;
	animation: flyIn 2s, fade 2s;
	}
	.welcome em
	{
	padding: 0px;
	font-family: 'Oswald', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 65px;
	line-height: 100%;
	text-transform: uppercase;
	color: #fff;
	}
	.welcome h2
	{
	padding: 16px 25% 0 80px;
	font-family: 'Roboto', sans-serif;
	font-style: italic;
	font-weight: 100;
	font-size: 32px;
	line-height: 120%;
	text-transform: none;
	color: #fff;
	-webkit-animation: fade 2s;
	animation: fade 2s;
	}
	.welcome h3
	{
	padding: 16px 10% 50px 80px;
	font-family: 'Roboto', sans-serif;
	font-style: none;
	font-weight: 100;
	font-size: 18px;
	line-height: 100%;
	text-transform: none;
	color: #71c837;
	-webkit-animation: fade 2s;
	animation: fade 2s;
	}

	.about
	{
	background-color: #fff;
	}

	.union
	{
	background-color: #fff;
	}

	.recent
	{
	background-color: #fff;
	}

	.school
	{
	background-color: #fff;
	}

	.uwyo
	{
	background-color: #fff;
	}

	.contact
	{
	background-color: #fff;
	}

	.site
	{
	background-color: #fff;
	}

	/GRIDS/
	.grid
	{
	overflow: hidden;
	width: 90%;
	padding: 20px 0px 0px 20px;
	margin: 0px auto;
	}

	.col
	{
	float: left;
	padding-right: 20px;
	}

	.sixtySix
	{
	width: 66.66%;
	}

	.thirtyThree
	{
	width: 33.33%;
	}

	.fullWidth
	{
	width:100%
	}

	.twentyFive
	{
	width:25%
	}

	.half
	{
	width: 50%;
	}

	.module
	{
	padding: 20px;
	background-color: #313131;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	}


	/SPACERS/
	.whiteSpace-small
	{
	overflow: hidden;
	width: 100%;
	height: 10px;
	}

	.whiteSpace
	{
	overflow: hidden;
	width: 100%;
	height: 20px;
	}

	.whiteSpace-medium
	{
	overflow: hidden;
	width: 100%;
	height: 40px;
	}

	.whiteSpace-large
	{
	overflow: hidden;
	width: 100%;
	height: 80px;
	}

	.whiteSpace-xLarge
	{
	overflow: hidden;
	width: 100%;
	height: 160px;
	}

	.whiteSpace-xxLarge
	{
	overflow: hidden;
	width: 100%;
	height: 320px;
	}


	/DECORATIVE ELEMENTS/
	.logo
	{
	overflow: scroll;
	float:left;
	margin: 10px;
	z-index: 1;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background-color: #7A991A;
	transition: margin .5s, height .5s, width .5s, border-radius .5s;
	}

	.logo:hover
	{
	margin: 0px;
	padding: 20px;
	height: 200px;
	width: 100%;
	border-radius: 0px;
	}

	.shade
	{
	float:left;
	position:inherit;
	background-color: #000;
	opacity: .5;
	height: auto;
	width: 100%;
	z-index: -1;
	transition: opacity .3s, background-color .3s;
	-webkit-transition: opacity .3s, background-color .3s;
	}

	.shade:hover
	{
	opacity: 1;
	background-color: #222;
	}