Link to website: https://jbloch100.github.io/ohmygoodfood/
Link to github repository: https://github.com/jbloch100/ohmygoodfood/
This project is being written in html and scss. The scss transcompiles into css.
This project is compatible with the latest version of firefox, google chrome and safari.
The html and css of this projet is also valid by W3C
All logos and header titles are written in shrikhand font whereas all other texts are written in Roboto font.
On this website, the users order the food in advance before going to the restaurant so that they don't have to wait for food while there.
In the index.html website, there are locations of four restaurants, each being displayed in the form of cards. When clicking on the card, the user is redirected to the menu page.
Each of the four menu pages contains their menus in groups of Entrees, Main Dish, and Desserts. They also contain at the top a restaurant logo with the name of the restaurant written to the left end of the page and a heart to the right end of the page. The name of restaurant is written in Shrikhand font and the heart is a font icon from Font Awesome website Footer is identical on all pages. When the user clicks on Contact, a link to the email address is displayed: Email Address: ohmygoodfood@gmail.com
The header is present on all pages. Each page contains the ohmygoodfood header logo at the top, with each of the four menus containing the arrow sign back to the index.html page.
When hovering over each of the main buttons, the background colors slighty lightens and the dropdown shadows become darker.
Users will be able to save their favorite menus by clicking/hovering on the heart-shaped button on the cards in the index.html. Clicking is when screen width is less than 640px and hovering is when screen width is greater than or equal to 640px.
When the user arrives on the index.html page, there is a preview of 3 seconds for a loading spinner.
When the user arrives on the menus page, each of the dishes are displayed group by group with a time lag.
Entrees with a time lag of 1 second, Main Dish with a time lag of 1.5 seconds, and Desserts with a time lag of 2 seconds.
Visitor adds the dishes they wish to have by clicking/hovering on them and causing a small tick to appear on the right side of the dish by sliding from right to left. Clicking is when screen width is less than 640px and hovering over is when screen width greater than to 640px. The animation of the tick sliding from right to left takes 0.4 seconds. The animation of the tick spinning 1 turn starts at a delay of 0.1 second and lasts 0.4 second. The animation of the cost shifting right and that of the length of the dish title decreasing starts at a delay of 0.01 second and lasts 0.3 seconds.
If the title of the dish in each menu becomes too long, the top titles wrap around whereas the bottom ones becomes trimmed with suspension points.
I made the webpage responsive to mobile, tablet, laptop and desktop versions by making the layout of the howitworks options, the cards and dishes look differently.
mobile is up until 639px, tablet is between 640px until 1023px, laptop is between 1024px and 1279px, and desktop is at least 1280px.
For mobile, each of the site looks like in mockup.
For tablet, home cards occupy 45% of screen width, and dishes on menu page occupy as well 45% of screen width.
For laptop, how it works opions occupy 30% of screen width, cards occupy 30% of screen width and menu dishes also occupy 30% of screen width.
For desktop, how it works opions occupy 30% of screen width, cards occupy 23% of screen width and menu dishes also occupy 22% of screen width.