Skip to content
Submitted 12 months ago

11th Project - Huddle Landing Page With Curved Section Master

FrontEndHighRoller•170
@FrontEndHighRoller
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 wasn't difficult but it took some time to build it.

What I found challenging:

1. Working with SVG/icons

  • I am still practising the hover effect on SVG/icons it seems every time different.

2. HUDDLE logo in footer section -When I tried to make it smaller it simply hid part of the image

3. text "messages sent"

  • in the mobile version, they require each word in a separate line, If I do <br> I am not sure how would I make any difference in a media query. Maybe have one div with two paragraphs and on mobile do flex-direction: column, on desktop flex-direction: row;

4. aria label for social icons

  • <a href="https://www.facebook.com" target="_blank" aria-label="Facebook"> <i class="fab fa-facebook-square fa-2x" style="color: #ffffff"></i></a>

Community feedback

  • Coding Nerd•370
    @onyedikachi23Posted 12 months ago

    For the hover effects (change colour on hover) on the SVGs, you can check out this question thread from StackOverflow on how to use the CSS filter property to change the colour of an SVG image.

    From the thread: Alternatively you can use this tool from this codepen project, that works by inputting the hex coded colour to generate the filter functions and values to get the required colour.

    0

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