codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Website Design System</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="styles.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Arimo:400,700i|Fira+Sans:400,500i,600|Oswald:400,600&display=swap" rel="stylesheet">
  </head>

  <body>
    <div id="banner">
    <h1>My Website Style Guide</h1>
    </div>
   <!-- Colors -->
   <div id ="first-box" class="content">
    <h2 class="header">Colors</h2>
     <div>
       <ul id="list">
         <li id="blue" class="element"><br>Cool Blue<br> #2d5dcc</li>
         <li id="pink" class="element"><br>Pink<br> #d957d9</li>
         <li id="green" class="element"><br>Mint Green<br> #4fe0b0</li>
         <li id="beige" class="element"><br>Beige<br> #efd9ca</li>
       </ul>
      </div>
    </div>

   <!-- Fonts -->
  <div id="second-box" class="content">
    <h2 class="header">Fonts</h2>
     <div id ="arimo-font" class="fonts">
       <h3><u>Arimo</u></h3>
       <p id="arimo-size1">The cat is in the street.</p>
       <p id="arimo-size2">The cat is in the street.</p>
       <p id="arimo-size3">The cat is in the street.</p>
    </div>
    <div id ="fira-font" class="fonts">
       <h3 id="fira-style"><u>Fira Sans</u></h3>
       <p id="fira-size1">The dog is in the car.</p>
         <p id="fira-size2">The dog is in the car.</p>
         <p id="fira-size3">The dog is in the car.</p>
    </div>
    <div id ="oswald-font" class="fonts">
       <h3 id="oswald-style"><u>Oswald</u></h3>
         <p id="oswald-size1">The rabbit is eating a carrot.</p>
         <p id="oswald-size2">The rabbit is eating a carrot.</p>
         <p id="oswald-size3">The rabbit is eating a carrot .</p>
    </div>
   </div>

    <!-- Text Styles -->
    <div id="third-box" class="content">
    <h2 class="header">Text Styles</h2>
     <div class="text">
       <h1>H1: Main page heading</h1>
       <ul>
         <li>Font-weight: 700 (bold)</li>
         <li>Font-size: 30px</li>
         <li>Font-family: Arimo</li>
       </ul>
      </div>
      <div class="text">
       <h2>H2: Subheading</h2>
       <ul>
         <li>Font-weight: 500i (medium)</li>
         <li>Font-size: 25px</li>
         <li>Font-family: Fira-Sans</li>
       </ul>
      </div>
      <div class="text">
       <p>P: Paragraph Text</p>
       <ul>
         <li>Font-weight: 400(regular)</li>
         <li>Font-size: 20px</li>
         <li>Font-family: Oswald</li>
       </ul>
      </div>
    </div>
  </body>
</html>

## styles.css

#banner {
  background-color: #E1D991;
  padding: 20px;
}
#banner h1 {
  padding-left: 20px;
  text-align: center;
  font-style: italic;
}
.content {
  border: 3px solid grey;
  margin: 20px;
  padding: 15px;
}
.header {
  padding-left: 10px;
  font-size: 30px;
}
.content ul {
  margin: 0 auto;
  padding: 0;
}
#list li{
  font-size: 30px;
  display: inline-block;
  width: 160px;
  margin: 5px;
  padding-bottom: 30px;
  text-align: center;
}

/* Colors section */

#first-box {
  background-color: #E5D3A3;
}
#blue {
  background-color: #2d5dcc;
}
#pink {
  background-color: #d957d9;
}
#green {
  background-color: #4fe0b0;
}
#beige {
  background-color: #efd9ca;
}

/* Fonts section */

#second-box {
  background-color: #ABCEDC;
}
.fonts {
  display: inline-block;
  padding-left: 10px;
  padding-right: 30px;
  margin: 0 auto;
}


/*Arimo style*/
#arimo-font {
  font-family: 'Arimo', sans-serif;
}
#arimo-size1 {
  font-size: 400;
}
#arimo-size2 {
  font-size: 700;
  font-weight: bold;
  font-style: italic;
}
#arimo-size3 {
  font-size: 700;
}


/*Fira Sans style*/
#fira-font {
  font-family: 'Fira Sans', sans-serif;
}
#fira-size1 {
  font-size: 400;
}
#fira-size2 {
  font-size: 500;
  font-weight: bold;
  font-style: italic;
}
#fira-size3 {
  font-size: 600;
}


/*Oswald style*/
#oswald-font {
  font-family: 'Oswald', sans-serif;
}
#oswald-size1 {
  font-size: 400;
}
#oswald-size2 {
  font-size: 600;
  font-weight: bold;
  font-style: italic;
}
#oswald-size3 {
  font-size: 600;
}

/*Text-Styles Section*/

#third-box {
  background-color: #DCBDAB;
}
.text {
  padding-left: 10px;
  margin: 0 auto;
}

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

