5.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS Rocks!</title>
	<meta name="viewport" content="width=1024">
    <link rel="stylesheet" href="dist/coderdeck-core.min.css" type="text/css">

	<link rel="stylesheet" id='style-theme-link' href="src/css/coderdeck.css" type="text/css" >

	<script src='dist/jquery.min.js'></script>
	<script src="dist/modernizr.js"></script>	

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

</head>
<body class="deck-container">
	<script type='text/coderdeck' id='coderdeck-default'>
	  <html>
	    <head>
	      <script src='src/jquery.min.js'>SCRIPTEND
	    </head>
	    <body>
		    CODE
	    </body>
	</html>
	</script>

	<script type='text/coderdeck' id='coderdeck-plain'>
		<html>
			<title>test</title>
			<link rel="stylesheet" href="reset.css">
			<body>
				CODE
			</body>
		</html>
	</script>

	<script type='text/coderdeck' id='coderdeck-css-playground'>
		<html>
			<title>test</title>
				CODE
			<body>
				<h1>I'm a H1 heading</h1>
				<h2>I'm a H2 heading</h2>
				<p>Pargraph of text &lt;p&gt;</p>
				<div class='stuff'>&lt;div&gt; with class "stuff"</div>
				<div id='my-div'>&lt;div&gt; with id "my-div"</div>
			</body>
		</html>
	</script>


	<script type='text/coderdeck' id='coderdeck-style-example'>
		<html>
			<title>test</title>
			<style>
				CODE
			</style>
			<body>
				<h1>I'm a H1 heading</h1>
				<h2>I'm a H2 heading</h2>
				<h3>Pargraph of text &lt;p&gt; here</p>
				<div class='stuff'>I'm a div &lt;div&gt; with class "stuff"</div>
				<div id='my-div'>I'm a &lt;div&gt; with id "my-div"</div>
			</body>
		</html>
	</script> 	


<!-- Create any number of elements with class slide within the container -->
<article class='slide slide-subhead'>
<h1>CSS Layout</h1>
<h2>Week 5</h2>
<p><a href='http://marthar.github.com/webfall-2015/5.html'>http://marthar.github.com/webfall-2015/5.html</a></p>
</article>
	
<article class='slide slide-list'>
<h1>Order of Business</h1>
	<ol>
		<li class="slide">
			<h3>Review Homework</h3>
		</li>
		<li class="slide">
			<h3>CSS Layout</h3>
		</li>
		<li class="slide">
			<h3>Box Model</h3>
		</li>
		<li class="slide">
			<h3>Floats</h3>
		</li>
		<li class="slide">
			<h3>Position</h3>
		</li>
		<li class="slide">
			<h3>Exercises</h3>
		</li>
		<li class="slide">
			<h3>CSS3</h3>
		</li>
		<li class="slide">
			<h3>Homework</h3>
		</li>
	</ol>
</article>


<article class='slide slide-subhead'>
<h1>Homework</h1>
<h2><a href="homework-monday.html">Monday </a>|<a href="homework-friday.html"> Friday</a></h2>
</article>

<article class='slide slide-accent'>
	<h1>Let's Talk CSS Layout</h1>
</article>

<article class="slide slide-list">
<h1>Layout Properties</h1>
<ul>
<li class="slide">
	<h3>Box model: margin, padding, width, height</h3>
</li>
<li class="slide">
	<h3>top, bottom, left, right</h3>
</li>
<li class="slide">
	<h3>border</h3>
</li>
<li class="slide">
	<h3>position [ static, relative, absolute ]</h3>
</li>
<li class="slide">
	<h3>ﬂoat [ left, right, none ], clear [ left, right, both]</h3>
</li>
<li class="slide">
	<h3>display [none, block, inline inline-block]</h3>
</li>
<li class="slide">
	<h3>visibility [visible, hidden]</h3>
</li>
<li class="slide">
	<h3>background (color, image, repeat, position)</h3>
</li>
</ul>
</article>

<article class='slide slide-accent'>
	<h1>Box Model</h1>
</article>


