Skip to content
Submitted over 1 year ago

QR Code Components with HTML/CSS

BINTANG RIZQI PASHA•10
@BintangRP
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 was difficult on writing css best practice and dont know the order of syntax like
.container {
 object-fit: cover;
 display: flex;
 flex-direction: row;
 margin: 5px
 width: 500px
 height: 1000px
}

I still don't understand the preparation of the best practice.

it's my first try on frontendmentor.

Community feedback

  • Federico Nicoletti•0
    @FedeNicolettiPosted over 1 year ago

    Hi! I encourage you to read about CSS BEM. It can be helpful and provide you with a strong understanding and confidence about your CSS code. Feel free to adjust the order according to your preference, but ensure that you are consistent throughout the project. Maybe something like this: Display and Positioning (e.g., display, position, top, bottom, left, right) Box Model (e.g., width, height, margin, padding, border) Typography (e.g., font-family, font-size, color, text-align, line-height) Background and Borders (e.g., background-color, background-image, border-radius, border-color) Visual (e.g., opacity, z-index, box-shadow) Transition and Animation (e.g., transition, animation) Flexbox or Grid (if used)

    1
  • Kamania•170
    @KamaniaPosted over 1 year ago

    Job well done @BintangRP, just noted that the background color is different from what is provided on the design. I suggest add the following in your css

    html, body{
background-color: hsl(212, 45%, 89%);
}
    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