codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300i,400,700|Open+Sans:300i,400,700|Raleway:300i,400,700&display=swap" rel="stylesheet">
  <title>My Website Style Guide</title>
  <link href="styles.css" type="text/css" rel="stylesheet"/>
</head>
<body>
  <h1>My Website Style Guide</h1>

  <div class ="colors">

    <p class="colors-title">Colours</p>
  <p class ="color-1">Peach
  (228, 185, 171):
Header Colour
  </p>

  <p class ="color-2">Light Lavender (243, 240, 246): Banner Colour
  </p>

  <p class ="color-3">Off White (255, 253, 249): Background Colour
  </p>

  <p class="color-4">Rose Gold (246, 217, 213): Footer Colour</p>
  </div>

  <div class="fonts">
 <p class="title">Fonts</p>
     <p class="Raleway">
    Raleway
    <p class="Raleway">The quick brown fox jumps over the lazy dog.</p>
    <p class="Raleway"><b>The quick brown fox jumps over the lazy dog.</b></p>
    <p class="Raleway"><i>The quick brown fox jumps over the lazy dog.</i></p>
  </p>
  <br>
       <p class="Montserrat">
    Montserrat
    <p class="Montserrat">The quick brown fox jumps over the lazy dog.</p>
    <p class="Montserrat"><b>The quick brown fox jumps over the lazy dog.</b></p>
    <p class="Montserrat"><i>The quick brown fox jumps over the lazy dog.</i></p>
  </p>

  <br>
       <p class="Open-Sans">
    Open Sans
    <p class="Open-Sans">The quick brown fox jumps over the lazy dog.</p>
    <p class="Open-Sans"><b>The quick brown fox jumps over the lazy dog.</b></p>
    <p class="Open-Sans"><i>The quick brown fox jumps over the lazy dog.</i></p>
  </p>

  </div>

<div class="text-styles">
  <p class ="title">Text Styles</p>
  <span id="main-heading">H1: Main Page Heading</span>
    <ul class="ul">
      <li>Font-weight: 700 (bold)</li>
      <li>Font-size: 26px</li>
      <li>Font-family: Raleway</li>
    </ul>
  <br>
  <span class="subheading"><b>H2: Subheading</b>
  </span>
  <ul class="ul">
      <li>Font-weight: 700 (bold)</li>
      <li>Font-size: 20px</li>
      <li>Font-family: Montserrat</li>
    </ul>
  <span class="paragraph">P: Paragraph Text</span>
    <ul class="ul">
      <li>Font-weight: 400 (regular)</li>
      <li>Font-size: 18px</li>
      <li>Font-family: Open Sans</li>
    </ul>
</div>

</body>
</html>

## styles.css
* {
  box-sizing: border-box;
}

body {
  font-family: Georgia;
}
.colors-title {
  text-align: center;
  font-weight: bold;
  font-size: 30px;
}
.colors {
  border: 3px solid black;
  display: inline-block;
}
p.color-1 {
  background-color: rgb(228,185,171);
  border: 1px solid white;
  display: inline-block;
  width: 200px;
  height: 100px;
  padding-top: 30px;
  text-align: center;
}

p.color-2 {
  background-color: rgb(243, 240, 246);
  border: 1px solid white;
  display: inline-block;
  width: 200px;
  height: 100px;
  padding-top: 30px;
  text-align: center;
}

p.color-3 {
  background-color: rgb(255, 253, 249);
  border: 1px solid white;
  display: inline-block;
  width: 200px;
  height: 100px;
  padding-top: 30px;
  text-align: center;
}

p.color-4 {
  background-color: rgb(246, 217, 213);
  border: 1px solid white;
  display: block;
  width: 200px;
  height: 100px;
  padding-top: 30px;
  text-align: center;
  position: relative;
  clear: left;
}

h2 {
  border: 1px solid black;
  height: 100px;
  width: 100px;
}

.title {
  text-align: center;
  font-weight: bold;
  font-size: 30px;
}

.fonts {
  display: block;
  border: 3px solid black;
  width: 611px;
  margin-top: 20px;
}


p.Raleway {
  font-family: "Raleway";
  padding-left: 90px;
  padding-top: 20px;
}

p.Montserrat {
  font-family: "Montserrat";
  padding-left: 90px;
   padding-top: 20px;
}

p.Open-Sans {
  font-family: "Open Sans";
  padding-left: 90px;
 padding-top: 20px;
}

.text-styles {
  display: block;
  border: 3px solid black;
  width: 611px;
  margin-top: 20px;
}

#main-heading {
 text-align: left;
  font-family: Raleway;
  font-size: 26px;
  font-weight: bold;
}

.ul {
 text-align: left;
}

.subheading {
  text-align: left;
  font-size: 20px;
  font-family: Montserrat;
  border: none;
  display: inline;
  font-weight: 700px;
}

