codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="content-language" content="en">
    <title>Web Project</title>
    <link rel="stylesheet" href="./styles.css" type="text/css">
  </head>
  <body>
    <header>
      <h1>Style Guide</h1>
      <h2 class="header"><a href="#color" title="Colors">Colors</a></h2>
      <h2 class="header"><a href="#font" title="Fonts">Fonts</a></h2>
      <h2 class="header"><a href="#textstyles" title="Text Styles">Text Styles</a></h2>
    </header>
    <main>
      <section class="colors">
        <h2 id="color" class="heading">COLORS</h2>
        <div class="class1" id="azure">
          <p class="name">Azure</p>
          <p>#F0FFFF</p>
        </div>
        <div class="class1" id="blanchedalmond">
          <p class="name">BlanchedAlmond</p>
          <p>#FFEBCD</p>
        </div>
        <div class="class1 "id="burlywood">
          <p class="name">BurlyWood</p>
          <p>#DEB887</p>
        </div>
        <div  class="class2" id="chocolate">
          <p class="name">Chocolate</p>
          <p>#D2691E</p>
        </div>
        <div  class="class2" id="coral">
          <p class="name">Coral</p>
          <p>#FF7F50</p>
        </div>
        <div  class="class2" id="cornflowerblue">
          <p class="name">CornflowerBlue</p>
          <p>#6495ED</p>
        </div>
        <div  class="class3" id="darksalmon">
          <p class="name">DarkSalmon</p>
          <p>#E9967A</p>
        </div>
        <div  class="class3" id="darfseagreen">
          <p class="name">DarkSeaGreen</p>
          <p>#8FBC8F</p>
        </div>
        <div  class="class3" id="darkslateblue">
          <p class="name">DarkSlateBlue</p>
          <p>#483D8B</p>
        </div>
        <div  class="class4" id="silver">
          <p class="name">Silver</p>
          <p>#C0C0C0</p>
        </div>
        <div  class="class4" id="seashell">
          <p class="name">SeaShell</p>
          <p>#FFF5EE</p>
        </div>
        <div  class="class4" id="orangered">
          <p class="name">OrangeRed</p>
          <p>#FF4500</p>
        </div>

      </section>
      <section class="fonts">
        <h2 id="font" class="heading">FONTS</h2>
        <h2 id="robotohead">Roboto</h2>
        <p id="roboto">Sentence in Roboto font</p>
        <p id="robotoitalic">Sentence in Roboto Italic font</p>
        <p id="robotobold">Sentence in Roboto Bold font</p>
        <h2 id="opensanshead">Open Sans</h2>
        <p id="opensans">Sentence in Open Sans font</p>
        <p id="opensansitalic">Sentence in Open Sans Italic font</p>
        <p id="opensansbold">Sentence in Open Sans Bold font</p>
        <h2 id="latohead">Lato</h2>
        <p id="lato">Sentence in Lato font</p>
        <p id="latoitalic">Sentence in Lato Italic font</p>
        <p id="latobold">Sentence in Lato Boldfont</p>
        <h2 id="comicneuehead">Comic Neue</h2>
        <p id="comicneue">Sentence in Comic Neue font</p>
        <p id="comicneueitalic">Sentence in Comic Neue Italic font</p>
        <p id="comicneuebold">Sentence in Comic Neue Bold font</p>
      </section>
      <section class="Text Styles">
        <h2 id="textstyles" class="heading">TEXT STYLES</h2>
        <h2 id="textstyle">Headings</h2>
        <h2  id="example" class="heading">Subheadings</h2>
        <p>Paragraphs</p>
      </section>
    </main>
    <footer><span>&copyYan Zinchenko</span></footer>
  </body>
</html>

## styles.css
header {
  background-color: darkmagenta;
  height: 120px;
  width: 100%;
  margin: 0;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  font-family: Manjari;
  font-weight: bold;
}

h1 {
  color: orange;
  float: left;
  margin: 35px 160px 33.5px 100px;
  font-size: 50px;

}