<article class='slide slide-image'>
<h1>Layout = Box Model</h2>
<img src='images/layout.jpg'/>
</article>

<article class="slide slide-list">
<h1>Layout Properties</h1>
<ul>
<li class="slide">
	<h3>Content:text the tags are wrapping</h3>
		<ul>
			<li>color:red;</li>
			<li>font-size:20px;</li>
			<li>text-transform:uppercase;</li>
		</ul>	
</li>
<li class="slide">
	<h3>Padding:color behind the text</h3>
	<ul>
		<li>padding-top:5px; (-left, -right, -top, -bottom)</li>
		<li>padding:5px 10px;</li>
		<li>padding:5px 3px 10px 20px;</li>
	</ul>	
	
</li>
<li class="slide">
	<h3>Border:line around the padding</h3>
	<ul>
		<li>border-style:solid;</li>
		<li>border-width:5px;</li>
		<li>border-color:red;</li>
		<li>border:5px solid red;</li>
	</ul>
</li>
<li class="slide">
	<h3>Margin:transparent space around the padding and boarder</h3>
	<ul>
		<li>margin-top:5px; (-left, -right, -top, -bottom)</li>
		<li>margin:5px 10px;</li>
		<li>margin:5px 3px 10px 20px;</li>
	</ul>
</li>
</ul>
</article>

<article class='slide slide-list'>
<h2>Box Model Exercise</h2>
<textarea class='coder-editor coder-editor-split coder-editor-instant'  data-save='S2012-blog-post-chop'>
<style>
  #box1 { 
    background-color:teal;
  }

  #box2 { 
    background-color:orange;
  }


</style>

<div id="box1">I'm a box</div>
<div id="box2">I'm a box 2!</div>
</textarea>
</article> 


<article class='slide slide-accent'>
	<h1>How do you layout elements on the page?</h1>
</article>


<article class="slide slide-list">
<h1>Only two ways to layout:</h1>
	<ul>
		<li class="slide">
    <h3>1. Using floats to align things next to each other</h3>
		</li>
		<li class="slide">
			<h3>2. Use “position:absolute; top:...; left:....” inside of a positioned container.</h3>
		</li>
    <style>
.position-example { 
  -webkit-transition: -webkit-transform 1s linear; 
  -webkit-transform: translate(0,0) rotate(0deg); }
.position-example.deck-current {
 -webkit-transform: translate(30px,250px) rotate(15deg);
}
    </style>
		<li class="position-example slide">
    <h3 style=''>(I lied) 3. you can use transforms - but let's ignore those for now</h3>
		</li>
	</ul>
</article>

<article class="slide slide-list">
<h1>Layout with floats</h1>
<h3>Use this for content, page elements that need to flow or resize</h3><br/>
	<ul>
		<li class="slide">
    <h3>Use float:left or float:right to float elements</h3>
		</li>
		<li class="slide">
    <h3>Make sure that elements have a width - floating will squeze elements down</h3>
		</li>
		<li class="slide">
    <h3>Make sure to clear your floats otherwise the container won't have a height</h3>
		</li>
		<li class="slide">
    <h3>You need an extra element to clear, or can use the clearfix</h3>
		</li>
	</ul>
</article>

<article class='slide slide-accent'>
	<h1>Positioning</h1>
</article>

<article class="slide slide-list">
<h1>Position</h1>
<h3>used for elements that will always stay in the same place (logos, navbars, footers)</h3><br/>
	<ul>
		<li class="slide">
			<h3>position:static</h3>
		</li>
		<li class="slide">
			<h3>position:relative</h3>
		</li>
		<li class="slide">
			<h3>position:absolute</h3>
		</li>
		<li class="slide">
			<h3>position:fixed</h3>
		</li>				
	</ul>
</article>

<article class="slide slide-list">
<h1>Position Static</h1>
	<ul>
		<li class="slide">
			<h3>The default - all elements are set to this already</h3>
		</li>
	</ul>
</article>

