codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Guide for building website</title>
    <link type="text/css" rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1 id="web-heading">Website Style Guide</h1>
    </header>
    <main>
      <!-- section of color--->
      <section id="colorSection" class='section'>
        <h2>Colors</h2>
        <article class="color-box aqua">
         <h3>aqua</h3>
         <p>#00ffff</p>
        </article>
         <article class="color-box l-pink">
          <h3>lightpink</h3>
          <p>#ffb6c1</p>
        </article>
        <article class="color-box silver">
          <h3>silver</h3>
          <p>#c0c0c0</p>
        </article>
        <article class="color-box lavender">
          <h3>lavender</h3>
          <p>#e6e6fa</p>
        </article>
      </section>
      <!--section of font-->
      <section class="section" id="fontSection">
        <h2>Fonts</h2>
        <article class="font-box open-sans">
          <h3><strong>font title :</strong> "Open Sans" </h3>
          <h3>You can look at this fonts just amazing.</h3>
          <a target="_blank" href="https://fonts.google.com/specimen/Open+Sans?query=open&preview.text_type=custom&sidebar.open=true">Open Sans</a>
        </article>
        <article class="font-box space-mono">
          <h3><strong>font title :</strong> "Space Mono" </h3>
          <h3>You can look at this fonts just amazing.</h3>
          <a target="_blank" href="https://fonts.google.com/specimen/Space+Mono?preview.text_type=custom&selection.family=Space+Mono&query=space&sidebar.open=true">Space Mono</a>
        </article>
        <article class="font-box noto-serif">
          <h3><strong>font title :</strong> "Noro Serif" </h3>
          <h3>You can look at this fonts just amazing.</h3>
          <a target="_blank" href="https://fonts.google.com/specimen/Noto+Serif?query=noto&preview.text_type=custom">Noto Serif</a>
        </article>
      </section>
      <!---presention of diffent tag guideline-->
      <section id="textSection">
        <h1>Text style</h1>
        <article class='text-box h1-heading'>
          <h1>Main heading </h1>
            <ul>
              <li>font-family:"Open Sans",sans-serif;</li>
              <li>font-weight:400px;</li>
              <li>font-size:28px;</li>
            </ul>
        </article>
        <article class='text-box h2-heading'>
          <h2>Sub heading </h2>
            <ul>
              <li>font-family:"space Mono",monospace;</li>
              <li>font-weight:200px;</li>
              <li>font-size:22px;</li>
            </ul>
        </article>
        <article class='text-box paragaph'>
          <h2>Paragaph text</h2>
            <ul>
              <li>font-family:"Noto Serif",serif;</li>
              <li>font-weight:100px;</li>
              <li>font-size:18px;</li>
            </ul>
        </article>
      </section>
    </main>
    <footer>
      <h4>Copyright &#169; by Ridoy Dey</h4>
    </footer>
  </body>
</html>

## styles.css
/*font family */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&family=Open+Sans&family=Space+Mono&display=swap');
*{
  padding: 0;
  margin: 0;
}
body{
  padding: 10px;
  margin:20px;
}

#web-heading{
  margin-bottom: 20px;
}
.section{
  border: 2px solid gray;
  padding: 10px 10px 30px 10px;
}
.color-box{
  width: 330px;
  height: 120px;
  display: inline-block;
  margin: 10px ;
  text-align: center;
}
.aqua{
  background-color: #00ffff;
}
.l-pink{
  background-color: #ffb6c1;
}
.silver{
  background-color:#c0c0c0
}
.lavender{
  background-color: #e6e6fa;
}
.color-box h3 , .color-box p{
 margin: 20px auto;
}
.font-box{
  border: 1px solid;
  width: 310px;
  height: 130px;
  margin: 10px;
  display: inline-block;
  line-height: 30px;
  padding: 5px;
}
.open-sans{
  font-family:"Open Sans",sans-serif;
}
.space-mono{
  font-family: "Space Mono",monospace;
}
.noto-serif{
  font-family: "Noto Serif",serif;
}
.h1-heading{
  font-family: "Open Sans",sans-serif;
  font-size: 28px;
  font-weight: 400px;
}
.h2-heading{
  font-family: "Space Mono",monospace;
  font-size: 22px;
  font-weight: 200px;
}
.paragaph{
  font-family: "Noto Serif",serif;
  font-size: 18px;
  font-weight: 100px;
}
ul {
   list-style-position: inside;
}

li{
  margin-left: 1em;
}