h2.header {
  color: white;
  display: inline-block;
  font-size: 35px;
  margin: 47px 85px;

}

a {
  color: orange;
  text-decoration: none;
}

main {
  width: 1170px;
  margin: 120px auto 53px;
  border: 1px solid black;
  font-family: sans-serif;
}

footer {
  background-color: darkmagenta;
  height: 60px;
  width: 100%;
  margin: 0;
  position: fixed;
  left: 0px;
  top: 94%;
  right: 0px;
  text-align: center;
}

span {
  font-family: sans-serif;
  color: orange;
  text-align: center;
  position: relative;
  top: 20px;
}
div.class1 {
  display: inline-block;
}

div.class2 {
  display: inline-block;
}

div.class3 {
  display: inline-block;
}

div.class4 {
  display: inline-block;
}

.fonts {
  margin-left: 15px;
}

.colors p {
  text-align: center;
  font-size: 22px;
}

p {
  font-size: 22px;
}
p.name {
  font-weight: bold;
}

#azure {
  background-color: #F0FFFF;
  width: 360px;
  height: 120px;
  margin: 20px;
}

#blanchedalmond {
  background-color: #FFEBCD;
  width: 360px;
  height: 120px;
  margin: 20px 0px;
}

#burlywood {
  background-color: #DEB887;
  width: 360px;
  height: 120px;
  margin: 20px;
}

#chocolate {
background-color: #D2691E;
width: 360px;
height: 120px;
margin: 20px;
}
#coral {
background-color: #FF7F50;
width: 360px;
height: 120px;
margin: 20px 0px;
}
#cornflowerblue {
background-color: #6495ED;
width: 360px;
height: 120px;
margin: 20px;
}
#darksalmon {
background-color: #E9967A;
width: 360px;
height: 120px;
margin: 20px;
}
#darfseagreen {
background-color: #8FBC8F;
width: 360px;
height: 120px;
margin: 20px 0px;
}
#darkslateblue {
background-color: #483D8B;
width: 360px;
height: 120px;
margin: 20px;
}
#silver {
background-color: #C0C0C0;
width: 360px;
height: 120px;
margin: 20px;
}
#seashell {
background-color: #FFF5EE;
width: 360px;
height: 120px;
margin: 20px 0px;
}
#orangered {
background-color: #FF4500;
width: 360px;
height: 120px;
margin: 20px;
}
.heading {
  text-align: center;
  font-size: 30px;
  text-decoration: underline;
}
 #example {
   text-decoration: none;
   text-align: left;
 }

#robotohead {
  font-family: Roboto;
  font-size: 32px;
  text-decoration: underline;

}
#roboto {
  font-family: Roboto;
}
#robotobold {
  font-family: Roboto;
  font-weight: bold;
}
#robotoitalic {
  font-family: Roboto;
  font-style: italic;
}

#opensanshead {
  font-family: 'Open Sans';
  font-size: 32px;
  text-decoration: underline;
}
#opensans {
  font-family: 'Open Sans';
}
#opensansbold {
  font-family: 'Open Sans';
  font-weight: bold;
}
#opensansitalic{
  font-family: 'Open Sans';
  font-style: italic;
}

#latohead {
  font-family: Lato;
  font-size: 32px;
  text-decoration: underline;
}
#lato {
  font-family: Lato;
}
#latobold {
  font-family: Lato;
  font-weight: bold;
}
#latoitalic {
  font-family: Lato;
  font-style: italic;
}

#comicneuehead {
  font-family: 'Comic Neue';
  font-size: 32px;
  text-decoration: underline;
}
#comicneue {
  font-family: 'Comic Neue';
}
#comicneuebold {
  font-family: 'Comic Neue';
  font-weight: bold;
}
#comicneueitalic {
  font-family: 'Comic Neue';
  font-style: italic;
}

