COULD SOMEONE CHECK MY WORK
<head>
<title> Website Design System</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,800;1,400&family=Patrick+Hand&family=Poppins:ital,wght@0,400;0,600;0,800;1,400&display=swap" rel="stylesheet">
<h1> Website Design System </h1>
</head>
<body>
<div class="color-container">
<h1> Colour Palette</h1>
<div class="color" id="blue">
<h3> Lust Blue</h3>
<p> #012389</p>
<p> A great background colour</p>
</div>
<div class="color" id="red">
<h3> Demonic Red</h3>
<p> #E9524E</p>
<p> A great link colour</p>
</div>
</div>
<div class="font-container">
<h1> Font Palette</h1>
<div class="poppins">
<h2>Poppins</h2>
<p class="regular"> The quick brown fox jumps over the lazy dog.</p>
<p class="italic"> The quick brown fox jumps over the lazy dog.</p>
<p class="bold"> The quick brown fox jumps over the lazy dog.</p>
<p class="underlined"> The quick brown fox jumps over the lazy dog.</p>
</div>
<div class="patrick-hand">
<h2>Patrick Hand</h2>
<p class="regular"> The quick brown fox jumps over the lazy dog.</p>
<p class="italic"> The quick brown fox jumps over the lazy dog.</p>
<p class="bold"> The quick brown fox jumps over the lazy dog.</p>
<p class="underlined"> The quick brown fox jumps over the lazy dog.</p>
</div>
<div class="open-sans">
<h2>Open Sans</h2>
<p class="regular"> The quick brown fox jumps over the lazy dog.</p>
<p class="italic"> The quick brown fox jumps over the lazy dog.</p>
<p class="bold"> The quick brown fox jumps over the lazy dog.</p>
<p class="underlined"> The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div>
<h1> Text Styles</h1>
<div class="poppins">
<h1> h1</h1>
<ul>
<li> Font-weight: 700 (bold) </li>
<li> Font-size: 26px</li>
<li> Font-family: Poppins</li>
</ul>
</div>
<div class="patrick-hand">
<h2> Sub-Heading</h2>
<ul >
<li>Font-weight: 500</li>
<li>Font-size: 18px</li>
<li>Font-family: Patrick Hand</li>
</ul>
</div>
<div class="open-sans">
<p> Paragraph</p>
<ul>
<li>Font-weight: 400 (Regular)</li>
<li>Font-size: 14px</li>
<li>Font-family: Open-Sans</li>
</ul>
</div>
</div>
</body>
.color-container {
border: 1px solid black;
}
.color {
display: inline-block;
width: 100%;
height: 125px;
text-align: center;
color: white;
}
#blue {
background-color: #012389;
}
#red {
background-color: #E9524E;
}
.font-container {
border: 1px solid black;
}
.poppins {
font-family: "Poppins";
}
.patrick-hand {
font-family: "Patrick Hand";
}
.open-sans {
font-family: "Open Sans";
}
.bold {
font-weight:600;
}
.italic {
font-style: italic;
}
.underlined {
text-decoration: underline;
}