Dasmotos Arts and Craft : Code review and FeedBack

Projects
1

Hello, I’ve just completed this project. Let me know if it need some improvements.
Thanks a lot J.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='./resources/css/main.css'>
    <script src='main.js'></script>
</head>
<body>
    <header class="banner">
        <h1>Dasmoto's Arts & Crafts</h1>
    </header>
    <main>
        <section class="article">
            <h2 class="bg_spring_green">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>
        <section class="article">
            <h2 class="bg_light_coral">Frames</h2>
            <img src="./resources/images/frames.jpeg" alt="Art Frames (assorted)">
            <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 / brush.</strong></p>
        </section>
        <section class="article">
            <h2 class="bg_skyblue">Paint</h2>
            <img src="./resources/images/finnish.jpeg" alt="Clean 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 / brush.</strong></p>
        </section>
    </main>

</body>
</html>

CSS

* {
    box-sizing: border-box;
    font-family: Helvetica;
}
.banner {
    width: 100%;
    background: url("../images/pattern.jpeg") no-repeat;
}
.banner h1 {
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
}
.article h2 {
    font-size: 32px;
    font-weight: bold;
    color: white;
    text-align: left;
}
.bg_spring_green {
    background-color: mediumspringgreen;
}
.bg_light_coral {
    background-color: lightcoral;
}
.bg_skyblue {
    background-color: skyblue;
}
.article strong {
    color: blue;
}
2

Hi there, J!

It looks like this will do what you need it to do. The only technical issue I see is having your <section>s labeled with the class “article”, as article (<article>) is a tag in itself.

1 Like