I did not use any property for this yet.

Community feedback

• 

  STEPHEN Obayuwana•340

  @xaintobasPosted 4 months ago

  Hi @MaryAMsendoo,

  Nice work on your design! Here are a few opportunities to enhance it:

  -HTML Structure and Semantics:

  Your code uses nested <div> elements which can make the structure harder to follow.

  I will suggest you use <main> and <section> elements. It is a great improvement in terms of semantic HTML. This makes the content more meaningful and accessible.

  <main>
   <section class="card">
      <img src="https://maryamsendoo.github.io/firstchallenge/img1.png" alt="">
      <h1>Improve your front-end skills by building projects</h1>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
     </section>
  </main>
  

  -Flexbox for Centering:

  Your code uses margin for centering elements, which is not as flexible. I will suggest you use Flexbox in the main element to center the content. This makes the layout more responsive and easier to manage.

  main {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:100vw;
    height:100vh;
    background-color: hsl(212, 45%, 89%);
  }
  

  -Styling Improvements:

  Your CSS has some issues, such as width: 50%px for the .container div which I believe is a typo. You should consider fixing this. But here are some improvements you should also consider:

  Using max-width: 320px to ensure the card does not become too wide on larger screens.

  .card {
    background-color:white;
    max-width:320px;
    text-align:center;
    border: 15px solid white;
    border-radius: 14px;
  }
  

  Consider adding an h1 element and also styling your image for responsiveness

  h1{
    font-size:1.6rem;
  }
  
  img{
    width:100%;
  }
  

  I hope you find my feedback valuable and helpful.

  If yes, I would appreciate it greatly if you could mark my comment as helpful!

  Keep coding

  0