<article class="slide slide-list">
<h1>Position Relative</h1>
	<ul>
		<li class="slide">
			<h3>Same as Static until you set coordinates</h3>
		</li>
		<li class="slide">
			<h3>Use coordinates to move the item "relative" to where it is normally<br/>
				example: top:0px; left:0px;<br/>
				example: bottom:5px; right:20px;</h3> 
		</li>
		<li class="slide">
			<h3>When you move things relatively, the space they take-up on the page stays the same</h3>
		</li>
	</ul>
</article>


<article class="slide slide-list">
<h1>Position Absolute</h1>
	<ul>
		<li class="slide">
			<h3>Can move elements anywhere using top, left, right, bottom</h3>
		</li>
		<li class="slide">
			<h3>Warning: when you position absolutely the page element is removed completely from the flow of the page</h3>
		</li>		
		<li class="slide">
			<h3>Use “position:relative” to create an zone for absolutely positioning content</h3>
		</li>
		<li class="slide">
			<h3>Use “position:absolute; top:...; left:....” to place something inside that zone.</h3>
		</li>
	</ul>
</article>

<article class="slide slide-list">
<h1>Position Fixed</h1>
	<ul>
		<li class="slide">
			<h3>Use rarely - usually only for sticky navbars (page will scroll and nav stays at the top or bottom)</h3>
		</li>
	</ul>
</article>

<article class='slide slide-list'>
<h2>Positioning Exercise</h2>
<h3>using position:relative and absolute let's try to make this</h3>
<h3><img src="images/positioning-ex.gif"/></h3>
</article>


<article class='slide slide-list'>
<h2>Positioning Exercise</h2>
<textarea class='coder-editor coder-editor-split coder-editor-instant' >
<style>
  #container { 
    background-color:lightgray; 
    margin:20px; height:400px; 
  }

  .block1 {
    background-color:orange;
    padding:50px;
  }

  .block2 {
    background-color:red;
    padding:50px;
  }

  .block3 {
    background-color:teal;
    padding:50px;
  }

</style>
<section id='container'>
	  <div class='block1'></div>
	  <div class='block2'></div>
	  <div class='block3'></div>
</section>
</textarea>
<script type='coder-solution'>
<style>
  #container { 
    background-color:lightgray; 
    margin:20px; height:400px; 
    position:relative;
  }

  .block1 {
    background-color:orange;
    padding:50px;
    position:absolute;
  }

  .block2 {
    background-color:red;
    padding:50px;
    position:absolute;
    top:100px; 
    left:100px;
  }

  .block3 {
    background-color:teal;
    padding:50px;
    position:absolute;
    bottom:0;
    right:0;
  }

</style>
<section id='container'>
	  <div class='block1'></div>
	  <div class='block2'></div>
	  <div class='block3'></div>
</section>

</script>
</article> 


<article class='slide slide-list'>
<h1>Combining Floats and Positioning</h1>
<img src='images/position-exercise.png'/>
</article>


<article class='slide slide-list'>
<h2>Floats and Positioning Exercise</h2>
<textarea class='coder-editor coder-editor-full' data-coder-template="coderdeck-plain" id='coderdeck-default' data-save='fall2012-positioning'>
<style>
  #container { background-color:lightgray; margin:20px; height:300px; }


</style>
<div id='site'>
Above Container
<div id='container'>
  <div id='top-left'>I'm in the top left!</div>
  <div id='bottom-right'>I'm in the bottom right!</div>
  <div class='blocks'>
	  <div class='block'></div>
	  <div class='block'></div>
	  <div class='block'></div>
	  <div class='block'></div>
  </div>
</div>
Below Container
</div>
</textarea>
</article> 


<article class='slide slide-accent'>
<h1>Navbar Excercise 1: Styling</h1>
</article>


<article class='slide slide-list'>
<h2>Navbar: Make this</h2>
<img src='images/menubar.png'/>
<textarea class='coder-editor coder-editor-split' data-coder-template="coderdeck-plain" id='coderdeck-default'>
<style>
	/* Style it here */

