codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
        <title>Semantic HTML elements</title>
    </head>

    <body>
    	<header>
    		<h1>Semantic HTML elements</h1>
    	</header>
    	<main>
    		<h2>The main one:</h2>
    		<table>
    			<thead>
    				<tr>
    					<th>Tag</th>
    					<th>Name</th>
    					<th>Description</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr>
    					<td>&lt;header&gt;</td>
    					<td>Header</td>
    					<td>Specifies a header for a document or section</td>
    				</tr>
    				<tr>
    					<td>&lt;nav&gt;</td>
    					<td>Navigation</td>
    					<td>Defines a set of navigation links</td>
    				</tr>
    				<tr>
    					<td>&lt;section&gt;</td>
    					<td>Section</td>
    					<td>Defines a section in a document</td>
    				</tr>
    				<tr>
    					<td>&lt;article&gt;</td>
    					<td>Article</td>
    					<td>Specifies independent, self-contained content</td>
    				</tr>
    				<tr>
    					<td>&lt;aside&gt;</td>
    					<td>Aside</td>
    					<td>defines some content aside from the content it is placed in</td>
    				</tr>
    				<tr>
    					<td>&lt;footer&gt;</td>
    					<td>Footer</td>
    					<td>Specifies a footer for a document or section</td>
    				</tr>
    			</tbody>
    		</table>

    		<h2>Other:</h2>
    		<table>
    			<thead>
    				<tr>
    					<th>Tag</th>
    					<th>Name</th>
    					<th>Description</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr>
    					<td>&lt;details&gt;</td>
    					<td>Details</td>
    					<td>Defines additional details that the user can view or hide</td>
    				</tr>
    				<tr>
    					<td>&lt;figcaption&gt;</td>
    					<td>Fig. caption</td>
    					<td>Defines a caption for a &lt;figure&gt; element</td>
    				</tr>
    				<tr>
    					<td>&lt;figure&gt;</td>
    					<td>Figure</td>
    					<td>Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.</td>
    				</tr>
    				<tr>
    					<td>&lt;main&gt;</td>
    					<td>Main</td>
    					<td>Specifies the main content of a document</td>
    				</tr>
    				<tr>
    					<td>&lt;mark&gt;</td>
    					<td>Marked</td>
    					<td>Defines marked/highlighted text</td>
    				</tr>
    				<tr>
    					<td>&lt;summary&gt;</td>
    					<td>Summary</td>
    					<td>Defines a visible heading for a &lt;details&gt; element</td>
    				</tr>
    				<tr>
    					<td>&lt;time&gt;</td>
    					<td>Time</td>
    					<td>Defines a date/time</td>
    				</tr>
    			</tbody>
    		</table>
    	</main>
    </body>

</html>

## styles.css
body {
	font-family: 'Roboto Mono', arial;
	background-color: black;
	color: white;
	letter-spacing: 1px;
}

h1 {
	text-align: center;
	text-transform: uppercase;
}

h2 {
	margin-top: 80px;
	text-align: center;
	text-decoration: underline;
}

table {
	margin: 80px auto;
	max-width: 750px;
	border: 2px solid white;
}

th, td {
	border: 2px solid white;
	padding: 5px 10px;
	color: aqua;
}

th {
	color: red;
	text-transform: uppercase;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="styles.css">
	<link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
	<title>Semantic HTML elements</title>
	</head>

	<body>
	<header>
	<h1>Semantic HTML elements</h1>
	</header>
	<main>
	<h2>The main one:</h2>
	<table>
	<thead>
	<tr>
	<th>Tag</th>
	<th>Name</th>
	<th>Description</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><header></td>
	<td>Header</td>
	<td>Specifies a header for a document or section</td>
	</tr>
	<tr>
	<td><nav></td>
	<td>Navigation</td>
	<td>Defines a set of navigation links</td>
	</tr>
	<tr>
	<td><section></td>
	<td>Section</td>
	<td>Defines a section in a document</td>
	</tr>
	<tr>
	<td><article></td>
	<td>Article</td>
	<td>Specifies independent, self-contained content</td>
	</tr>
	<tr>
	<td><aside></td>
	<td>Aside</td>
	<td>defines some content aside from the content it is placed in</td>
	</tr>
	<tr>
	<td><footer></td>
	<td>Footer</td>
	<td>Specifies a footer for a document or section</td>
	</tr>
	</tbody>
	</table>

	<h2>Other:</h2>
	<table>
	<thead>
	<tr>
	<th>Tag</th>
	<th>Name</th>
	<th>Description</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><details></td>
	<td>Details</td>
	<td>Defines additional details that the user can view or hide</td>
	</tr>
	<tr>
	<td><figcaption></td>
	<td>Fig. caption</td>
	<td>Defines a caption for a <figure> element</td>
	</tr>
	<tr>
	<td><figure></td>
	<td>Figure</td>
	<td>Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.</td>
	</tr>
	<tr>
	<td><main></td>
	<td>Main</td>
	<td>Specifies the main content of a document</td>
	</tr>
	<tr>
	<td><mark></td>
	<td>Marked</td>
	<td>Defines marked/highlighted text</td>
	</tr>
	<tr>
	<td><summary></td>
	<td>Summary</td>
	<td>Defines a visible heading for a <details> element</td>
	</tr>
	<tr>
	<td><time></td>
	<td>Time</td>
	<td>Defines a date/time</td>
	</tr>
	</tbody>
	</table>
	</main>
	</body>

	</html>
	body {
	font-family: 'Roboto Mono', arial;
	background-color: black;
	color: white;
	letter-spacing: 1px;
	}

	h1 {
	text-align: center;
	text-transform: uppercase;
	}

	h2 {
	margin-top: 80px;
	text-align: center;
	text-decoration: underline;
	}

	table {
	margin: 80px auto;
	max-width: 750px;
	border: 2px solid white;
	}

	th, td {
	border: 2px solid white;
	padding: 5px 10px;
	color: aqua;
	}

	th {
	color: red;
	text-transform: uppercase;
	}