Project Hydrogen

Requirements:

Your final project will involve creating an online store front.
Your website should have a menu that links to the following pages/sections (containers)

NOTE: please use Bootstrap or the equivalent to do the project. Your final product should be mobile friendly.

The main page

• The Home page should display the store overview.
• This should contain the name of the business with a good description.
• This page should also contain the current date and time.

People page

• This should list all the members of the team.
• Clicking on each name should lead to that person's web page.

Products page

• The Products page should show your prooducts including information such as 'Product', description, 'Price' and 'Details'.
• List of 5 products
• Thumbnail images for each product - clicking on the thumbnail leads to a larger image
• Product descriptions and price

Feedback page

• Here you will elicit feedback from users about your products. You should alert the users if they enter invalid values. Each feedback should be specific to a particular product. The feedback will be written into a database using PHP.
• Users should be able to read the feedback from other users about each product. You will query the database in order to display this feedback.
• A starter form will be given to you in a file called FeedbackLogin.html.. Modify the form given to you to make it look nicer.
• Add one more field in FeedbackLogin.html to get the user's age. The user need to be 18 or older to submit the form. If the user enters an age that is less than 18, alert the user about that. The age is not stored in the database.
• The form FeedbackLogin.htmlcalls a PHP file called FeedbackSaveAndDisplay.php. Please change the look and feel of the table that presents the results to the user.
• Contact information
• Some fake contact information - snail mail address, as well as an email address.

Your pages should use:

• HTML - please use either Notepad or Textpad to create these pages.
• CSS
• Use one external style sheet that describes the rules for H1, H2, H3, background, and links.
• Additional CSS rules can be added to individual pages. Make sure the rules are not in conflict with one another. [If there are conflicts, that may affect the consistent look of your web site]
• Javascript

1. To display current date and time
2. ...(more details to be provided later)

• PHP to connect to the database for the feedback form - You will be shown how to connect to a database using PHP. Some kind of mashup using Google Maps relevant to the website.

Your web site should look professional. Make sure you adhere to all the features described in this document. You will lose points for features not present, or features that do not work as expected.