DJuliny/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website Style Guide</title>
    <link rel="stylesheet" href="styles.css" type="text/css"/>
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,500,700|Nanum+Gothic:400,700,800|Spartan:500,700,900&display=swap" rel="stylesheet">
</head>
<body>
 <!--Navigation Section-->
<header>
    <h1>My Website Style Guide</h1>
    <nav>
<span><h2><a href="#colors">Colors</a></h2></span>
<span><h2><a href="#fonts">Fonts</a></h2></span>
<span><h2><a href="#text">Text Styles</a></h2></span>
    </nav>
</header>

<!--Main Section-->

<main>

<!--Colors Section-->

<div class="container" id="colors">

<h2 class="title">Colors</h2>

<div class="color-container">
    <div class="color-panel olive-drab">
        <p class=color-hex>#343E20</p>
        <p class=color-label>Olive Drab</p>
    </div>
    <div class="color-panel saddle-brown">
        <p class=color-hex>#984814</p>
        <p class=color-label>Saddle Brown</p>
    </div>
    <div class="color-panel wheat">
        <p class=color-hex>#EADAB4</p>
        <p class=color-label>Wheat</p>
    </div>
    <div class="color-panel ochre">
            <p class=color-hex>#C8841A</p>
            <p class=color-label>Ochre</p>
    </div>
     <div class="color-panel russian-green">
                <p class=color-hex>#66917C</p>
                <p class=color-label>Russian Green</p>
    </div>
</div>
</div>


<!--Fonts Section-->

<div class="container" id="fonts">

    <h2 class="title">Fonts</h2>

    <div class="font-container">
        <div class="font-panel">
            <p class="font-label spartan">Spartan</p>
            <p class="medium spartan">Then came the night of the first falling star.</p>
            <p class="bold spartan">Then came the night of the first falling star.</p>
            <p class="black spartan">Then came the night of the first falling star.</p>
        </div>
        <div class="font-panel">
            <p class="font-label nanum-gothic">Nanum Gothic</p>
            <p class="regular nanum-gothic">Then came the night of the first falling star.</p>
            <p class="bold nanum-gothic">Then came the night of the first falling star.</p>
            <p class="extra-bold nanum-gothic">Then came the night of the first falling star.</p>
        </div>
        <div class="font-panel">
            <p class="font-label dancing-script">Dancing Script</p>
            <p class="regular dancing-script">Then came the night of the first falling star.</p>
            <p class="medium dancing-script">Then came the night of the first falling star.</p>
            <p class="bold dancing-script">Then came the night of the first falling star.</p>
        </div>
    </div>
</div>


<!--Text Styles Section-->

<div class="container" id="text">
<h2 class="title">Text Styles</h2>

<div class="text-container">
<div class="text-panel">
    <h1>H1: Main page heading</h1>
    <ul>
        <li>Font weight: 800 (extra-bold)</li>
        <li>Font-size: 26px</li>
        <li>Font-family: Nanum Gothic</li>
    </ul>
</div>

<div class="text-panel">
<h2>H2: Subheading</h2>
<ul>
    <li>Font-weight: 700 (bold)</li>
    <li>Font-size: 24px</li>
    <li>Font-family: Dancing Script</li>
</ul>
</div>

<div class="text-panel">
    <p>P: Paragraph text</p>
    <ul>
        <li>Font-weight: 500 (medium)</li>
        <li>Font-size: 18px</li>
        <li>Font-family: Spartan</li>
    </ul>
</div>
</div>
</div>

</main>

<!--Footer Section-->


<footer>
<h4>Made with <em>style</em> by Julia S.<br>2020</h4>
</footer>

</body>
</html>

## styles.css
/*Basic settings*/

body {
margin: 0 15%;
font-family: "Nanum Gothic";
}

a:link {
text-decoration: none;
}

a:hover {
  color: #C8841A;
}

/*Header setting*/

header {
  width: 1000px;
  height: 50px;
  align-items: center;
  margin: 10px 0;
  padding: 10px;
}

h1 {
  height: 40px;
  display: inline-block;
  margin: 20px 10px;
  font-weight: 800;
  font-size: 26px;
}

h2 {
  font-weight: 700;
  font-size: 24px;
  font-family: "Dancing Script";
}

p {
  display: block;
  font-family: "Spartan";
  font-size: 18px;
  font-weight: 500;
}

nav {
  float: right;
  height: 40px;
  padding: 5px 20px;
  margin: 20 auto;
}

nav span {
  display: inline-block;
  padding-left: 10px;
  text-decoration: none;
  color: black;
}

