Hello everyone! I just finished the “Dasmoto’s Arts & Crafts” project and would like someone to verify that I did everything correctly. I attach an image of what it should look like (the instructions), my HTML code and my CSS!
Please be good to me in case there is any correction hahaha
PS: my native language is Spanish, so chances are there are some words in that language!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dasmoto's Arts & Crafts</title>
<link rel="stylesheet" href="practica1.css">
</head>
<!-- First part -->
<body>
<h1>Dasmoto's Arts & Crafts</h1>
<div class="items">
<h2 id="brushes">Brushes</h2>
<img src="upload://ixD87y9TgTTlrZQKYFFE6Gw9SlU.jpeg" alt="Imagen de unas brochas">
<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>Starting at $3.00 / brush.</span></p>
</div>
<!-- Second part -->
<div class="items">
<h2 id="frames">Frames</h2>
<img src="upload://hnW2eaocwoRXP7h1gSAa4U1zja0.jpeg" alt="Imagen de unos cuadros">
<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>
</div>
<!-- Third part -->
<div class="items">
<h2 id="paint">Paint</h2>
<img src="upload://c6Gt4rhiQdRCDf9E5LL2CzuqjfM.jpeg" alt="Pinturas">
<h3>Art Frames (assorted)</h3>
<p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sImported 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>
</head>
</body>
</html>
<h2 id="brushes">Brushes</h2>
<img src="upload://ixD87y9TgTTlrZQKYFFE6Gw9SlU.jpeg" alt="Imagen de unas brochas">
<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>Starting at $3.00 / brush.</span></p>
</div>
<div class="items">
<h2 id="frames">Frames</h2>
<img src="upload://hnW2eaocwoRXP7h1gSAa4U1zja0.jpeg" alt="Imagen de unos cuadros">
<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>
</div>
<div class="items">
<h2 id="paint">Paint</h2>
<img src="upload://c6Gt4rhiQdRCDf9E5LL2CzuqjfM.jpeg" alt="Pinturas">
<h3>Art Frames (assorted)</h3>
<p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sImported 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>
</head>
</body>
</html
CSS:
h1 {
font-family: Arial, 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");
background-size: cover;
}
#brushes {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
color: white;
background-color: mediumspringgreen;
text-align: left;
}
h3 {
margin: 18.72px 0;
font-family: Helvetica;
font-size: 18.72px;
font-weight: 700;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 18.72px;
}
p span {
color: blue;
font-weight: 700;
font-size: 18, 72px;
}
#frames {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
color: white;
background-color: lightcoral;
text-align: left;
}
#paint {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
color: white;
background-color: skyblue;
text-align: left;
}
.
Thank you very much for such a nice message, it’s good to know that I’m on the right way.
