codecademydev/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>Design System</title>
    <link rel="stylesheet" href="./styles.css" type="text/css" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&family=Nunito:ital,wght@0,400;0,700;1,400&family=Roboto:ital,wght@0,400;0,700;1,400&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <header>
      <h1>Website Design System</h1>

      <nav>
        <ul>
          <li><a href="#color_scheme">Colors</a></li>
          <li><a href="#font_scheme">Fonts</a></li>
          <li><a href="#text_scheme">Text Styles</a></li>
        </ul>
      </nav>
    </header>

    <main class="container">
      <section id="color_scheme" class="schemes">
        <div>
          <h2>Colors</h2>
        </div>

        <div class="colors">
          <div class="color-div color-green">
            <p>Green</p>
            <p>#63a874</p>
          </div>

          <div class="color-div color-green-dark">
            <p>Green Dark</p>
            <p>#2d5c39</p>
          </div>

          <div class="color-div color-green-light">
            <p>Green Light</p>
            <p>#a9f5bc</p>
          </div>

          <div class="color-div color-red-dark">
            <p>Red Dark</p>
            <p>#5c2427</p>
          </div>

          <div class="color-div color-brown-red">
            <p>Brown Red</p>
            <p>#a86367</p>
          </div>

          <div class="color-div color-black">
            <p>Black</p>
            <p>#1b1b1b</p>
          </div>

          <div class="color-div color-gray">
            <p>Gray</p>
            <p>#f1f1f1</p>
          </div>
        </div>
      </section>

      <section id="font_scheme" class="schemes">
        <div>
          <h2>Fonts</h2>
        </div>

        <div class="fonts">
          <div class="font-div font-roboto">
            <h3>Roboto</h3>
            <p>The quick brown fox jumps over the lazy dog</p>
            <p class="font-bold">The quick brown fox jumps over the lazy dog</p>
            <p class="font-italic">
              The quick brown fox jumps over the lazy dog
            </p>
          </div>

          <div class="font-div font-montserrat">
            <h3>Montserrat</h3>
            <p>The quick brown fox jumps over the lazy dog</p>
            <p class="font-bold">The quick brown fox jumps over the lazy dog</p>
            <p class="font-italic">
              The quick brown fox jumps over the lazy dog
            </p>
          </div>

          <div class="font-div font-nunito">
            <h3>Nunito</h3>
            <p>The quick brown fox jumps over the lazy dog</p>
            <p class="font-bold">The quick brown fox jumps over the lazy dog</p>
            <p class="font-italic">
              The quick brown fox jumps over the lazy dog
            </p>
          </div>
        </div>
      </section>

      <section id="text_scheme" class="schemes">
        <div>
          <h2>Text Styles</h2>
        </div>

        <div class="texts">
          <div class="text-div">
            <div class="text-header">
              <h1>H1 - Main Heading of the Page!</h1>
            </div>
            <ul>
              <li>Font-Weight: 700</li>
              <li>Font-size: 26px</li>
              <li>Font-Family: Nunito</li>
            </ul>
          </div>

          <div class="text-div">
            <div class="text-header">
              <h2>H2 - Subheading of the Page!</h2>
            </div>
            <ul>
              <li>Font-Weight: 700</li>
              <li>Font-size: 26px</li>
              <li>Font-Family: Roboto</li>
            </ul>
          </div>

          <div class="text-div">
            <div class="text-header">
              <h3>H3 - Sections heading of the Page!</h3>
            </div>
            <ul>
              <li>Font-Weight: 700</li>
              <li>Font-size: 19px</li>
              <li>Font-Family: Roboto</li>
            </ul>
          </div>

          <div class="text-div">
            <div class="text-header">
              <p>P - paragraph</p>
            </div>
            <ul>
              <li>Font-Weight: 400</li>
              <li>Font-size: 16px</li>
              <li>Font-Family: Montserrat / Roboto</li>
            </ul>
          </div>
        </div>
      </section>

      <section id="button_scheme" class="schemes">
        <div>
          <h2>Buttons</h2>
        </div>

        <div class="buttons">
          <button class="normal-primary">Primary</button>
          <button class="hover-primary">Primary Hover</button>
          <button class="normal-secondary">Secondary</button>
          <button class="hover-secondary">Sencondary Hover</button>
        </div>
      </section>
    </main>

    <footer>
      <p><span>Developed by:</span> Yan Baetas</p>
    </footer>
  </body>
