Skip to content
Submitted over 1 year ago

qr code components with html and css

opolis8•330
@opolis8
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

I am having a hard time centering the content.

I'm unsure of my parameters for @media,

what should be the best practice to really be good at coding

Community feedback

  • Victoria Azola Silva•1,290
    @VickyAzolaPosted over 1 year ago

    Hi, great work with this challenge!

    A few tips i can give you from looking at your code:

    • Try moving the attribution class in the <head> to the CSS file, to clean the HTML.
    • Use <main> to wrap your main content instead of a <div>, for accessibility purposes.
    • Use <h1> for the title (improve you...) instead of <p>
    • For the body use min-height instead of height.
    • To center the card you can use grid or flex on the body, like this:
    with grid

body { 
    min-height: 100vh;
    display: grid;
    place-items: center;
}

with flex

body { 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    • Since this card is the same for mobile and desktop you don't need to use a @media query.
    • Try to make the box-shadow a little more blur for it to look closer to the design, like:
    box-shadow: .5rem .5rem 1rem hsla(218, 44%, 22%, 10%)

    Hope this helps!

    Marked as helpful
    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