Submitted almost 2 years ago

Huddle-Landing-Page

Reza Jaber• 200

@rezajaber

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Huddle landing page with a single introductory section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hey! I am Reza 🙂 I just recently started to learn web-development and would like to get every little help out there. So if you have the time, feel free to look over my project/projects and give me some advice to get better as fast as possible.

Project #6: Some questions for this "Huddle-Landing" project:

How can I color-overlay my icon-images?
Is my "Index.html" well structured?
Did I center everything right, or was there a easier way?
What did I do completely wrong, and just have luck within this project?
What would you do different?

I appreciate it✌️

Community feedback

Vanza Setia• 27,795

@vanzasetia

Posted almost 2 years ago

Hi, Reza! 👋

First, I recommend removing JavaScript files from the repository. This website does not use JavaScript and also those files make me feel confused. Also, remove the starter.html file since it is not used.

For the social media icons hover effect, I recommend using inline SVG instead of <img>. Then, you can target the path and set the fill value to currentColor. Doing that will make the icon inherit the color of the anchor tag. As a result, you can do a:hover and then change the color value to change the color of the icon.

Make all the background images as the background image of the <body>. Those are decorative images so it is not a problem to make them as background images.

Also, I only expect one media query to switch the mobile layout to the desktop layout. I recommend simplifying the styling. Make the default styling the mobile layout. Do not wrap the styling with a media query. Then, use only a min-width media query to style the desktop layout.

I hope this helps. Happy coding!

Marked as helpful

Reza Jaber• 200

@rezajaber

Posted almost 2 years ago

@vanzasetia of course, aou are right. Thank you for your useful tips :)

Vanza Setia• 27,795

@vanzasetia

Posted almost 2 years ago

@rezajaber No problem! I am glad I could help.

Amal Karim ✅• 1,290

@amalkarim

Posted almost 2 years ago

To color overlay icon-images, you could use CSS filter. filter changes <img> color based on its various properties. For example, try this:

.container-footer img:hover {
    filter: invert(1);
}

Read more about CSS filter in this css-tricks article.

To see whether your index.html well structured, you could check Accessibility report tab and HTML validation report tab in this page. They will evaluate your page and give necessary recommendations about your solution page structure.

Hope this helps

Reza Jaber• 200

@rezajaber

Posted almost 2 years ago

@amalkarim thank you for the tips, espacially the one with the html-structure :) I just skipped it :)

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord