Skip to content
Submitted over 2 years ago

QR code using HTML and CSS

Tammy•100
@Tammy-Ajoko
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  1. I had a little difficulty with the font, I imported the right font but it still doesn't look exactly like the one in the sample.
  2. I know I need to pay closer attention to details, I would really like any feedback if anyone has a way to improve that.

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾Hello Tammy, congratulations for your solution!

    I've some tips for your:

    1.You've added some elements that are not so necessary to build this component, you can get rid of div and all the classes since there's only one h1, p and img. So you can use the direct selector to add the properties to these elements. Se below the clean structure for the component:

    <body>
<main>
<img>
<h1></h1>
<p></p>
</main>
</body>

    2.Inside the class called wrapper there's no need to set height since the component height comes from the elements inside and its margin/padding. If you keep the height this will avoid your container to grow beyond the value set.

    .wrapper {
    background-color: #fff;
    border-radius: 7px;
    max-width: 350px;
    /* height: 480px; */
    margin-top: 13vh;
    padding: 16px;
}

    3.To manage better the img you can have a simple css to have a flex image, add display: block; and max-width: 100%; to make the img grow 100% of the container its inside.

    img {
    max-width: 100%;
    height: 290px;
    border-radius: 7px;
    display: block;
}

    Hope it helps and happy coding!

    Marked as helpful
    1
  • faizan•2,420
    @afaiz-spacePosted over 2 years ago

    Hey @Tammy-Ajoko, congratulation on completing the challenge.

    • add these attributes padding: 0 20px; text-align: center; gap: 30px; in the box2 class.
    <div class="box2">
    <h2>Improve your front-end
   skills by building projects</h2>
    <p>Scan the QR code to visit Frontend
    Mentor and take your coding skills to 
    the next level</p>
</div>
    0

Please log in to post a comment

Log in with GitHub

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