Navigation, Header and Title

[carolinehaoud]

Implement the credits component as specified in the Figma.

You must implement both the desktop and mobile version of the letter while staying as close to the design as possible.

Contact Muchen Guo from Product for any design concerns, and Caroline Haoud for Engineering inquiries.

Desktop

Mobile

Code pointers

In your Spectator folder, run the following commands:
run git clone https://github.com/spectatorpublishing/hoco-2023.git.
cd hoco-2023
npm install
npm start

You will be implementing the desktop and mobile version of the letter using various components that should be created within src/components
Use styled-components for styling and see the changes of your letter displayed in the home page of the site.

In a similar way, use the theme.js file to import color codes for the navigation bar background and links, as well as sizes to be used in media queries. If in doubt, ask.

Do your best to write clean code, so we can maintain these special editions for future use.

Testing

Explore that the letter works as expected in both desktop and mobile. The "~" next to the header should be shown for all sizes bigger than tablet and phones, hence shown for desktops, and the paragraphs should be indented for all tablets and phone sizes. Use Safari Responsive View, or on Google Chrome type "Command + Shift + C" on a Mac to see the responsive view. Ensure that your component works as expected on larger IPads and desktops.

Deadline

October 9th, 2023