/*Main part setting*/

.container {
  display: block;
  width: 1000px;
  border: 1px solid grey;
  height: 400px;
  margin: 10px 0;
  padding: 10px;
}


.title {
  margin: 20px 10px;
}

/*Color part settings*/

.color-panel {
  display: inline-block;
  min-height: 100px;
  width: 30%;
  text-align: center;
  margin: 20px 10px;
}

.olive-drab {
  background-color: #343e20;
  color: white;
}
.color-hex {
  margin-top: 20px;
  margin-bottom: 5px;
  font-size: 1.5em;
}

.color-label {
  text-transform: uppercase;
  margin-bottom: 29px;
  margin-top: 5px;
  font-size: 1.2em;
}

.saddle-brown {
  background-color: #984814;
  color: white;
}

.wheat {
  background-color: #eadab4;
  color: white;
}

.ochre {
  background-color: #C8841A;
  color: white;
}

.russian-green {
  background-color: #66917C;
  color: white;
}

/*Font part settings*/

.font-panel {
  display: inline-block;
  width: 30%;
  margin: 0 10px;
}

.font-label {
  font-size: 1.5em;
  text-transform: uppercase;
}
.spartan {
  font-family: 'Spartan';
  display: block;
  font-size: 1.3em;
}

.regular {
  font-weight: 400;
}
.medium {
  font-style: medium;
  font-weight: 500;
}
.bold {
  font-weight: 700;
}
.extra-bold {
  font-weight: 800;
}
.black {
  font-weight: 900;
}

.dancing-script {
  font-family: 'Dancing Script';
  display: block;
  font-size: 1.3em;
}

.nanum-gothic {
  font-family: 'Nanum Gothic';
  display: block;
  font-size: 1.3em;
}

/*Text styles settings*/


.text-panel {
  display: inline-block;
  width: 30%;
  margin: 0 auto;
}

/*Footer style settings*/

