codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <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/css2?family=Explora&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Roboto:wght@100;300;400;500&family=Sofia+Sans:wght@100;400&family=Space+Mono&display=swap"
      rel="stylesheet"
    />
    <title>Design-style guide</title>
  </head>
  <body>
    <nav></nav>

    <main>
      <h1>Website style <span>scrapbook</span></h1>
      <section id="text-style">
        <h2><span>Text styles</span></h2>
        <h3 class="h1-style">H1: Main page heading</h3>
        <ul>
          <li>Font-weight: 500 (medium)</li>
          <li>Font-size: 26px</li>
          <li>Font-family: Roboto</li>
        </ul>
        <h3 class="h1-style">H1: Main page Newspaper heading</h3>
        <ul>
          <li>Font-weight: 700 (bold)</li>
          <li>Font-size: 36px</li>
          <li>Font-family: Playfair Display</li>
        </ul>
        <h3>H2: Subheading</h3>
        <ul>
          <li>Font-weight: 400</li>
          <li>Font-size: 18px</li>
          <li>Font-family: Sofia Sans</li>
        </ul>
        <h4>P: Paragraph text</h4>
        <ul>
          <li>Font-weight: 400</li>
          <li>Font-size: 16px</li>
          <li>Font-family: Sofia Sans</li>
        </ul>
      </section>

      <section id="font">
        <h2><span>Fonts</span></h2>
        <table>
          <tr>
            <th>Roboto</th>
            <th>Sofia Sans</th>
            <th>Space Mono</th>
            <th>Playfair Display</th>
          </tr>
          <tr>
            <td class="h1-heading">
              Whereas a common understanding of these rights and freedoms is
            </td>
            <td class="sub-heading">
              Whereas a common understanding of these rights and freedoms is
            </td>
            <td class="mono-font">
              Whereas a common understanding of these rights and freedoms is
            </td>
            <td class="newspaper-heading">
              Whereas a common understanding of these rights and freedoms is
            </td>
          </tr>
          <tr>
            <td>
              Whereas a common understanding of these rights and freedoms is
            </td>
            <td class="para-font">
              Whereas a common understanding of these rights and freedoms is
            </td>
            <td>
              Whereas a common understanding of these rights and freedoms is
            </td>
          </tr>
        </table>
      </section>

      <section id="color-theme">
        <div class="sec">
          <h2><span>Color palates</span></h2>

          <div id="palate1">
            <div class="circle red1">
              <p>#721637</p>
            </div>
            <div class="circle red2">
              <p>#721637</p>
            </div>
            <div class="circle red3">
              <p>#F576A3</p>
            </div>
            <div class="circle red4">
              <p>#DC85A4</p>
            </div>
          </div>

          <div id="palate2">
            <div class="circle green1">
              <p>#07123A</p>
            </div>
            <div class="circle green2">
              <p>#172556</p>
            </div>
            <div class="circle green3">
              <p>#505F90</p>
            </div>
            <div class="circle green4">
              <p>#7A86AD</p>
            </div>
          </div>

          <div id="palate3">
            <div class="circle purple1">
              <p>#29073C</p>
            </div>
            <div class="circle purple2">
              <p>#3E1557</p>
            </div>
            <div class="circle purple3">
              <p>#BD75E5</p>
            </div>
            <div class="circle purple4">
              <p>#9169A7</p>
            </div>
          </div>
        </div>
      </section>
    </main>
  </body>
</html>

