Learn2BuildApps

Project: Luigi's Pizzeria - CSS & Requirements

After learning CSS, now we are ready to enhance our project with some nice styling.

Here are the styling requirements that we will be adding to the project:

• Each page will have a navigation bar with links to each of the other pages.
• The navigation bar will be responsive:
  • Screens smaller than 768px will display the links vertically.
  • Screens 768px or larger will display the links horizontally.
  • The links will start off orange but when hovered over, the links should turn black.
• The navigation bar will have a light grey background.
• The font for the text on all the pages will be something different from the default font, perhaps something "Gothic".
• The copyright on each page will have a dark grey background and the text color will be white and also centered at the bottom of the page.
• The main content of the homepage will be centered in the middle of the page.
• The homepage will have a background image for the main content that gives a parallax effect.
• The "Our Pizzas" page will have the pizza information inside separate boxes in the main content area.
• The boxes will be responsive:
  • Screens smaller than 768px will show each of the boxes stacked one on top of the other.
  • Screens that are 768px or larger but smaller than 1170px will show 2 boxes next to each other with the third one on the next row.
  • Screens 768px or larger will show the three boxes next to each other horizontally.
• The "Prices" page will show the table of pizza prices in the center of the main content area with a background image like the homepage.
• The price table will have a white border.
• The th text of the table will be aligned with the prices and toppings.
• The "Contact" page will center the restaurant location and feedback form in the center of the main content area.
• The "submit" button will be orange and slightly larger.

If you want to test your skills, feel free to try and the project with the CSS you learned in the previous sections before following the instructions in the next sections. In software development, there is almost always many different ways to build something so your choice of styles and the results may end up looking different from what you see in the instructions. This is perfectly fine! CSS is much more of an art than science.