Madsiggi/index.html Secret

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Html & CSS machete</title>
    <link href="styles.css" rel="stylesheet" />
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;700&display=swap");
    </style>
  </head>
  <body>
    <header>
      <h1>Machete | HTML & CSS</h1>
    </header>
    <section id="html">
      <h2>HTML</h2>
      <article id="semantic-tags">
        <div class="table-headings">
          <h3>Semantic Tags</h3>
          <h4>Document</h4>
        </div>
        <table class="tags-tables">
          <thead>
            <tr>
              <th scope="col">Tag</th>
              <th scope="col">Description</th>
              <th scope="col">Reference</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td scope="row"><code>&lt;title&gt;</code></td>
              <td>
                Shown in the browser tab & search results.<br />
                Should be unique for every page on the site.
              </td>
              <td>
                <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title">MDN</a>
              </td>
            </tr>
            <tr>
              <td scope="row"><code>&lt;main&gt;</code></td>
              <td>Primary content of the page.</td>
              <td>
                <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main">MDN</a>
              </td>
            </tr>
            <tr>
              <td scope="row"><code>&lt;aside&gt;</code></td>
              <td>
                Content aside from the content it is placed in.<br />
                not required to understand the main content
              </td>
              <td>
                <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside">MDN</a>
              </td>
            </tr>
            <tr>
              <td scope="row"><code>&lt;details&gt;</code></td>
              <td>Additional details that the user can open and close on demand.</td>
              <td>
                <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details">MDN</a>
              </td>
            </tr>
            <tr>
              <td scope="row"><code>&lt;figcaption&gt;</code></td>
              <td>Defines a caption for a &lt;figure&gt; element</td>
              <td>
                <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption">MDN</a>
              </td>
            </tr>
            <tr>
              <td scope="row"><code>&lt;article&gt;</code></td>
              <td>
                A piece of content that's independent. <br />
                Could be removed from the website and still make sense.
              </td>
              <td>
                <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article">MDN</a>
              </td>
            </tr>
          </tbody>
        </table>
      </article>
    </section>
  </body>
</html>

## style.css
html {
  width: auto;
  height: 100%;
}

body {
  background-image: url("../Cheat-sheet/resources/images/Background.jpg");
  background-size: cover;
  font-family: "Montserrat", sans-serif;
}

header h1 {
  font-weight: 700;
  text-align: center;
}

section h2 {
  font-weight: 400;
  text-align: center;
}

article h3 {
  font-weight: 400;
  text-align: left;
  text-decoration: underline;
}

article h4 {
  font-weight: 400;
  text-decoration: underline;
}

table {
  border: 0.5px solid;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}

thead tr th {
  text-align: center;
  background-color: #99accf;
  padding: 5px;
}

td {
  border: 0.5px solid;
  padding: 10px;
}

tbody > tr > :nth-child(3) {
  text-align: center;
}

.table-headings {
  margin-left: auto;
  margin-right: auto;
  max-width: 729px;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Html & CSS machete</title>
	<link href="styles.css" rel="stylesheet" />
	<style>
	@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;700&display=swap");
	</style>
	</head>
	<body>
	<header>
	<h1>Machete \| HTML & CSS</h1>
	</header>
	<section id="html">
	<h2>HTML</h2>
	<article id="semantic-tags">
	<div class="table-headings">
	<h3>Semantic Tags</h3>
	<h4>Document</h4>
	</div>
	<table class="tags-tables">
	<thead>
	<tr>
	<th scope="col">Tag</th>
	<th scope="col">Description</th>
	<th scope="col">Reference</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td scope="row"><code><title></code></td>
	<td>
	Shown in the browser tab & search results.<br />
	Should be unique for every page on the site.
	</td>
	<td>
	<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title">MDN</a>
	</td>
	</tr>
	<tr>
	<td scope="row"><code><main></code></td>
	<td>Primary content of the page.</td>
	<td>
	<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main">MDN</a>
	</td>
	</tr>
	<tr>
	<td scope="row"><code><aside></code></td>
	<td>
	Content aside from the content it is placed in.<br />
	not required to understand the main content
	</td>
	<td>
	<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside">MDN</a>
	</td>
	</tr>
	<tr>
	<td scope="row"><code><details></code></td>
	<td>Additional details that the user can open and close on demand.</td>
	<td>
	<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details">MDN</a>
	</td>
	</tr>
	<tr>
	<td scope="row"><code><figcaption></code></td>
	<td>Defines a caption for a <figure> element</td>
	<td>
	<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption">MDN</a>
	</td>
	</tr>
	<tr>
	<td scope="row"><code><article></code></td>
	<td>
	A piece of content that's independent. <br />
	Could be removed from the website and still make sense.
	</td>
	<td>
	<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article">MDN</a>
	</td>
	</tr>
	</tbody>
	</table>
	</article>
	</section>
	</body>
	</html>
	html {
	width: auto;
	height: 100%;
	}

	body {
	background-image: url("../Cheat-sheet/resources/images/Background.jpg");
	background-size: cover;
	font-family: "Montserrat", sans-serif;
	}

	header h1 {
	font-weight: 700;
	text-align: center;
	}

	section h2 {
	font-weight: 400;
	text-align: center;
	}

	article h3 {
	font-weight: 400;
	text-align: left;
	text-decoration: underline;
	}

	article h4 {
	font-weight: 400;
	text-decoration: underline;
	}

	table {
	border: 0.5px solid;
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
	}

	thead tr th {
	text-align: center;
	background-color: #99accf;
	padding: 5px;
	}

	td {
	border: 0.5px solid;
	padding: 10px;
	}

	tbody > tr > :nth-child(3) {
	text-align: center;
	}

	.table-headings {
	margin-left: auto;
	margin-right: auto;
	max-width: 729px;
	}