Web Design System Review Needed

Hello everyone,

I just completed the Web Design System. I used online validators and such, but I notice whenever I’d think I’m on the right track, there are a lot of things I miss .i.e semantic tags, best practices. I’d really appreciate your feedback.

I was also trying to do two things with my code:

  1. Change the bullet points for section three to a different color, but it kept turning the entire list into a different color when I just wanted the bullet points to be in a different color.
  2. Place the color boxes in the center of the ‘Colors’ section, but I struggled with that (the Box model takes some time getting used to). Any idea how I could do that seamlessly?

Please see my HTML and CSS code below, thanks:

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <title>Web Design System</title>
  <meta name="description" content="build a web design system">
  <meta name="keywords" content="web, web design, build web design, build web design system">
  <meta name="author" content="T_Higgins">
  <meta name="viewport" content="width=content-width initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@300;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Trispace:wght@400;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <header>
    <h1>Kreativ Web Design System</h1>
      <nav>
        <ul class="nav-bar">
          <li><a href="#colors">Colors</a></li>
          <li><a href="#fonts">Fonts</a></li>
          <li><a href="#about">About</a></li>
        </ul>
      </nav>
  </header>
  <main>
    <section class="section-one">
      <h2 id="#colors">Colors</h2>
      <div class="color-container">
        <div class="color-box  color-darkorange"> 
          <p class="color-name">Dark Orange</p> 
          <p class="hex-code">#FF8C00</p>
        </div>

        <div class="color-box  color-DarkOrchid">
        <p class="color-name">DarkOrchid</p> 
        <p class="hex-code">#9932CC</p>
        </div>

        <div class="color-box  color-DarkRed">
        <p class="color-name">DarkRed</p> 
        <p class="hex-code">#8B0000</p>
        </div>

        <div class="color-box  color-DarkSalmon">
        <p class="color-name">DarkSalmon</p> 
        <p class="hex-code">#E9967A</p>
        </div>

        <div class="color-box color-DarkSeaGreen">
        <p class="color-name">DarkSeaGreen</p> 
        <p class="hex-code">#8FBC8F</p>
        </div>
        <div class="color-box  color-DarkSlateBlue">
        <p class="color-name">DarkSlateBlue</p> 
        <p class="hex-code">#483D8B</p>
        </div>
      </div>
    </section>
    <section class="section-two">
    <h2 id="fonts">Fonts</h2>
    <div class="font-box opensans-box">
      <h3 class="opensans-heading">Open Sans:</h3>
      <p class="opensans-text">Whatever it was, it was wonderful</p>
      <p class="opensans-text">Whatever it was, it was wonderful</p>
    </div>

    <div class="font-box trispace-box">
      <h3 class="trispace-heading">Trispace:</h3>
      <p class="trispace-text">Whatever it was, it was wonderful</p>
      <p class="trispace-text">Whatever it was, it was wonderful</p>
  </div>

  <div class="font-box sansita-box">
    <h3 class="sansita-heading">Sansita Swashed:</h3>
    <p class="sansita-text">Whatever it was, it was wonderful</p>
    <p class="sansita-text">Whatever it was, it was wonderful</p>
</div>

  <div class="font-box caveat-box">
    <h3 class="caveat-heading">Caveat:</h3>
    <p class="caveat-text">Whatever it was, it was wonderful</p>
    <p class="caveat-text">Whatever it was, it was wonderful</p>
  </div>
  
  </section>
  <section class="section-three">
    <h2 id="text-styles">Text Styles</h2>
    <p class="text-heading">H1: Main page heading</p>
    <ul class="text-body">
      <li>Font-weight: 700 (bold)</li>
      <li>Font-size: 26px</li>
      <li>Font-family: Nunito Sans</li>
    </ul> 
    <p class="text-heading"> H2: Subheading</p>
    <ul class="text-body">
      <li>Font-weight: 500</li>
      <li>Font-size: 18px</li>
      <li>Font-family: Poppins</li>
    </ul> 
    <p class="text-heading">P: Paragraph text</p>
    <ul class="text-body">
      <li>Font-weight: 400 (regular)</li>
      <li>Font-size: 14px</li>
      <li>Font-family: Poppins</li>
    </ul> 
  </section>
  </main>
  <footer>
    <p>Kreativ Web Design System &copy; All Rights Reserved</p>
  </footer>
  </body>
