murtajizmehdi / mock-website-1

Mock website design for restaurant. Built from scratch using HTML and CSS.

Mock Website 1: Restaurant home page / menu

Mock website design for restaurant. Built from scratch using HTML and CSS.

This is essentially a rough draft of a fully functioning web application. As of today (December 29th) I have only incorporated HTML and CSS, and I plan on implementing functionality by way of JavaScript after I have made all design refinements. The purpose of this project is to get me to be more familiar and comfortable using vanilla HTML/CSS/JS instead of relying on a framework or library (such as Tailwind, Bootstrap, React, etc.). Obviously frameworks and libraries are important and should be utilizied, but I want to make sure that I actually understand the material that these outside resources help aid with. This is a work in progress, and I will be updating this repository regularly with new features, designs, and improvements implemented each time. The final product will be an excellent addition to my portfolio and will help me to better understand the process of front-end web application development.

mock-website-1's Issues

Responsive design for pictures

When window is shrunk, pictures of the menu items should collapse and stack on each other instead of compressing themselves.
Use a media query to trigger this reaction.

Subheadings for dishes

The subheadings for the dishes look off. Maybe recalibrate them by adding some padding/margin towards the left?

Color changes

Change colors from red and yellow to black, vice blue and hot pink. Pictures will not be altered, but description text color will be changed.

Refinements

Features being worked on:
Create responsive navigation bar
Space out and marginalize content accordingly
Work on smoothing out UI
Create separate page for menu, include only specials in front page
Make buttons to "Add to Cart" with each item's respective choices being able to be adjusted

Website Logo

Modify logo so it has letters overlapping.

Alter logo position to fixed so it stays in upper left hand corner.