</html>

## styles.css
/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ROOT */
:root {
  --gray: #f1f1f1;
  --black: #1b1b1b;
  --primary-color: #63a874;
  --primary-color-light: #a9f5bc;
  --primary-color-dark: #2d5c39;
  --complementary-color: #f4d9ee;
  --complementary-color-dark: #ce98c1;
  --accent-color: #a86367;
  --accent-color-dark: #5c2427;
}

/* BODY */
body {
  background: var(--gray);
  color: var(--black);
  font-family: Roboto, Helvetica, sans-serif;
  height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0.5rem;
}

/* HEADER */
header {
  background: var(--primary-color);
  width: 100%;
  padding: 30px 0;
  text-align: center;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

header h1 {
  font-family: Nunito, Helvetica, sans-serif;
}

nav a {
  color: var(--black);
  text-decoration: none;
  padding: 0.4rem 1rem;
}

nav a:hover {
  color: var(--gray);
}

nav li {
  display: inline-block;
}

/* SCHEMES */
.schemes {
  background: white;
  width: 100%;
  border: 1px solid var(--complementary-color-dark);
  box-shadow: -4px 4px 0 var(--black);
  margin-bottom: 2rem;
}

.schemes > div > h2 {
  margin: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--complementary-color-dark);
}

/* COLORS SCHEME */
.colors {
  margin: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  font-family: Montserrat, Helvetica, sans-serif;
}

.color-div {
  width: 350px;
  height: 80px;
  margin: 1rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-grow: 1;
  color: var(--black);
}

.color-div p {
  padding: 5px;
}

.color-green {
  background: var(--primary-color);
}
.color-green-dark {
  color: var(--gray);
  background: var(--primary-color-dark);
}
.color-green-light {
  color: var(--black);
  background: var(--primary-color-light);
}

.color-brown-red {
  color: var(--gray);
  background: var(--accent-color);
}

.color-red-dark {
  color: var(--gray);
  background: var(--accent-color-dark);
}

.color-black {
  color: var(--gray);
  background: var(--black);
}

.color-gray {
  color: var(--black);
  background: var(--gray);
}

