Skip to content
Submitted over 1 year ago

Huddle-landing-page

Gastón Federico Nahuel Gómez•370
@Morfeo1997
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with curved sections
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

It was a very large page so it was good practice, I had to think about how to place each element, however I feel the code could be improved because I didn't optimize it. By the way, I need a tip for the icons and how to change the icon color with CSS. I will listen to any suggestions.

Fue una pagina muy grande por lo que fue una buena practica, tuve que pensar como colocar cada elemento, sin embargo siento que el código puede mejorarse debido a que no lo optimize. Por cierto, necesito un consejo para los iconos y para poder cambiar el color del icono con CSS. Cualquier sugerencia sera escuchada.

Community feedback

  • Carl•855
    @CarlHummPosted over 1 year ago

    To change your logo's colour you can use an inline svg instead of an img element and style that SVG using either CSS or inline with the fill attribute.

    Here is a basic example of what I mean. In this example, I-

    1. Opened up logo.svg in new tab
    2. Inspected SVG code for logo.svg
    3. Replaced img element with copied code
    4. Removed fill: none attribute, and removed inline fill values on path elements.
    5. Added fill property for entire SVG using CSS selector (Could use class or id if you wanted)

    Here are some useful resources on using SVG.

    1. CSSTricks
    2. MDN

    Other areas for improvement could include:

    1. Adjusting background-position and size for divider elements.
    2. Centering page content and adding margins using a container or grid.
    3. Avoiding distorting images by sizing with width
    4. As the structure for grow-container, flowing-container and user-container is the same, you should group the shared styles into their own class, and add stylistic differences using a new class, id, or other identifier.
    5. Add main element for accessibility. I see you've done well to use other elements like header, nav, section and footer.
    6. Correct responsiveness on mobile. You could add a media query to adjust flex-direction to column, and remove the large margin on your paragraph as it's squishing the text too much.

    Other than these points, very good job. It is a large landing page with lots to consider. Good luck on your next project!

    Marked as helpful
    0
    Gastón Federico Nahuel Gómez•370
    @Morfeo1997Posted over 1 year ago

    @CarlHumm Thanks, it really helped me a lot

    1

Please log in to post a comment

Log in with GitHub

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