codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Style Guide</title>
  <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Balsamiq+Sans">
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>My Website Style Guide</h1>
  <div class="flex-container">
<! -- Colors section start-->
     <div>
           <h2>Colors:</h2>
           <div class='box' id="bt">
             <p>Best Turquoise</p>
             <p>#40e0d0</p>
           </div>
           <div class='box' id='iv'>
               <p>Ivory</p>
               <p>#FFFFF0</p>
            </div>
           <div class='box' id='mr'>
               <p>MistyRose</p>
               <p>#FFE4E1</p>
            </div>
           <div class='box' id='cr'>
               <p>Crimson</p>
               <p>#DC143C</p>
            </div>
            <div class='box' id='dg'>
               <p>Dark Slate Gray</p>
               <p>#2F4F4F</p>
            </div>
            <div class='box' id='fw'>
               <p>Floral White</p>
               <p>#FFFAF0</p>
            </div>
      </div>
<! -- Fonts section start-->
     <div id='fonts'>
        <h2>Fonts</h2>
        <div class='box2' id='verdana'>
          <h3>Verdana</h3>
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p class='boldy'>The quick brown fox jumps over the lazy dog.</p>
            <p class='italy'>The quick brown fox jumps over the lazy dog.</p>
        </div>
        <div class='box2' id='times'>
          <h3>Times New Roman</h3>
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p class='boldy'>The quick brown fox jumps over the lazy dog.</p>
            <p class='italy'>The quick brown fox jumps over the lazy dog.</p>
        </div>
        <div class='box2' id='bs'>
          <h3>Balsamiq Sans</h3>
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p class='boldy'>The quick brown fox jumps over the lazy dog.</p>
            <p class='italy'>The quick brown fox jumps over the lazy dog.</p>
        </div>
        <div class='box2' id='tanger'>
          <h3>Tangerine</h3>
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p class='boldy'>The quick brown fox jumps over the lazy dog.</p>
            <p class='italy'>The quick brown fox jumps over the lazy dog.</p>
        </div>
    </div>

<! -- Text Styles section start-->
     <div class='textStyles'>
      <h2>Text Styles</h2>
      <h3>H1: Main page heading</h3>
        <ul>
          <li>Font-weight: 700 (bold)</li>
          <li>Font-size: 30px</li>
          <li>Font-family: Arial</li>
          <li>Text-shadow: 2px 1px black</li>
         </ul>
        <h3>HH2: Subheading</h3>
      <ul>
        <li>Font-weight: bold</li>
        <li>Font-size: 25px</li>
        <li>Font-family: Poppins</li>
      </ul>
        <h3>P: Paragraph text</h3>
      <ul>
        <li>Font-weight: 500</li>
        <li>Font-size: 14px</li>
        <li>Font-family: Arial</li>
      </ul>
      </div>
  <div>
    <h2>Gradients</h2>
    <h3>Linear Gradients</h3>
      <div class='box' id='leftToRight'>Left to Right</div>
      <div class='box' id='topToB'>Top to Bottom (this is default)</div>
      <div class='box' id='Dia'>Diagonal</div>
    <h3>Radial Gradients</h3>
    <div class='box' id='even'>Evenly Spaced Color Stops (this is default)</div>
    <div class='box' id='Diff'>Differently Spaced Color Stops</div>
    <div class='box' id='Circle'>Set Shape: Circle</div>
  </div>

    </div>


</body>
</html>

## styles.css
body{
  background-image: linear-gradient(to bottom right, #f1f1f1, #FFE4E1);
  font-size: 30px
  margin:20px 60px;
  font-family: Arial;
}

h1{
  color :  #808080;
  text-shadow: 1px 1px #000000;
  font-weight: 700;
  text-align:center;
}

h2{
font-weight: bold;
font-size: 24px;
font-family: Poppins;
}

.flex-container{
  display: flex;
  flex-direction:column;
  justify-content: center;
}

.flex-container > div {
  background-color: #d9d9d9;
  padding:  0px 20px;
  margin:20px;
  padding: 5px 10px;
  margin:20px;
  overflow: hidden;
}

.box {
  display: inline-block;
  text-align:center;
  width:30%;
  max-width: 300px;
  height: 100px;
  padding: 20px;
  margin:10px;
  overflow: hidden;
}

#bt{
    background-color:#40e0d0;
}