/* FONTS SCHEME */
.fonts {
  margin: 0 0.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.font-div {
  margin: 0 1.5rem 1rem 0.5rem;
}

.font-div p {
  margin: 1rem 0;
  font-size: 18px;
}

.font-montserrat {
  font-family: Montserrat, Helvetica, sans-serif;
}

.font-nunito {
  font-family: Nunito, Helvetica, sans-serif;
}

.font-bold {
  font-weight: 700;
}

.font-italic {
  font-style: italic;
}

/* TEXTS SCHEME */
.text-div {
  padding: 0 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.text-div h1 {
  font-size: 2rem;
}

.text-div ul {
  padding-left: 30px;
}

.text-header {
  margin-bottom: 1rem;
}

/* BUTTONS SCHEME */
.buttons {
  margin: 0 0.5rem 1rem 0.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

button {
  border: none;
  background: none;
  padding: 0.75rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  color: var(--gray);
  font-size: 18px;
}

button.normal-primary {
  background: var(--accent-color);
}

button.hover-primary {
  background: var(--accent-color-dark);
}

button.normal-secondary {
  background: var(--primary-color);
}

button.hover-secondary {
  background: var(--primary-color-dark);
}

/* FOOTER */
footer {
  background: var(--primary-color-dark);
  width: 100%;
  padding: 1rem 0;
  text-align: center;
  color: var(--gray);
}

footer span {
  color: var(--black);
  font-weight: 700;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  nav {
    display: none;
  }
}
	<!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>Design System</title>
	<link rel="stylesheet" href="./styles.css" type="text/css" />
	<link rel="preconnect" href="https://fonts.gstatic.com" />
	<link
	href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&family=Nunito:ital,wght@0,400;0,700;1,400&family=Roboto:ital,wght@0,400;0,700;1,400&display=swap"
	rel="stylesheet"
	/>
	</head>
	<body>
	<header>
	<h1>Website Design System</h1>

	<nav>
	<ul>
	<li><a href="#color_scheme">Colors</a></li>
	<li><a href="#font_scheme">Fonts</a></li>
	<li><a href="#text_scheme">Text Styles</a></li>
	</ul>
	</nav>
	</header>

	<main class="container">
	<section id="color_scheme" class="schemes">
	<div>
	<h2>Colors</h2>
	</div>

	<div class="colors">
	<div class="color-div color-green">
	<p>Green</p>
	<p>#63a874</p>
	</div>

	<div class="color-div color-green-dark">
	<p>Green Dark</p>
	<p>#2d5c39</p>
	</div>

	<div class="color-div color-green-light">
	<p>Green Light</p>
	<p>#a9f5bc</p>
	</div>

	<div class="color-div color-red-dark">
	<p>Red Dark</p>
	<p>#5c2427</p>
	</div>

	<div class="color-div color-brown-red">
	<p>Brown Red</p>
	<p>#a86367</p>
	</div>

	<div class="color-div color-black">
	<p>Black</p>
	<p>#1b1b1b</p>
	</div>

	<div class="color-div color-gray">
	<p>Gray</p>
	<p>#f1f1f1</p>
	</div>
	</div>
	</section>

	<section id="font_scheme" class="schemes">
	<div>
	<h2>Fonts</h2>
	</div>

	<div class="fonts">
	<div class="font-div font-roboto">
	<h3>Roboto</h3>
	<p>The quick brown fox jumps over the lazy dog</p>
	<p class="font-bold">The quick brown fox jumps over the lazy dog</p>
	<p class="font-italic">
	The quick brown fox jumps over the lazy dog
	</p>
	</div>

	<div class="font-div font-montserrat">
	<h3>Montserrat</h3>
	<p>The quick brown fox jumps over the lazy dog</p>
	<p class="font-bold">The quick brown fox jumps over the lazy dog</p>
	<p class="font-italic">
	The quick brown fox jumps over the lazy dog
	</p>
	</div>

	<div class="font-div font-nunito">
	<h3>Nunito</h3>
	<p>The quick brown fox jumps over the lazy dog</p>
	<p class="font-bold">The quick brown fox jumps over the lazy dog</p>
	<p class="font-italic">
	The quick brown fox jumps over the lazy dog
	</p>
	</div>
	</div>
	</section>

	<section id="text_scheme" class="schemes">
	<div>
	<h2>Text Styles</h2>
	</div>

	<div class="texts">
	<div class="text-div">
	<div class="text-header">
	<h1>H1 - Main Heading of the Page!</h1>
	</div>
	<ul>
	<li>Font-Weight: 700</li>
	<li>Font-size: 26px</li>
	<li>Font-Family: Nunito</li>
	</ul>
	</div>

	<div class="text-div">
	<div class="text-header">
	<h2>H2 - Subheading of the Page!</h2>
	</div>
	<ul>
	<li>Font-Weight: 700</li>
	<li>Font-size: 26px</li>
	<li>Font-Family: Roboto</li>
	</ul>
	</div>

	<div class="text-div">
	<div class="text-header">
	<h3>H3 - Sections heading of the Page!</h3>
	</div>
	<ul>
	<li>Font-Weight: 700</li>
	<li>Font-size: 19px</li>
	<li>Font-Family: Roboto</li>
	</ul>
	</div>

	<div class="text-div">
	<div class="text-header">
	<p>P - paragraph</p>
	</div>
	<ul>
	<li>Font-Weight: 400</li>
	<li>Font-size: 16px</li>
	<li>Font-Family: Montserrat / Roboto</li>
	</ul>
	</div>
	</div>
	</section>

	<section id="button_scheme" class="schemes">
	<div>
	<h2>Buttons</h2>
	</div>

	<div class="buttons">
	<button class="normal-primary">Primary</button>
	<button class="hover-primary">Primary Hover</button>
	<button class="normal-secondary">Secondary</button>
	<button class="hover-secondary">Sencondary Hover</button>
	</div>
	</section>
	</main>

	<footer>
	<p><span>Developed by:</span> Yan Baetas</p>
	</footer>
	</body>
	</html>
	/* RESET */
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	/* ROOT */
	:root {
	--gray: #f1f1f1;
	--black: #1b1b1b;
	--primary-color: #63a874;
	--primary-color-light: #a9f5bc;
	--primary-color-dark: #2d5c39;
	--complementary-color: #f4d9ee;
	--complementary-color-dark: #ce98c1;
	--accent-color: #a86367;
	--accent-color-dark: #5c2427;
	}

	/* BODY */
	body {
	background: var(--gray);
	color: var(--black);
	font-family: Roboto, Helvetica, sans-serif;
	height: 100vh;
	}

	.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0.5rem;
	}

	/* HEADER */
	header {
	background: var(--primary-color);
	width: 100%;
	padding: 30px 0;
	text-align: center;
	margin-bottom: 30px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	}

	header h1 {
	font-family: Nunito, Helvetica, sans-serif;
	}

	nav a {
	color: var(--black);
	text-decoration: none;
	padding: 0.4rem 1rem;
	}

	nav a:hover {
	color: var(--gray);
	}

	nav li {
	display: inline-block;
	}

	/* SCHEMES */
	.schemes {
	background: white;
	width: 100%;
	border: 1px solid var(--complementary-color-dark);
	box-shadow: -4px 4px 0 var(--black);
	margin-bottom: 2rem;
	}

	.schemes > div > h2 {
	margin: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--complementary-color-dark);
	}

	/* COLORS SCHEME */
	.colors {
	margin: 0 0.5rem;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-wrap: wrap;
	font-family: Montserrat, Helvetica, sans-serif;
	}

	.color-div {
	width: 350px;
	height: 80px;
	margin: 1rem 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex-grow: 1;
	color: var(--black);
	}

	.color-div p {
	padding: 5px;
	}

	.color-green {
	background: var(--primary-color);
	}
	.color-green-dark {
	color: var(--gray);
	background: var(--primary-color-dark);
	}
	.color-green-light {
	color: var(--black);
	background: var(--primary-color-light);
	}

	.color-brown-red {
	color: var(--gray);
	background: var(--accent-color);
	}

	.color-red-dark {
	color: var(--gray);
	background: var(--accent-color-dark);
	}

	.color-black {
	color: var(--gray);
	background: var(--black);
	}

	.color-gray {
	color: var(--black);
	background: var(--gray);
	}

	/* FONTS SCHEME */
	.fonts {
	margin: 0 0.5rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	}

	.font-div {
	margin: 0 1.5rem 1rem 0.5rem;
	}

	.font-div p {
	margin: 1rem 0;
	font-size: 18px;
	}

	.font-montserrat {
	font-family: Montserrat, Helvetica, sans-serif;
	}

	.font-nunito {
	font-family: Nunito, Helvetica, sans-serif;
	}

	.font-bold {
	font-weight: 700;
	}

	.font-italic {
	font-style: italic;
	}

	/* TEXTS SCHEME */
	.text-div {
	padding: 0 2rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	line-height: 1.5;
	}

	.text-div h1 {
	font-size: 2rem;
	}

	.text-div ul {
	padding-left: 30px;
	}

	.text-header {
	margin-bottom: 1rem;
	}

	/* BUTTONS SCHEME */
	.buttons {
	margin: 0 0.5rem 1rem 0.5rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	}

	button {
	border: none;
	background: none;
	padding: 0.75rem 1rem;
	border-radius: 5px;
	cursor: pointer;
	color: var(--gray);
	font-size: 18px;
	}

	button.normal-primary {
	background: var(--accent-color);
	}

	button.hover-primary {
	background: var(--accent-color-dark);
	}

	button.normal-secondary {
	background: var(--primary-color);
	}

	button.hover-secondary {
	background: var(--primary-color-dark);
	}

	/* FOOTER */
	footer {
	background: var(--primary-color-dark);
	width: 100%;
	padding: 1rem 0;
	text-align: center;
	color: var(--gray);
	}

	footer span {
	color: var(--black);
	font-weight: 700;
	}

	/* RESPONSIVE */
	@media (max-width: 768px) {
	nav {
	display: none;
	}
	}