Dasmoto's Arts & Crafts Project

Hello everyone, I’m new to coding and i just finished the Dasmoto’s Arts And Crafts Project. Here is my solution, I’d appreciate any critiquing.

index.html below

<!DOCTYPE html>
<html>
    <head>
        <title>Dasmoto's Arts & Crafts</title>
        <link href="./Resorces/css/index.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <header>
            <h1 class="title">Dasmoto's Arts & Crafts</h1>
        </header>
        <main>
            <h2 class="catagory brushes">Brushes</h2>
            <h6></h6>
            <h4 id="hb">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. <span class="price">Starting at $3.00 / brush.</span></p>
            <h6></h6>
            <h2 class="catagory frames">Frames</h2>
            <h6></h6>
            <h4 id="af">Art Frames</h4>
            <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="price">Starting at $2.00 / frame.</span></p>
            <h6></h6>
            <h2 class="catagory paint">Paint</h2>
            <h6></h6>
            <h4 id="cfp">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. <span class="price">Starting at $5.00 / tube.</span></p>
            <h6></h6>
        </main>
        <footer>
            <h3>Ryan Tomich</h3>
        </footer>
    </body>
</html>

index.css below

.title {
    text-align: center;
    font-weight: 300;
    padding-bottom: 20px;
    border-bottom: 5px solid white;
    font-size: 50px;
    color: white;
    padding-top: 10px;
    font-size: 60px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.catagory {
    text-align: left;
    font-family: Geneva, Tahoma, sans-serif;
    border: rgb(255, 255, 255) solid 1px;
    border-width: 6px;
    font-size: 32px;
    margin-left: 20px;
    color: white;
    padding-left: 5px;
}

.brushes {
    background-image: url("file:///F:/Ryan_Tomich/Projects/Dasmoto's Arts & Crafts/Resorces/Images/hacksaw.webp");
    background-size: cover;
    height: 500px;
    width: 500px;
}

.frames {
    background-image: url("file:///F:/Ryan_Tomich/Projects/Dasmoto's Arts & Crafts/Resorces/Images/frames.webp");
    background-size: cover;
    height: 500px;
    width: 500px;
}

.paint {
    background-image: url("file:///F:/Ryan_Tomich/Projects/Dasmoto's Arts & Crafts/Resorces/Images/finnish.webp");
    background-size: cover;
    height: 500px;
    width: 500px;
}

body {
    background-image: url("file:///F:/Ryan_Tomich/Projects/Dasmoto's Arts & Crafts/Resorces/Images/pattern.webp");
}

p {
    display: block;
    padding: 10px;
    position: relative;
    top: 80%;
    width: 60%;
    background-color: rgb(255, 255, 255);
    margin-left: 40px;
    font-size: 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: rgb(0, 0, 0);
    opacity: 0.7;
}

.price {
    color: lime;
}

#hb {
    border-left: white solid 2px;
    margin-left: 40px;
    font-size: 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    padding-left: 5px;
}

h6 {
    border: white solid 2px;
    margin-left: 40px;
}

#af {
    border-left: white solid 2px;
    margin-left: 40px;
    font-size: 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    padding-left: 5px;
}

#cfp {
    border-left: white solid 2px;
    margin-left: 40px;
    font-size: 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    padding-left: 5px;
}

h3 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
    text-align: right;
}

I Recently Changed everything guess i shouldn’t have posted until i was sure i was finished :crazy_face:

<!DOCTYPE html>
<html>
    <head>
        <title>Dasmoto's Arts & Crafts</title>
        <link href="./Resorces/css/index.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <header>
            <h1 class="title">Dasmoto's Arts & Crafts</h1>
        </header>
        <main>
            <h2 class="brushes">Brushes</h2>
            <h6></h6>
            <h4 id="section">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. <span class="price">Starting at $3.00 / brush.</span></p>
            <h6></h6>
            <h2 class="frames">Frames</h2>
            <h6></h6>
            <h4 id="section">Art Frames</h4>
            <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="price">Starting at $2.00 / frame.</span></p>
            <h6></h6>
            <h2 class="paint">Paint</h2>
            <h6></h6>
            <h4 id="section">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. <span class="price">Starting at $5.00 / tube.</span></p>
            <h6></h6>
        </main>
        <footer>
            <h3>Ryan Tomich</h3>
        </footer>
    </body>
</html>
.title {
    text-align: center;
    font-weight: 300;
    padding-bottom: 20px;
    border-bottom: 5px solid white;
    font-size: 50px;
    color: white;
    font-size: 60px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin-block-start: 0;
    margin-block-end: 20px;
}

.brushes {
    background-image: url("file:///F:/Ryan_Tomich/Projects/Dasmoto's Arts & Crafts/Resorces/Images/hacksaw.webp");

}

.brushes,
.frames,
.paint {
    text-align: left;
    font-family: Geneva, Tahoma, sans-serif;
    border: rgb(255, 255, 255) solid;
    border-width: 6px;
    font-size: 32px;
    margin-left: 20px;
    color: white;
    padding-left: 5px;
    background-size: cover;
    height: 500px;
    width: 500px;
    margin: 0 auto;
}
    
.frames {
    background-image: url("file:///F:/Ryan_Tomich/Projects/Dasmoto's Arts & Crafts/Resorces/Images/frames.webp");
}

.paint {
    background-image: url("file:///F:/Ryan_Tomich/Projects/Dasmoto's Arts & Crafts/Resorces/Images/finnish.webp");
}

body {
    background-image: url("file:///F:/Ryan_Tomich/Projects/Dasmoto's Arts & Crafts/Resorces/Images/pattern.webp");
}

p {
    display: block;
    padding: 10px;
    position: relative;
    top: 80%;
    width: 60%;
    background-color: rgb(255, 255, 255);
    margin-left: 40px;
    font-size: 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: rgb(0, 0, 0);
    opacity: 0.7;
    text-align: center;
    margin: 0 auto;
}

.price {
    color: lime;
}

#section {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    text-align: center;
}

h6 {
    border: white solid 2px;
    margin-left: 40px;
}

h3 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
    text-align: right;
}

I just finally realized that i wasn’t supposed to do whatever, that i was supposed to copy the picture i was given, oh well rookie mistake :flushed: :upside_down_face: