Skip to content
Submitted over 1 year ago

QR-Code

LoveAhir•10
@LoveAhir
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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&display=swap" rel="stylesheet"> <link rel="stylesheet" href="styles/index.css"> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> <title>Frontend Mentor | QR code component</title> </head> <body> <section class="main-body"> <div class="outer-div"> <img src="images/qr.png" alt="qr-code"> <h3>Improve your front-end skills by building projects</h3> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </div> </section> <footer> <div class="cta"> <p>Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.</p> <p>Coded by <a href="#">@LoveAhir</a></p> </div> </footer> </body> </html>

Community feedback

  • vraj1091•80
    @vraj1091Posted over 1 year ago

    To remove warnings please put your all containt of body in the main tag and please remove border from css for that please use css property borfer:none;

    0
  • Basant Soni•450
    @SoniBasantPosted over 1 year ago

    Hello mate, You made a decent card solution. It also have some scope to improve.

    • Change <section class="main-body"> to just <main>.
    • As given in style-guide.md -

    Layout

    The designs were created to the following widths:

    Mobile: 375px

    Desktop: 1440px

    So use media query at 375px. You used at 600px.

    • Change h3 to h1 then change font-size of h1 as you need from CSS. As one heading (h1) is necessary.

    • Use Dark-blue: hsl(218, 44%, 22%); for h1

    and Grayish-blue: hsl(220, 15%, 55%); for p

    • Change border-radius for .outer-div and .outer-div img to make them more similar as you can see in design comparison. You can do this in .outer-div img. Remove padding-top.
    .outer-div img{
    width: 88%;
    border-radius: 10px;
}

    Hope I am helpful. Good Luck. : )

    0

Please log in to post a comment

Log in with GitHub

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