codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Assistant&family=Crimson+Text&family=Quicksand&family=Roboto&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./styles.css">
  <title>My Website Guidline | Chayenne</title>
</head>

<body>

  <!-- header -->
  <header>
    <div class="border">
    <h1>My Website Style Guide</h1>
    <p>Here you can find all of the information you need to develop an amazing website. You'll see different colors, fonts and text styles. </p>
  </div>
  </header>

  <!-- Section A: colors -->
  <section id="colors">
    <h2>Colors</h2>
    <div class="border-bottom"></div>
    <p class="dark-text">Here are different types of color systems with the color I'd like to use. We use the basic color: <span>Nude</span> You can find the basic color in the middle of every color system.</p>

    <!-- color systems -->
    <div class="container">
      <div class="system-a">
        <h3>Monochromatic</h3>
        <div class="color-container">
            <div class="monchromatic">
              <div class="color-system threehouse">
                <p class="color-name">Threehouse</p>
                <p class="color-hex">#452F13</p>
              </div>
              <div class="color-system sandstorm">
                <p class="color-name">Sandstorm</p>
                <p class="color-hex">#C48635</p>
              </div>
              <div class="color-system nude">
                <p class="color-name">Nude</p>
                <p class="color-hex">#DEB57E</p>
              </div>
              <div class="color-system darkbrown">
                <p class="color-name">Darkbrown</p>
                <p class="color-hex">#4A433A</p>
              </div>
              <div class="color-system choco">
                <p class="color-name">Choco</p>
                <p class="color-hex">#916327</p>
              </div>
            </div>
        </div>
      </div>

      <div class="system-b">
        <h3>Complementary</h3>
        <div class="color-container">
          <div class="complementary">
            <div class="color-system caramel">
              <p class="color-name">Caramel</p>
              <p class="color-hex">#917044</p>
            </div>
            <div class="color-system beige">
              <p class="color-name dark-text">Beige</p>
              <p class="color-hex dark-text">#FFDBAB</p>
            </div>
            <div class="color-system nude">
              <p class="color-name">Nude</p>
              <p class="color-hex">#DEB57E</p>
            </div>
            <div class="color-system moonblue">
              <p class="color-name">Moonblue</p>
              <p class="color-hex">#367191</p>
            </div>
            <div class="color-system ocean">
              <p class="color-name">Ocean</p>
              <p class="color-hex">#7EBCDE</p>
            </div>
          </div>
       </div>
      </div>

      <div class="system-c">
        <h3>Analogous</h3>
        <div class="color-container">
          <div class="analogous">
            <div class="color-system pelican">
              <p class="color-name dark-text">Pelican</p>
              <p class="color-hex dark-text">#EBD17A</p>
            </div>
            <div class="color-system sunshine">
              <p class="color-name dark-text">Sunshine</p>
              <p class="color-hex dark-text">#F5CE7F</p>
            </div>
            <div class="color-system nude">
              <p class="color-name dark-text">Nude</p>
              <p class="color-hex dark-text">#DEB57E</p>
            </div>
            <div class="color-system prettypink">
              <p class="color-name dark-text">Prettypink</p>
              <p class="color-hex dark-text">#F5B17F</p>
            </div>
            <div class="color-system coral">
              <p class="color-name dark-text">Coral</p>
              <p class="color-hex dark-text">#EB997A</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>


  <!-- Section B: fonts  -->

  <section id="fonts">
    <h2 class="light-text">Fonts</h2>
    <div class="border-bottom-light"></div>
    <p>Take a look at the different fonts you can use in your design. There a examples for the normal '400' weight text with the text styles bold and italic.</p>

    <div class="font-container">

      <div class="font-style quicksand">
        <h3>Quicksand</h3>
        <p>Hello, this is an example.</p>
        <p class="bold">Hello, this is an example.</p>
        <p class="italic">Hello, this is an example.</p>
      </div>

      <div class="font-style crimsontext">
        <h3>Crimson Text</h3>
        <p>Hello, this is an example.</p>
        <p class="bold">Hello, this is an example.</p>
        <p class="italic">Hello, this is an example.</p>
      </div>

      <div class="font-style assistant">
        <h3>Assistant</h3>
        <p>Hello, this is an example.</p>
        <p class="bold">Hello, this is an example.</p>
        <p class="italic">Hello, this is an example.</p>
      </div>
    </div>

  </section>


  <!-- Section C : text-styles -->

  <section id="text-styles">
    <h2>Text Styles</h2>
    <div class="border-bottom"></div>
    <p class="dark-text">Here you can take a look at the different Text-Styles you could use for a few elements.</p>

    <div class="container-text dark-text">

      <div class="text-style">
        <div class="text-container border-right">
          <h3>H1: Main page heading</h3>
          <ul>
            <li>Font-weight: 900 (bold)</li>
            <li>Font-size: 26px</li>
            <li>Font-family: Quicksand</li>
            <li>Color: <span>Nude</span></li>
          </ul>
        </div>
        <p class="dark-text" id="h1">Hello, this is an example.</p>
      </div>

      <div class="text-style">
        <div class="text-container border-right">
          <h3>H2: Subheading</h3>
          <ul>
            <li>Font-weight: 600</li>
            <li>Font-size: 18px</li>
            <li>Font-family: Crimson Text</li>
            <li>Color: <span class="threehouse">Threehouse</span></li>
          </ul>
        </div>
        <p class="dark-text" id="h2">Hello, this is an example.</p>
      </div>

      <div class="text-style">
        <div class="text-container border-right">
          <h3>H3: Article Heading</h3>
          <ul>
            <li>Font-weight: 500</li>
            <li>Font-size: 17px</li>
            <li>Font-family: Assistant</li>
            <li>Color: <span class="caramel">Caramel</span></li>
          </ul>
        </div>
        <p class="dark-text" id="h3">Hello, this is an example.</p>
      </div>

      <div class="text-style">
        <div class="text-container border-right">
          <h3>P: Paragraph text</h3>
          <ul>
            <li>Font-weight: 400</li>
            <li>Font-size: 16px</li>
            <li>Font-family: Quicksand</li>
            <li>Color: <span class="darkbrown">Darkbrown</span></li>
          </ul>
        </div>
        <p class="dark-text">Hello, this is an example.</p>
      </div>

    </div>
  </section>


  <!-- Footer -->
  <footer>
    <p>Copyright &copy; 2020. All rights are reserved.</p>
    <p>Thank you for watching my page. Chayenne | Designs</p>

  </footer>


