Just the basics of HTML and CSS were used

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  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="attribution"> to a <footer class="attribution">
  • I think that in this case it is not correct to use figure and figcaption. But I'll leave that to your discretion
  • 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
  • Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:

  body {
        background-color: hsl(212, 45%, 89%)
        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

  0

  ---

  

  0xgenius__•80

  @dev0xgeniusPosted 10 months ago

  @Blackpachamame Thanks Gee.. I updated the code

  1