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" />
    <title>HTML/CSS/JS Cheat Sheet</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main class="main">
      <section class="container">
        <header>
          <h1>CSS Selectors Cheat Sheet</h1>
        </header>
        <br />
        <table>
          <thead>
            <tr>
              <th>SELECTOR</th>
              <th>MEANING</th>
              <th>EXAMPLE</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>UNIVERSAL SELECTOR</td>
              <td>Applies to all elements in the document</td>
              <td>
                <strong>&ast; &lbrace; &rbrace;</strong>
                <br />Targets all elements on the page
              </td>
            </tr>
            <tr>
              <td>TYPE SELECTOR</td>
              <td>Matches element names</td>
              <td>
                <strong>h1, h2, h3 &lbrace; &rbrace;</strong>
                <br />
                Targets the &lt;h1&gt;, &lt;h2&gt; and &lt;h3&gt; elements
              </td>
            </tr>
            <tr>
              <td>CLASS SELECTOR</td>
              <td>
                Matches an element whose class attribute has a value that
                matches the one specified after the pound or hash symbol
              </td>
              <td>
                <strong>&period;note &lbrace; &rbrace;</strong>
                <br />
                Tragets any element whose class attribute has a values of note
                <br />
                <strong>p&period;note &lbrace; &rbrace; </strong><br />Targets
                only &lt;p&gt; elements whose class attribute has a value of
                note
              </td>
            </tr>
            <tr>
              <td>ID SELECTOR</td>
              <td>
                Matches an element whose ID attribute has a value that matches
                the one specified after the pound or hash symbol
              </td>
              <td>
                <strong>&num;introduction &lbrace; &rbrace;</strong>
                <br />
                Targets the element whose ID attribute has a value of
                introduction
              </td>
            </tr>
            <tr>
              <td>CHILD SELECTOR</td>
              <td>Matches an element that is a direct child of another</td>
              <td>
                <strong>li&gt;a &lbrace;&rbrace;</strong>
                <br />
                Targets any &lt;a&gt; element that are children of an &lt;li&gt;
                element (but not another &lta&gt; elements in the page)
              </td>
            </tr>
            <tr>
              <td>DESCENDANT SELECTOR</td>
              <td>
                Matches an element that is a descendant of another specified
                element (not just a direct child of that element)
              </td>
              <td>
                <strong>p a &lbrace;&rbrace;</strong>
                <br />
                Targets the first &lt;a&gt; elements that sit inside a &lt;p&gt;
                element, even if there are other elements nested between them
              </td>
            </tr>
            <tr>
              <td>ADJACENT SIBLING SELECTOR</td>
              <td>Marches an element that is the next sibiling of another</td>
              <td>
                <strong>h1&plus;p &lbrace;&rbrace;</strong>
                <br />
                Targets the list &lt;p&gt; element after any &lt;h1&gt; element
                (but not other &lt;p&gt; elements)
              </td>
            </tr>
            <tr>
              <td>GENERAL SIBLING SELECTOR</td>
              <td>
                Matches an element that is a sibling of another, although it
                does not have to be the directly preceding element
              </td>
              <td>
                <strong>h1&tilde;p &lbrace;&rbrace;</strong>
                <br />
                If you had two &lt;p&gt; elements that are sibilings of an
                &lt;h1&gt; element, this rule would apply to both
              </td>
            </tr>
          </tbody>
        </table>
      </section>
      <footer>Created by Carlos Novais</footer>
    </main>
  </body>
</html>

