codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,700;1,400&family=Poppins:ital,wght@0,400;0,700;1,400&family=Source+Code+Pro:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css" type="text/css">
     <title>Website Style Guide </title>
  </head>
  <body>
    <h1>My Website Style Guide</h1>
    <div class="content-box">
    <h2>Colors</h2>
    <ul class="color-boxes">
      <li class="blue">Cool Blue #2d5dcc</li>
      <li class="pink">Pink #d957d9</li>
      <li class="mint">Mint Green #4fe0b0</li>
      <li class="beige">Beige #efd9ca</li>
    </ul>
    </div>
  <div class="content-box">
    <h2>Fonts</h2>
    <div class="row">
      <div class="column">
        <span id="text-example1">
    <h3>Source Code Pro</h3>
    <p>The quick brown fox jumps over the lazy dog.</p>
    <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
    <p><em>The quick brown fox jumps over the lazy dog.</em></p>
    </span>
      <span id="text-example2">
    <h3>Poppins</h3>
    <p>The quick brown fox jumps over the lazy dog.</p>
    <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
    <p><em>The quick brown fox jumps over the lazy dog.</em></p>
        </span>
      </div>

      <div class="column">
        <span id="text-example3">
    <h3>Nunito Sans</h3>
    <p>The quick brown fox jumps over the lazy dog.</p>
    <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
    <p><em>The quick brown fox jumps over the lazy dog.</em></p>
        </span>
    </div>
  </div>
  </div>

  <div class="content-box">
    <h2>Text Styles</h2>
    <h1>H1: Main page heading</h1>
    <ul>
      <li>Font-weight: 700 (bold)</li>
      <li>Font-size: 26px</li>
      <li>Font-family: Nunito Sans</li>
    </ul>
    <h2>H2: Subheading</h2>
    <ul>
      <li>Font-weight: 500</li>
      <li>Font-size: 18px</li>
      <li>Font-family: poppins</li>
    </ul>
    <p>P: Paragraph text</p>
    <ul>
      <li>Font-weight: 400 (regular)</li>
      <li>Font-size: 14px</li>
      <li>Font-family: Poppins</li>
    </ul>
</div>
  </body>
</html>

## styles.css
.body{
  font-family: 'Poppins', sans-serif;
}

h1{
  font-family: 'Nunito Sans', sans-serif;
  font-size: 28px;
  font-weight: bold;
}
h2{
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight:bold;
}
p{
  font-size: 14px;
}

.content-box {
  border: 1px solid #666666;
  margin: 45px auto;
  padding: 25px;
}

/*----colors ---*/
 .color-boxes li {
  display: inline-block;
  text-decoration: none;
  width: 25%;
}

.blue{
  background-color: #2d5dcc;
  color: white;
  padding: 25px;
  margin: 10px;
}
.pink{
  background-color: #d957d9;
  color: #000000;
  padding: 25px;
  margin: 10px;
}
.mint{
  background-color: #4fe0b0;
  color: #6666666;
  padding: 25px;
   margin: 10px;
}
.beige{
  background-color: #efd9ca;
  color: #666666;
  padding: 25px;
  margin: 10px;
}

/*----Fonts--- */
.row {
  display: flex;
}
.column {
  flex: 50%;
}

#text-example1{
  font-family: 'Source Code Pro';
}
#text-example2{
  font-family: 'Poppins';
}
#text-example1{
  font-family: 'Nunito Sans';
}
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,700;1,400&family=Poppins:ital,wght@0,400;0,700;1,400&family=Source+Code+Pro:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="styles.css" type="text/css">
	<title>Website Style Guide </title>
	</head>
	<body>
	<h1>My Website Style Guide</h1>
	<div class="content-box">
	<h2>Colors</h2>
	<ul class="color-boxes">
	<li class="blue">Cool Blue #2d5dcc</li>
	<li class="pink">Pink #d957d9</li>
	<li class="mint">Mint Green #4fe0b0</li>
	<li class="beige">Beige #efd9ca</li>
	</ul>
	</div>
	<div class="content-box">
	<h2>Fonts</h2>
	<div class="row">
	<div class="column">
	<span id="text-example1">
	<h3>Source Code Pro</h3>
	<p>The quick brown fox jumps over the lazy dog.</p>
	<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
	<p><em>The quick brown fox jumps over the lazy dog.</em></p>
	</span>
	<span id="text-example2">
	<h3>Poppins</h3>
	<p>The quick brown fox jumps over the lazy dog.</p>
	<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
	<p><em>The quick brown fox jumps over the lazy dog.</em></p>
	</span>
	</div>

	<div class="column">
	<span id="text-example3">
	<h3>Nunito Sans</h3>
	<p>The quick brown fox jumps over the lazy dog.</p>
	<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
	<p><em>The quick brown fox jumps over the lazy dog.</em></p>
	</span>
	</div>
	</div>
	</div>

	<div class="content-box">
	<h2>Text Styles</h2>
	<h1>H1: Main page heading</h1>
	<ul>
	<li>Font-weight: 700 (bold)</li>
	<li>Font-size: 26px</li>
	<li>Font-family: Nunito Sans</li>
	</ul>
	<h2>H2: Subheading</h2>
	<ul>
	<li>Font-weight: 500</li>
	<li>Font-size: 18px</li>
	<li>Font-family: poppins</li>
	</ul>
	<p>P: Paragraph text</p>
	<ul>
	<li>Font-weight: 400 (regular)</li>
	<li>Font-size: 14px</li>
	<li>Font-family: Poppins</li>
	</ul>
	</div>
	</body>
	</html>
	.body{
	font-family: 'Poppins', sans-serif;
	}

	h1{
	font-family: 'Nunito Sans', sans-serif;
	font-size: 28px;
	font-weight: bold;
	}
	h2{
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	font-weight:bold;
	}
	p{
	font-size: 14px;
	}

	.content-box {
	border: 1px solid #666666;
	margin: 45px auto;
	padding: 25px;
	}

	/----colors ---/
	.color-boxes li {
	display: inline-block;
	text-decoration: none;
	width: 25%;
	}

	.blue{
	background-color: #2d5dcc;
	color: white;
	padding: 25px;
	margin: 10px;
	}
	.pink{
	background-color: #d957d9;
	color: #000000;
	padding: 25px;
	margin: 10px;
	}
	.mint{
	background-color: #4fe0b0;
	color: #6666666;
	padding: 25px;
	margin: 10px;
	}
	.beige{
	background-color: #efd9ca;
	color: #666666;
	padding: 25px;
	margin: 10px;
	}

	/----Fonts--- /
	.row {
	display: flex;
	}
	.column {
	flex: 50%;
	}

	#text-example1{
	font-family: 'Source Code Pro';
	}
	#text-example2{
	font-family: 'Poppins';
	}
	#text-example1{
	font-family: 'Nunito Sans';
	}