clhenrick · August 1, 2014 17:18
diff --git a/index.html b/index.html
 <!doctype HTML>
 <html>

 <!-- the head contains things such as our meta information, title and external links. Nothing visible in the browser's viewport goes in here -->
 <head>

  <!-- telling the browser what character encoding we are using. super important. -->
  <meta charset="utf-8">

  <!-- the title will show up in the browser's tab -->
  <title>Grumpy Cat Fan Club</title>

  <!-- linking an external CSS document
   ./ says look in the current folder while ../ says go up one folder -->
  <link rel="stylesheet" type="text/css" href="./styles.css">
 </head>

 <body>
  <!-- all of the visible HTML goes in here. Nothing visible should be outside of the body tag -->

  <!-- a div with an id of wrapper that will center our website in the browser's viewport -->
  <div id="wrapper">

    <!-- the header will contain our title and navbar at the top -->
    <header id="banner">

      <!-- our title goes in this div -->
      <div id="title">
        <h1>The Official Grumpy Cat Fan Club!</h1>
      </div>

      <!-- navigation bar container -->
      <nav>
        <!-- we can create a navigation bar with an un-ordered list -->
        <ul>
          <li><a href="#">link one</a></li> <!-- a "#" is a place holder for a link -->
          <li><a href="#">link two</a></li>
          <li><a href="#">link three</a></li>
        </ul>        
      </nav>
    </header> <!-- end of the header -->

    <!-- the main content of our site -->
    <main>

      <!-- a section with a class of grumpy -->
      <section class="grumpy">

        <!-- figure is a container for media, such as images -->
        <figure>
          <!-- we use an img for content images -->
          <img src="http://cdn.grumpycats.com/wp-content/uploads/2014/06/Grumpy-Cat-625x625.jpg">

          <!-- figcaption holds a caption for our media -->
          <figcaption>
            Hi, I'm Grumpy Cat
          </figcaption>
        </figure>
        
        <div class="grumpy-comments">
          <!-- another paragraph inside our grumpy section -->
          <h3 class="discuss"> Here we will discuss our Grumpy Cat LOL</h3>
          <p>Comments about Grumpy Cat!!!</p>
        </div>
      </section>

      <!-- another section with a class of grumpy
      notice how the styles are the same because of our classes being reused -->
      <section class="grumpy">
        <figure>         
          <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Grumpy_Cat_by_Gage_Skidmore.jpg/800px-Grumpy_Cat_by_Gage_Skidmore.jpg">                    
          <figcaption>
            I'm Grumpy again.
          </figcaption>
        </figure>        
        <div class="grumpy-comments">
          <!-- another paragraph inside our grumpy section -->
          <h3 class="discuss"> Here we will discuss another Grumpy Cat</h3>
          <p>More comments about Grumpy Cat!!!</p>
        </div>
      </section>
    </main>
  </div>
 </body>
 </html>