</body>

</html>

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

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.4;
  text-align: center;
}

li {
  list-style: none;
}

h2 {
  font-family: font-family: 'Quicksand', sans-serif;
  letter-spacing: 2px;
  margin-top: 30px;
}

h3 {
  padding-bottom: 30px
}

p {
  color: #fff;
}

/* header */

header {
  background: #DEB57E;
  padding: 50px;
  text-align: center;
}

header h1,
p {
  padding: 20px;
  color: #fff;
}

header p {
  font-weight: lighter;
}


/* section-a: colors */
section {
  margin: 20px 50px;
  padding: 30px;
  text-align: center;
  border: 2px #f4f4f4 solid;
}


.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}

.color-system p {
  display: flex;
  flex-direction: row;
  padding: 20px;
}

.color-system {
  width: 100%;
}

.threehouse {background: #452F13;}
.sandstorm {background: #C48635;}
.nude {background: #DEB57E;}
.darkbrown {background: #4A433A;}
.choco {background: #916327;}
.caramel {background: #917044;}
.beige {background: #FFDBAB;}
.moonblue {background: #367191;}
.ocean {background: #7EBCDE;}
.pelican {background: #EBD17A;}
.sunshine {background: #F5CE7F;}
.prettypink {background: #F5B17F;}
.coral {background: #EB997A;}


.monchromatic {
  display: flex;
}
.complementary {
  display: flex;
}
.analogous {
  display: flex;
}

.system-a {
  background: #f4f4f4;
  padding: 30px 50px;
  padding-bottom: 80px;
}

.system-b {
  background: #fff;
  padding: 30px 50px;
}

.system-c {
  background: #f4f4f4;
  padding: 30px 50px;
}


/* section b: fonts */

#fonts {
  background: #DEB57E;
  border: none;
  margin-top: 100px;
  margin-bottom: 100px;
  padding-bottom: 100px;
}

.font-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.font-style {
  padding: 30px;
  background: #f4f4f4;
  margin: 0px 30px;
  color: #DEB57E;
}

.font-style p {
  color: #DEB57E;
}

.quicksand {font-family: 'Quicksand', sans-serif;}
.crimsontext {font-family: 'Crimson Text', serif;}
.assistant {font-family: 'Assistant', sans-serif;}


/* Section C: text-styles */

.container-text {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 100px;
  margin-top: 50px;
  padding-bottom: 50px;
}


.text-container {
  line-height: 1.9;
}

.text-container li {
  text-align: left;
}

.text-container h3 {
  text-align: left;
  padding-bottom: 10px;
}


.text-style {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f4f4f4;
  padding: 30px;
}


#h1 {
  Font-weight: 900;
  Font-size: 26px;
  Font-family: Quicksand;
  Color: #DEB57E;
}

#h2 {
  Font-weight: 600;
  Font-size: 26px;
  Font-family: 'Crimson Text', serif;
  Color: #4A433A;
}

#h3 {
  Font-weight: 500;
  Font-size: 17px;
  Font-family: 'Assistant', sans-serif;
  Color: #917044;
}

#p {
  Font-weight: 400;
  Font-size: 16px;
  Font-family: Quicksand;
  Color: #4A433A;
}


/* Footer */
footer {
  display: flex;
  justify-content: space-between;
  background: #DEB57E;
  padding: 20px;
  margin-top: 50px;
}


/* utilities */

.border {
  border: 1px #fff solid;
}

.color-name {
  font-size: 14px;
}

.color-hex {
  font-size: 12px;
}

.border-bottom {
  border-bottom: 1px solid #DEB57E;
  padding-top: 10px;
  width: 50%;
  position: relative;
  left: 25%;
  right: 25%;
}

.border-right {
  border-right: 2px solid white;
  padding-top: 10px;
  width: 35%;
}

.border-bottom-light {
  border-bottom: 1px solid white;
  padding-top: 10px;
  width: 50%;
  position: relative;
  left: 25%;
  right: 25%;
}

.dark-text {
  color: rgba(88, 85, 85, 0.767);
}
.light-text {
  color: white;
}

span {
  background: #DEB57E;
  color: white;
  padding: 5px 20px;
  border-radius: 5px;
  margin: 10px;
}


.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Assistant&family=Crimson+Text&family=Quicksand&family=Roboto&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="./styles.css">
	<title>My Website Guidline \| Chayenne</title>
	</head>

	<body>

	<!-- header -->
	<header>
	<div class="border">
	<h1>My Website Style Guide</h1>
	<p>Here you can find all of the information you need to develop an amazing website. You'll see different colors, fonts and text styles. </p>
	</div>
	</header>

	<!-- Section A: colors -->
	<section id="colors">
	<h2>Colors</h2>
	<div class="border-bottom"></div>
	<p class="dark-text">Here are different types of color systems with the color I'd like to use. We use the basic color: <span>Nude</span> You can find the basic color in the middle of every color system.</p>

	<!-- color systems -->
	<div class="container">
	<div class="system-a">
	<h3>Monochromatic</h3>
	<div class="color-container">
	<div class="monchromatic">
	<div class="color-system threehouse">
	<p class="color-name">Threehouse</p>
	<p class="color-hex">#452F13</p>
	</div>
	<div class="color-system sandstorm">
	<p class="color-name">Sandstorm</p>
	<p class="color-hex">#C48635</p>
	</div>
	<div class="color-system nude">
	<p class="color-name">Nude</p>
	<p class="color-hex">#DEB57E</p>
	</div>
	<div class="color-system darkbrown">
	<p class="color-name">Darkbrown</p>
	<p class="color-hex">#4A433A</p>
	</div>
	<div class="color-system choco">
	<p class="color-name">Choco</p>
	<p class="color-hex">#916327</p>
	</div>
	</div>
	</div>
	</div>

	<div class="system-b">
	<h3>Complementary</h3>
	<div class="color-container">
	<div class="complementary">
	<div class="color-system caramel">
	<p class="color-name">Caramel</p>
	<p class="color-hex">#917044</p>
	</div>
	<div class="color-system beige">
	<p class="color-name dark-text">Beige</p>
	<p class="color-hex dark-text">#FFDBAB</p>
	</div>
	<div class="color-system nude">
	<p class="color-name">Nude</p>
	<p class="color-hex">#DEB57E</p>
	</div>
	<div class="color-system moonblue">
	<p class="color-name">Moonblue</p>
	<p class="color-hex">#367191</p>
	</div>
	<div class="color-system ocean">
	<p class="color-name">Ocean</p>
	<p class="color-hex">#7EBCDE</p>
	</div>
	</div>
	</div>
	</div>

	<div class="system-c">
	<h3>Analogous</h3>
	<div class="color-container">
	<div class="analogous">
	<div class="color-system pelican">
	<p class="color-name dark-text">Pelican</p>
	<p class="color-hex dark-text">#EBD17A</p>
	</div>
	<div class="color-system sunshine">
	<p class="color-name dark-text">Sunshine</p>
	<p class="color-hex dark-text">#F5CE7F</p>
	</div>
	<div class="color-system nude">
	<p class="color-name dark-text">Nude</p>
	<p class="color-hex dark-text">#DEB57E</p>
	</div>
	<div class="color-system prettypink">
	<p class="color-name dark-text">Prettypink</p>
	<p class="color-hex dark-text">#F5B17F</p>
	</div>
	<div class="color-system coral">
	<p class="color-name dark-text">Coral</p>
	<p class="color-hex dark-text">#EB997A</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>


	<!-- Section B: fonts -->

	<section id="fonts">
	<h2 class="light-text">Fonts</h2>
	<div class="border-bottom-light"></div>
	<p>Take a look at the different fonts you can use in your design. There a examples for the normal '400' weight text with the text styles bold and italic.</p>

	<div class="font-container">

	<div class="font-style quicksand">
	<h3>Quicksand</h3>
	<p>Hello, this is an example.</p>
	<p class="bold">Hello, this is an example.</p>
	<p class="italic">Hello, this is an example.</p>
	</div>

	<div class="font-style crimsontext">
	<h3>Crimson Text</h3>
	<p>Hello, this is an example.</p>
	<p class="bold">Hello, this is an example.</p>
	<p class="italic">Hello, this is an example.</p>
	</div>

	<div class="font-style assistant">
	<h3>Assistant</h3>
	<p>Hello, this is an example.</p>
	<p class="bold">Hello, this is an example.</p>
	<p class="italic">Hello, this is an example.</p>
	</div>
	</div>

	</section>


	<!-- Section C : text-styles -->

	<section id="text-styles">
	<h2>Text Styles</h2>
	<div class="border-bottom"></div>
	<p class="dark-text">Here you can take a look at the different Text-Styles you could use for a few elements.</p>

	<div class="container-text dark-text">

	<div class="text-style">
	<div class="text-container border-right">
	<h3>H1: Main page heading</h3>
	<ul>
	<li>Font-weight: 900 (bold)</li>
	<li>Font-size: 26px</li>
	<li>Font-family: Quicksand</li>
	<li>Color: <span>Nude</span></li>
	</ul>
	</div>
	<p class="dark-text" id="h1">Hello, this is an example.</p>
	</div>

	<div class="text-style">
	<div class="text-container border-right">
	<h3>H2: Subheading</h3>
	<ul>
	<li>Font-weight: 600</li>
	<li>Font-size: 18px</li>
	<li>Font-family: Crimson Text</li>
	<li>Color: <span class="threehouse">Threehouse</span></li>
	</ul>
	</div>
	<p class="dark-text" id="h2">Hello, this is an example.</p>
	</div>

	<div class="text-style">
	<div class="text-container border-right">
	<h3>H3: Article Heading</h3>
	<ul>
	<li>Font-weight: 500</li>
	<li>Font-size: 17px</li>
	<li>Font-family: Assistant</li>
	<li>Color: <span class="caramel">Caramel</span></li>
	</ul>
	</div>
	<p class="dark-text" id="h3">Hello, this is an example.</p>
	</div>

	<div class="text-style">
	<div class="text-container border-right">
	<h3>P: Paragraph text</h3>
	<ul>
	<li>Font-weight: 400</li>
	<li>Font-size: 16px</li>
	<li>Font-family: Quicksand</li>
	<li>Color: <span class="darkbrown">Darkbrown</span></li>
	</ul>
	</div>
	<p class="dark-text">Hello, this is an example.</p>
	</div>

	</div>
	</section>


	<!-- Footer -->
	<footer>
	<p>Copyright © 2020. All rights are reserved.</p>
	<p>Thank you for watching my page. Chayenne \| Designs</p>

	</footer>




	</body>

	</html>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Roboto', sans-serif;
	line-height: 1.4;
	text-align: center;
	}

	li {
	list-style: none;
	}

	h2 {
	font-family: font-family: 'Quicksand', sans-serif;
	letter-spacing: 2px;
	margin-top: 30px;
	}

	h3 {
	padding-bottom: 30px
	}

	p {
	color: #fff;
	}

	/* header */

	header {
	background: #DEB57E;
	padding: 50px;
	text-align: center;
	}

	header h1,
	p {
	padding: 20px;
	color: #fff;
	}

	header p {
	font-weight: lighter;
	}


	/* section-a: colors */
	section {
	margin: 20px 50px;
	padding: 30px;
	text-align: center;
	border: 2px #f4f4f4 solid;
	}


	.container {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	}

	.color-system p {
	display: flex;
	flex-direction: row;
	padding: 20px;
	}

	.color-system {
	width: 100%;
	}

	.threehouse {background: #452F13;}
	.sandstorm {background: #C48635;}
	.nude {background: #DEB57E;}
	.darkbrown {background: #4A433A;}
	.choco {background: #916327;}
	.caramel {background: #917044;}
	.beige {background: #FFDBAB;}
	.moonblue {background: #367191;}
	.ocean {background: #7EBCDE;}
	.pelican {background: #EBD17A;}
	.sunshine {background: #F5CE7F;}
	.prettypink {background: #F5B17F;}
	.coral {background: #EB997A;}


	.monchromatic {
	display: flex;
	}
	.complementary {
	display: flex;
	}
	.analogous {
	display: flex;
	}

	.system-a {
	background: #f4f4f4;
	padding: 30px 50px;
	padding-bottom: 80px;
	}

	.system-b {
	background: #fff;
	padding: 30px 50px;
	}

	.system-c {
	background: #f4f4f4;
	padding: 30px 50px;
	}



	/* section b: fonts */

	#fonts {
	background: #DEB57E;
	border: none;
	margin-top: 100px;
	margin-bottom: 100px;
	padding-bottom: 100px;
	}

	.font-container {
	display: flex;
	justify-content: center;
	margin-top: 30px;
	}

	.font-style {
	padding: 30px;
	background: #f4f4f4;
	margin: 0px 30px;
	color: #DEB57E;
	}

	.font-style p {
	color: #DEB57E;
	}

	.quicksand {font-family: 'Quicksand', sans-serif;}
	.crimsontext {font-family: 'Crimson Text', serif;}
	.assistant {font-family: 'Assistant', sans-serif;}


	/* Section C: text-styles */

	.container-text {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 100px;
	margin-top: 50px;
	padding-bottom: 50px;
	}


	.text-container {
	line-height: 1.9;
	}

	.text-container li {
	text-align: left;
	}

	.text-container h3 {
	text-align: left;
	padding-bottom: 10px;
	}


	.text-style {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #f4f4f4;
	padding: 30px;
	}



	#h1 {
	Font-weight: 900;
	Font-size: 26px;
	Font-family: Quicksand;
	Color: #DEB57E;
	}

	#h2 {
	Font-weight: 600;
	Font-size: 26px;
	Font-family: 'Crimson Text', serif;
	Color: #4A433A;
	}

	#h3 {
	Font-weight: 500;
	Font-size: 17px;
	Font-family: 'Assistant', sans-serif;
	Color: #917044;
	}

	#p {
	Font-weight: 400;
	Font-size: 16px;
	Font-family: Quicksand;
	Color: #4A433A;
	}


	/* Footer */
	footer {
	display: flex;
	justify-content: space-between;
	background: #DEB57E;
	padding: 20px;
	margin-top: 50px;
	}



	/* utilities */

	.border {
	border: 1px #fff solid;
	}

	.color-name {
	font-size: 14px;
	}

	.color-hex {
	font-size: 12px;
	}

	.border-bottom {
	border-bottom: 1px solid #DEB57E;
	padding-top: 10px;
	width: 50%;
	position: relative;
	left: 25%;
	right: 25%;
	}

	.border-right {
	border-right: 2px solid white;
	padding-top: 10px;
	width: 35%;
	}

	.border-bottom-light {
	border-bottom: 1px solid white;
	padding-top: 10px;
	width: 50%;
	position: relative;
	left: 25%;
	right: 25%;
	}

	.dark-text {
	color: rgba(88, 85, 85, 0.767);
	}
	.light-text {
	color: white;
	}

	span {
	background: #DEB57E;
	color: white;
	padding: 5px 20px;
	border-radius: 5px;
	margin: 10px;
	}


	.bold {
	font-weight: bold;
	}

	.italic {
	font-style: italic;
	}