Header for Desktop Device

[Alexandrbig1]

Description: The desktop version of the header should include the company logo, a navigation menu, and a list of links to the company’s social media profiles.

Requirements:

1. Logo:

   • Place the company logo in the header, positioned on the left side.

2. Navigation Menu:

   • Implement the navigation menu to the right of the logo, displaying the main sections of the website (e.g., "Home," "About," "Best pumpkins").
   • Ensure the navigation menu is fully responsive and accessible on larger screens.

3. Social Media Links:

   • The social media links should be implemented as a list (<ul>) where each item contains an <a> tag.
   • Each link should open the corresponding social media platform in a new tab.
   • Use SVG format for the social media icons, ensuring they are visually appealing and consistent in size and style.
   • Position the social media icons on the middles of the header, aligned with the navigation menu.

Additional Considerations:

• Ensure the header is fixed at the top of the page on scroll (sticky header).
• The design should be clean, with sufficient spacing between the logo, navigation menu, and social media links for an uncluttered look.
• Test the header across multiple desktop resolutions to ensure proper responsiveness and layout.

Social Links:

• GitHub: https://github.com/OpenCodeChicago
• YouTube: https://www.youtube.com/@AlexSmaginDev
• LinkedIn: https://www.linkedin.com/company/open-code-chicago
• X - Twitter: https://x.com/alexsmagin29
• Facebook: https://www.facebook.com/profile.php?id=61565627819350

[shubhamsharma9199]

@Alexandrbig1 Can you assign this work to me and label it as 'Hacktoberfest Accepted

[Alexandrbig1]

Hi, yeah, after today's meeting(at 12pm CST) i'll manage it

[Alexandrbig1]

@tanvi4248 this is your new task 🚀

[shubhamsharma9199]

@Alexandrbig1 Here is the final result of the website design. The layout is complete, except for the missing company logo. If you have any suggestions or want to make any changes, feel free to let me know!"

Let me know if you need further adjustments!

[Alexandrbig1]

@shubhamsharma9199 you probably don't understand how to contribute to our project. Please, read carefully documentation, as well you can watch video on YouTube, to understand what each of developer should do. Thank you, if you'll still have any question, please ask me in our open Discussions for this project. Thank you

[tanvi4248]

I'm doing this task or not ?

[Alexandrbig1]

@tanvi4248 yes, you assigned, read my comment before ☺️

[Alexandrbig1]

@tanvi4248 how is your progress? there still minor issues need to fix in header for desktop device.

[tanvi4248]

Can you mention issues so I can fix it.

[Alexandrbig1]

@tanvi4248 you can open design and our website, and see the difference. At least what I'm see right away, even without checking it, that the color for links, they all read. also the social icons is not in right place...also hover for social icons is not with transition...etc, Please test it as it's your task to be sure that is looks and works well.Thank you

[tanvi4248]

hello @Alexandrbig1 somebody changed my desktop header css. there is some css which is i didnt change

[tanvi4248]

https://github.com/OpenCodeChicago/Midwest-Pumpkins/pull/119/files#diff-1785483a33076832eb40cc3dc29b03cca0592cd69e9e03f6da7c36ba5e308a2e Here is the link somebody changed header css for desktop

[Alexandrbig1]

@tanvi4248 great work Tanvi!