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

Responsive landing page using flexbox

@amirandersonjones

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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
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