Skip to content
Submitted 5 months ago

css: webfonts, box. HTML: include picture

Adabe4•60
@Adabe4
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

Community feedback

  • beowulf1958•1,450
    @beowulf1958Posted 5 months ago

    Congratulations on completing this challenge. Your card looks really great, just like the design. I do have some suggestions.

    First, your styles are all over the place: in-line, internal, and external. In order to maintain the site more easily ( and make it scalable) you should have all your styles in one place, preferably in the external file. In-line styles are a no-no; they make fixing problems much harder. So move the .attribute styles in the <head> to "qr-code-component.css", as well as the img styles.

    img {
        width: 100%;
         border-radius: 5%;
}

    Second, your next step is to find a way to center the card on the screen. One way is to use flexbox, another way is to use grid. If you look at how other people solved this challenge, you will see what I mead.

    Hope this helps. Keep on coding!

    Marked as helpful
    1
  • Mahrukh Adeel•10
    @Mahrukh-AdeelPosted 4 months ago

    Your solution looks good! However, centering the card on the screen would make it more similar to the original design. Also, changing the heading font to the darker blue mentioned in the starter pack would be great.

    1

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