Skip to content
Submitted 10 months ago

border-box, overflow

Mateescu Andreea•70
@deea585
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

Community feedback

  • Dongmo Shu•280
    @dongmo-shuPosted 10 months ago

    Hello @deea585

    It seems your solution is not complete. I reviewed your code, and I found a lot of issues. Let's dive into them.

    First

    Always review the style-guide.md`` file and the ``design folder before attempting any frontend Mentor challenges. They are there to guide the developer on what needs to be in the design.

    Second

    We need to link up the font which will be needed to complete this challenge. There exist many ways of doing this. This is what I find to be the most efficient.

    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    Add the above lines in the <head> section of your HTML.

    Third

    The body of your web page needs to be placed at the centre of the screen. You can do so by adding the following to the body element of your CSS file.

        height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    Fourth

    Enclose <img src="images/image-qr-code.png" alt="Cod QR" /> in a div and add a class to it. This will enable you to limit the six=ze of the image inside of the parent div

    I hope this was helpful.

    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