Dasmoto’s Arts & Crafts Code Review Request

Hello everyone!
I’ve finished Dasmoto’s project and would love to get your feedback.
I didn’t like that text and h2 elements always used 100% of pages width, so I’ve changed it to max: 800px, min: 520px. Imo this looks better.

index.html below:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Dasmoto's Arts & Crafts</title>
        <link rel="stylesheet" href="./resources/css/styles.css">
    </head>
    <body>
        <!--h1 header section-->
        <header>
            <h1>Dasmoto's Arts & Crafts</h1>
        </header>
        
        <!--h2 Brushes section-->
        <section class="brushes">
            <h2>Brushes</h2>
            <img src="./resources/img/hacksaw.jpeg" alt="">
            <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 class="prices">Starting at $3.00 / brush.</span></p>
        </section>
            
        <!--h2 Frames section-->
        <section class="frames">
            <h2>Frames</h2>
            <img src="./resources/img/frames.jpeg" alt="">
            <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 class="prices">Starting at $2.00 / frame.</span></p>
        </section>
            
        <!--h2 Paint section-->
        <section class="paint">
            <h2>Paint</h2>
            <img src="./resources/img/finnish.jpeg" alt="">
            <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 class="prices">Starting at $5.00 / tube.</span></p>
        </section>
    </body>
</html>

styles.css below:

* {
    font-family: Helvetica, sans-serif;
}

body {
    max-width: 800px;
    min-width: 520px;
    margin: 0 auto;
}

h1 {
    background-image: url("../img/pattern.jpeg");
    text-align: center;
    font-size: 100px;
    font-weight: bold;
    color: khaki;
}

h2 {
    font-size: 32px;
    font-weight: bold;
    color: white;
}

.brushes h2 {
    background-color: mediumspringgreen;
}

.frames h2 {
    background-color: lightcoral;
}

.paint h2 {
    background-color: skyblue;
}

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

Clean and nice coding. As a beginner, I can understand it perfectly.

One thing I would like to mention though. In your CSS you apply the font-family to the entire document, though it shouldn’t be applying to the

section. Was this an artistic choice on your part like with the h2 element?

And I would have added a element around the three sections to compliment the use of the element.

Hi Tuanur!

Thank you very much for your code review.
I like the idea of wrapping three sections containing h2 elements.
Not sure about font-family. I’ve checked again SPEC for Dasmotos, and all text within tags: h1, h2, h3, p should be Helvetica. So i decided to apply font family to entire document, instead of coding it separately to each element.