codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

    <h1>Nates Website Style Guide</h1>
    <div class = "color-section">
      <h2>Style Colors</h2>
      <hr class="rounded">
      <table class = "color-table">
        <tr>
          <td class="black-cell"><b>Black</b> <br> #000000</td>
          <td class="white-cell"><b>White</b> <br> #FFFFFF</td>
          <td class="dark-cell"><b>Dark Blue</b> <br> #0066cc</td>
          <td class="medium-cell"><b>Med. Blue</b> <br> #3399ff</td>
          <td class="light-cell"><b>Light Blue</b> <br> #66ccff</td>
        </tr>
      </table>
    </div>

    <div class = "font-section">
      <h2>Style Fonts</h2>
      <hr class="rounded">
      <h3 class="font-family-1">Tahoma (Sans Serif)</h3>
      <p class="font-family-1">The quick brown fox jumps over the lazy dog.</p>
            <p><b class="font-family-1">The quick brown fox jumps over the lazy dog.</b></p>
                  <p><i class="font-family-1">The quick brown fox jumps over the lazy dog.</i></p>
      <h3 class="font-family-2">Garamond (Serif)</h3>
            <p class="font-family-2">The quick brown fox jumps over the lazy dog.</p>
            <p><strong class="font-family-2">The quick brown fox jumps over the lazy dog.</strong></p>
                  <p><i class="font-family-2">The quick brown fox jumps over the lazy dog.</i></p>
    </div>

    <div class = "text-section">
      <h2>Style Text Breakdown</h2>
      <hr class="rounded">
      <h1 class="styled">Heading 1</h1>
      <ul>
        <li>Font Weight: 700 (Strong)</li>
        <li>Font Size: 26px</li>
        <li>Font Family: Tahoma</li>
      </ul>
      <h2 class="styled">Heading 2</h2>
      <ul>
        <li>Font Weight: 500 (Standard)</li>
        <li>Font Size: 22px</li>
        <li>Font Family: Tahoma</li>
      </ul>
      <h3 class="styled">Heading 3</h3>
      <ul>
        <li>Font Weight: 500 (Standard)</li>
        <li>Font Size: 18px</li>
        <li>Font Family: Garamond</li>
      </ul>
      <p class="styled">P: Paragraph Text</p>
      <ul>
        <li>Font Weight: 400</li>
        <li>Font Size: 14px</li>
        <li>Font Family: Garamond</li>
      </ul>
    </div>

  </body>
</html>

## styles.css
/* NATIVE STYLES */
*{
  font-family: "Courier New";
}

h1,h2,h3,p {
  text-align: center;
  font-family: "Courier New";
}

div {
  background-color: lightgrey;
  margin: 0px 20px 20px 20px;
  border: solid 2px black;
  padding: 10px;
  width: 90%;
  vertical-align: center;
}

ul{
  list-style-type:none;
  text-align: center;
}

/* STYLE COLORS */
.color-table{
  margin:auto;
}

.color-table td {
  height: 80px;
  font-size: 14px;
  vertical-align: middle;
  text-align: center;
  padding: 3px;
  border: solid 2px black;
  border-collapse: collapse;
  width: 120px;
}

td.black-cell {
  background-color: black;
  color: white;
}

td.white-cell {
  background-color: white;
}

td.light-cell {
  background-color: #66ccff;
}

td.medium-cell {
  background-color: #3399ff;
}

td.dark-cell {
  background-color: #0066cc;
}

/* FONT FAMILY */
.font-family-1{
  font-family: Tahoma;
}

.font-family-2 {
  font-family: Garamond;
}

/* STYLE TEXT */

h1.styled {
  font-family: Tahoma;
  font-size:26px;
  font-weight: 700;
}

h2.styled {
  font-family: Tahoma;
  font-size: 22px;
  font-weight: 500;
}

h3.styled {
  font-family: Garamond;
  font-size:18px;
  font-weight: 600;
}

