Code Review: Dasmoto's Arts & Crafts

Projects Skill Path Projects
1

Hello!

If anyone would like to help me with a code review for the Off-Platform Project: Dasmoto’s Arts & Crafts it would be greatly appreciated! I’ve added my HTML and CSS code below. The code I’ve written for this project can also be viewed on GitHub.

Thank you in advance. I appreciate any and all feedback!

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dasmoto's Arts & Crafts</title>  <!-- Page Title -->   
    <link href="./Resources/css/index.css" rel="stylesheet"/> <!-- Link CSS Stylesheet -->
  </head>

  <body>
     <!--Page Header-->
     <header class="banner"> <!--Main header class="banner"-->
      <h1>Dasmoto’s Arts & Crafts</h1>
    </header>
    <!--End Page Header-->

    <main>

      <!--Brushes Section-->
      <section>
        <h2 class="brushes">Brushes</h2> <!-- Give <h2> heading class="brushes" -->
        <img src="./Resources/images/hacksaw.jpeg" alt="Hacksaw Paint Brushes"> <!-- Add brushes image -->
        <h3>Hacksaw Brushes</h3> 
        <p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes. <span>Starting at $3.00 / brush.</span></p>
      </section>
      <!--End Brushes Section-->

      <!--Frames Section-->
      <section>
        <h2 class="frames">Frames</h2> <!-- Give <h2> heading class="frames" -->
        <img src="./Resources/images/frames.jpeg" alt="Various Weathered Frames"> <!-- Add frames image -->
        <h3>Art Frames (assorted)</h3>
        <p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. <span>Starting at $2.00 / frame.</span></p>
      </section>
      <!--End Frames Section-->

      <!--Paint Section-->
      <section>
        <h2 class="paint">Paint</h2><!-- Give <h2> heading class="paint" -->
        <img src="./Resources/images/finnish.jpeg" alt="Finnish Paint Tubes"> <!-- Add paint image -->
        <h3>Clean Finnish Paint</h3>
        <p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. <span>Starting at $5.00 / tube.</span></p>
      </section>
      <!--End Paint Section-->

    </main> <!--End primary content-->
  </body>

</html>

CSS

/* Set all body font to Helvetica */
body {
  font-family: Helvetica; 
}

/* Set header class=banner background-image */
.banner {
  background-image: url("../images/pattern.jpeg");
}

/* Set <h1> header font size, weight, color, and center text alignment */
h1 {
  font-size: 100px;
  font-weight: bold;
  color: khaki;
  text-align: center;
}

/* Set top margin for each section to 50px */
section {
  margin: 50px 0 0 0;
}

/* Set font size, weight, and color for each section heading */
.brushes,
.frames,
.paint {
  font-size: 32px;
  font-weight: bold;
  color: white;
}

/* Set brushes heading background-color */
.brushes {
  background-color: mediumspringgreen;
}

/* Set brushes heading background-color */
.frames {
  background-color: lightcoral;
}

/* Set brushes heading background-color */
.paint {
  background-color: skyblue;
}

/* Make span text bold and blue */
span {
  font-weight: bold;
  color: blue;
}