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 page challenge CSS MOBILFIRST

Ascaris29 80

@Ascaris29

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


Well.. I admit that on this one, I had difficulties. The curved background gave me trouble. Nevertheless I feel that I am progressing because I am able to build bigger pages from now on !

Community feedback

Rio Cantre 9,690

@RioCantre

Posted

Hello there! Good job in this challenge. Viewing the solution, I think you should consider the following as well…

  • Add padding: 4rem; in the .section1 rule set
  • Adjust the top margin into margin-top: 9rem; in the .title-img rule set. Add font-size: 32px;
  • Alternative is to wrap each section with a div and use Flexbox for alignment
From:
 <div class="section1">
      <h2 class="title-img">Grow Together</h2>
      <p class="txt-img">Generate meaningful discussions with your audience and build a strong, loyal community. 
  Think of the insightful conversations you miss out on with a feedback form. </p>
    </div>
    
    <div class="img-bot"></div>
  
Into: 
 <div class="section1">
      <section>
           <h2 class="title-img">Grow Together</h2>
            <p class="txt-img">....</p>
      </section> 
      <div class="img-bot"></div>
</div>
  • Add padding: 0.8rem; in .btn_input rule set and remove height: 40px;

Above all, Well done! Keep it going!

Marked as helpful

0
Ascaris29 80

@Ascaris29

Posted

Thank you very much for your constructive advice

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