</style>
<nav id='main-menu'>
<ul>
	<li>
		<a href="#">Home</a></li>
	<li>
		<a href="#">About</a></li>
	<li>
		<a href="#">Blog</a></li>
	<li class='last'>
		<a href="#">Contact</a></li>
</ul>
</nav>
</textarea>
<script type='coder-solution'>
<style>
/* Style it here */
#main-menu  {
    position:absolute;
    top:20px;
    right:20px;
    background-color:teal;
    float:right;
    border-radius:5px;
    box-shadow:4px 4px 4px #ddd;
    padding:0 10px;
    margin:0 20px;
 }
  #main-menu li { 
    float:left; 
    border-right:3px solid #fff;
  }
  #main-menu li.last { border:0px; }
  #main-menu li a { display:block; 
    padding:15px 15px;
    font-size:17px;
    color:white;
    font-family:sans-serif;
    text-transform:uppercase;
    text-decoration:none;
  }
  #main-menu li a:hover { background-color:#DDD; }
</style>
<nav id='main-menu'>
<ul>
	<li>
		<a href="#">Home</a></li>
	<li>
		<a href="#">About</a></li>
	<li>
		<a href="#">Blog</a></li>
	<li class='last'>
		<a href="#">Contact</a></li>
</ul>
</nav>
</script>
</article>


<article class='slide slide-list'>
<h2>Positioning Playground</h2>
<p> Static vs. Relative vs. Absolute vs. Fixed</p>
<textarea class='coder-editor coder-editor-split coder-editor-instant' data-language='html'>
<p>Here's a paragraph of text before!</p>
<div id='box1' class='box'>
  <div id='box2' class='box'>
    <div id='box3' class='box'>
     <div id='box4' class='box'>
     </div>
    </div>
  </div>
</div>
<p>Here's a paragraph of text after!</p>
<style>
   html, body { height: 100%; }
  .box { width:50%; height:50%; opacity:0.9; }
  #box1 { background-color:blue; }
  #box2 { background-color:red; }
  #box3 { background-color:green; }
  #box4 { background-color:orange; }
</style>
</textarea>
</article>

<article class='slide slide-list'>
<h1>Only way to position stuff? No</h1>
<ul>
	<li class="slide">
  <h3>Stuff next to other stuff?</h3> 
	</li>
  <li class="slide">
  <h3>Floats: move stuff left or right next to each other</h3>
  </li>
  <li class="slide">
  <h3>Display: inline, inline-block, block</h3>
  </li>
</ul>
</article>

<article class='slide slide-list'>
<h2>Display Playground</h2>
<p>Floats, clears, inline, inline-block, block</p>
<textarea class='coder-editor coder-editor-split coder-editor-instant' data-language='html'>
<div id='wrapper'>
  <div id='div1'>Here's a div before</div>
  <span id='span1'>Here's a span of text before!</span>
  <span id='span2'>Here's another span of somewhat longer text that is going right here</span>
  <span id='span3'>Here's a span of text after!</span>
  <div id='div2'>Here's a div after</div>
</div>
<style>
  body { font-size:2em; }
  span { background-color: pink; }
  #wrapper { background-color:rgba(200,200,200,0.7); }
</style>
</textarea>
</article>


<article class='slide slide-accent'>
	<h1>More Layout Techniques</h1>
</article>	

<article class="slide slide-subhead">
	<h1>Start with<br/> your reset</h1>
	<p>Eric Meyer Reset<br/>
		<a href="http://meyerweb.com/eric/tools/css/reset/">http://meyerweb.com/eric/tools/css/reset/</a>
	</p>
	<h2><a href="http://bit.ly/meyerreset">http://bit.ly/meyerreset</a>
	</h2>	
</article>

<article class='slide slide-list'>
	<h1>Centering Content</h1>
	<h3>Give it a width and set margin: 0 auto;</h3>
<pre>
body {
  margin:0 auto;
  width:960px;
}
	</pre>
</article>	


