Create the Restaurant website. Create home, menu, and contact us pages. The three pages should have the same header and footer. The header contains text or image as a logo, navigation bar and if you want to have a background image please choose it to look good. The footer should have a contact information, location and the copyright statement. The home page contains images, carousel and some description about the restaurant. In the home page add Greeting/welcome statement that change dynamically each 10 second. The menu page should contain cards of the meals.The card contains image, description, the price of the meal and button to buy or choose this meal. The contact us page contains the restaurant contact information and a contact form (I expect from you a nice and professional form). Apply these changes using JS when submitted the form: 1- Apply the validation for each input (make sure all inputs are required). 2- Change all inputs text to uppercase (onchange). 3- Change all inputs text color (onchange). 4- Create new paragraph element at the bottom of the form to notify the user that the form has been submitted successfully. Feel free to add your creativity. Please do some search before you start and visit some restaurant websites. CSS: -Don’t forget to do the reset CSS. -Use components from bootstrap.
This question is a completion for previous question.
Create the Restaurant website. Create home, menu, and contact us pages. The three pages should have the same header and footer.
The header contains text or image as a logo, navigation bar and if you want to have a background image please choose it to look good.
The footer should have a contact information, location and the copyright statement.
The home page contains images, carousel and some description about the restaurant.
In the home page add Greeting/welcome statement that change dynamically each 10 second.
The menu page should contain cards of the meals.The card contains image, description, the price of the meal and button to buy or choose this meal.
The contact us page contains the restaurant contact information and a contact form (I expect from you a nice and professional form).
Apply these changes using JS when submitted the form:
1- Apply the validation for each input (make sure all inputs are required).
2- Change all inputs text to uppercase (onchange).
3- Change all inputs text color (onchange).
4- Create new paragraph element at the bottom of the form to notify the user that the form has been submitted successfully.
Feel free to add your creativity.
Please do some search before you start and visit some restaurant websites.
CSS:
-Don’t forget to do the reset CSS.
-Use components from bootstrap.
JS:
-If the user hover on price the font-size of price will increase.
-If the user clicks on the buy/choose button, change the image of the meal to this image/ any related image.
https://media.istockphoto.com/
Proposed methodologies:
Using HTML, CSS, bootstrap and JavaScript.
Links for you:
https://unsplash.com/
https://www.freepik.com/
https://www.pinterest.com/
https://www.lipsum.com/
https://fonts.google.com/ https://www.w3schools.com/colors/colors_picker.asp
https://css-tricks.com/ https://coolors.co/
Step by step
Solved in 4 steps with 5 images