#textstyle {
  font-size: 50px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="content-language" content="en">
	<title>Web Project</title>
	<link rel="stylesheet" href="./styles.css" type="text/css">
	</head>
	<body>
	<header>
	<h1>Style Guide</h1>
	<h2 class="header"><a href="#color" title="Colors">Colors</a></h2>
	<h2 class="header"><a href="#font" title="Fonts">Fonts</a></h2>
	<h2 class="header"><a href="#textstyles" title="Text Styles">Text Styles</a></h2>
	</header>
	<main>
	<section class="colors">
	<h2 id="color" class="heading">COLORS</h2>
	<div class="class1" id="azure">
	<p class="name">Azure</p>
	<p>#F0FFFF</p>
	</div>
	<div class="class1" id="blanchedalmond">
	<p class="name">BlanchedAlmond</p>
	<p>#FFEBCD</p>
	</div>
	<div class="class1 "id="burlywood">
	<p class="name">BurlyWood</p>
	<p>#DEB887</p>
	</div>
	<div class="class2" id="chocolate">
	<p class="name">Chocolate</p>
	<p>#D2691E</p>
	</div>
	<div class="class2" id="coral">
	<p class="name">Coral</p>
	<p>#FF7F50</p>
	</div>
	<div class="class2" id="cornflowerblue">
	<p class="name">CornflowerBlue</p>
	<p>#6495ED</p>
	</div>
	<div class="class3" id="darksalmon">
	<p class="name">DarkSalmon</p>
	<p>#E9967A</p>
	</div>
	<div class="class3" id="darfseagreen">
	<p class="name">DarkSeaGreen</p>
	<p>#8FBC8F</p>
	</div>
	<div class="class3" id="darkslateblue">
	<p class="name">DarkSlateBlue</p>
	<p>#483D8B</p>
	</div>
	<div class="class4" id="silver">
	<p class="name">Silver</p>
	<p>#C0C0C0</p>
	</div>
	<div class="class4" id="seashell">
	<p class="name">SeaShell</p>
	<p>#FFF5EE</p>
	</div>
	<div class="class4" id="orangered">
	<p class="name">OrangeRed</p>
	<p>#FF4500</p>
	</div>

	</section>
	<section class="fonts">
	<h2 id="font" class="heading">FONTS</h2>
	<h2 id="robotohead">Roboto</h2>
	<p id="roboto">Sentence in Roboto font</p>
	<p id="robotoitalic">Sentence in Roboto Italic font</p>
	<p id="robotobold">Sentence in Roboto Bold font</p>
	<h2 id="opensanshead">Open Sans</h2>
	<p id="opensans">Sentence in Open Sans font</p>
	<p id="opensansitalic">Sentence in Open Sans Italic font</p>
	<p id="opensansbold">Sentence in Open Sans Bold font</p>
	<h2 id="latohead">Lato</h2>
	<p id="lato">Sentence in Lato font</p>
	<p id="latoitalic">Sentence in Lato Italic font</p>
	<p id="latobold">Sentence in Lato Boldfont</p>
	<h2 id="comicneuehead">Comic Neue</h2>
	<p id="comicneue">Sentence in Comic Neue font</p>
	<p id="comicneueitalic">Sentence in Comic Neue Italic font</p>
	<p id="comicneuebold">Sentence in Comic Neue Bold font</p>
	</section>
	<section class="Text Styles">
	<h2 id="textstyles" class="heading">TEXT STYLES</h2>
	<h2 id="textstyle">Headings</h2>
	<h2 id="example" class="heading">Subheadings</h2>
	<p>Paragraphs</p>
	</section>
	</main>
	<footer><span>&copyYan Zinchenko</span></footer>
	</body>
	</html>
	header {
	background-color: darkmagenta;
	height: 120px;
	width: 100%;
	margin: 0;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	font-family: Manjari;
	font-weight: bold;
	}

	h1 {
	color: orange;
	float: left;
	margin: 35px 160px 33.5px 100px;
	font-size: 50px;

	}


	h2.header {
	color: white;
	display: inline-block;
	font-size: 35px;
	margin: 47px 85px;

	}

	a {
	color: orange;
	text-decoration: none;
	}

	main {
	width: 1170px;
	margin: 120px auto 53px;
	border: 1px solid black;
	font-family: sans-serif;
	}

	footer {
	background-color: darkmagenta;
	height: 60px;
	width: 100%;
	margin: 0;
	position: fixed;
	left: 0px;
	top: 94%;
	right: 0px;
	text-align: center;
	}

	span {
	font-family: sans-serif;
	color: orange;
	text-align: center;
	position: relative;
	top: 20px;
	}
	div.class1 {
	display: inline-block;
	}

	div.class2 {
	display: inline-block;
	}

	div.class3 {
	display: inline-block;
	}

	div.class4 {
	display: inline-block;
	}

	.fonts {
	margin-left: 15px;
	}

	.colors p {
	text-align: center;
	font-size: 22px;
	}

	p {
	font-size: 22px;
	}
	p.name {
	font-weight: bold;
	}

	#azure {
	background-color: #F0FFFF;
	width: 360px;
	height: 120px;
	margin: 20px;
	}

	#blanchedalmond {
	background-color: #FFEBCD;
	width: 360px;
	height: 120px;
	margin: 20px 0px;
	}

	#burlywood {
	background-color: #DEB887;
	width: 360px;
	height: 120px;
	margin: 20px;
	}

	#chocolate {
	background-color: #D2691E;
	width: 360px;
	height: 120px;
	margin: 20px;
	}
	#coral {
	background-color: #FF7F50;
	width: 360px;
	height: 120px;
	margin: 20px 0px;
	}
	#cornflowerblue {
	background-color: #6495ED;
	width: 360px;
	height: 120px;
	margin: 20px;
	}
	#darksalmon {
	background-color: #E9967A;
	width: 360px;
	height: 120px;
	margin: 20px;
	}
	#darfseagreen {
	background-color: #8FBC8F;
	width: 360px;
	height: 120px;
	margin: 20px 0px;
	}
	#darkslateblue {
	background-color: #483D8B;
	width: 360px;
	height: 120px;
	margin: 20px;
	}
	#silver {
	background-color: #C0C0C0;
	width: 360px;
	height: 120px;
	margin: 20px;
	}
	#seashell {
	background-color: #FFF5EE;
	width: 360px;
	height: 120px;
	margin: 20px 0px;
	}
	#orangered {
	background-color: #FF4500;
	width: 360px;
	height: 120px;
	margin: 20px;
	}
	.heading {
	text-align: center;
	font-size: 30px;
	text-decoration: underline;
	}
	#example {
	text-decoration: none;
	text-align: left;
	}

	#robotohead {
	font-family: Roboto;
	font-size: 32px;
	text-decoration: underline;

	}
	#roboto {
	font-family: Roboto;
	}
	#robotobold {
	font-family: Roboto;
	font-weight: bold;
	}
	#robotoitalic {
	font-family: Roboto;
	font-style: italic;
	}

	#opensanshead {
	font-family: 'Open Sans';
	font-size: 32px;
	text-decoration: underline;
	}
	#opensans {
	font-family: 'Open Sans';
	}
	#opensansbold {
	font-family: 'Open Sans';
	font-weight: bold;
	}
	#opensansitalic{
	font-family: 'Open Sans';
	font-style: italic;
	}

	#latohead {
	font-family: Lato;
	font-size: 32px;
	text-decoration: underline;
	}
	#lato {
	font-family: Lato;
	}
	#latobold {
	font-family: Lato;
	font-weight: bold;
	}
	#latoitalic {
	font-family: Lato;
	font-style: italic;
	}

	#comicneuehead {
	font-family: 'Comic Neue';
	font-size: 32px;
	text-decoration: underline;
	}
	#comicneue {
	font-family: 'Comic Neue';
	}
	#comicneuebold {
	font-family: 'Comic Neue';
	font-weight: bold;
	}
	#comicneueitalic {
	font-family: 'Comic Neue';
	font-style: italic;
	}

	#textstyle {
	font-size: 50px;
	}