My Solution

Community feedback

• 

  Sandro•1,150

  @sandro21-glitchPosted almost 2 years ago

  Hi David

  Here are some suggestions to improve the code

  You can use CSS resets to avoid unexpected default styling.

  Add font-size and font-weight to the body class to provide a better overall consistency in the design.

  You could use CSS grid or flexbox for the layout to make the design more responsive and flexible.

  To center the card with Flex, you can use the following CSS

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

  If you want to place the card in the center with absolute position, you can use the following example:

  .card{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background:rgb(255, 255, 255); max-width: 30.0rem; border-radius: 1.5rem; overflow: hidden; }

  you can learn Flexbox and CSS Grid on the following resources:

  MDN Web Docs , CSS-Tricks , W3Schools , FreeCodeCamp

  Happy Coding

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  There is no need for the second main tag, the main tag is only use once in the html file and not treated as a div, the main contains the main content of the html file, sometimes it's the first tag after the body other times its after the header tag. Remove the second main tag and wrap <div class="attribution"> in the footer tag to fix the accessibility issue. click here for more on web-accessibility and semantic html

  There is no need to give the body a width and height value. Add a background-size of contain to the body, this will stretch background-image on the entire width of the screen.

  To center .card on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  To center .card on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center .card on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Give .!mage and the img a width of 100%. You forgot to give .proceed-btn a box-shadow and to give the design a hover effect.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0