Code Review: Dasmoto Project

Projects Off-platform Practice Projects
1

Hey All,

I wanted to see if anyone is willing to give a code review for the Dasmoto project I completed. The “solution” code I felt was rather bland, I believe this was intended since we’re still in the beginner phases of the course, but I wanted to try to spruce it up a little bit with some additional CSS elements as well as making the image Alts better for SEO.

Thanks!
Nate G

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="resources/css/style.css">
    <title>Dasmoto's Arts & Crafts - Quality Art Supplies</title>
</head>
<body>
    <header>
    <h1>Dasmoto's Arts & Crafts</h1>
    </header>
    <main>
    <section class="item">
    <h2 id="brushes">Brushes</h2> 
    <img src="resources/images/hacksaw.jpeg" alt="High-quality oak hacksaw paint brushes for artists" />
    <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="price">Starting at $3.00 / brush.</span>
    </p>
</section>
    <section class="item">
        <h2 id="frames">Frames</h2>
        <img src="resources/images/frames.jpeg" alt="Assorted art frames made from MDF, birchwood, and PDE"/>
        <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="price">Starting at $2.00 / frame. </span>
        </p>
    </section>
    <section class="item">
        <h2 id="paint">Paint</h2>
        <img src="resources/images/finnish.jpeg" alt="Clean Finnish imported paint tubes in various colors"/>
        <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="price">Starting at $5.00 / tube.</span>
        </p>
    </section>
    </main>
</body>
</html>

CSS:

h1 {
  background-image: url("../images/pattern.jpeg");
  background-size: cover;
  background-position: center;
  text-align: center;
  font-size: 100px;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
  color: Khaki;
  padding: 60px 0;
  margin-bottom: 32px;
  border-radius: 0 0 16px 16px;
}

.item h2 {
  color: rgb(255, 255, 255);
  font-size: 32px;
}

#brushes {
  background-color: MediumSpringGreen;
}

#frames {
  background-color: LightCoral;
}

#paint {
  background-color: SkyBlue;
}

.price {
  color: Blue;
  font-weight: bold;
}

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

.item {
    background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  width: 100%;
  max-width: none;      /* Remove max-width restriction */
  margin: 32px 0;       /* Remove auto to let it span full width */
  padding: 32px 24px;
  transition: box-shadow 0.2s;
  box-sizing: border-box; /* Ensures padding doesn't overflow */
}

body {
  background: #f5f7fa;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #222;
  margin: 0;
  padding: 0;
}

.item:hover {
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.946);
}

.item img {
  display: block;
  width: 80%;
  max-width: 300px;
  height: auto;
  margin: 16px auto 24px auto;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}

h2 {
  color: #2a7ae2;
  margin-top: 0;
  font-size: 1.5rem;
}

h3 {
  color: #185abc;
  margin-bottom: 8px;
}

.price {
  color: #fff;
  background: #2a7ae2;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: bold;
  margin-left: 8px;
  font-size: 1.05em;
}

p {
  line-height: 1.6;
  margin-bottom: 0;
}