HTML, CSS, Flexbox, git, github

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

HTML 🏷️:

• Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

CSS 🎨:

• For a responsive and resizable component, consider using max-width: 320px or max-width: 20rem for the width and adding margin to avoid border touching the border of the screen in mobile devices. Also, remove the large padding in the text elements (/*padding: 0 5em;*/)

• The color of the paragraph element is unreadable because it is too light compared to its background. For example, change the color to hsl(220deg, 15%, 55%).

• To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Hello @cloudpc7!

Your solution looks great!

I have a couple of suggestions for improvement:

• For semantic reasons, and since that is the main title of the project, you can replace the <h2> with <h1>.

The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.

• Also, I noticed that you used margin to place the card in the middle of the page. Here's a very efficient way to center the card that adapts better with screen size changes:

You can apply this to the body (in order to work properly, you can't use position or margins):

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

I hope it helps!

Other than that, great job!