Skip to content
Submitted almost 2 years ago

Responsive Landing Page with Curved sections

Leonard•270
@leonard-ramos27
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

Hello!

This is my third challenge and I selected this one because of the curved sections and to try using SVG. I initially tried to copy the SVG tag and paste it on the HTML file however there was a whitespace below for the upper curves. I tried to check if it was a border, padding or margin but it did not worked. I've also searched about it and some says you need to change the orientation which I tried however it only changed the size of the curve. I then used img tag to refer to the SVG files and the whitespace disappeared. If anyone encountered the same issue and was able to remove it with the SVG tag in the HTML file, please let me know and I will highly appreciate it.

Thank you :)

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted almost 2 years ago

    👾 Hey there! 👋 Here are some suggestions to help improve your code: 👾

    Best practice, before moving on to the next challenge, always check your FEM report, to see what is incorrect and update your code with it so that you would not make the same mistake over again. This something that should be done right after submitting your challenge.

    • The illustrations/icons serve no other purpose than to be decorative. Their alt tag should left blank and have an aria-hidden=“true” to hide them from assistive technology.

    More Info:📚

    https://www.w3.org/WAI/tutorials/images/

    • Do not capitalize "newsletter" (footer) in HTML as it is not accessible friendly. Instead you will want to style it in CSS.
    • Your email input and button needs to be wrapped inside a form and have a visibly hidden label attached to it for improved accessibility.

    More Info:📚

    MDN Email Input

    • The company info inside the footer needs to be wrapped inside an address element. While each individual information needs to wrapped in an anchor element.

    More Info:📚

    MDN Address Element

    • For improved accessibility 📈 for your content, it is best practice to use em for media-queries. Using these unit gives users the ability to scale elements up and down, relative to a set value.
    • Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.

    Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.

    Josh Comeau Reset

    Eric Meyer Reset

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding!🎄🎁

    Marked as helpful
    0
    Leonard•270
    @leonard-ramos27Posted almost 2 years ago

    @vcarames Thank you so much for the feedback and suggestions, these are all very helpful. I appreciate it. :)

    1
    バレンタイン 😈•64,170
    @VCaramesPosted almost 2 years ago

    @leonard-ramos27

    Glad I could help!☃️

    Keep it up!

    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