Toaster Uprising!

Okay, this is a next-level challenge. You will need to use everything we've discussed so far, and you'll need to think through some of the tricky bits.

Try to do this without looking at the code, but feel free to look and how I've done it by "inspecting element" if you find that you've gotten stuck.

If you haven't already started to use the inspect element tool, I recommend it. Look here for details on how to use the built-in browser developer tools.

Recreate this look

Images you will need

Feel free to use one of the layouts on the resources page as your starting point, too, if you want. (Or you can build it from scratch for extra practice.)

Creating a rollover effect with CSS

This is a bit tricky, but kind of elegant when you look at it. Essentially you create a div with an ID that is exactly the same size as the robot image (141px width/150px height). Put the regular image (without the orange bg) in the background of that ID:

#logo {}

Then create an ID with a hover effect. In this special ID, you'll put the rollover image (with the orange outline):

#logo:hover {}

(Obviously, you'll have to include all the properties and values.)

Then in the HTML, include an image in the div. (That's what the transparent image file (toaster-zero.png) is for. This way you can see the background images underneath, and you can still link the logo to the home page. The HTML looks like this:

<div id="logo">
<a href="#home">
<img src="images/toaster-zero.png" width="141px"
height="150px" alt="toaster uprising industries logo">
</a>
</div>

Other tricks

There is some crazy stuff happening in the sidebar, right?

There are two new declarations in there that you'll need to use.

border-radius creates rounded edges. You can either round all the edges, or choose to round just some and not others. All the ways of doing so can be found on the W3C Schools here.

You'll also note, if you start inspecting the elements, that there is a new declaration:

display:block;

This forces the browser to treat an inline element as a block element. That's how you can give a width value to a link!