landing page using border radius css specifity

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  HTML

  In order to fix the accessibility issues:

  • You need to replace <div class="box"> with the <main class="box"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
  • Each main content needs to start with an h1 element. Your accessibility report states page should contain a level-one heading. So, you need to use a <h1> element in the <main> tag. You can add <h1> to the title in this way: <h1>Improve your front-end skills by building projects</h1> element.

  CSS

  • If you want to center it easily, you can use flexbox in the body and if you want, you can give the recommended color to the background in this way:

  body {
    background-color: hsl(212, 45%, 89%);
    font-family: "Outfit", sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  • then, you don't need to use margin to .box. This .box is the updated version:

  .box{
    background-color:white ;
    border-radius: 20px;
    box-sizing: content-box;
    max-width: 250px;
    height: 400px;
     padding-bottom: 40px;
  }
  

  Hope I am helpful. :)

  Marked as helpful

  0

  ---

  

  Simeon Nkwachukwu C.I•10

  @somop0Posted over 1 year ago

  @ecemgo thanks alot for your advise It was truly helpful i will apply my in my next project

  0

  

  Simeon Nkwachukwu C.I•10

  @somop0Posted over 1 year ago

  @ecemgo thanks alot for your advise It was truly helpful i will apply my in my next project

  1

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @somop0 I'm happy to help! :)

  Marked as helpful

  0
• 

  George Bleyer•280

  @georgebleyerPosted over 1 year ago

  Hello,

  Congratulations on completing this challenge. Here are some tips on how to align your card. In your .body put this code:

  display:grid;
  place-items:center;
  min-height: 100vh;
  

  You can use Flex Grid to align the card to.

  In your code try to use <h1>, <h2> and <p> to have a better code other than use just the <span>

  I hope it helped.

  Marked as helpful

  0

  ---

  

  Simeon Nkwachukwu C.I•10

  @somop0Posted over 1 year ago

  @georgebleyer Thanks alot your advise is truly i truly appreciate

  0