# Exercise

• The goal of this exercise is to create a website to order food from a pop-up snackbar
• Start from html-css-exercise.zip, which contains two basic, unstyled HTML files (index.html and order.html) and three images (pizza.jpg, salad.jpg, sandwich.jpg) in the folder images

• This is what the solution should look like:

• The exercise is divided in 3 parts. Each part requires the knowledge of specific HTML/CSS topics, as stated in the prerequisites remarks

# Part 1 - Preparation

# Favicon

• Create a folder icons
• Download the following SVG and use it to create all the favicons using RealFaviconGenerator (opens new window)
  
  • The icons must be placed in the icons folder (make sure to apply the correct path options BEFORE generating the icons)!
• Add the generated icon code to (the head section in) both pages index.html and order.html

# Google Fonts

• Create a new CSS file style.css (in a subfolder css) and link it to both HTML pages
• Import the 'Fira Sans' (styles: 'Regular 400' and 'Bold 700') and 'Rock Salt' Google fonts (opens new window)
  • Apply 'Fira Sans' to the body, while 'Rock Salt' is used for the main headings h1

# Font Awesome icons

• Import a Font Awesome 6 CDN link in style.css
• Add the fa-copyright icon in front of 'Expect MORE food' in the footer (of both HTML files)
• Replace the O in 'Expect MORE food' by the fa-utensils icon in the first paragraph and in the footer (of both HTML files)

# Part 2 - Adding and styling content

# Both pages

• Copy the necessary Bootstrap CDN links (CSS and Javascript!) to both HTML files
  • Be sure to link the Bootstrap CSS BEFORE your own style sheet style.css
• Give the body a secondary background color
• Put all the content (nav, main and footer elements) in a container with
  • light background color
  • no horizontal padding
  • a minimum height of 100vh
  • a column-based flex display

# Navigation

• Change the nav into a responsive navbar with dark background and light text
  • The navbar content collapses behind a hamburger icon (on small screens) and expands on md and larger screens
  • The navbar-brand at the left of the navbar contains the icon fa-utensils in color primary
  • Add some horizontal padding
• Make sure that the active class is added to the link that corresponds to the current page!

# Footer

• Give the footer a dark background and light text color
• Center the text (horizontally and vertically) in the footer and add some padding/margin to te elements
• Change the color of the fa-utensils icon to primary

# main element

• Add some horizontal padding to the main element, which should fill the remaining space in the flex container (resulting in a footer that sticks to the bottom of the page)
• The main heading h1 should be centered, has some bottom padding and color primary

# index.html

• Use Bootstrap cards to organize the information of the three lunch snacks
  • card-img-top for the image
  • card-body
    • card-title for h5
      • The price should be included in a badge with primary background color, which should be right-aligned
        (Tip: make the h5 a flex container)
    • snack description in card-text
• On small devices, the cards should take the full width of the container. For md (and larger) screens, the cards are placed besides each other.

# order.html

• Complete the form
  • Use the post method and submit the form to https://it-fact.be/form.php
  • Floating label and input (text) for 'Name', required
  • Floating label and input (email) for 'Email', required
  • Floating label and input (tel) for 'Phone', required, pattern for Belgian (landline and mobile) numbers
  • Floating label and dropdown list for 'Food' with values 'Pizza (€ 7.95)', 'Sandwich (€ 3.95)' and 'Salad (€ 5.95)'
  • label 'Payment'
    • labels and radio buttons for 'Bank card' and 'Student bill'
  • two buttons placed besides each other, with some extra margin above/below them
    • button in primary color to submit the form
    • button with secondary outline that clears the values (back to default values)
• Use the information on the following screenshot to determine the name attributes you should use:

• The form should look different depending on the screen size

# Part 3 - The finishing touch

• Use a general sibling selector to give all paragraphs (preceded by and on the same level as a h1) a blue-ish
  (rgb(50, 110, 160)) text color

• Use a pseudo-class selector to give the options (in the dropdown list) a "striped" look and feel using the color
  rgba(50, 110, 160, 0.25)
  
• Use a pseudo-class selector to give the invalid input and select fields a red-ish (rgba(200, 0, 0, 0.15)) background
  Use a pseudo-class selector to give the valid input and select fields a green-ish (rgba(0, 200, 0, 0.15)) background
  
• Use a pseudo-class selector to give the links (in the navbar) a primary (= #007bff) background with 0.25rem radius
  • The navbar-brand link and other links on the pages should not be affected!
    
• Use an attribute selector to select all the fa-utensils icon and add 0.5rem left and right margin to them
  Before

  After

  

  

• Use an attribute selector combined with a psuedo-class selector to underline the first letter of all labels with a for attribute, and make these letters bold and underline