diff --git a/styles.css b/styles.css
 /************************************************************
 The external CSS file for the Grumpy Cat Fan Club webpage!
 ************************************************************/

 /* certain properties applied to our body and html elements,
 such as font-size will be inherited by their child elements */
 body, html {
  /*display: none;*/
  /*visibility: hidden;*/
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: hsl(0, 0%, 70%);
  font-family: Verdana;
  font-size: 10px;
 }



 #wrapper {
  position: relative;
  /* specifying auto in our left and right margin 
  centers our wrapper*/
  margin: 0 auto;
  width: 900px;
  height: 2000px;
  background-color: #fff;
  /*using the border property can help us see 
  how our elements are being positioned*/
  border: 1px solid red; 
 }

 /*the banner will always be the entire width 
 of the wrapper so set it to 100%*/
 #banner {
  height: 80px;
  width: 100%;
  /*visibility: hidden;*/
  /*display: none;  */
  /*border: 1px solid blue;*/
 }


 #title {
  display: inline-block;
  text-align: center;
  /*setting our font-size to 2em means it will be
  twice as big as what we set it to in pixels in the body */
  width: 66%;
  height: 100%;
  border: 1px dashed orange;
  background-color: black;  
 }

 #title h1 {
  font-size: 3em;
  line-height: 1.7em;
  margin-top: 15px;
  color: white;
 }

 #banner nav {
  position: absolute; 
  display: inline-block;
  width: 34%;
  height: 80px;
  background-color: black;
  border: 1px dashed green;
 }

 nav ul {
  /* list-style: none gets rid of the bullets in our <li>'s */
  list-style: none;
  padding: 0;
  margin: 0;
 }

 nav ul li {
  /* setting our li's to inline-block will automatically
   align them horizontally */
  display: inline-block;
  margin: 0;
  /*padding: 10px;*/
  margin-top: 20px; 
 /* margin-left: 15px;*/
  margin-left: 15px;  
  text-align: center;
 }

 nav a {
  font-size: 1.2em;
  font-weight: 600;
  line-height: 3em;
  color: white;
  text-decoration: none;
  border: 1px dashed yellow;
  padding: 10px;
 }

 /*nav li:hover {
  background-color: yellow;
  color: black;  
 }*/

 nav a:hover {
  color: black;
  background-color: yellow;
 }

 main {
  width: 100%;
  height: 100%;
  /* we can set a background image with CSS like so: */
  /*background: url("http://cdn.grumpycats.com/wp-content/uploads/2014/06/Grumpy-Cat-625x625.jpg")*/
 }

 .grumpy {
  position: relative;
  margin-bottom: 20px;
  padding: 10px;
  background-color: hsl(300, 50%, 75%);
 }

 /* using the asterick lets us set properites for all of
 an element's children at once */
 section.grumpy * {
  box-sizing: border-box;
  position: relative;
  font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", 
  Garamond, "Times New Roman", serif;
  /* each subsequent block level element will 
  have its font-size scaled by 1.5 */
  font-size: 1.5em;
  border: 1px dashed aqua;
  margin: 0;
 }

 .grumpy figure {
  display: inline-block;
  max-width: 300px;
  padding: 10px;
  margin: 0px;
  background-color: orange;
 }

 /* we can set our image size to be smaller than
 the actual size of the image */
 .grumpy img {
  width: 250px;
  height: 250px;
 }

 figcaption {
  padding: 0 20px;
  background-color: yellow;
  text-align: center;
 }

 .grumpy-comments {
  display: inline-block;
  padding: 10px;
  max-width: 600px;
  top: -190px;
 }

 h3.discuss {  
  display: inline-block;
  font-size: 2em;
 }
	<!doctype HTML>
	<html>

	<!-- the head contains things such as our meta information, title and external links. Nothing visible in the browser's viewport goes in here -->
	<head>

	<!-- telling the browser what character encoding we are using. super important. -->
	<meta charset="utf-8">

	<!-- the title will show up in the browser's tab -->
	<title>Grumpy Cat Fan Club</title>

	<!-- linking an external CSS document
	./ says look in the current folder while ../ says go up one folder -->
	<link rel="stylesheet" type="text/css" href="./styles.css">
	</head>

	<body>
	<!-- all of the visible HTML goes in here. Nothing visible should be outside of the body tag -->

	<!-- a div with an id of wrapper that will center our website in the browser's viewport -->
	<div id="wrapper">

	<!-- the header will contain our title and navbar at the top -->
	<header id="banner">

	<!-- our title goes in this div -->
	<div id="title">
	<h1>The Official Grumpy Cat Fan Club!</h1>
	</div>

	<!-- navigation bar container -->
	<nav>
	<!-- we can create a navigation bar with an un-ordered list -->
	<ul>
	<li><a href="#">link one</a></li> <!-- a "#" is a place holder for a link -->
	<li><a href="#">link two</a></li>
	<li><a href="#">link three</a></li>
	</ul>
	</nav>
	</header> <!-- end of the header -->

	<!-- the main content of our site -->
	<main>

	<!-- a section with a class of grumpy -->
	<section class="grumpy">

	<!-- figure is a container for media, such as images -->
	<figure>
	<!-- we use an img for content images -->
	<img src="http://cdn.grumpycats.com/wp-content/uploads/2014/06/Grumpy-Cat-625x625.jpg">

	<!-- figcaption holds a caption for our media -->
	<figcaption>
	Hi, I'm Grumpy Cat
	</figcaption>
	</figure>

	<div class="grumpy-comments">
	<!-- another paragraph inside our grumpy section -->
	<h3 class="discuss"> Here we will discuss our Grumpy Cat LOL</h3>
	<p>Comments about Grumpy Cat!!!</p>
	</div>
	</section>

	<!-- another section with a class of grumpy
	notice how the styles are the same because of our classes being reused -->
	<section class="grumpy">
	<figure>
	<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Grumpy_Cat_by_Gage_Skidmore.jpg/800px-Grumpy_Cat_by_Gage_Skidmore.jpg">
	<figcaption>
	I'm Grumpy again.
	</figcaption>
	</figure>
	<div class="grumpy-comments">
	<!-- another paragraph inside our grumpy section -->
	<h3 class="discuss"> Here we will discuss another Grumpy Cat</h3>
	<p>More comments about Grumpy Cat!!!</p>
	</div>
	</section>
	</main>
	</div>
	</body>
	</html>
	/************************************************************
	The external CSS file for the Grumpy Cat Fan Club webpage!
	************************************************************/

	/* certain properties applied to our body and html elements,
	such as font-size will be inherited by their child elements */
	body, html {
	/display: none;/
	/visibility: hidden;/
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: hsl(0, 0%, 70%);
	font-family: Verdana;
	font-size: 10px;
	}



	#wrapper {
	position: relative;
	/* specifying auto in our left and right margin
	centers our wrapper*/
	margin: 0 auto;
	width: 900px;
	height: 2000px;
	background-color: #fff;
	/*using the border property can help us see
	how our elements are being positioned*/
	border: 1px solid red;
	}

	/*the banner will always be the entire width
	of the wrapper so set it to 100%*/
	#banner {
	height: 80px;
	width: 100%;
	/visibility: hidden;/
	/display: none; /
	/border: 1px solid blue;/
	}


	#title {
	display: inline-block;
	text-align: center;
	/*setting our font-size to 2em means it will be
	twice as big as what we set it to in pixels in the body */
	width: 66%;
	height: 100%;
	border: 1px dashed orange;
	background-color: black;
	}

	#title h1 {
	font-size: 3em;
	line-height: 1.7em;
	margin-top: 15px;
	color: white;
	}

	#banner nav {
	position: absolute;
	display: inline-block;
	width: 34%;
	height: 80px;
	background-color: black;
	border: 1px dashed green;
	}

	nav ul {
	/* list-style: none gets rid of the bullets in our <li>'s */
	list-style: none;
	padding: 0;
	margin: 0;
	}

	nav ul li {
	/* setting our li's to inline-block will automatically
	align them horizontally */
	display: inline-block;
	margin: 0;
	/padding: 10px;/
	margin-top: 20px;
	/* margin-left: 15px;*/
	margin-left: 15px;
	text-align: center;
	}

	nav a {
	font-size: 1.2em;
	font-weight: 600;
	line-height: 3em;
	color: white;
	text-decoration: none;
	border: 1px dashed yellow;
	padding: 10px;
	}

	/*nav li:hover {
	background-color: yellow;
	color: black;
	}*/

	nav a:hover {
	color: black;
	background-color: yellow;
	}

	main {
	width: 100%;
	height: 100%;
	/* we can set a background image with CSS like so: */
	/background: url("http://cdn.grumpycats.com/wp-content/uploads/2014/06/Grumpy-Cat-625x625.jpg")/
	}

	.grumpy {
	position: relative;
	margin-bottom: 20px;
	padding: 10px;
	background-color: hsl(300, 50%, 75%);
	}

	/* using the asterick lets us set properites for all of
	an element's children at once */
	section.grumpy * {
	box-sizing: border-box;
	position: relative;
	font-family: Baskerville, "Baskerville Old Face", "Hoefler Text",
	Garamond, "Times New Roman", serif;
	/* each subsequent block level element will
	have its font-size scaled by 1.5 */
	font-size: 1.5em;
	border: 1px dashed aqua;
	margin: 0;
	}

	.grumpy figure {
	display: inline-block;
	max-width: 300px;
	padding: 10px;
	margin: 0px;
	background-color: orange;
	}

	/* we can set our image size to be smaller than
	the actual size of the image */
	.grumpy img {
	width: 250px;
	height: 250px;
	}

	figcaption {
	padding: 0 20px;
	background-color: yellow;
	text-align: center;
	}

	.grumpy-comments {
	display: inline-block;
	padding: 10px;
	max-width: 600px;
	top: -190px;
	}

	h3.discuss {
	display: inline-block;
	font-size: 2em;
	}