@Blackpachamame
Posted
Greetings! you have done a great job ๐
๐ Some accessibility and semantics recommendations for your HTML
- To improve the semantics of your HTML, you can change your
<div class="container">
to a<main class="container">
and the<div class="attribution">
to a<footer class="attribution">
๐ Some suggestions
- You can apply
display: block
to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements - Apply
max-width: 100%
to yourimg
so that it occupies the correct width within the container. Removewidth: 300px
- Instead of using
margin
to center your content in the center of the screen, you can use theflexbox
properties in thebody
:
body {
font-family: 'Figtree', sans-serif;
background-color: var(--background-color);
padding: 30px 40px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px; /* Separate the main from the footer */
}
Marked as helpful
@Nsebo
Posted
@Blackpachamame Thanks so much for your honest feedback. Your code made more sense when I added it to mine :) I had problem understanding the difference between max-width and width, I need to learn more on max-width and width. Thanks once again for taking your time to correct my work.