Submitted 2 months ago

compeonete_de_codigo_QR

pure-css

WesleySCunha•40

@WesleySampaioCunha

A solution to the QR code component challenge

Preview Code

Solution retrospective

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

Fazer projeto, que me insipira ainda mais a ser um Desenvolvedor Front-end

What specific areas of your project would you like help with? <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/componentedecodigoqr.css"> <link rel="shortcut icon" href="img/favicon-32x32.png" type="image/x-icon"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet"> <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:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <style> @charset "UTF-8";

body{ margin: 0; padding: 0; background-color: #6DA0F2; font-family: Arial, Helvetica, sans-serif; }

div.container { background-color: white; margin: 50px; margin-left: 500px; height: 450px; width: 300px; padding: 20px; align-items: center; text-align: center; border-radius: 25px; }

img { height: 50vh; border-radius: 10px; }

span#primeira-frase > p { font-family: "Outfit", sans-serif; font-weight: bold; }

span#segunda-frase > p { font-family: "Outfit", sans-serif; } </style> <title>Componente de código QR</title>

</head> <body> <div class="container"> <div id="quadrado"> <img src="img/image-qr-code.png" alt="" id="">

            <span id="primeira-frase">
                <p>
                    Melhore suas habilidades de Front-End construindo projetos 
                </p>
            </span>

            <span id="segunda-frase">
                <p>
                    Escaneie o código QR para visitar o Frontend Mentor e levar suas habilidades de codificação para o próximo nível
                </p>
            </span>

        </div>
</div>

</body> </html>

Code

Please log in to post a comment

Community feedback

abdurohman seid•140
@abdu36-png
Posted 2 months ago
your work is good but please use CSS flexbox,it is your main mistake

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