@correlucas
Posted
👾Hello @kennyoyaf, Congratulations on completing this challenge!
I saw your preview site and I liked a lot the work you’ve done here, it's almost complete, I’ve some suggestions you can consider applying to your code:
Make the vertical alignment using flex
properties and min-height
. First of all put min-height: 100vh
to the body
to make the body display 100% of the viewport height (this makes the container align to the height size thats now 100% of the screen height) size and display: flex
e flex-direction: column
to align the child element (the container) vertically using the body as reference.
body {
min-height: 100vh;
Font-size: 15px;
font-family: 'League Spartan', sans-serif;
margin: 0 auto;
width: 80%;
padding: 80px 0;
background-color: var(--White);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
The html markup for this solution its built entirely with <div>
and you can
improve it using semantics tags to describe what its inside each block of content. You can replace the <div>
that wraps each card with <article>
you can wrap the paragraph with the quote with the tag <blockquote>
this way you'll wrap each block of element with the best tag in this situation. Pay attention that <div>
is only a block element without meaning.
✌️ I hope this helps you and happy coding!
Marked as helpful