#iv{
    background-color:#FFFFF0;
}

#mr{
    background-color:#FFE4E1;
}

#cr{
    background-color:#DC143C;
}

#dg{
    background-color:#2F4F4F;
}

#fw{
  background-color:#FFFAF0;
}
.box2 {
  padding: 10px;
  margin:20px;
  display: inline-block;
}

.box2 h3{
  text-align:left;
  text-decoration: underline;
  font-size: 20px;
}

.boldy{
  font-weight:bold;
}

.italy {
  font-style: italic;
}

#verdana{
    font-family: Verdana, serif;
}
#times{
  font-family: "Times New Roman", serif;
}


#tanger{
  font-family: 'Tangerine', serif;
  font-size:1.2em;
}

#bs{
  font-family: 'Balsamiq Sans', serif;
}

#leftToRight {
  background-image: linear-gradient(to right, #40e0d0 , #FFFFF0);
}
#topToB{
  background-image: linear-gradient(#40e0d0, #FFFFF0);
}
#Dia{
   background-image: linear-gradient(to bottom right,#40e0d0, #FFFFF0);
}
#even{
  background-image: radial-gradient(#40e0d0, #FFE4E1, #F5F5DC);
}
#Diff{
  background-image: radial-gradient(#40e0d0 5%, #FFE4E1 15%, #F5F5DC  60%);
}
#Circle{
  background-image: radial-gradient(circle, #40e0d0, #FFE4E1, #F5F5DC);
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Style Guide</title>
	<link rel="stylesheet"
	href="https://fonts.googleapis.com/css?family=Tangerine">
	<link rel="stylesheet"
	href="https://fonts.googleapis.com/css?family=Balsamiq+Sans">
	<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
	<h1>My Website Style Guide</h1>
	<div class="flex-container">
	<! -- Colors section start-->
	<div>
	<h2>Colors:</h2>
	<div class='box' id="bt">
	<p>Best Turquoise</p>
	<p>#40e0d0</p>
	</div>
	<div class='box' id='iv'>
	<p>Ivory</p>
	<p>#FFFFF0</p>
	</div>
	<div class='box' id='mr'>
	<p>MistyRose</p>
	<p>#FFE4E1</p>
	</div>
	<div class='box' id='cr'>
	<p>Crimson</p>
	<p>#DC143C</p>
	</div>
	<div class='box' id='dg'>
	<p>Dark Slate Gray</p>
	<p>#2F4F4F</p>
	</div>
	<div class='box' id='fw'>
	<p>Floral White</p>
	<p>#FFFAF0</p>
	</div>
	</div>
	<! -- Fonts section start-->
	<div id='fonts'>
	<h2>Fonts</h2>
	<div class='box2' id='verdana'>
	<h3>Verdana</h3>
	<p>The quick brown fox jumps over the lazy dog.</p>
	<p class='boldy'>The quick brown fox jumps over the lazy dog.</p>
	<p class='italy'>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div class='box2' id='times'>
	<h3>Times New Roman</h3>
	<p>The quick brown fox jumps over the lazy dog.</p>
	<p class='boldy'>The quick brown fox jumps over the lazy dog.</p>
	<p class='italy'>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div class='box2' id='bs'>
	<h3>Balsamiq Sans</h3>
	<p>The quick brown fox jumps over the lazy dog.</p>
	<p class='boldy'>The quick brown fox jumps over the lazy dog.</p>
	<p class='italy'>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div class='box2' id='tanger'>
	<h3>Tangerine</h3>
	<p>The quick brown fox jumps over the lazy dog.</p>
	<p class='boldy'>The quick brown fox jumps over the lazy dog.</p>
	<p class='italy'>The quick brown fox jumps over the lazy dog.</p>
	</div>
	</div>

	<! -- Text Styles section start-->
	<div class='textStyles'>
	<h2>Text Styles</h2>
	<h3>H1: Main page heading</h3>
	<ul>
	<li>Font-weight: 700 (bold)</li>
	<li>Font-size: 30px</li>
	<li>Font-family: Arial</li>
	<li>Text-shadow: 2px 1px black</li>
	</ul>
	<h3>HH2: Subheading</h3>
	<ul>
	<li>Font-weight: bold</li>
	<li>Font-size: 25px</li>
	<li>Font-family: Poppins</li>
	</ul>
	<h3>P: Paragraph text</h3>
	<ul>
	<li>Font-weight: 500</li>
	<li>Font-size: 14px</li>
	<li>Font-family: Arial</li>
	</ul>
	</div>
	<div>
	<h2>Gradients</h2>
	<h3>Linear Gradients</h3>
	<div class='box' id='leftToRight'>Left to Right</div>
	<div class='box' id='topToB'>Top to Bottom (this is default)</div>
	<div class='box' id='Dia'>Diagonal</div>
	<h3>Radial Gradients</h3>
	<div class='box' id='even'>Evenly Spaced Color Stops (this is default)</div>
	<div class='box' id='Diff'>Differently Spaced Color Stops</div>
	<div class='box' id='Circle'>Set Shape: Circle</div>
	</div>

	</div>




	</body>
	</html>
	body{
	background-image: linear-gradient(to bottom right, #f1f1f1, #FFE4E1);
	font-size: 30px
	margin:20px 60px;
	font-family: Arial;
	}

	h1{
	color : #808080;
	text-shadow: 1px 1px #000000;
	font-weight: 700;
	text-align:center;
	}

	h2{
	font-weight: bold;
	font-size: 24px;
	font-family: Poppins;
	}

	.flex-container{
	display: flex;
	flex-direction:column;
	justify-content: center;
	}

	.flex-container > div {
	background-color: #d9d9d9;
	padding: 0px 20px;
	margin:20px;
	padding: 5px 10px;
	margin:20px;
	overflow: hidden;
	}

	.box {
	display: inline-block;
	text-align:center;
	width:30%;
	max-width: 300px;
	height: 100px;
	padding: 20px;
	margin:10px;
	overflow: hidden;
	}

	#bt{
	background-color:#40e0d0;
	}

	#iv{
	background-color:#FFFFF0;
	}

	#mr{
	background-color:#FFE4E1;
	}

	#cr{
	background-color:#DC143C;
	}

	#dg{
	background-color:#2F4F4F;
	}

	#fw{
	background-color:#FFFAF0;
	}
	.box2 {
	padding: 10px;
	margin:20px;
	display: inline-block;
	}

	.box2 h3{
	text-align:left;
	text-decoration: underline;
	font-size: 20px;
	}

	.boldy{
	font-weight:bold;
	}

	.italy {
	font-style: italic;
	}

	#verdana{
	font-family: Verdana, serif;
	}
	#times{
	font-family: "Times New Roman", serif;
	}


	#tanger{
	font-family: 'Tangerine', serif;
	font-size:1.2em;
	}

	#bs{
	font-family: 'Balsamiq Sans', serif;
	}

	#leftToRight {
	background-image: linear-gradient(to right, #40e0d0 , #FFFFF0);
	}
	#topToB{
	background-image: linear-gradient(#40e0d0, #FFFFF0);
	}
	#Dia{
	background-image: linear-gradient(to bottom right,#40e0d0, #FFFFF0);
	}
	#even{
	background-image: radial-gradient(#40e0d0, #FFE4E1, #F5F5DC);
	}
	#Diff{
	background-image: radial-gradient(#40e0d0 5%, #FFE4E1 15%, #F5F5DC 60%);
	}
	#Circle{
	background-image: radial-gradient(circle, #40e0d0, #FFE4E1, #F5F5DC);
	}