Submitted over 1 year ago

QR code component

Kinga Miśkiewicz•160

@codingbeary

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

If you see any mistakes or have any tips for improvement let me know! :)

Community feedback

Vishal Maurya•500

@VishalMauryastpPosted over 1 year ago

Hello, You tried well, but I'll give you some suggestion -

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

*** This code helps to center the main container ***

*** Write this code into <footer>***
<div class="attribution">
        Challenge by
        <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
          >Frontend Mentor</a
        >. Coded by
        <a
          href="https://github.com/kiyooteru/qr-code-component-main"
          target="_blank"
          >Kinga Miśkiewicz</a
        >.
      </div>

And follow html structure in a correct way that helps to make page accessible -
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"
  <title>Frontend Mentor</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
............write your code here like <section> & all <div>.
     
  </main>
<footer >
 </footer>
</body>
</html>

I hope ,I'm helpful😐.

Marked as helpful

Kinga Miśkiewicz•160

@codingbearyPosted over 1 year ago

@VishalMauryastp thank you so much, it was very helpful! :)

Vishal Maurya•500

@VishalMauryastpPosted over 1 year ago

@kiyooteru It's my pleasure.

Remigiusz Czarnecki•380
@remmjiPosted over 1 year ago
Hello kiyooteru 👋

In regards to improving your code, I would suggest a few things:

💡 Center your card using flex:

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

💡 Hard code the width of the card to match the design, even on mobile as its width is only 320px.

💡 Use your developer tools to compare your design with the design provided by the challenge on the same resolution.

I hope those little tips will be helpful :)
Marked as helpful
0
Kinga Miśkiewicz•160
@codingbearyPosted over 1 year ago
@remmji thank you so much! :)
0

Please log in to post a comment

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