Code Review: Dasmoto's Arts & Crafts

Projects Skill Path Projects
1

Hello, I am looking for a code review as I have just completed the Dasmoto task. Any feedback would be really appreciated as I am still finding my feet! I am 10% of the way through the Front-End career path course.

I am also happy to return code reviews also if needed :slight_smile:

HTML:

Document 
<!--Banner-->
<div id="banner">
    <h1 class="banner-h1">Dasmoto's Arts & Crafts</h1>
    <img id="banner-img" src="images/Image 1.png" alt="Dasmoto's Arts & Crafts Banner">
</div>

<!--Section 1:Brushes-->
<div>
    <h2 id="section-1">Brushes</h2>
    <img src="images/Image 2.png" alt="Brushes">
    <h3 class="h3">Hacksaw Brushes</h3>
    <p class="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 class="highlight"> Starting at 
    $3.00 / brush.</span></p>
</div>

<!--Section 2: Frames-->
<div>
    <h2 id="section-2">Frames</h2>
    <img src="images/Image 3.png" alt="Frames">
    <h3 class="h3">Art Frames(assorted)</h3>
    <p class="p">Assorted frames made of different material, including MDF, birchwood, and 
    PDE. Select frames can be sanded and painted according to your needs.<span class="highlight"> Starting 
    at $2.00 / frame.</span></p>
</div>

<!--Section 3: Paint-->
<div>
    <h2 id="section-3">Paint</h2>
    <img src="images/Image 4.png" alt="Paint">
    <h3 class="h3">Clean Finish Paint</h3>
    <p class="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 class="highlight"> Starting at $5.00 / tube.</span></p>
</div>

CSS:
#banner {
display: inline;
position: relative;
font-family: Helvetica;
font-size: 60px;
font-weight: bold;
color: khaki;
text-align: center;
height: 200px;
overflow: hidden;
}

#banner-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
opacity: 0.9;
}

.banner-h1 {
position: relative;
z-index: 2;
margin: 0;
padding-top: 50px;
padding-bottom: 50px;
}

#section-1 {
background-color: mediumspringgreen;
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
}

#section-2 {
background-color: lightcoral;
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
}

#section-3 {
background-color: skyblue;
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
}

.h3 {
font-family: Helvetica;
font-size: 22px;
font-weight: bold;
color: black;
}

.p {
font-family: Helvetica;
font-size: 18px;
font-weight: normal;
color: black;
}

.highlight {
color: blue;
font-weight: bold;
}