Style guide

Web Development Front-End
1

[codebyte language= html, css]
.section {
border: 2px solid #a2a2a6;
padding: 10px;
margin: 10px auto;
}

p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

div {
display: block;

}
.roy-purp{
background-color: hsl(266.6, 35.2, 49);
color: white;
}

.gold{
background-color: hsl(50.6, 100, 50);
color: white;
}

.black{
background-color: hsl(0, 0, 0);
color: white;
}

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

body{
font-family: ‘Lucida Sans’, ‘Lucida Sans Regular’, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Geneva, Verdana, sans-serif;
}

[codebyte]

Style Guide Style Guide For My Website! 
<div class="section">

    <h2>Colors</h2>
    <div class="color-sect">
        <div class="color-sect roy-purp">
            <p class="roy-purp"> Royal Purple </p>
            <p class="color-hex"> hsl(266.6°, 35.2, 49)</p>
        </div>
        <div class="color-sect gold">
            <p class="gold"> Gold</p>
            <p class="color-hex">hsl(50.6°, 100, 50)</p>
        </div>
    
        <div class="color-sect black"> 
            <p class="black">Black</p>
            <p class="color-hex">hsl(0°, 0, 0)</p>  
        </div>
    </div>
</div>

Fonts

  • Lucida Sans.

    • The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

  • Geneva.

    • The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

  • Verdana

    • The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

    </ul>

Text Styles

H1: Main page heading

  • Font-weight: 700 (bold)
  • Font-size: 26px
  • Font-family: Nunito Sans

H2:Subheading

  • Font-weight: 500
  • Font-size: 18px
  • Font-family: Poppins
    • </ul>
<p>P: paragraph text</p>
<ul>
    <li>Font-weight: 400 (regular)</li> 
    <li>Font-size: 14px</li>
    <li>Poppins</li> 

</ul>

my styleguide is not looking anythung like the example any tips??