Just finished this project. I did it very fast and maybe didn’t break things up as much as I could have with selectors, sections, div etc. but the project seemed so simple that it didn’t seem too necessary. Also didn’t need to do much alignment at all with the sections as everything seemed to fall in place and look like the desired result.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashmoto's Arts & Crafts</title>
<link rel="stylesheet" href="./resources/css/index.css" type="
text/css">
</head>
<body>
<h1 class="dasmoto-banner">Dasmoto's Arts & Crafts</h1>
<div class="item">
<!-- Brush section -->
<h2 id="brushes">Brushes</h2>
<img src="https://content.codecademy.com/courses/freelance-1/unit-2/hacksaw.jpeg?_gl=1*1lxrg8m*_ga*MTYzOTk0NDQ3OS4xNjUxNTE5ODky*_ga_3LRZM6TM9L*MTY1MTUzMDA3MS4zLjEuMTY1MTUzMDM5OS41OA.."
alt="Hacksaw brushes">
<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>Starting at $3.00 / brush.</span></p>
<!-- Frame section -->
<h2 id="frames">Frames</h2>
<img src="https://content.codecademy.com/courses/freelance-1/unit-2/frames.jpeg?_gl=1*ed9l6x*_ga*MTYzOTk0NDQ3OS4xNjUxNTE5ODky*_ga_3LRZM6TM9L*MTY1MTUzMDA3MS4zLjEuMTY1MTUzMDM5OS41OA.."
alt="Picture 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.<span>Starting at $2.00 / frame.</span></p>
<!-- Paint section -->
<h2 id="paint">Paint</h2>
<img src="https://content.codecademy.com/courses/freelance-1/unit-2/finnish.jpeg?_gl=1*109jtfv*_ga*MTYzOTk0NDQ3OS4xNjUxNTE5ODky*_ga_3LRZM6TM9L*MTY1MTUzMDA3MS4zLjEuMTY1MTUzMDM5OS41OA.."
alt="Paint supplies">
<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>Starting at
$5.00 /
tube.</span></p>
</div>
</body>
</html>
CSS
body {
min-width: 720px;
max-width: 1400px;
}
.dasmoto-banner {
font-family: helvetica, sans-serif;
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*1vopv9l*_ga*MTYzOTk0NDQ3OS4xNjUxNTE5ODky*_ga_3LRZM6TM9L*MTY1MTUyNTE3MS4yLjEuMTY1MTUyNTk2MC41OA..");
}
h2 {
font-size: 32;
font-weight: bold;
color: white;
}
#brushes {
background-color: mediumspringgreen;
}
#frames {
background-color: lightcoral;
}
#paint {
background-color: skyblue;
}
span {
font-weight: bold;
color: blue;
}
span:hover {
cursor: pointer;
border: none;
box-shadow: 2px 2px 5px #888888;
}