<article class="slide slide-list">
<h1>Basic Chop 101</h1>
	<ul>
		<li class="slide">
			<h3>Relatively positioned header</h3>
		</li>
		<li class="slide">
			<h3>Absolutely positioned top nav</h3>
		</li>
		<li class="slide">
			<h3>Image replacement logo</h3>
		</li>
		<li class="slide">
			<h3>Floated menu items</h3>
		</li>
		<li class="slide">
			<h3>Floated body</h3>
		</li>
		<li class="slide">
			<h3>Relatively positioned footer</h3>
		</li>	
	</ul>
</article>

<article class="slide slide-list">
<h2>CSS Code</h2>
	<pre>body { width:960px; margin:0 auto; }
		
header#site-header {
  position:relative; height:80px;
}

#site-header h1 a { 
  display:block;	
  text-indent:-9999px;    
  position:absolute;
  width:300px; height:80px;
  background:url(logo.png) no-repeat left top;
}
nav#top-nav { position:absolute; right:0px; top:0px; }

nav#main-menu { height:30px; background-color:black; }
nav#main-menu ul li { display:block; float:left; padding:0 5px; }
nav#main-menu ul li a { display:block; color:white; padding:5px 5px; background-color:blue; }

section#page-content { float:left; width:550px; padding:50px 20px; }
aside#sidebar { float:right; width:220px; padding:50px 10px;; }

footer#site-footer {     clear:both; background-color:black;     color:white; padding:10px 0px;  }</pre>
</article>

<article class="slide slide-list">
<h1>Floats, Clears and Clearfix</h1>
	<ul>
		<li class="slide">
			<h3>Put a background on your wrapper. What happens?</h3>
		</li>
		<li class="slide">
			<h3>Have to clear your floats, or use a clearfix.</h3>
		</li>
		<li class="slide">
			<h3>Will affect your content centering margin.</h3>
		</li>
	</ul>
</article>


<article class="slide slide-list">
<h2>Clearfix</h2>
	<pre>.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
	}

.clearfix { display: inline-block; }
  html[xmlns] .clearfix { display: block; }
  * html .clearfix { height: 1%; }</pre>
</article>


<article class='slide slide-accent'>
	<h1>CSS3</h1>
</article>

<article class="slide slide-list">
	<h1>CSS3 Properties</h1>
	<ol>
		<li class='slide'>
      <h3>border-radius</h3>
		</li>	
		<li class="slide">
      <h3>box-shadow</h3>
		</li>
		<li class="slide">
      <h3>text-shadow</h3>
		</li>
		<li class="slide">
    <h3><a href='http://www.html5rocks.com/en/tutorials/flexbox/quick/'>flexbox</a></h3>
		</li>
		<li class="slide">
    <h3>rgba</h3>
		</li>
		<li class="slide">
    <h3><a href='http://www.colorzilla.com/gradient-editor/'>background gradients</a></h3>
		</li>
	</ol>	
</article>	


<article class='slide slide-image'>
<h1><img src="images/polaroid.png" class='top-image'/>Let's make a polaroid</h1>
</article>

