Submitted 6 months ago

center div qr

@RASHAD09

A solution to the QR code component challenge

Solution retrospective

What are you most proud of, and what would you do differently next time? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="./images/favicon-32x32.png"
/>

<title>Frontend Mentor |Rashad QR</title>

<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
  .attribution {
    font-size: 11px;
    text-align: center;
  }
  .attribution a {
    color: hsl(228, 45%, 44%);
  }
  .bg-color {
    background-color: #d5e1ef;
  }
  .centerdiv{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .card{
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    width: 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  .qr-code{
    width: 100%;
    border-radius: 10px;
  }
  .text-center-h1{
    text-align: center;
    font-family: system-ui;
    color: #1F314F;
    font-size: 22px;
  }
  .text-center-p{
    text-align: center;
    font-family: system-ui;
    font-size: 15px;
    color: #68778D;
    word-spacing: 0.2em;
    line-height: 1.5;
    letter-spacing: 0.2px;
  }
</style>

</head> <body class="bg-color"> <div class="centerdiv"> <div class="card"> <img src="./images/image-qr-code.png" alt="qr-code" class="qr-code"> <h1 class="text-center-h1">Improve your front-end skills by building projects</h1> <p class="text-center-p">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </div> </div> </body> </html> What challenges did you encounter, and how did you overcome them?

How to center the first div so i found that i need to add height:100vh to center the div

What specific areas of your project would you like help with?

nothing

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on RASHAD09's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord