Here is a link to my original Project Plan: https://docs.google.com/document/d/1IzMmbLUcO6dzX7WXCV5RGmTJzn6KM5nCfzrbPloEikw/edit?usp=sharing I achieved all of the original features plus a few more.
I created a fictional restaurant website named "Up Dawgs". The name is a word-play on a popular "dad joke". I started the project early but while trial and error-ing, I ended up with a layout I did not like and code that was repetitive, contradictory, and hard to read. So I scrapped it and re-started with mobile-first design in mind. I used chat gpt to create the text for the "about me" section and the names of the menu items. The logo was designed by a friend who is an illustrator. I added the "Up Dawgs" 3D text and the backdrop using online tools. The page opens to a "hero" section that is only visible on large tablet and desktop layouts.
Features:
-CSS was used to make the site responsive to both mobile and desktop layouts.
-Any elements that are clickable grow in size and change the font color to a mustard-yellow. CSS :hover selector was used for this.
-Javascript was used to make resposive nav elements on both the header and the side-nav (side-nav is only visisble on mobile layout). When you click on "home", the page auto scrolls to the top of the page. When you click on "menu", the page auto scrolls to the menu section. The auto-scroll stops short of the menu section on larger displays because of the overall size of the site.
-The tab-style menu is completely responsive and was achieved using Javascript as well. The active tab displays a black background so the user knows which tab they are currently viewing. The menu sections fade in and out using keyframes in CSS to style a .fadeIn class selector.