<article class='slide slide-list'>
<h3>Using</h3>
<ul>
	<li><h3>-webkit-transform: rotate(#deg)</h3></li>	
	<li><h3>border-radius: #</h3></li>
	<li><h3>box-shadow: left  bottom  spread  color</h3></li>
	<li><h3>text-shadow: #</h3></li>
</ul>	
</article>

<article class='slide slide-list'>
  <h1>Let's make a polaroid</h1>
  <p>Let's make a polaroid (<a href='http://www.flickr.com/photos/snowpeak/4152675183/'>Image Source</a>)</p>
  <textarea class='coder-editor coder-editor-instant'>
<style>
  .container { text-align:center; padding-top:30px;}
  .polaroid {
    display:inline-block;
    width: 282px;
    font-size:1.2em;
    color:#444;
    font-family:times;
    font-weight:bold;
 
</style>
<div class='container'>
  <div class='polaroid'>
   <img src='images/birds.jpg'>
    Those are some crazy birds!
  </div>
</div>

  </textarea>
<script type='coder-solution'>
<style>
  .container { text-align:center; padding-top:30px;}
  .polaroid {
    display:inline-block;
    width: 282px;
    border:1px solid #eee;
    border-radius:4px;
    padding:10px 10px 30px 10px;
    box-shadow:5px 5px 10px #CCC;
    -webkit-transform:rotate(15deg);
    font-size:1.3em;
    color:#444;
    background-color:#f3f3f3;
    font-family: Chalkboard, cursive;
    font-style:italic;
    text-transform:uppercase;
    font-weight:bold;
    text-shadow:1px 1px #fff;
  }
  img { margin-bottom:10px; }
  
</style>
<div class='container'>
  <div class='polaroid'>
   <img src='images/birds.jpg'>
    Those are some <br/>crazy birds!
  </div>
</div>

</script>
</article>


<article class='slide slide-list'>
<h2>CSS Transitions Example</h2>
<a href='http://css3.bradshawenterprises.com/all/'>More Examples</a>
<textarea class='coder-editor'>
<style>
  #box {
    transition: background-color 2s;
    -moz-transition: background-color 2s;
    -webkit-transition: background-color 2s;
    -ms-transition: background-clor 2s;
    -o-transition: background-color 2s;
    width:50px;
    height:50px;
    background-color:green;
  }

  #box:hover {
    background-color:red;

  }
</style>
<div id='box'></div>

</textarea>
</article>

<article class='slide slide-list'>
  <h2>CSS3 Animations</h2>
  <ul>
  	<li class="slide">
  		<h3>Are defined with keyframes</h3>
  	</li>
  	<li class="slide">
  		<h3>Have a name</h3>
  	</li>
  	<li class="slide">
  		<h3>Can have a number of other properties including direction, repeat, duration</h3>
  	</li>
  	<li class="slide">
    <h3><a href='http://www.w3.org/TR/css3-animations/'>See the spec</a></h3>
  	</li>
  </ul>
</article>

<article class='slide slide-list'>
  <h2>CSS3 Animations Example</h2>
  <p>You'll need all your prefixes here! (-webkit, -moz, -ms) - only showing webkit for brevity</p>
<textarea class='coder-editor'>
<style>

  @-webkit-keyframes coloranim {
    0% {
      background-color:green;
    }
    50% {
      background-color:red;
    }
    100% {
      background-color:blue;
    }
  }

  #box:hover { 
    -webkit-animation-name:none;
  }

  #box {
    background-color:black;
    width:50px;
    height:50px;
    -webkit-animation-name: coloranim;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 4;
    -webkit-animation-direction:alternate;
    -webkit-animation-timing-function: ease-in-out;
  }
</style>
<div id='box'></div>
</textarea>
</article>

<article class="slide slide-image">
	<h2>Exercise: Pulling it all Together</h2>
	<img src='images/screenshot.png'/>
</article>
	
<article class='slide slide-list'>
<h2>Exercise: Pulling it all Together</h2>
<textarea class='coder-editor coder-editor-full'>

<style>


</style>
	
<header id='site-header'>
  <h1>Logo</h1>
  <nav id='top-nav'>top-nav</nav>
</header>

<nav id='main-menu'>
  <ul>
   <li>main menu</li>
   <li>main menu</li>
   <li>main menu</li>
  </ul>	
</nav>

<article id='page'>
    <h1>Header 1</h1>
    <h2>Subhead</h2>
    <p>Text goes here, remember it's length might vary, so you might not want to set a specific height. Floating might be good.</p>

    <h2>Subhead</h2>
    <p>ext goes here, remember it's length might vary, so you might not want to set a specific height. Floating might be good.</p>
</article>

<aside id='sidebar'>
  <h1>Sidebar</h1>
  <ul>
    <li>Sidebar list</li>
    <li>Sidebar list</li>
    <li>Sidebar list</li>
  </ul>
</aside> <!-- end #sidebar -->
	
<footer id='site-footer'>
  <section id='footer-content'>
    <h1>Footer</h1>     
  </section>
</footer>

</textarea>
<script type='coder-solution'>

<style>

