Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Huddle landing page with curved sections solution

@MojtabaMosavi

Desktop design screenshot for the Huddle landing page with curved sections coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi folks, I not really satisfied with this one because the code is a bit messy but I 'll make the next one cleaner. I would be glad to hear you thoughts about the following questions.

  1. Usage of BEM and how it could be improved ?
  2. Is it ok to use more the one modifier on a block ?
  3. Should the logo in the footer be pure css becuase I coundn't find any svg for it project files ?

Happy coding :)

Community feedback

@MikeBish13

Posted

Hey, your code looks nice and clean to me! Great job!

I'm no expert in BEM so won't comment on that, but in regards to point 3:

  • Have you considered inserting the SVG code into the html as opposed to setting it as a background image on a div? That way you're able to target the SVG properties directly such as the color, which you can usually get through like so: svg { path { fill: #ffffff; } }

Take a look at the code of the SVG and you should be able to work it out. An alternative is to copy the SVG file and change the color in the fill attribute, then use the new file as the background image in the footer.

Hope that helps!

1

@MojtabaMosavi

Posted

@MikeBish13 I didn't know that you could modify svgs, great comment thank you .

0

Please log in to post a comment

Log in with GitHub
Discord logo

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