Submitted over 1 year ago

border-box, overflow

Mateescu Andreea•70

@deea585

A solution to the QR code component challenge

Preview Code

Code

Please log in to post a comment

Community feedback

Dongmo Shu•280
@dongmo-shu
Posted over 1 year 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.

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