Skip to content
Submitted over 1 year ago

Responsive landing page using flexbox

amirandersonjones•70
@amirandersonjones
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I was not sure how to make this mobile responsive when originally created so I had to do a rework and hope that it is somewhat right.

Community feedback

  • Account deleted

    Hi... Congrats on completing this challenge. 🎉🥳

    Here are some tips to improve your code 💯.

    HTML: 🧱

    Your content should be contained by benchmarks. To avoid these accessibility issues, make sure your content is within a reference region with HTML5 elements. Example:

    <html lang="en">
    <head>
        ...
    </head>
    <body>
        <header>
            ...
        </header>
        <nav>
            ...
        </nav>
        <main>
            ...
        </main>
        <footer>
            ...
        </footer>
    </body>
</html>

    Header elements implement six levels h1-h6, with <h1></h1> being the most important and <h6></h6> being the least important. Avoid omitting header levels, you should start with the header <h1> and successively with <h2> ... <h6>.

    But when using sections, you must use an h1 for each section.

    More info HERE.

    CSS: 🎨

    To center your card you can do the following:

    body {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    Your solution is very good! 💯🚀

    Happy coding! ✌️🙃

    Marked as helpful
    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