Header Design & Carousel Base + About page

[bbland1]

Description

Moving the navigation up to the top position and adding our design to the links, header and the sign out button. It should change to a hamburger on smaller screens and still work to navigate through the app. Added the sigma design to the about page and got the skeleton of the carousel we will need the pictures before it can be completed.

Related Issue

Closes #53 , #54 , #42

Acceptance Criteria

• Get the navigation/header styled based on design
• Make sure still works as it did
• Get the About page to look like design
• Create a base Carousel that needs images when design is done

Type of Changes

	Type
✓	💄 UI Updates
✓	✨ Enhancements

Updates

Before

After

Testing Steps / QA Criteria

• Click the preview link in the PR
• Make sure all the buttons of the nav bar at the top still take you to the spots that are needed
• Open the dev tools and test a phone between 430px - 412px media points should have the hamburger menu
• make sure in mobile view can still navigate

[github-actions]

Visit the preview URL for this PR (updated for commit a14d5a9):

https://tcl-77-smart-shopping-list--pr64-bb-header-design-599hqdog.web.app

_{(expires Thu, 24 Oct 2024 22:03:28 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: b77df24030dca7d8b6561cb24957d2273c5e9d72}

[bbland1]

The carousel is a skeleton with a sample picture once we get the designing finished screen shots can be taken and it can be finished but as a base it is ready.

[eternalmaha]

These changes look incredible!!! So much work and passion went into this. What does the whole team think about having the carousel captions displayed to the left or right of the carousel image? It'd be easier to visually see and follow the directions with the image...I think. I know the carousel is a work in progress still, and subject to a lot more changes as we go! :)

Also! I like that you're using the word skeleton now hahaha!!!

[RossaMania]

I LOVE this! I was playing with various cell phone views and I did notice the Create List was chopped off. Theoretically though, users should be able to turn phone sideways and it should work okay? "?" in there because my Inspect mode in Chrome isn't letting me view pages as if a device is turned sideways anymore. Great work though!

[bbland1]

@RossaMania your catch help me realized I put the wrong preview link in the tests but also made me double check what is looked like on my phone 🤦🏽‍♀️😂

The button maybe needs to be adjusted but it should fit on the screen and change. I'm not near a computer to check but I will!

[RossaMania]

Very cool! I love the use of classes! Actually using svg files for the GitHub logo and LinkedIn logos are a nice touch!