@media only screen and (min-width: 1000px) {
  #list li {
  width: 30%;
}
  .fonts {
  width: 30%;
  font-size: 25px;
}
  .text {
  font-size: 20px;
}
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Website Design System</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="styles.css" rel="stylesheet" type="text/css">
	<link href="https://fonts.googleapis.com/css?family=Arimo:400,700i\|Fira+Sans:400,500i,600\|Oswald:400,600&display=swap" rel="stylesheet">
	</head>

	<body>
	<div id="banner">
	<h1>My Website Style Guide</h1>
	</div>
	<!-- Colors -->
	<div id ="first-box" class="content">
	<h2 class="header">Colors</h2>
	<div>
	<ul id="list">
	<li id="blue" class="element"><br>Cool Blue<br> #2d5dcc</li>
	<li id="pink" class="element"><br>Pink<br> #d957d9</li>
	<li id="green" class="element"><br>Mint Green<br> #4fe0b0</li>
	<li id="beige" class="element"><br>Beige<br> #efd9ca</li>
	</ul>
	</div>
	</div>

	<!-- Fonts -->
	<div id="second-box" class="content">
	<h2 class="header">Fonts</h2>
	<div id ="arimo-font" class="fonts">
	<h3><u>Arimo</u></h3>
	<p id="arimo-size1">The cat is in the street.</p>
	<p id="arimo-size2">The cat is in the street.</p>
	<p id="arimo-size3">The cat is in the street.</p>
	</div>
	<div id ="fira-font" class="fonts">
	<h3 id="fira-style"><u>Fira Sans</u></h3>
	<p id="fira-size1">The dog is in the car.</p>
	<p id="fira-size2">The dog is in the car.</p>
	<p id="fira-size3">The dog is in the car.</p>
	</div>
	<div id ="oswald-font" class="fonts">
	<h3 id="oswald-style"><u>Oswald</u></h3>
	<p id="oswald-size1">The rabbit is eating a carrot.</p>
	<p id="oswald-size2">The rabbit is eating a carrot.</p>
	<p id="oswald-size3">The rabbit is eating a carrot .</p>
	</div>
	</div>

	<!-- Text Styles -->
	<div id="third-box" class="content">
	<h2 class="header">Text Styles</h2>
	<div class="text">
	<h1>H1: Main page heading</h1>
	<ul>
	<li>Font-weight: 700 (bold)</li>
	<li>Font-size: 30px</li>
	<li>Font-family: Arimo</li>
	</ul>
	</div>
	<div class="text">
	<h2>H2: Subheading</h2>
	<ul>
	<li>Font-weight: 500i (medium)</li>
	<li>Font-size: 25px</li>
	<li>Font-family: Fira-Sans</li>
	</ul>
	</div>
	<div class="text">
	<p>P: Paragraph Text</p>
	<ul>
	<li>Font-weight: 400(regular)</li>
	<li>Font-size: 20px</li>
	<li>Font-family: Oswald</li>
	</ul>
	</div>
	</div>
	</body>
	</html>

	#banner {
	background-color: #E1D991;
	padding: 20px;
	}
	#banner h1 {
	padding-left: 20px;
	text-align: center;
	font-style: italic;
	}
	.content {
	border: 3px solid grey;
	margin: 20px;
	padding: 15px;
	}
	.header {
	padding-left: 10px;
	font-size: 30px;
	}
	.content ul {
	margin: 0 auto;
	padding: 0;
	}
	#list li{
	font-size: 30px;
	display: inline-block;
	width: 160px;
	margin: 5px;
	padding-bottom: 30px;
	text-align: center;
	}

	/* Colors section */

	#first-box {
	background-color: #E5D3A3;
	}
	#blue {
	background-color: #2d5dcc;
	}
	#pink {
	background-color: #d957d9;
	}
	#green {
	background-color: #4fe0b0;
	}
	#beige {
	background-color: #efd9ca;
	}

	/* Fonts section */

	#second-box {
	background-color: #ABCEDC;
	}
	.fonts {
	display: inline-block;
	padding-left: 10px;
	padding-right: 30px;
	margin: 0 auto;
	}


	/Arimo style/
	#arimo-font {
	font-family: 'Arimo', sans-serif;
	}
	#arimo-size1 {
	font-size: 400;
	}
	#arimo-size2 {
	font-size: 700;
	font-weight: bold;
	font-style: italic;
	}
	#arimo-size3 {
	font-size: 700;
	}


	/Fira Sans style/
	#fira-font {
	font-family: 'Fira Sans', sans-serif;
	}
	#fira-size1 {
	font-size: 400;
	}
	#fira-size2 {
	font-size: 500;
	font-weight: bold;
	font-style: italic;
	}
	#fira-size3 {
	font-size: 600;
	}


	/Oswald style/
	#oswald-font {
	font-family: 'Oswald', sans-serif;
	}
	#oswald-size1 {
	font-size: 400;
	}
	#oswald-size2 {
	font-size: 600;
	font-weight: bold;
	font-style: italic;
	}
	#oswald-size3 {
	font-size: 600;
	}

	/Text-Styles Section/

	#third-box {
	background-color: #DCBDAB;
	}
	.text {
	padding-left: 10px;
	margin: 0 auto;
	}

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

	@media only screen and (min-width: 1000px) {
	#list li {
	width: 30%;
	}
	.fonts {
	width: 30%;
	font-size: 25px;
	}
	.text {
	font-size: 20px;
	}
	}