Code review - Dasmoto's arts & crafts project

Projects Skill Path Projects
1

Hey, just looking for some feedback on my code and if there is anything I should be doing differently. Thanks.

<!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>
    <link href="./resources/css/index.css" rel="stylesheet">
</head>

<body>

    <div>
        <h1>Dasmoto's Arts & Crafts</h1>
    </div>

    <div>
        <h2 class="brushes">Brushes</h2>
        <img src="/Users/dominicalari/Dasmoto's Arts & Crafts/Resources/hacksaw.jpeg" alt="collection of brushes">
        <h4>Hacksaw Brushes</h4>
        <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. <strong class="price">Starting at $3.00 / brush.</strong>
        </p>
    </div>

    <div>
        <h2 class="frames">Frames</h2>
        <img src="/Users/dominicalari/Dasmoto's Arts & Crafts/Resources/frames.jpeg" alt="coloured frames stacked against a wall">
        <h4>Art Frames (assorted)</h4>
        <p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. <strong class="price">Starting at $2.00 / frame.</strong></p>
    </div>

    <div>
        <h2 class="paint">Paint</h2>
        <img src="/Users/dominicalari/Dasmoto's Arts & Crafts/Resources/finnish.jpeg">
        <h4>Clean Finnish Paint</h4>
        <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. <strong class="price">Starting at $5.00 / tube.</strong></p>
    </div>

</body>

</html>

CSS

h1{
    font-family: Helvetica;
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg?_gl=1*2awl6n*_gcl_au*MjU5MDU2NDc0LjE3MjkwMDA2MDI.*_ga*MTM1MjAwMzcyNy4xNzI5MDcyNzIy*_ga_3LRZM6TM9L*MTczMTU2NjA3OS4zNi4xLjE3MzE1NzE4MjcuMC4wLjA.);
}

h4{
    font-family: Helvetica;
}

p{
    font-family: Helvetica;
    font-size: 16px;
}

.price{
    font-family: Helvetica;
    font-weight: bold;
    color: blue;
}

.brushes{
    font-family: Helvetica;
    font-size: 32px;
    font-weight: bold;
    color: white;
    background-color: mediumspringgreen;
}

.frames{
    font-family: Helvetica;
    font-size: 32px;
    font-weight: bold;
    color: white;
    background-color: lightcoral;
}

.paint{
    font-family: Helvetica;
    font-size: 32px;
    font-weight: bold;
    color: white;
    background-color: skyblue;
}
2

I recently finished this project. Your HTML aligns with mine–so its good.

For the CSS section, I noticed that you from h1 to h4, what happened to h2, h3?
Also, I approached the background image differently based on the instructions I was given and didn’t have a URL to insert. Please see my code before for reference. Note: I had difficulty overlapping the header text over the image. Did anyone approach it differently? Or has any guidance/perspective on how to overlap text on a background image?

Thank you for your time in advance!

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>
        <link
            rel="stylesheet"
            href="/resources/css/index.css"
            type="text/css"
        />
    </head>
    <body>
        <!-- Banner Section -->
        <div class="banner">
            <h1>Dasmoto's Arts & Crafts</h1>
            <img
                id="banner-image"
                src="/resources/images/pattern.jpeg"
                alt="Pattern"
            />
        </div>

        <!-- Brush Section -->
        <section>
            <h2 class="brush">Brushes</h2>
            <img src="/resources/images/hacksaw.jpeg" alt="Hacksaw Brushes" />
            <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.
                <strong>Starting at $3.00 / brush.</strong>
            </p>
        </section>

        <!-- Frames Section -->
        <section>
            <h2 class="frames">Frames</h2>
            <img src="/resources/images/frames.jpeg" alt="Frames" />
            <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.
                <strong>Starting at $2.00 / frame.</strong>
            </p>
        </section>

        <!-- Paint Section -->
        <section>
            <h2 class="paint">Paint</h2>
            <img src="/resources/images/finnish.jpeg" alt="Finnish Paint" />
            <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.
                <strong>Starting at $5.00 / tube.</strong>
            </p>
        </section>
    </body>
</html>

CSS

h1,
h2,
h3,
p {
    font-family: Helvetica;
}

#banner-image {
    background-image: contain;
    width: 100%;
    margin-top: -10000px;
    position: relative;
    z-index: -1;
}

.banner {
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    padding: 100px 0;
}

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

h2.brush {
    background-color: mediumspringgreen;
}

h2.frames {
    background-color: lightcoral;
}

h2.paint {
    background-color: skyblue;
}

h3 {
    font-size: 20px;
    color: black;
}

p {
    font-size: 16px;
    color: black;
}

strong {
    font-weight: bold;
    color: blue;
}