codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="styles.css"/>

    <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">

    <title>Project | Build Your Own Cheatsheet</title>
</head>
<body>
    <h1>HTML Table Reference</h1>
      <h2>Common HTML</h2>
        <table border="">
          <thead>
            <tr >
              <th>TAG</th>
             <th>NAME</th>
              <th>DESCRIPTION</th>
            </tr>
          </thead>

          <tbody>
           <tr>
             <td> &lt;table&gt; </td>
             <td>table</td>
             <td>The wrapper element for all HTML tables</td>
           </tr>

          <tr>
            <td>&lt;table head&gt;</td>
            <td>Table Head</td>
            <td>The set of rows defining the column headers in a table.</td>
          </tr>

          <tr>
            <td>&lt;table body&gt;</td>
            <td>Table Body</td>
            <td>The set of rows containing actual table data.</td>
          </tr>

          <tr>
            <td>&lt;table row&gt;</td>
            <td>Table Row</td>
            <td>The table row container.</td>
          </tr>

          <tr>
            <td>&lt;table data&gt;</td>
            <td>Table Data</td>
            <td>The table row container.</td>
          </tr>

          <tr>
            <td>&lt;table footer&gt;</td>
            <td>Table Foot</td>
            <td>The set of rows defining the footer in a table.</td>
          </tr>
         </tbody>
        </table>

            <!-- ATTRIBUTES -->
      <h2>Attributes</h2>
        <table border="">
          <thead>
            <tr >
              <th>ATTRIBUTE</th>
             <th>NAME</th>
              <th>DESCRIPTION</th>
            </tr>
          </thead>
          <tbody>
           <tr>
             <td> href </td>
             <td>href</td>
             <td>attribute of  &lt;a&gt; specifies the URL of the page the link goes to</td>
           </tr>

          <tr>
            <td>src</td>
            <td>source</td>
            <td>attribute of  &lt;img&gt; specifies the path to the image to be displayed</td>
          </tr>

          <tr>
            <td>width</td>
            <td>width</td>
            <td>attributes of &lt;img&gt; provide size information for images</td>
          </tr>
        </tbody>
        </table>

</body>
</html>

## styles.css
@import "bootstrap/dist/css/bootstrap.min.css";

body {
  font-family: 'Indie Flower', cursive;
  background-color: MistyRose;
  color: MidnightBlue;
  text-align: center;
  margin: 90px;
  // overflow: hidden;
}

h1 {
  font-size: 5em;
  text-transform: uppercase;
}
h2 {
  font-size: 2em;
  text-transform: uppercase;
}

table  {
  border: 2px solid SlateBlue;
  width: 100%;
  margin: 0 auto;
}

thead {
  background-color: white;
  font-size: 1.8em;
}

tbody {
  display: table-row-group;
  vertical-align: center;
  border-color: SlateBlue;
}

td {
  font-size: 24px;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<link rel="stylesheet" href="styles.css"/>

	<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">

	<title>Project \| Build Your Own Cheatsheet</title>
	</head>
	<body>
	<h1>HTML Table Reference</h1>
	<h2>Common HTML</h2>
	<table border="">
	<thead>
	<tr >
	<th>TAG</th>
	<th>NAME</th>
	<th>DESCRIPTION</th>
	</tr>
	</thead>

	<tbody>
	<tr>
	<td> <table> </td>
	<td>table</td>
	<td>The wrapper element for all HTML tables</td>
	</tr>

	<tr>
	<td><table head></td>
	<td>Table Head</td>
	<td>The set of rows defining the column headers in a table.</td>
	</tr>

	<tr>
	<td><table body></td>
	<td>Table Body</td>
	<td>The set of rows containing actual table data.</td>
	</tr>

	<tr>
	<td><table row></td>
	<td>Table Row</td>
	<td>The table row container.</td>
	</tr>

	<tr>
	<td><table data></td>
	<td>Table Data</td>
	<td>The table row container.</td>
	</tr>

	<tr>
	<td><table footer></td>
	<td>Table Foot</td>
	<td>The set of rows defining the footer in a table.</td>
	</tr>
	</tbody>
	</table>

	<!-- ATTRIBUTES -->
	<h2>Attributes</h2>
	<table border="">
	<thead>
	<tr >
	<th>ATTRIBUTE</th>
	<th>NAME</th>
	<th>DESCRIPTION</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td> href </td>
	<td>href</td>
	<td>attribute of <a> specifies the URL of the page the link goes to</td>
	</tr>

	<tr>
	<td>src</td>
	<td>source</td>
	<td>attribute of <img> specifies the path to the image to be displayed</td>
	</tr>

	<tr>
	<td>width</td>
	<td>width</td>
	<td>attributes of <img> provide size information for images</td>
	</tr>
	</tbody>
	</table>

	</body>
	</html>
	@import "bootstrap/dist/css/bootstrap.min.css";

	body {
	font-family: 'Indie Flower', cursive;
	background-color: MistyRose;
	color: MidnightBlue;
	text-align: center;
	margin: 90px;
	// overflow: hidden;
	}

	h1 {
	font-size: 5em;
	text-transform: uppercase;
	}
	h2 {
	font-size: 2em;
	text-transform: uppercase;
	}

	table {
	border: 2px solid SlateBlue;
	width: 100%;
	margin: 0 auto;
	}

	thead {
	background-color: white;
	font-size: 1.8em;
	}

	tbody {
	display: table-row-group;
	vertical-align: center;
	border-color: SlateBlue;
	}

	td {
	font-size: 24px;
	}