.paragraph {
  font-weight: 400px;
  font-size: 18px;
  font-family: "Open Sans";
}
	<!DOCTYPE html>
	<html>
	<head>
	<link href="https://fonts.googleapis.com/css?family=Montserrat:300i,400,700\|Open+Sans:300i,400,700\|Raleway:300i,400,700&display=swap" rel="stylesheet">
	<title>My Website Style Guide</title>
	<link href="styles.css" type="text/css" rel="stylesheet"/>
	</head>
	<body>
	<h1>My Website Style Guide</h1>

	<div class ="colors">

	<p class="colors-title">Colours</p>
	<p class ="color-1">Peach
	(228, 185, 171):
	Header Colour
	</p>

	<p class ="color-2">Light Lavender (243, 240, 246): Banner Colour
	</p>

	<p class ="color-3">Off White (255, 253, 249): Background Colour
	</p>

	<p class="color-4">Rose Gold (246, 217, 213): Footer Colour</p>
	</div>

	<div class="fonts">
	<p class="title">Fonts</p>
	<p class="Raleway">
	Raleway
	<p class="Raleway">The quick brown fox jumps over the lazy dog.</p>
	<p class="Raleway"><b>The quick brown fox jumps over the lazy dog.</b></p>
	<p class="Raleway"><i>The quick brown fox jumps over the lazy dog.</i></p>
	</p>
	<br>
	<p class="Montserrat">
	Montserrat
	<p class="Montserrat">The quick brown fox jumps over the lazy dog.</p>
	<p class="Montserrat"><b>The quick brown fox jumps over the lazy dog.</b></p>
	<p class="Montserrat"><i>The quick brown fox jumps over the lazy dog.</i></p>
	</p>

	<br>
	<p class="Open-Sans">
	Open Sans
	<p class="Open-Sans">The quick brown fox jumps over the lazy dog.</p>
	<p class="Open-Sans"><b>The quick brown fox jumps over the lazy dog.</b></p>
	<p class="Open-Sans"><i>The quick brown fox jumps over the lazy dog.</i></p>
	</p>

	</div>

	<div class="text-styles">
	<p class ="title">Text Styles</p>
	<span id="main-heading">H1: Main Page Heading</span>
	<ul class="ul">
	<li>Font-weight: 700 (bold)</li>
	<li>Font-size: 26px</li>
	<li>Font-family: Raleway</li>
	</ul>
	<br>
	<span class="subheading"><b>H2: Subheading</b>
	</span>
	<ul class="ul">
	<li>Font-weight: 700 (bold)</li>
	<li>Font-size: 20px</li>
	<li>Font-family: Montserrat</li>
	</ul>
	<span class="paragraph">P: Paragraph Text</span>
	<ul class="ul">
	<li>Font-weight: 400 (regular)</li>
	<li>Font-size: 18px</li>
	<li>Font-family: Open Sans</li>
	</ul>
	</div>

	</body>
	</html>
	* {
	box-sizing: border-box;
	}

	body {
	font-family: Georgia;
	}
	.colors-title {
	text-align: center;
	font-weight: bold;
	font-size: 30px;
	}
	.colors {
	border: 3px solid black;
	display: inline-block;
	}
	p.color-1 {
	background-color: rgb(228,185,171);
	border: 1px solid white;
	display: inline-block;
	width: 200px;
	height: 100px;
	padding-top: 30px;
	text-align: center;
	}

	p.color-2 {
	background-color: rgb(243, 240, 246);
	border: 1px solid white;
	display: inline-block;
	width: 200px;
	height: 100px;
	padding-top: 30px;
	text-align: center;
	}

	p.color-3 {
	background-color: rgb(255, 253, 249);
	border: 1px solid white;
	display: inline-block;
	width: 200px;
	height: 100px;
	padding-top: 30px;
	text-align: center;
	}

	p.color-4 {
	background-color: rgb(246, 217, 213);
	border: 1px solid white;
	display: block;
	width: 200px;
	height: 100px;
	padding-top: 30px;
	text-align: center;
	position: relative;
	clear: left;
	}

	h2 {
	border: 1px solid black;
	height: 100px;
	width: 100px;
	}

	.title {
	text-align: center;
	font-weight: bold;
	font-size: 30px;
	}

	.fonts {
	display: block;
	border: 3px solid black;
	width: 611px;
	margin-top: 20px;
	}


	p.Raleway {
	font-family: "Raleway";
	padding-left: 90px;
	padding-top: 20px;
	}

	p.Montserrat {
	font-family: "Montserrat";
	padding-left: 90px;
	padding-top: 20px;
	}

	p.Open-Sans {
	font-family: "Open Sans";
	padding-left: 90px;
	padding-top: 20px;
	}

	.text-styles {
	display: block;
	border: 3px solid black;
	width: 611px;
	margin-top: 20px;
	}

	#main-heading {
	text-align: left;
	font-family: Raleway;
	font-size: 26px;
	font-weight: bold;
	}

	.ul {
	text-align: left;
	}

	.subheading {
	text-align: left;
	font-size: 20px;
	font-family: Montserrat;
	border: none;
	display: inline;
	font-weight: 700px;
	}

	.paragraph {
	font-weight: 400px;
	font-size: 18px;
	font-family: "Open Sans";
	}