samdude78/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 href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./resources/css/styles.css">
</head>
<body>
    <h1>My Website Style Guide</h1>
    <div class="container">
        <h2>Colors</h2>
        <div class="color-panel cool-blue">
            <p class="">Cool Blue </p>
            <p> #2d5dcc</p>
        </div>
        <div class="color-panel pink">
            <p> Pink</p>
            <p>#d957d9</p>
        </div>
        <div class="color-panel mint-green">
            <p>Mint Green</p>
            <p>#4fe0b0</p>
        </div>
        <div class="color-panel beige">
            <p>Beige</p>
            <p>#efd9ca</p>
        </div>
    </div>
    <div class="container">
<h2>Fonts </h2>
<div class="font-panel">
    <p class="font-label source-code-pro">Source Code Pro</p>
    <p class="regular source-code-pro"> She sells sea shells on the sea shore</p>
    <p class="bold source-code-pro">She sells sea shells on the sea shore</p>
    <p class="italic source-code-pro">She sells sea shells on the sea shore</p>
</div>
<div class="font-panel">
    <p class="font-label nunito-sans">Nunito Sans</p>
    <p class="regular nunito-sans"> She sells sea shells on the sea shore</p>
    <p class="bold nunito-sans">She sells sea shells on the sea shore</p>
    <p class="italic nunito-sans">She sells sea shells on the sea shore</p>
</div>
<div class="font-panel">
    <p class="font-label poppins">Poppins</p>
    <p class="regular poppins"> She sells sea shells on the sea shore</p>
    <p class="bold poppins">She sells sea shells on the sea shore</p>
    <p class="italic poppins">She sells sea shells on the sea shore</p>
</div>
    </div>
    <div class="container">
<h2>Text Styles</h2>
<div class="text-panel h1">
    <h1>H1: Main page heading</h1>
    <ul>
        <li> Font-weight: 700 (bold)</li>
        <li> Font-size: 26px</li>
        <li> Font-familt: Nunito-sans</li>
    </ul>
</div>
<div class="text-panel h2">
    <h2>H2: Subheading</h2>
    <ul>
        <li> Font-weight: 500</li>
        <li> Font-size: 18px</li>
        <li> Font-family: Poppins</li>
    </ul>
</div>
<div class="text-panel p">
    <p>P: Paragraph text</p>
    <ul>
        <li> Font-weight:400(regular)</li>
        <li> Font-size: 14px</li>
        <li> Font-family: Poppins</li>
    </ul>
</div>
</body>

## style.css
body {
    font-family: 'Nunito Sans', sans-serif;
    margin: 0 10%;
}

.container {
    border: 2px solid #a2a2a6;
    padding: 10px;
    margin: 10px auto;
}

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

.cool-blue {
    background-color: #2d5dcc;
    color: #ffffff;
}

.pink {
    background-color: #d957d9;
}

.mint-green {
    background-color: #4fe0b0;
}

.beige {
    background-color: #efd9ca;
}

.source-code-pro {
    font-family: 'Source Code Pro', monospace;
}

.poppins {
    font-family: 'Poppins', sans-serif;
}

.nunito-sans {
    font-family: 'Nunito Sans', sans-serif;
}

.font-label {
font-size: 20px;
text-decoration: underline;
}

.font-panel {
    display: inline-block;
    width: 45%;
}

.regular {
    font-style: normal;
}

.bold {
    font-weight: 700;
}

.italic {
    font-style: italic;
}

.text-panel h1{
    font-weight: 700;
    font-size: 26px;
    font-family: 'Nunito Sans', sans-serif;
}

.text-panel h2{
font-weight: 500;
font-size: 18px;
font-family: 'Poppins', sans-serif;
}

.text-panel p {
    font-weight: 400;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
}
	<!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 href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="./resources/css/styles.css">
	</head>
	<body>
	<h1>My Website Style Guide</h1>
	<div class="container">
	<h2>Colors</h2>
	<div class="color-panel cool-blue">
	<p class="">Cool Blue </p>
	<p> #2d5dcc</p>
	</div>
	<div class="color-panel pink">
	<p> Pink</p>
	<p>#d957d9</p>
	</div>
	<div class="color-panel mint-green">
	<p>Mint Green</p>
	<p>#4fe0b0</p>
	</div>
	<div class="color-panel beige">
	<p>Beige</p>
	<p>#efd9ca</p>
	</div>
	</div>
	<div class="container">
	<h2>Fonts </h2>
	<div class="font-panel">
	<p class="font-label source-code-pro">Source Code Pro</p>
	<p class="regular source-code-pro"> She sells sea shells on the sea shore</p>
	<p class="bold source-code-pro">She sells sea shells on the sea shore</p>
	<p class="italic source-code-pro">She sells sea shells on the sea shore</p>
	</div>
	<div class="font-panel">
	<p class="font-label nunito-sans">Nunito Sans</p>
	<p class="regular nunito-sans"> She sells sea shells on the sea shore</p>
	<p class="bold nunito-sans">She sells sea shells on the sea shore</p>
	<p class="italic nunito-sans">She sells sea shells on the sea shore</p>
	</div>
	<div class="font-panel">
	<p class="font-label poppins">Poppins</p>
	<p class="regular poppins"> She sells sea shells on the sea shore</p>
	<p class="bold poppins">She sells sea shells on the sea shore</p>
	<p class="italic poppins">She sells sea shells on the sea shore</p>
	</div>
	</div>
	<div class="container">
	<h2>Text Styles</h2>
	<div class="text-panel h1">
	<h1>H1: Main page heading</h1>
	<ul>
	<li> Font-weight: 700 (bold)</li>
	<li> Font-size: 26px</li>
	<li> Font-familt: Nunito-sans</li>
	</ul>
	</div>
	<div class="text-panel h2">
	<h2>H2: Subheading</h2>
	<ul>
	<li> Font-weight: 500</li>
	<li> Font-size: 18px</li>
	<li> Font-family: Poppins</li>
	</ul>
	</div>
	<div class="text-panel p">
	<p>P: Paragraph text</p>
	<ul>
	<li> Font-weight:400(regular)</li>
	<li> Font-size: 14px</li>
	<li> Font-family: Poppins</li>
	</ul>
	</div>
	</body>
	body {
	font-family: 'Nunito Sans', sans-serif;
	margin: 0 10%;
	}

	.container {
	border: 2px solid #a2a2a6;
	padding: 10px;
	margin: 10px auto;
	}

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

	.cool-blue {
	background-color: #2d5dcc;
	color: #ffffff;
	}

	.pink {
	background-color: #d957d9;
	}

	.mint-green {
	background-color: #4fe0b0;
	}

	.beige {
	background-color: #efd9ca;
	}

	.source-code-pro {
	font-family: 'Source Code Pro', monospace;
	}

	.poppins {
	font-family: 'Poppins', sans-serif;
	}

	.nunito-sans {
	font-family: 'Nunito Sans', sans-serif;
	}

	.font-label {
	font-size: 20px;
	text-decoration: underline;
	}

	.font-panel {
	display: inline-block;
	width: 45%;
	}

	.regular {
	font-style: normal;
	}

	.bold {
	font-weight: 700;
	}

	.italic {
	font-style: italic;
	}

	.text-panel h1{
	font-weight: 700;
	font-size: 26px;
	font-family: 'Nunito Sans', sans-serif;
	}

	.text-panel h2{
	font-weight: 500;
	font-size: 18px;
	font-family: 'Poppins', sans-serif;
	}

	.text-panel p {
	font-weight: 400;
	font-size: 14px;
	font-family: 'Poppins', sans-serif;
	}