Submitted 10 months ago

11th Project - Huddle Landing Page With Curved Section Master

FrontEndHighRoller• 170

@FrontEndHighRoller

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

This is a solution for...

Huddle landing page with curved sections

HTML
CSS

2junior

View challenge

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

@onyedikachi23

Posted 10 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.

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