[7] Project: Dasmoto's Arts & Crafts


#1

An overseas art store has contacted you to design a website for the items they sell. They've provided you with all of the documents needed for you to start. Showcase your HTML and CSS skills by creating a website for them.


#2

(Dasmoto's Arts and Crafts: Code for review)





Dasmoto's Arts & Crafts

<div>
  <h1 class="header">Dasmoto's Arts & Crafts</h1>
</div>

<div id="brushes">
  <h2>Brushes</h2>
</div>

   <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/hacksaw.jpeg"/>

<div>
  <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="hacksaw"> Starting at $3.00 / brush.</span></p>
</div>

<div id="frames">
  <h2>Frames</h2>
</div>

  <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/frames.jpeg"/>

<div>
<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="art">Starting at $2.00 / frame.</span></p>
</div>

<div id="paint">
  <h2>Paint</h2>
</div>
  <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/finnish.jpeg"/>

<div>
  <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="clean">Starting at $5.00 / tube.</span></p>
</div>


CSS: code for review (main.css)
html{
font-family: Helvetica;
}
.header{
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
background-image: url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg);
opacity: 1;
background-size: auto;

}
h3{
font-weight: bold;
}

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;
}

.hacksaw{
font-family: Helvetica;
font-weight: bold;
color: blue;
}

.art{
font-family: Helvetica;
font-weight: bold;
color: blue;
}

.clean{
font-family: Helvetica;
font-weight: bold;
color: blue;
}


#3

Hi, Check out my (super basic lol) take on this here,


#4

When I try use the code above I get problems with applying different background-colors to the code. It either applies the code to every h2 element or if I use an id or class it doesn’t apply the css code.

Any help will be appreciated.


#5

I am having trouble with applying background-color to specified elements. It either applies to all h2 elements or if I use a specific id it doesn’t work .

I copied and pasted your supplied code above and still not having any success. I am using ATOM on a Mac.

The code below is my current attempt.


#6

I’m on “The Box Model” of the CSS course, this project popped up, I started working on it, now I’m unable to find where the Dasmoto Art’s & Crafts project can be found within the courses. Did I somehow jump ahead to this?


#7

Hey everyone,
I am having trouble connecting the CSS to the HTML, they are in the same file on my computer (see image) and the code is :

<html>
  <head>
    <title>Dasmoto</title>
     <link href="style.css" type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <div class='header'>
      <p> Dasmoto Arts and craft</p>
      </div>
    <h1>Brushes</h1>
  </body>
</html>

CSS

.header {
  font-family: helvetica;
  font-size: 100px;
  font-weight: bold;
  color: khaki;
  text-align: center;
  background-image:url("img/pattern.jpeg");
  }

I can’t find what I’m doing wrong, tried a bunch of paths options but everytime I open the html on my browser it’s without formating…

Thanks!

18