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

Jael Castillo• 70

@Jael-Castillo

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


Should font-size= 62.5% is in element html or body?. How do I improve my coding? :D Thank you!

Community feedback

Account Deleted

Hello.

In the root element, that is html and then in the body element reset back the font size to default with rem unit, so it will scale and be proportional with pixels:

body {
    font-size: 1.6rem   // 1.6rem = 16px | or whatever font size it is
}
3

Jael Castillo• 70

@Jael-Castillo

Posted

Excellent, thank you!. Other question, there is other way to change color of logo (huddle) in section footer? I used tag <svg> and changes its properties.

1

Account Deleted

@Jael-Castillo I see you used the fill property to change the color. Another alternative would be to create a copy file from the original SVG and change the fill property directly so you'll end up with two different images. I would go for the two files alternative if I'd knew I'll be using them a lot in the future but in this case, your solution is totally fine.

1

Account Deleted

I didn't notice at first but you're using grey for the box-shadow in the button and it will look good on a white background but it will be very bright on dark backgrounds, so you may want to use a transparency dark based like this 1px 2px 15px rgb(0 0 0 / 43%)

Also, there's a responsive issue with the class wrapper fc_wrapper--wrap that is causing an overflow. You can fix it by increasing the value of the media-query

Update: you can see the problem using:

* {
  border: solid;
}
1
Jael Castillo• 70

@Jael-Castillo

Posted

@juanmesa2097 Thanks for alls feedbacks, I'm begginer and I still tring of understand css xD. what you mean overflow?. In media queries to tablet or movbile?. thanks for everything :D

1

Account Deleted

@Jael-Castillo yeah, of course, I mean by overflow that the content of the wrapper wrapper fc_wrapper--wrap is wider than the viewport width so a horizontal scroll bar shows up and a solution for that would be increasing the min-width of the media-query

It was nothing. Feel free to ask about any doubt you have.

1

@bashiroglu

Posted

Hi JAEL CASTILLO, we mainly put font-size html (root) element. Good luck

1

Jael Castillo• 70

@Jael-Castillo

Posted

@bashiroglu thanks! :3

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