#textSection{
  border: 1px solid;
}
#textSection h1{
margin: 8px 0 5px 8px;
}
.text-box{
  margin: 10px 10px 15px 15px;
}
section{
  margin-bottom: 15px;
}
footer{
  background-color: black;
  color: white;

}
footer h4{
  text-align: center;
  padding: 20px 0px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Guide for building website</title>
	<link type="text/css" rel="stylesheet" href="styles.css">
	</head>
	<body>
	<header>
	<h1 id="web-heading">Website Style Guide</h1>
	</header>
	<main>
	<!-- section of color--->
	<section id="colorSection" class='section'>
	<h2>Colors</h2>
	<article class="color-box aqua">
	<h3>aqua</h3>
	<p>#00ffff</p>
	</article>
	<article class="color-box l-pink">
	<h3>lightpink</h3>
	<p>#ffb6c1</p>
	</article>
	<article class="color-box silver">
	<h3>silver</h3>
	<p>#c0c0c0</p>
	</article>
	<article class="color-box lavender">
	<h3>lavender</h3>
	<p>#e6e6fa</p>
	</article>
	</section>
	<!--section of font-->
	<section class="section" id="fontSection">
	<h2>Fonts</h2>
	<article class="font-box open-sans">
	<h3><strong>font title :</strong> "Open Sans" </h3>
	<h3>You can look at this fonts just amazing.</h3>
	<a target="_blank" href="https://fonts.google.com/specimen/Open+Sans?query=open&preview.text_type=custom&sidebar.open=true">Open Sans</a>
	</article>
	<article class="font-box space-mono">
	<h3><strong>font title :</strong> "Space Mono" </h3>
	<h3>You can look at this fonts just amazing.</h3>
	<a target="_blank" href="https://fonts.google.com/specimen/Space+Mono?preview.text_type=custom&selection.family=Space+Mono&query=space&sidebar.open=true">Space Mono</a>
	</article>
	<article class="font-box noto-serif">
	<h3><strong>font title :</strong> "Noro Serif" </h3>
	<h3>You can look at this fonts just amazing.</h3>
	<a target="_blank" href="https://fonts.google.com/specimen/Noto+Serif?query=noto&preview.text_type=custom">Noto Serif</a>
	</article>
	</section>
	<!---presention of diffent tag guideline-->
	<section id="textSection">
	<h1>Text style</h1>
	<article class='text-box h1-heading'>
	<h1>Main heading </h1>
	<ul>
	<li>font-family:"Open Sans",sans-serif;</li>
	<li>font-weight:400px;</li>
	<li>font-size:28px;</li>
	</ul>
	</article>
	<article class='text-box h2-heading'>
	<h2>Sub heading </h2>
	<ul>
	<li>font-family:"space Mono",monospace;</li>
	<li>font-weight:200px;</li>
	<li>font-size:22px;</li>
	</ul>
	</article>
	<article class='text-box paragaph'>
	<h2>Paragaph text</h2>
	<ul>
	<li>font-family:"Noto Serif",serif;</li>
	<li>font-weight:100px;</li>
	<li>font-size:18px;</li>
	</ul>
	</article>
	</section>
	</main>
	<footer>
	<h4>Copyright © by Ridoy Dey</h4>
	</footer>
	</body>
	</html>
	/font family /
	@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&family=Open+Sans&family=Space+Mono&display=swap');
	*{
	padding: 0;
	margin: 0;
	}
	body{
	padding: 10px;
	margin:20px;
	}

	#web-heading{
	margin-bottom: 20px;
	}
	.section{
	border: 2px solid gray;
	padding: 10px 10px 30px 10px;
	}
	.color-box{
	width: 330px;
	height: 120px;
	display: inline-block;
	margin: 10px ;
	text-align: center;
	}
	.aqua{
	background-color: #00ffff;
	}
	.l-pink{
	background-color: #ffb6c1;
	}
	.silver{
	background-color:#c0c0c0
	}
	.lavender{
	background-color: #e6e6fa;
	}
	.color-box h3 , .color-box p{
	margin: 20px auto;
	}
	.font-box{
	border: 1px solid;
	width: 310px;
	height: 130px;
	margin: 10px;
	display: inline-block;
	line-height: 30px;
	padding: 5px;
	}
	.open-sans{
	font-family:"Open Sans",sans-serif;
	}
	.space-mono{
	font-family: "Space Mono",monospace;
	}
	.noto-serif{
	font-family: "Noto Serif",serif;
	}
	.h1-heading{
	font-family: "Open Sans",sans-serif;
	font-size: 28px;
	font-weight: 400px;
	}
	.h2-heading{
	font-family: "Space Mono",monospace;
	font-size: 22px;
	font-weight: 200px;
	}
	.paragaph{
	font-family: "Noto Serif",serif;
	font-size: 18px;
	font-weight: 100px;
	}
	ul {
	list-style-position: inside;
	}

	li{
	margin-left: 1em;
	}

	#textSection{
	border: 1px solid;
	}
	#textSection h1{
	margin: 8px 0 5px 8px;
	}
	.text-box{
	margin: 10px 10px 15px 15px;
	}
	section{
	margin-bottom: 15px;
	}
	footer{
	background-color: black;
	color: white;

	}
	footer h4{
	text-align: center;
	padding: 20px 0px;
	}