## styles.css
body{
    background-color: rgba(250, 227, 206, 0.506);
    font-family: 'Sofia Sans', sans-serif;
  }
  main {
    margin: auto 0;
  }
  h1{
    color: #e29079;
    text-align: center;
  }
  h2 {
    text-align: center;
  }

  #text-style, #font, #color-theme {
    border: 8px dashed #e29079;
    max-width: 1000px;
    min-height: 200px;
    margin: 80px;
    padding: 20px;
    background-color: white;
  }
  .sec {
   margin: auto 15%;
  }

  /*color palates*/
  #palate1, #palate2, #palate3 {
    margin-left: 8px;
    display: inline-flex;

  }


  .circle {

    width: 150px;
    height: 150px;
    margin: 2px;
    border: 8px dashed white;
  }

  .red1 {
    background-color: #4E051F;
  }
  .red2 {
    background-color: #721637;
  }
  .red3 {
    background-color: #F576A3;
  }
  .red4 {
    background-color:#DC85A4;
  }
  .green1 {background-color: #07123A;}
  .green2 {background-color: #172556;}
  .green3 {background-color: #505F90;}
  .green4 {background-color: #7A86AD;}

  .purple1 {background-color: #29073C;}
  .purple2 {background-color: #3E1557;}
  .purple3 {background-color: #BD75E5;}
  .purple4 {background-color: #9169A7;}

  span {
    font-family: 'Explora', cursive;
    font-size: 64px;
    font-weight: 400;
    color: #e29079;
  }
  .h1-heading {
    font-weight: 500;
    font-size: 26px;
    font-family: "Roboto";
  }
  .sub-heading {
    font-family: 'Sofia Sans';
    font-weight: 400;
    font-size: 20px;
  }
  .para-font {
    font-weight: 400;
    font-size: 16px;
  }
  .newspaper-heading {
    font-weight: 700;
    font-size: 36px;
    font-family: "Playfair Display";
  }
  p {
    font-size: 20px;
    color: wheat;
    text-align: center;
  }
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<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/css2?family=Explora&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Roboto:wght@100;300;400;500&family=Sofia+Sans:wght@100;400&family=Space+Mono&display=swap"
	rel="stylesheet"
	/>
	<title>Design-style guide</title>
	</head>
	<body>
	<nav></nav>

	<main>
	<h1>Website style <span>scrapbook</span></h1>
	<section id="text-style">
	<h2><span>Text styles</span></h2>
	<h3 class="h1-style">H1: Main page heading</h3>
	<ul>
	<li>Font-weight: 500 (medium)</li>
	<li>Font-size: 26px</li>
	<li>Font-family: Roboto</li>
	</ul>
	<h3 class="h1-style">H1: Main page Newspaper heading</h3>
	<ul>
	<li>Font-weight: 700 (bold)</li>
	<li>Font-size: 36px</li>
	<li>Font-family: Playfair Display</li>
	</ul>
	<h3>H2: Subheading</h3>
	<ul>
	<li>Font-weight: 400</li>
	<li>Font-size: 18px</li>
	<li>Font-family: Sofia Sans</li>
	</ul>
	<h4>P: Paragraph text</h4>
	<ul>
	<li>Font-weight: 400</li>
	<li>Font-size: 16px</li>
	<li>Font-family: Sofia Sans</li>
	</ul>
	</section>

	<section id="font">
	<h2><span>Fonts</span></h2>
	<table>
	<tr>
	<th>Roboto</th>
	<th>Sofia Sans</th>
	<th>Space Mono</th>
	<th>Playfair Display</th>
	</tr>
	<tr>
	<td class="h1-heading">
	Whereas a common understanding of these rights and freedoms is
	</td>
	<td class="sub-heading">
	Whereas a common understanding of these rights and freedoms is
	</td>
	<td class="mono-font">
	Whereas a common understanding of these rights and freedoms is
	</td>
	<td class="newspaper-heading">
	Whereas a common understanding of these rights and freedoms is
	</td>
	</tr>
	<tr>
	<td>
	Whereas a common understanding of these rights and freedoms is
	</td>
	<td class="para-font">
	Whereas a common understanding of these rights and freedoms is
	</td>
	<td>
	Whereas a common understanding of these rights and freedoms is
	</td>
	</tr>
	</table>
	</section>

	<section id="color-theme">
	<div class="sec">
	<h2><span>Color palates</span></h2>

	<div id="palate1">
	<div class="circle red1">
	<p>#721637</p>
	</div>
	<div class="circle red2">
	<p>#721637</p>
	</div>
	<div class="circle red3">
	<p>#F576A3</p>
	</div>
	<div class="circle red4">
	<p>#DC85A4</p>
	</div>
	</div>

	<div id="palate2">
	<div class="circle green1">
	<p>#07123A</p>
	</div>
	<div class="circle green2">
	<p>#172556</p>
	</div>
	<div class="circle green3">
	<p>#505F90</p>
	</div>
	<div class="circle green4">
	<p>#7A86AD</p>
	</div>
	</div>

	<div id="palate3">
	<div class="circle purple1">
	<p>#29073C</p>
	</div>
	<div class="circle purple2">
	<p>#3E1557</p>
	</div>
	<div class="circle purple3">
	<p>#BD75E5</p>
	</div>
	<div class="circle purple4">
	<p>#9169A7</p>
	</div>
	</div>
	</div>
	</section>
	</main>
	</body>
	</html>
	body{
	background-color: rgba(250, 227, 206, 0.506);
	font-family: 'Sofia Sans', sans-serif;
	}
	main {
	margin: auto 0;
	}
	h1{
	color: #e29079;
	text-align: center;
	}
	h2 {
	text-align: center;
	}

	#text-style, #font, #color-theme {
	border: 8px dashed #e29079;
	max-width: 1000px;
	min-height: 200px;
	margin: 80px;
	padding: 20px;
	background-color: white;
	}
	.sec {
	margin: auto 15%;
	}

	/color palates/
	#palate1, #palate2, #palate3 {
	margin-left: 8px;
	display: inline-flex;

	}


	.circle {

	width: 150px;
	height: 150px;
	margin: 2px;
	border: 8px dashed white;
	}

	.red1 {
	background-color: #4E051F;
	}
	.red2 {
	background-color: #721637;
	}
	.red3 {
	background-color: #F576A3;
	}
	.red4 {
	background-color:#DC85A4;
	}
	.green1 {background-color: #07123A;}
	.green2 {background-color: #172556;}
	.green3 {background-color: #505F90;}
	.green4 {background-color: #7A86AD;}

	.purple1 {background-color: #29073C;}
	.purple2 {background-color: #3E1557;}
	.purple3 {background-color: #BD75E5;}
	.purple4 {background-color: #9169A7;}

	span {
	font-family: 'Explora', cursive;
	font-size: 64px;
	font-weight: 400;
	color: #e29079;
	}
	.h1-heading {
	font-weight: 500;
	font-size: 26px;
	font-family: "Roboto";
	}
	.sub-heading {
	font-family: 'Sofia Sans';
	font-weight: 400;
	font-size: 20px;
	}
	.para-font {
	font-weight: 400;
	font-size: 16px;
	}
	.newspaper-heading {
	font-weight: 700;
	font-size: 36px;
	font-family: "Playfair Display";
	}
	p {
	font-size: 20px;
	color: wheat;
	text-align: center;
	}