footer {
  width: 1000px;
  height: 50px;
  align-items: center;
  text-align: center;
  margin: 10px 0;
  padding: 10px;
}
em {
  font-family: "Dancing Script";
  font-size: 1.2em;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>My Website Style Guide</title>
	<link rel="stylesheet" href="styles.css" type="text/css"/>
	<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,500,700\|Nanum+Gothic:400,700,800\|Spartan:500,700,900&display=swap" rel="stylesheet">
	</head>
	<body>
	<!--Navigation Section-->
	<header>
	<h1>My Website Style Guide</h1>
	<nav>
	<span><h2><a href="#colors">Colors</a></h2></span>
	<span><h2><a href="#fonts">Fonts</a></h2></span>
	<span><h2><a href="#text">Text Styles</a></h2></span>
	</nav>
	</header>

	<!--Main Section-->

	<main>

	<!--Colors Section-->

	<div class="container" id="colors">

	<h2 class="title">Colors</h2>

	<div class="color-container">
	<div class="color-panel olive-drab">
	<p class=color-hex>#343E20</p>
	<p class=color-label>Olive Drab</p>
	</div>
	<div class="color-panel saddle-brown">
	<p class=color-hex>#984814</p>
	<p class=color-label>Saddle Brown</p>
	</div>
	<div class="color-panel wheat">
	<p class=color-hex>#EADAB4</p>
	<p class=color-label>Wheat</p>
	</div>
	<div class="color-panel ochre">
	<p class=color-hex>#C8841A</p>
	<p class=color-label>Ochre</p>
	</div>
	<div class="color-panel russian-green">
	<p class=color-hex>#66917C</p>
	<p class=color-label>Russian Green</p>
	</div>
	</div>
	</div>


	<!--Fonts Section-->

	<div class="container" id="fonts">

	<h2 class="title">Fonts</h2>

	<div class="font-container">
	<div class="font-panel">
	<p class="font-label spartan">Spartan</p>
	<p class="medium spartan">Then came the night of the first falling star.</p>
	<p class="bold spartan">Then came the night of the first falling star.</p>
	<p class="black spartan">Then came the night of the first falling star.</p>
	</div>
	<div class="font-panel">
	<p class="font-label nanum-gothic">Nanum Gothic</p>
	<p class="regular nanum-gothic">Then came the night of the first falling star.</p>
	<p class="bold nanum-gothic">Then came the night of the first falling star.</p>
	<p class="extra-bold nanum-gothic">Then came the night of the first falling star.</p>
	</div>
	<div class="font-panel">
	<p class="font-label dancing-script">Dancing Script</p>
	<p class="regular dancing-script">Then came the night of the first falling star.</p>
	<p class="medium dancing-script">Then came the night of the first falling star.</p>
	<p class="bold dancing-script">Then came the night of the first falling star.</p>
	</div>
	</div>
	</div>


	<!--Text Styles Section-->

	<div class="container" id="text">
	<h2 class="title">Text Styles</h2>

	<div class="text-container">
	<div class="text-panel">
	<h1>H1: Main page heading</h1>
	<ul>
	<li>Font weight: 800 (extra-bold)</li>
	<li>Font-size: 26px</li>
	<li>Font-family: Nanum Gothic</li>
	</ul>
	</div>

	<div class="text-panel">
	<h2>H2: Subheading</h2>
	<ul>
	<li>Font-weight: 700 (bold)</li>
	<li>Font-size: 24px</li>
	<li>Font-family: Dancing Script</li>
	</ul>
	</div>

	<div class="text-panel">
	<p>P: Paragraph text</p>
	<ul>
	<li>Font-weight: 500 (medium)</li>
	<li>Font-size: 18px</li>
	<li>Font-family: Spartan</li>
	</ul>
	</div>
	</div>
	</div>

	</main>

	<!--Footer Section-->


	<footer>
	<h4>Made with <em>style</em> by Julia S.<br>2020</h4>
	</footer>

	</body>
	</html>
	/Basic settings/

	body {
	margin: 0 15%;
	font-family: "Nanum Gothic";
	}

	a:link {
	text-decoration: none;
	}

	a:hover {
	color: #C8841A;
	}

	/Header setting/

	header {
	width: 1000px;
	height: 50px;
	align-items: center;
	margin: 10px 0;
	padding: 10px;
	}

	h1 {
	height: 40px;
	display: inline-block;
	margin: 20px 10px;
	font-weight: 800;
	font-size: 26px;
	}

	h2 {
	font-weight: 700;
	font-size: 24px;
	font-family: "Dancing Script";
	}

	p {
	display: block;
	font-family: "Spartan";
	font-size: 18px;
	font-weight: 500;
	}

	nav {
	float: right;
	height: 40px;
	padding: 5px 20px;
	margin: 20 auto;
	}

	nav span {
	display: inline-block;
	padding-left: 10px;
	text-decoration: none;
	color: black;
	}

	/Main part setting/

	.container {
	display: block;
	width: 1000px;
	border: 1px solid grey;
	height: 400px;
	margin: 10px 0;
	padding: 10px;
	}


	.title {
	margin: 20px 10px;
	}

	/Color part settings/

	.color-panel {
	display: inline-block;
	min-height: 100px;
	width: 30%;
	text-align: center;
	margin: 20px 10px;
	}

	.olive-drab {
	background-color: #343e20;
	color: white;
	}
	.color-hex {
	margin-top: 20px;
	margin-bottom: 5px;
	font-size: 1.5em;
	}

	.color-label {
	text-transform: uppercase;
	margin-bottom: 29px;
	margin-top: 5px;
	font-size: 1.2em;
	}

	.saddle-brown {
	background-color: #984814;
	color: white;
	}

	.wheat {
	background-color: #eadab4;
	color: white;
	}

	.ochre {
	background-color: #C8841A;
	color: white;
	}

	.russian-green {
	background-color: #66917C;
	color: white;
	}

	/Font part settings/

	.font-panel {
	display: inline-block;
	width: 30%;
	margin: 0 10px;
	}

	.font-label {
	font-size: 1.5em;
	text-transform: uppercase;
	}
	.spartan {
	font-family: 'Spartan';
	display: block;
	font-size: 1.3em;
	}

	.regular {
	font-weight: 400;
	}
	.medium {
	font-style: medium;
	font-weight: 500;
	}
	.bold {
	font-weight: 700;
	}
	.extra-bold {
	font-weight: 800;
	}
	.black {
	font-weight: 900;
	}

	.dancing-script {
	font-family: 'Dancing Script';
	display: block;
	font-size: 1.3em;
	}

	.nanum-gothic {
	font-family: 'Nanum Gothic';
	display: block;
	font-size: 1.3em;
	}

	/Text styles settings/


	.text-panel {
	display: inline-block;
	width: 30%;
	margin: 0 auto;
	}

	/Footer style settings/

	footer {
	width: 1000px;
	height: 50px;
	align-items: center;
	text-align: center;
	margin: 10px 0;
	padding: 10px;
	}
	em {
	font-family: "Dancing Script";
	font-size: 1.2em;
	}