Your good friend has tried to make a website for a sushi restaurant, but they ended up making a complete mess of it 😣 .

Open the diner.html file and give it a look in the preview--it's totally unusable. Let's add some style that can make it easy to view and use.

Be sure to use your references! For each design task, you will need to find the right property and use it correctly!

This is what your Menu should look like (feel free to change colors or add more!). Read on below if you need step-by-step help!

For starters, the images are way too large and are preventing us from seeing any of the content.

• Set the max-width of all the image elements to something much more manageable, like 400px.

Phew, much better. Even with the images sized down, however, it's hard to see where all the elements being and end.

• Just for now, give everything a small red border using the "universal selector"

Ok, now we can see where all the elements start and end, which is nice to know as we experiment with the css. Given that this is something we don't want in our final product, we can delete it or just 'comment it out' by hitting Ctrl / on that line of CSS.

Let's make our site more beautiful with a little leg work.

• Give every div element a solid black border (you can get rid of this later)
• Set the background-color of the body.
• Round off the corners of the images using the border-radius property
• The descriptions can run on too long. Give every element with the "description" class a width value that keeps them about as wide as the images.
• It's hard to tell how things are arranged on the page the way the owner wants them to be: give every member of the "group" class a background-color and a border
• Center all headings and images on the page using text-align in the "group" class
• The "group" class members still feel a little stuffy: give them a few pixels of padding to separate their content from their borders and a nice margin of 20px to give them some elbow room from one another. (We'll learn more about margin and padding later on.)

Did you know that elements can have multiple class names? In line 18, for example, you will see a div that has a class attribute of "group featured", and because class names can't have spaces, this element has the group class, as well as the the featured class.:

<div class="group featured">

• Give elements that have BOTH the group class and the featured class a specially colored background hint

Stop and notice that at this point, there are two different CSS selectors that are telling the featured div to have a different colored background color. Since the one with multiple class names is more specific, however, its styles will override, or 'cascade' over the selector with just .group {...}

So far, we've made some good changes, but the font is still UGLY.

• Select all the h1 AND h3 tags with one selector and change the font-family to "Helvetica".

Ok, 'Helvetica' is a little better, but it's still not great.

• Go to Google Fonts
• Add a font by clicking the + symbol
• follow the directions on the tab to add the font to your page

• Make the li elements in the nav have display: inline-block; property, a special background-color, border-radius, padding, and margin-left
• Make the a elements within any li element have a special color, font-weight, and no text-decoration
• Give any element with the class "item-container" that is inside a group a width of 40% and set the display to inline-block