Submitted 8 months ago

QR component solution

Tony•30

@antonpetrov145

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?

All of this makes me proud, CSS is not something I fancy or I have good knowledge of.

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

centering the div;
making the image smaller;

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

Maybe with general execution - I have many magic numbers, would be good if I can remove them.

Community feedback

JonhKellyson•40
@JonhKellysonPosted 8 months ago
Man, te aconselho ao invés de colocar as fontes no HTML importa elas no css, por exemplo:

html:
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> <link rel="stylesheet" href="style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">
CSS:

@import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');

OUTRO Ponto, também pode utilizar ROOT para deixar seu código mais simples em relação as cores e fontes utilizadas no seu projeto, outro exemplo irei deixar do meu código:

:root { --fonte1: "Outfit", sans-serif; --corfundo: hsl(212, 45%, 89%); --corbranca: hsl(0, 0%, 100%); --corclara: hsl(219, 16%, 46%); --corescura: hsl(218, 44%, 22%); }

/* você pode denominar o titulo como quiser */

com isso, quando for por exemplo colocar a cor cinza claro no texto, basta utilizar este código:

color: var(--corclara);
Marked as helpful
1

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