p.styled {
  font-family: Garamond;
  font-size: 15px;
  font-weight: 400;
}
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>

	<h1>Nates Website Style Guide</h1>
	<div class = "color-section">
	<h2>Style Colors</h2>
	<hr class="rounded">
	<table class = "color-table">
	<tr>
	<td class="black-cell"><b>Black</b> <br> #000000</td>
	<td class="white-cell"><b>White</b> <br> #FFFFFF</td>
	<td class="dark-cell"><b>Dark Blue</b> <br> #0066cc</td>
	<td class="medium-cell"><b>Med. Blue</b> <br> #3399ff</td>
	<td class="light-cell"><b>Light Blue</b> <br> #66ccff</td>
	</tr>
	</table>
	</div>

	<div class = "font-section">
	<h2>Style Fonts</h2>
	<hr class="rounded">
	<h3 class="font-family-1">Tahoma (Sans Serif)</h3>
	<p class="font-family-1">The quick brown fox jumps over the lazy dog.</p>
	<p><b class="font-family-1">The quick brown fox jumps over the lazy dog.</b></p>
	<p><i class="font-family-1">The quick brown fox jumps over the lazy dog.</i></p>
	<h3 class="font-family-2">Garamond (Serif)</h3>
	<p class="font-family-2">The quick brown fox jumps over the lazy dog.</p>
	<p><strong class="font-family-2">The quick brown fox jumps over the lazy dog.</strong></p>
	<p><i class="font-family-2">The quick brown fox jumps over the lazy dog.</i></p>
	</div>

	<div class = "text-section">
	<h2>Style Text Breakdown</h2>
	<hr class="rounded">
	<h1 class="styled">Heading 1</h1>
	<ul>
	<li>Font Weight: 700 (Strong)</li>
	<li>Font Size: 26px</li>
	<li>Font Family: Tahoma</li>
	</ul>
	<h2 class="styled">Heading 2</h2>
	<ul>
	<li>Font Weight: 500 (Standard)</li>
	<li>Font Size: 22px</li>
	<li>Font Family: Tahoma</li>
	</ul>
	<h3 class="styled">Heading 3</h3>
	<ul>
	<li>Font Weight: 500 (Standard)</li>
	<li>Font Size: 18px</li>
	<li>Font Family: Garamond</li>
	</ul>
	<p class="styled">P: Paragraph Text</p>
	<ul>
	<li>Font Weight: 400</li>
	<li>Font Size: 14px</li>
	<li>Font Family: Garamond</li>
	</ul>
	</div>

	</body>
	</html>
	/* NATIVE STYLES */
	*{
	font-family: "Courier New";
	}

	h1,h2,h3,p {
	text-align: center;
	font-family: "Courier New";
	}

	div {
	background-color: lightgrey;
	margin: 0px 20px 20px 20px;
	border: solid 2px black;
	padding: 10px;
	width: 90%;
	vertical-align: center;
	}

	ul{
	list-style-type:none;
	text-align: center;
	}

	/* STYLE COLORS */
	.color-table{
	margin:auto;
	}

	.color-table td {
	height: 80px;
	font-size: 14px;
	vertical-align: middle;
	text-align: center;
	padding: 3px;
	border: solid 2px black;
	border-collapse: collapse;
	width: 120px;
	}

	td.black-cell {
	background-color: black;
	color: white;
	}

	td.white-cell {
	background-color: white;
	}

	td.light-cell {
	background-color: #66ccff;
	}

	td.medium-cell {
	background-color: #3399ff;
	}

	td.dark-cell {
	background-color: #0066cc;
	}

	/* FONT FAMILY */
	.font-family-1{
	font-family: Tahoma;
	}

	.font-family-2 {
	font-family: Garamond;
	}

	/* STYLE TEXT */

	h1.styled {
	font-family: Tahoma;
	font-size:26px;
	font-weight: 700;
	}

	h2.styled {
	font-family: Tahoma;
	font-size: 22px;
	font-weight: 500;
	}

	h3.styled {
	font-family: Garamond;
	font-size:18px;
	font-weight: 600;
	}

	p.styled {
	font-family: Garamond;
	font-size: 15px;
	font-weight: 400;
	}