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
Log in with GitHub

Submitted

Site implemented using Flexbox, sass.

Safa Ruknuddin• 385

@safruk

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

This is a solution for...

Huddle landing page with curved sections
  • HTML
  • CSS
2junior
View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi, If you Check out my code/site I would be glad if you notify me of the flaws in the design Which sections of my code are unnecessary? Have i successfully approached flexbox?. In sections where my design breaks what other alternate approach would you suggest.

Community feedback

PJ Mantoss• 235

@PJMantoss

Posted

Nice job! But you need to revise the following: 1-the 'try it free' button in the header does not resemble the design 2- The font-family for the h1 tag in the first section is not the same for the design 3-You used the same background illustrations for both mobile and desktop views. The background illustrations in mobile view are supposed to be different than in desktop. 4. You need to work more on the mobile version. Fonts are too tiny and some other elements like the input and subscribe button are not well positioned. Nice job once again.

2
Safa Ruknuddin• 385

@safruk

Posted

1 Thanks! Totally missed that 2 Stat section is open sans. Rest all headings are Poppins. Haven't I got it right? 3 I have only these 3 background illustrations. I guess they have updated the starter files to include separate ones for mobile. Will be sure to check that out. Thanks for notifying 4 I'll surely look into That. I should try mobile first as well to get it right. Right now I am stuck with desktop first approach.I have become too habitual and comfortable with desktop first approach

Really appreciate your honest feedback. Hope to hear more after I fix these problems. Thanks!

0
Safa Ruknuddin• 385

@safruk

Posted

1 Fixed!

2 Checked again. Seems Fine

3 Background illustrations are same for mobile and desktop. Had included curved sections for desktop and mobile originally.

4 Fixed!

Question: I have changed my buttons slightly.Earlier I used padding for the buttons. But for some reason there were issues. The button in the header and cta section, although same, were displayed differently and I have no idea why.So now I set fixed width buttons(Inspired by ksenius amazing solution for this challenge). Which approach is better and why does this behavior occur.I would be glad if anyone could enlighten me about this.I have been scratching my head searching everywhere but not satisified with the answers I found.

0
P
Matt Studdert• 13,611

@mattstuddert

Posted

@safruk hey Safa, nice work on this challenge and it's good to see you've made updates. I'm not sure what the buttons looked like before, but they're looking good now. Setting a width or using padding would both be viable options. What was the issue?

0
Safa Ruknuddin• 385

@safruk

Posted

@mattstuddert despite having same style the button in header was displayed differently. I still haven't figured out why. I never faced this issue before. Also both Chrome and Firefox browsers showed the button as intended. Both padding and width are viable options yet the button was stretching on my mobile(both justify-content and align-items are set to center) . That's why I decided to stick to the width button. Thanks Matt for your feedback!

0
P
Matt Studdert• 13,611

@mattstuddert

Posted

@safruk very odd! Setting a width, in that case, is absolutely fine. Keep up the great work!

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