Skip to content
Submitted 11 months ago

qr-code card component

WhoAmI•70
@PiriyaLapa
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

What are you most proud of, and what would you do differently next time?

I've gained valuable insights into creating responsive web designs with fonts and images. Moving forward, I'm eager to explore integrating 3D card elements into my projects. This additional dimension promises to enhance both the visual appeal and user experience of my designs.

What challenges did you encounter, and how did you overcome them?

When facing the challenge of positioning components at the center of the screen, I explored various methods to achieve this, such as utilizing "display: flex;" with "justify-content: center;", and employing "position: absolute;" with "top: 50%;" and "left: 50%;" alongside "transform: translate(-50%, -50%);". Through experimentation and research, I successfully implemented these techniques to ensure the desired center alignment of the components on the screen.

What specific areas of your project would you like help with?

I appreciate the offer, but for now, I prefer to tackle challenges and find solutions on my own. Thank you for understanding.

Community feedback

  • Dreamleaf•230
    @DreamleafPosted 11 months ago

    An interesting trick of the eye can happen with border-radius, where there are 2 corners nested (like the image inside the card here).

    If you make the inner border-radius (on the card) slightly smaller, it has a better visual effect and looks neater. The design here does that, even though it's a smaller detail that most people wouldn't notice, but it helps with the overall look.

    It's probably not a "thing", but I always think of nested corners to have a V shape pointing to the corners and providing a kind of visual perspective to a design.

    Marked as helpful
    0
    WhoAmI•70
    @PiriyaLapaPosted 11 months ago

    @Dreamleaf Thank you for guiding me, I will adopt your trick. Thank you so much.

    1
  • Daniel 🛸•44,250
    @danielmrz-devPosted 11 months ago

    Hello @PiriyaLapa

    Your peoject looks great!

    If you change the main text color to #2B3440 and give your card a box-shadow, it'll look even closer to the original design.

    Other than those little details, you did a great job!

    0
    WhoAmI•70
    @PiriyaLapaPosted 11 months ago

    @danielmrz-dev Thank a lot, I will do that.

    2

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