## styles.css
:root {
  box-sizing: border-box;
  font-size: 0.875em;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

html {
  padding: 32px;
  font-family: Roboto;
}

.container header {
  text-align: center;
  font-size: 1.2rem;
  text-transform: uppercase;
  margin-bottom: 32px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.container table {
  width: 100%;
  background-color: white;
  color: #222;
  padding: 24px;
  box-shadow: 1px 4px 15px -8px rgba(0, 0, 0, 0.4);
  border-collapse: collapse; /* to get rid of border lines */
}

.container table thead tr {
  background-color: black;
  color: white;
}

.container table th,
.container table td {
  padding: 16px 32px;
  text-align: center;
}

.container table tr {
  border-bottom: 1px solid #eee;
  background-color: lightgray;
}

footer {
  padding-top: 32px;
  text-align: center;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>HTML/CSS/JS Cheat Sheet</title>
	<link rel="stylesheet" href="styles.css" />
	</head>
	<body>
	<main class="main">
	<section class="container">
	<header>
	<h1>CSS Selectors Cheat Sheet</h1>
	</header>
	<br />
	<table>
	<thead>
	<tr>
	<th>SELECTOR</th>
	<th>MEANING</th>
	<th>EXAMPLE</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>UNIVERSAL SELECTOR</td>
	<td>Applies to all elements in the document</td>
	<td>
	<strong>&ast; { }</strong>
	<br />Targets all elements on the page
	</td>
	</tr>
	<tr>
	<td>TYPE SELECTOR</td>
	<td>Matches element names</td>
	<td>
	<strong>h1, h2, h3 { }</strong>
	<br />
	Targets the <h1>, <h2> and <h3> elements
	</td>
	</tr>
	<tr>
	<td>CLASS SELECTOR</td>
	<td>
	Matches an element whose class attribute has a value that
	matches the one specified after the pound or hash symbol
	</td>
	<td>
	<strong>&period;note { }</strong>
	<br />
	Tragets any element whose class attribute has a values of note
	<br />
	<strong>p&period;note { } </strong><br />Targets
	only <p> elements whose class attribute has a value of
	note
	</td>
	</tr>
	<tr>
	<td>ID SELECTOR</td>
	<td>
	Matches an element whose ID attribute has a value that matches
	the one specified after the pound or hash symbol
	</td>
	<td>
	<strong>&num;introduction { }</strong>
	<br />
	Targets the element whose ID attribute has a value of
	introduction
	</td>
	</tr>
	<tr>
	<td>CHILD SELECTOR</td>
	<td>Matches an element that is a direct child of another</td>
	<td>
	<strong>li>a {}</strong>
	<br />
	Targets any <a> element that are children of an <li>
	element (but not another &lta> elements in the page)
	</td>
	</tr>
	<tr>
	<td>DESCENDANT SELECTOR</td>
	<td>
	Matches an element that is a descendant of another specified
	element (not just a direct child of that element)
	</td>
	<td>
	<strong>p a {}</strong>
	<br />
	Targets the first <a> elements that sit inside a <p>
	element, even if there are other elements nested between them
	</td>
	</tr>
	<tr>
	<td>ADJACENT SIBLING SELECTOR</td>
	<td>Marches an element that is the next sibiling of another</td>
	<td>
	<strong>h1+p {}</strong>
	<br />
	Targets the list <p> element after any <h1> element
	(but not other <p> elements)
	</td>
	</tr>
	<tr>
	<td>GENERAL SIBLING SELECTOR</td>
	<td>
	Matches an element that is a sibling of another, although it
	does not have to be the directly preceding element
	</td>
	<td>
	<strong>h1&tilde;p {}</strong>
	<br />
	If you had two <p> elements that are sibilings of an
	<h1> element, this rule would apply to both
	</td>
	</tr>
	</tbody>
	</table>
	</section>
	<footer>Created by Carlos Novais</footer>
	</main>
	</body>
	</html>
	:root {
	box-sizing: border-box;
	font-size: 0.875em;
	}

	@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2)
	format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
	U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
	U+FEFF, U+FFFD;
	}

	html {
	padding: 32px;
	font-family: Roboto;
	}

	.container header {
	text-align: center;
	font-size: 1.2rem;
	text-transform: uppercase;
	margin-bottom: 32px;
	border-bottom: 1px solid #eee;
	padding-bottom: 8px;
	}

	.container table {
	width: 100%;
	background-color: white;
	color: #222;
	padding: 24px;
	box-shadow: 1px 4px 15px -8px rgba(0, 0, 0, 0.4);
	border-collapse: collapse; /* to get rid of border lines */
	}

	.container table thead tr {
	background-color: black;
	color: white;
	}

	.container table th,
	.container table td {
	padding: 16px 32px;
	text-align: center;
	}

	.container table tr {
	border-bottom: 1px solid #eee;
	background-color: lightgray;
	}

	footer {
	padding-top: 32px;
	text-align: center;
	}