Skip to content
Submitted over 1 year ago

i just see W3Schools. how to move image and make it rounded

bootstrap
asamu2149•10
@asamu2149
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device --> <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@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=Montserrat:wght@100&family=Outfit:wght@100&family=Quicksand:wght@300&display=swap" rel="stylesheet"> <title>Frontend Mentor | QR code component</title> <!-- Feel free to remove these styles or customise in your own stylesheet 👍 --> </head> <body> <section> <img src="images/image-qr-code.png" alt="this is QR code"> <article> <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> </article> </section> <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Ahmad Saif Al Muflihin.</a>. </div> </body> </html>
Code

Please log in to post a comment

Log in

Community feedback

  • Chamu•13,860
    @ChamuMutezva

    Hi ASAMU2149

    Congratulations for taking this step in your journey to get better at Web development. The HTML looks good , it will needs some few adjustments as follows:

    • One of the best practices is to have dedicated files for HTML and then another one for CSS.
    • in your HTML, include landmark region elements which provide a poweful way to identify the organization and structure of a web page. These includes the main, header and footer elements. In this project you may need only the main and maybe the footer element. You can find out more on mdn - main element. Change the section element into the main element, and you can change the div with the attribution to the footer element. Find out more about semantic elements in general.
    • the body width should not be tempered with , it should always be the device width. The only change is applied as min-height: 100vh to allow a full screen view and scroll vertically if the content exceeds the height above.
    • height and width on elements should be avoided in most cases. The height should be decided by the elements themselves whilst on the width (in this case) you need to use max-width so that the width does not exceed a certain value. Here is an artcle to help you on Why font-size must NEVER be in pixels
    • it is very important to target classes when styling

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