Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

border-box, overflow

@deea585

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Dongmo Shu 280

@dongmo-shu

Posted

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
Discord logo

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