Off-Platform Project: Dasmoto's Arts & Crafts

Web Development Full-Stack
1

Hi there, if you stuck on this project, feel free to check my code for some clues for yourself. Also if you use live server extension in vsc, it can work incorrect with background-image css declaration, so try to open it just via browser :cowboy_hat_face:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Dasmoto's Arts & Crafts</title>
    <link rel="stylesheet" type="text/css" href="./resourses/css/index.css">
  </head>

  <body>
    <h1>Dasmoto's Arts & Crafts</h1>
    <h2 class="brushes">Brushes</h2>
    <article>
      <img src="./resourses/img/hacksaw.jpeg" alt="Hacksaw Brushes">
      <h3>Hacksaw Brushes</h3>
      <p>Made out of highest quality oak, Hacksaw brushes are known for theair weight and ability to hold paint in large amounts. Available in different sizes. <span>Starting at 3.00$ / brush</span>.</p>
    </article>
    <h2 class="frames">Frames</h2>
    <article>
      <img src="./resourses/img/frames.jpeg" alt="Different 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 yout needs. <span>Starting at 2.00$ / frame</span>.</p>
    </article>
    <h2 class="paint">Paint</h2>
    <article>
      <img src="./resourses/img/finnish.jpeg" alt="Paint tubes">
      <h3>Clean Finnish Paint</h3>
      <p>Imported paint from Finland. Over 256 colors available in-store, varying in quality (1 oz. to 8 oz.). Clean Finnish microbinds to canvas, increasing the finish and longevity of any artwork. <span>Starting at 5.00$ / tube</span>.</p>
    </article>
  </body>
</html>

CSS

* {
  font-family: Helvetica;
}

h1,
h2,
span {
  font-weight: bold;
}

h1 {
  font-size: 100px;
  color: khaki;
  text-align: center;
  background-image: url(resourses/img/pattern.jpeg); /* your path to image */
}

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

.brushes {
  background-color: mediumspringgreen;
}

.frames {
  background-color: lightcoral;
}

.paint {
  background-color: skyblue;
}

span {
  color: blue;
}