body {
	width:960px;
	margin:0 auto;
}

#site-header {
	position:relative;
	height:120px;
	background-color:#d4e0a3;
	
}

#site-header h1 {
	position:absolute;
	display:block;
	width:250px;
	height:100px;
	background-color:white;
	left:15px;
}
#top-nav { 
	position:absolute;
	right:15px;
	width:150px;
	height:20px;
	background-color:white;
}

	
#main-menu {
	position:relative;
	height:55px;
	background-color:#4f3a11;
}	
#main-menu li{
	float:left;
	display:block;
	padding:10px;
	margin:10px 0px 5px 15px;
	background-color:white;
}	


#page { 
	float:left; 
	width:60%;
	background-color:#fffac2;
	margin:20px 15px;
	padding:10px;
}	

#sidebar {
	float:right;
	width:30%;
	margin-top:20px;
	padding:10px;
	background-color:#fffac2;
}	

#site-footer {
	clear:both;
	position:relative;
	height:55px;
	background-color:#4f3a11;
}

#footer-content h1 {
	background-color:white;
	float:left;
	width:20%;
	margin:15px 15px;
}

</style>
	
<header id='site-header'>
  <h1>Logo</h1>
  <nav id='top-nav'>top-nav</nav>
</header>

<nav id='main-menu'>
  <ul>
   <li>main menu</li>
   <li>main menu</li>
   <li>main menu</li>
  </ul>	
</nav>

<article id='page'>
    <h1>Header 1</h1>
    <h2>Subhead</h2>
    <p>Text goes here, remember it's length might vary, so you might not want to set a specific height. Floating might be good.</p>

    <h2>Subhead</h2>
    <p>ext goes here, remember it's length might vary, so you might not want to set a specific height. Floating might be good.</p>
</article>

<aside id='sidebar'>
  <h1>Sidebar</h1>
  <ul>
    <li>Sidebar list</li>
    <li>Sidebar list</li>
    <li>Sidebar list</li>
  </ul>
</aside> <!-- end #sidebar -->
	
<footer id='site-footer'>
  <section id='footer-content'>
    <h1>Footer</h1>     
  </section>
</footer>

</script>
</article>

<article class='slide slide-homework' id="homework-5">
<h2>Homework</h2>
<h3 class='slide'>Reading</h3>
	<ul class='slide'>	
		<li>
            <h3><a href='http://alistapart.com/article/css-floats-101'>CSS Floats 101</a>
			</h3>
		</li>
		<li>
            <h3><a href='http://alistapart.com/article/css-positioning-101'>CSS Positioning 101</a>
			</h3>
		</li>
		<li>
            <h3><a href='http://learnlayout.com/'>Learn Layout</a>
			</h3>
		</li>
	</ul>
	
	<h3 class='slide'>Coding</h3>
       <ul class='slide'>
			<li>
				<h3>Finish Styling &amp; Layout of your Recipe card</h3>				
			</li>
			<li>
				<h3>Finish Styling &amp; Layout of  Cats vs. Dogs</h3>
			</li>
			<li>
				<h3>Start Styling &amp; Layout of Llama Love</h3>
			</li>
			<li>
				<h3>Start Styling &amp; Layout of Robots (will work on for next 2 weeks)</h3>
			</li>
		</ul>
</ul>	
	
	
</article>

<article class='slide slide-list'>
	<h1>Robots</h1>
		<h3><br/><img src="images/evilgenius.png" class='top-image'/><br/><br/></h3>
</article>

<article class='slide slide-list'>
	<h2>Llama Love</h2>
		<h3><br/><img src="images/css-style.png" class='top-image'/><br/><br/></h3>
</article>

<article class='slide slide-list'>
	<h2>Cats vs. Dog</h2>
		<h3><br/><img src="images/dogsvscat.png" class='top-image'/><br/><br/></h3>
</article>


<script src='dist/coderdeck.min.js'></script>

<!-- Prettify -->
<script src="src/prettify.js"></script>


<script>
	$(function() {
		$.deck('.slide');
	});
</script>
</body>
</html>