</html>
body {
  margin: 0 auto;
  width: 100vw;
  background-image: url("olddays.jpg");
  font-family: 'Josefin Sans', sans-serif;
  color: white;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%;
  padding: 50px;
}

.nav-bar li { 
    list-style: none;
    display: inline;
}

.nav-bar {
  padding: 20px;
  background-color: #403831;
  margin: 0 auto;
  text-align: center;
}
a {
  text-decoration: none;
  color: white;
  letter-spacing: 1.5px;
  float: left;
  width: 33.33%;
  font-weight: 700;
}

a:hover {
  color: #F5ECB7;
}

h1 {
  font-weight: 700;
  text-align: left;
  color: #FFA07A!important;
  background-color: #30261C;
  margin: 0 auto;
  letter-spacing: 2px;
  word-spacing: 2px;
  padding: 20px;
}

h2 {
  font-weight: 600;
  color: white;
  text-align: left;
}

.section-one {
  align-items: center;
  margin: 60px auto;
  padding: 15px 30px;
  background-color: hsl(358, 13%, 48%, 0.5);
}
.color-container {
  display:inline-block;
}

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

.color-darkorange {
background-color: #FF8C00; 
color: #fff;
}

.color-DarkOrchid {
background-color: #9932CC; 
color: #fff;
}

.color-DarkRed {
background-color: #8B0000; 
color: #fff;
}

.color-DarkSalmon {
background-color: #E9967A; 
color: #fff;
}

.color-DarkSeaGreen {
background-color: #8FBC8F; 
color: #fff;
}

.color-DarkSlateBlue {
background-color: #483D8B; 
color: #fff;
}

.font-box {
  display: block;
  width: auto;
  text-align: left;
  margin: 10px auto;
  padding: 15px;
  min-height: 100px;
}

.section-two {
  margin: 60px auto;
  padding: 15px 30px;
  background-color: hsl(45, 13%, 54%, 0.5);
}

.section-three {
  margin: 60px auto;
  padding: 15px 30px;
  background-color: hsl(336, 20%, 42%, 0.5);
}

.text-body { 
  text-align: left;
  display: inline-block;
}

.text-heading {
  text-align: left;
}

.text-heading {
  font-family: 'Josefin Sans', sans-serif;
  color: beige;
}

.text-body li {
  list-style-type: square;
}

.opensans-heading {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}

.opensans-text {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

.sansita-heading {
  font-family: 'Sansita Swashed', cursive;
  font-weight: 800;
}

.sansita-text {
  font-family: 'Sansita Swashed', cursive;
  font-weight: 300;
}

.trispace-heading {
  font-family: 'Trispace', sans-serif;
  font-weight: 800;
}

.trispace-text {
  font-family: 'Trispace', sans-serif;
  font-weight: 400;
}

.caveat-heading {
  font-family: 'Caveat', cursive;
  font-weight: 700;
}

.caveat-text {
  font-family: 'Caveat', cursive;
  font-weight: 400;
}


footer {
    background-color: #30261C;
    margin: 0 auto;
    padding-bottom: 10px;
    font-size: 1em;
    padding-top: 15px;
    word-spacing: 2px;
    color: white;
    text-align: center;
}

I’ve also attached the background image that I used here.

Thanks!

Good Day,

In terms of the bullets, have a look at the link below:

https://www.w3schools.com/howto/howto_css_bullet_color.asp

With everything else, may i suggest hosting the site/ project on GitHub pages so that we could have a look at a live version, as this would be easier to see what you are trying to do.