codecademydev/index.html Secret

## index.html
<!-- CSS Color Cheat Sheet | Backround, Color, and Linear Gradient -->
<!DOCTYPE html>
<html>
<head>
  <title>CSS Color Cheat Sheet | Backround-Color, Color, and Linear Gradient</title>
  <link href="styles.css" type="text/css" rel="stylesheet">
</head>

<body>

<header>
  <h1>CSS Color Cheat Sheet</h1>
  <h2>Backround, Color, and Linear Gradient</h2>
</header>

<main>
  <span>Let's learn to make cool colors faster!</span>
  <p class="title">Background Color Element</p>
  <ul>
    <li>In <em>styles.css</em> code <strong>background-color: <em>color;</em></strong></li>
    <li>This will apply a background color to your selected element.</li>
  </ul>
  <p class="title">Color Element</p>
    <ul>
      <li>In <em>styles.css</em> code <strong>color: <em>color;</em></strong></li>
      <li>This will apply a foreground color to your selected element.</li>
    </ul>
  <p class="title">Linear Gradient</p>
    <ul>
      <li>In <em>styles.css</em> code <strong>background-image: linear-gradient(<em>num+deg e.g. 180deg, color1, color2</em>);</strong></li>
      <li>This will apply a linear color to your selected element and 180 degrees.</li>
    </ul>

<span>Lets see a couple of examples below:</span>
<table>
<thead>
  <tr>
    <th>Topic</th>
    <th>CSS rule</th>
    <th>Examples</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Background-Color</td>
    <td>h1 {<br>   background-color: <em class="greenText">green;</em><br>}</td>
    <td id="bc-example"></td>
  </tr>
   <tr class="lightgrey">
    <td>Color</td>
    <td>h1 {<br> color: <em class="greenText">green;</em><br>}</td>
    <td id="c-example">Green</td>
  </tr>
  <tr>
    <td>Linear-Gradient</td>
    <td>h1 {<br>   background-image: linear-gradient(<em>90deg, OliveDrab, SeaGreen</em>);<br>}</td>
    <td id="lg-example"></td>
  </tr>
</tbody>
<tfoot>
</tfoot>
</table>

</main>

<footer>
  <p>&copy; Matthew Jordaan 2020</p>
</footer>
</body>
</html>

## styles.css
table {
    border: 2px solid black;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  th {
    background-color: LightGray;
  }


  td {
    padding-left: 10px;
    padding-right: 10px;
 }

 .lightgrey {
     background-color: gainsboro;
 }


  body {
    background-color: LavenderBlush;
  }


  #bc-example {
    background-color: green;
  }

  #c-example {
    color: green;
  }

  #lg-example {
    background-image: linear-gradient(90deg, OliveDrab, SeaGreen);
  }

  .title {
    font-weight: bold;
    border: 2px solid green;
    background-color: seagreen;
    color: white;
    max-width: 610px;
  }

  header {
    background-color: MediumSeaGreen;
    text-align: center;
    padding-top: 5px;
  }

  footer {
    background-color: black;
    color: white;
    text-align: center;
    padding: 10px 0 10px 0;
    margin-top: 20px;
  }

  h2 {
    padding-bottom: 20px;
    opacity: 0.5;
  }

  p, h2, h1, span, li, td, th {
      font-family: Arial;
  }

  span {
      font-weight: bold;
      font-family: Lucida Console, Courier, monospace;

  }

  .greenText {
      color: green;
  }

  td {
      font-size: 13px;
  }

  li {
      list-style: square;
  }
	<!-- CSS Color Cheat Sheet \| Backround, Color, and Linear Gradient -->
	<!DOCTYPE html>
	<html>
	<head>
	<title>CSS Color Cheat Sheet \| Backround-Color, Color, and Linear Gradient</title>
	<link href="styles.css" type="text/css" rel="stylesheet">
	</head>

	<body>

	<header>
	<h1>CSS Color Cheat Sheet</h1>
	<h2>Backround, Color, and Linear Gradient</h2>
	</header>

	<main>
	<span>Let's learn to make cool colors faster!</span>
	<p class="title">Background Color Element</p>
	<ul>
	<li>In <em>styles.css</em> code <strong>background-color: <em>color;</em></strong></li>
	<li>This will apply a background color to your selected element.</li>
	</ul>
	<p class="title">Color Element</p>
	<ul>
	<li>In <em>styles.css</em> code <strong>color: <em>color;</em></strong></li>
	<li>This will apply a foreground color to your selected element.</li>
	</ul>
	<p class="title">Linear Gradient</p>
	<ul>
	<li>In <em>styles.css</em> code <strong>background-image: linear-gradient(<em>num+deg e.g. 180deg, color1, color2</em>);</strong></li>
	<li>This will apply a linear color to your selected element and 180 degrees.</li>
	</ul>

	<span>Lets see a couple of examples below:</span>
	<table>
	<thead>
	<tr>
	<th>Topic</th>
	<th>CSS rule</th>
	<th>Examples</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Background-Color</td>
	<td>h1 {<br> background-color: <em class="greenText">green;</em><br>}</td>
	<td id="bc-example"></td>
	</tr>
	<tr class="lightgrey">
	<td>Color</td>
	<td>h1 {<br> color: <em class="greenText">green;</em><br>}</td>
	<td id="c-example">Green</td>
	</tr>
	<tr>
	<td>Linear-Gradient</td>
	<td>h1 {<br> background-image: linear-gradient(<em>90deg, OliveDrab, SeaGreen</em>);<br>}</td>
	<td id="lg-example"></td>
	</tr>
	</tbody>
	<tfoot>
	</tfoot>
	</table>

	</main>

	<footer>
	<p>© Matthew Jordaan 2020</p>
	</footer>
	</body>
	</html>
	table {
	border: 2px solid black;
	margin-top: 10px;
	margin-bottom: 10px;
	}

	th {
	background-color: LightGray;
	}


	td {
	padding-left: 10px;
	padding-right: 10px;
	}

	.lightgrey {
	background-color: gainsboro;
	}


	body {
	background-color: LavenderBlush;
	}


	#bc-example {
	background-color: green;
	}

	#c-example {
	color: green;
	}

	#lg-example {
	background-image: linear-gradient(90deg, OliveDrab, SeaGreen);
	}

	.title {
	font-weight: bold;
	border: 2px solid green;
	background-color: seagreen;
	color: white;
	max-width: 610px;
	}

	header {
	background-color: MediumSeaGreen;
	text-align: center;
	padding-top: 5px;
	}

	footer {
	background-color: black;
	color: white;
	text-align: center;
	padding: 10px 0 10px 0;
	margin-top: 20px;
	}

	h2 {
	padding-bottom: 20px;
	opacity: 0.5;
	}

	p, h2, h1, span, li, td, th {
	font-family: Arial;
	}

	span {
	font-weight: bold;
	font-family: Lucida Console, Courier, monospace;

	}

	.greenText {
	color: green;
	}

	td {
	font-size: 13px;
	}

	li {
	list-style: square;
	}