Skip to content
Submitted about 2 years ago

Huddle Landing Page With Curved Sections (HTML | CSS | JS Vanilla)

Cheosphere•1,040
@Cheosphere
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with curved sections
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

...made with a lot of love 🤘🏻🙂

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hola hermano, Congratulations on completing this challenge!

    Great solution as always!

    1.Its amazing that you’ve customized some interaction, you’ve to pay attention because when you add some hover effects you've to think that for the mobile version there's an issue that the elements with hover get stuck on the active state of the hover until you click on something else. Something you can do to avoid this problem on mobile, the stick hover, is to add a media query saying that you want hover effects only on devices that are not touch. So you can use:

    @media (hover: hover) {
{ADD HERE ALL THE CLASSES WITH HOVER EFFECTS TO DISABLE IT ON MOBILE}
}

    2.Not that some for are a little bit out of the container when the solution gets smaller, to avoid it you can reduce the input with with a media query and align it

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    1
  • anass sanba•450
    @sanba-anassPosted about 2 years ago

    hi, Cheosphere congrats on making this a pixel-perfect design Awesome🤗 ** I noticed one issue on large screens. the main area is shifted you may wanna fix that : main{ flex-direction: column; align-items: center; } ** happy coding and good job !

    Marked as helpful
    1
  • バレンタイン 😈•64,170
    @VCaramesPosted about 2 years ago

    Hey @Cheosphere, great job on this project!

    Some suggestions to improve you code:

    • To make you content semantically correct, you want to set up your code in the following manner:
     <body>
      <header>
        <nav></nav>
        <section>Build The Community Your Fans Will Love</section>
      </header>

      <main>
        <section>Statistics</section>
        <section>Grow Together</section>
        <section>Flowing Conversations</section>
        <section>Your Users</section>
        <section>Ready To Build Your Community?</section>
      </main>

      <footer></footer>
    </body>

    The <header> element contains all the introductory content.

    The <main> element contains the main content of your site.

    The <section> element is for grouping together a single part of the page that constitutes one single piece of functionality.

    The only time you use <div> is if there is no semantic element to wrap you content in.

    • For the background-images, you can use the :before/ :after pseudo-elements.

    • For you <input> you want to change the type to email and add add the required attribute.

    Since you want the user to input their email you have to use the type = email to let the browser know what needs to be inputed and provide the proper error message.

    The required attribute specifies whether a form field needs to be filled in before the form can be submitted.

    Sources:

    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required

    https://web.dev/learn/forms/accessibility/

    • To make you content accessible to your users, it is a best to use rem/em instead of px for your CSS property values (font-size, width, height, etc...). For media queries, I definitely suggest using em for them. By using px your assuming that every users browser (mobile, tablet, laptop/desktop) is using a font size of 16px (this is the default size on browser). Em's will help with users whose default isn't 16px, which can sometimes cause the your content to overflow and negatively affect your layout.

    Sources:

    https://betterprogramming.pub/px-em-or-rem-examining-media-query-units-in-2021-e00cf37b91a9

    https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15

    Happy Coding!

    Marked as helpful
    1
    Cheosphere•1,040
    @CheospherePosted about 2 years ago

    @vcarames Hello!, thank you very much for your feedback, your comments and those of other members help me a lot to continue improving. Regarding the semantics of the tags, sometimes I use <div> because if I use <article> or <section> the platform "forces" me to include a title tag as the first element (<h2> ... <h6> ), and if I do not include any of the mentioned tags, the platform penalizes me with html problems, it is to avoid this problem that I use div.

    0

Please log in to post a comment

Log in with GitHub

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