Hi, i’m new here and this is my Off-Platform Project: Dasmoto’s Arts & Crafts project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./tools/index.css" rel="stylesheet">
<title>Dasmoto’s Arts & Crafts</title>
</head>
<body>
<header>
<H1>Dasmoto’s Arts & Crafts</H1>
</header>
<!--brush section-->
<div class="brushes">
<h2>Brushes</h2>
<img src="./tools/css/images/hacksaw.jpeg" alt="hacksaw brush">
<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 id="blue-text">Starting at $3.00 / brush</span></p>
</div>
<!--frames section-->
<div>
<h2 class="frames">Frames</h2>
<img src="./tools/css/images/frames.jpeg" alt="frames">
<h3 class="art-frames">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 id="frames">Starting at $2.00 / frame.</span></p>
</div>
<!--Paint section-->
<div>
<h2 class="paint">Paint</h2>
<img src="./tools/css/images/finnish.jpeg" alt="finnish">
<h3 class="finnish-paint">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 id="finnish-paint">Starting at $5.00 / tube.</span></p>
</div>
</body>
</html>
body{
background-color: lightcyan;
}
h1{
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
background-image: url(./css/images/pattern.jpeg);
text-align: center;
}
h2{
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
background-color: mediumspringgreen;
}
h3{
font-weight: bold;
font-family: Helvetica;
}
#blue-text{
color: blue;
font-family: Helvetica;
font-weight: bold;
}
.frames {
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
background-color: lightcoral;
}
.art-frames{
font-family: Helvetica;
}
#frames{
font-family: Helvetica;
font-weight: bold;
color: blue;
}
.paint{
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
background-color: skyblue;
}
#finnish-paint{
font-family: Helvetica;
font-weight: bold;
color: blue;
}
.finnish-paint{
font-family: Helvetica;
font-weight: bold;
}
I see where you were going there. You can make your code a little shorter if you use classes for formatting the blue text. First, set up some formatting for your paragraph element.
p{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
Then you could rename all the id’s used in the span to classes. I used “blue-text” for all of them. Then make a combo selector like so.
span.blue-text {
font-weight: bold;
color: blue;
thank you!!
overall did i do good?
Looks great! And thank you. I started that project a couple of days ago and I was at a loss on where to start. Then I saw your post. It helped me get started.
<!DOCTYPE html>
<html>
<body>
<head>
<title>
Dasmoto's Arts & Crafts
</title>
<link rel="stylesheet" href="./resources/index.css" type="text/css">
</head>
<header>
<h1>Dasmoto's Arts & Crafts</h1>
</header>
<div>
<!--brush section-->
<h2 class="brushes">Brushes</h2>
<img src="./resources/hacksaw.jpeg" alt="hacksaw brush">
<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="blue-text"> Starting at $3.00 / brush.</span></p>
</div>
<div>
<!--frames section-->
<h2 class="frames">Frames</h2>
<img src="./resources/frames.jpeg" alt="art 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 class="blue-text"> Starting at $2.00 / frame.</span></p>
</div>
<!--paint section-->
<h2 class="paint">Paint</h2>
<img src="./resources/finnish.jpeg" alt="finnish">
<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="blue-text">Starting at $5.00 / tube.</span></p>
</body>
</html>
body{
background-image: url(./depositphotos_22834748-stock-illustration-seamless-geometrical-vector-pattern.jpg);
background-color: rgba(255, 47, 252, 0.771);
background-blend-mode: overlay;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
background-image: url(./pattern.jpeg);
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
color: white;
background-color: mediumspringgreen;
text-align: left;
}
h3 {
text-align: left;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
p{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: white;
}
.frames {
background-color: lightcoral;
}
.paint{
background-color: skyblue;
}
span.blue-text {
font-weight: bold;
color: blue;
}
There’s mine if you’d like to look at it.
looks great!
i’m glad my code helped to get you started
Hey,
Saw you chatting about this code which really helped me. Don’t suppose one of you can take a look at my effort and see if there is anything you would change/improve? Thanks!
<!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 and Crafts</title>
<link href="./resources/css/index.css" type="text/css" rel="stylesheet" />
</head>
<body>
<Main>
<!--Heading Section-->
<div class="background-picture">
<h1>Dasmoto's Arts and Crafts</h1>
<!--Brush Section-->
<div class="brushes"><h2>Brushes</h2></div>
<img src="https://content.codecademy.com/courses/freelance-1/unit-2/hacksaw.jpeg">
<h3>Hackshaw 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 id="blue-text"> Starting at $3.00 / brush. </span></p>
<!--Frames Section-->
<div class="frames"><h2>Frames</h2></div>
<img src="https://content.codecademy.com/courses/freelance-1/unit-2/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 id="blue-text"> Starting at $2.00 / frame. </span></p>
<!--Paint Section-->
<div class="paint"> <h2>Paint</h2></div>
<img src="https://content.codecademy.com/courses/freelance-1/unit-2/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 id="blue-text"> Starting at $5.00 / tube. </span></p>
</Main>
</body>
</html>
h1 {
font-family: helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}
h3 {
font-family: helvetica;
font-weight: bold;
}
.background-picture {
height: 120px;
background-image: url("https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg");
background-size: cover;
}
.brushes {
font-family: helvetica;
font-size: 32px;
font-weight: bold;
color: white;
background-color: mediumspringgreen;
}
.frames {
font-family: helvetica;
font-size: 32px;
font-weight: bold;
color: white;
background-color: lightcoral;
}
.paint {
font-family: helvetica;
font-size: 32px;
font-weight: bold;
color: white;
background-color: skyblue;
}
#blue-text {
font-family: Helvetica;
font-weight: bold;
color: blue;
}type or paste code here
Hello, Eric here, i am also very new at coding. Can you guys take a look at my take on the Dasmoto’s Arts & Crafts Project. What do you guys think of it?
