Skip to content
Submitted about 2 years ago

Responsive card with custom CSS

Thidar Nyein•410
@thidarnyien
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 didn't find any difficult

Community feedback

  • Ahmed Kamel•1,190
    @hmadamkPosted about 2 years ago

    well done an extra tip is

    • make sure that all of your page is contained by a landmark examples of landmarks are
    header for the top section
main for your main section
section with aria-label to describe why you added this section
footer for the bottom section
    Marked as helpful
    1
    Thidar Nyein•410
    @thidarnyienPosted about 2 years ago

    @hmadamk thank your for your help

    0
  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello Mal Thidar, congratulations for your new solution!

    🎯 Your solution its almost done and I’ve some tips to help you to improve it:

    1.Give a proper alignment to the card:

    You tried to align the component using margins, but this make this task really tricky and hard control all the content. My advice for you is to use flexbox to create this alignment. First thing you've to do is to add min-height: 100vh to make sure your body will be displaying minimum 100% of the view-port height (this will help the card be ever aligned vertically centered) and then add display: flex; align-items: center; justify-content: center; to make the alignment:

    body {
    min-height: 100vh;
    font-family: 'Outfit', sans-serif;
    /* margin: 0; */
    /* padding: 0; */
    box-sizing: border-box;
    background-color: hsl(212, 45%, 89%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    The html markup/structure can be reduced by removing unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading and paragraph.

    Before:

    <div class="card">
      <div class="img">
        <img src="./images/image-qr-code.png" alt="">
      </div>
      <div class="card-text">
        <p class="title">Improve your front-end skills by building projects</p>

        <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
      </div>
    </div>

    After:

    <body>
<main>
 <img src="./images/image-qr-code.png" alt="Qr Code Image" >
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> 
</main>
</body>

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    1
  • Thidar Nyein•410
    @thidarnyienPosted about 2 years ago

    thank you so much for your many help next time I hope you teach me a lot

    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