Dasmoto: Background image and price

Language Help HTML
1

Hi there,

I’ve tried everything to get the background image to work, as well as the price class, but I just can’t figure it out.

Can anyone help?

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

h1 {
background-image: url("./images/pattern.jpeg");
font-size: 100px;
color: khaki;
text-align: center;
}

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

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

#brush {
background-color: mediumspringgreen;
}

#frame {
background-color: lightcoral;
}

#paint {
background-color: skyblue;
}

Dasmoto's Arts and Crafts

Brushes

Hacksaw Brushes

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. Starting at $3.00 / brush.

Frames

Art Frames (assorted)

Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. Starting at $2.00 / frame.

Paint

Clean Finnish Paint

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. Starting at $5.00 / tube.

Thank you!

1 Like
2

Hello!

It looks like the forums are trying to render your code. To avoid this please update your post to use this: How do I format code in my posts? formatting and make sure to use that in future.

Happy coding! :slight_smile:

2 Likes
3 
h1,
h2,
h3,
p {
    font-family: Helvetica, sans-serif;
}

h1 {
    background-image: url("./images/pattern.jpeg");
    font-size: 100px;
    color: khaki;
    text-align: center;
}


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

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

#brush {
    background-color: mediumspringgreen;
}

#frame {
    background-color: lightcoral;
}

#paint {
    background-color: skyblue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link href=".style.css" rel="stylesheet">
    <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>Dasmoto's Arts and Crafts</title>
</head>
<body>
    <h1>Dasmoto's Arts and Crafts</h1>
    <h2 id="brush">Brushes</h2>
    <h3>Hacksaw Brushes</h3>
    <img src="resources/images/hacksaw.jpeg">
    <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>
    <h2 id="frame">Frames</h2>
    <img src="resources/images/frames.jpeg">
    <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>
    <h2 id="paint">Paint</h2>
    <img src="resources/images/finnish.jpeg">
    <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>
</body>
</html>
1 Like
4

I’m following this. I took a look at your code and I’m confused as well. Your code (as far as I can tell) looks clean, unless I’m missing something.

1 Like