Submitted over 2 years ago

Simple solution using only CSS Flexbox

Guilherme Dias Simões•210

@gdsimoes

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I finished this project a long time ago, so I don't feel particularly proud. Next time I will use Prettier for formatting my code and Josh Comeau's CSS reset instead of the CSS remedy.

What challenges did you encounter, and how did you overcome them?

I don't remember any.

What specific areas of your project would you like help with?

This project for me was mainly about learning the workflow of submitting solutions and so on. I don't think I need any help in this one.

Community feedback

mateusb12•50
@mateusb12Posted 8 months ago
Ficou excelente parabéns, não tinha pensado em usar variáveis para as cores
1
Guilherme Dias Simões•210
@gdsimoesPosted 8 months ago
I don't speak spanish...
0

luis•10

@luispinto53Posted 8 months ago

Estuve viendo cual es el inconveniente que la solución queda desfasado en el eje Y de la pantalla con respecto al diseño, y creo que la solución podría ser esta.

En el html

        <div>
        <img src="images/image-qr-code.png" alt="QR Code">
        <h1>Improve your front-end skills by building projects</h1>
        <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </div>
    </main> ```

2. En el css
```body {
    background-color: var(--light-gray);  
}
main {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
div {
    display: flex;
    flex-direction: column;
    width: var(--main-width);
    height: var(--main-height);
    padding: 16px;
    background-color: white;
    text-align: center;
    border-radius: 20px;
} ```

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