Skip to content
Submitted over 1 year ago

HTML and CSS

jetskeeter•180
@jetskeeter1
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

Is there any shorter way that I could have done? Or could I have done a cleaner way in making my card and at the same time centering it at the middle of the page.

Community feedback

  • Atif Iqbal•3,200
    @atif-devPosted over 1 year ago

    Hi, congrats🎉 on completing the challenge. Better take care of the following points:

    • You must be seeing some accessibility issues generated by FEM Report Generator...To avoid accessibility issue "All page content should be contained by landmarks" use code as :
    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
    • For a better look, modify code as:
    .card_container {
  width: 250px;
  height: auto;
  font-size: 0.68em;
  background-color: hsl(0, 0%, 100%);
  padding: 15px 15px;
  text-align: center;
  border-radius: 15px;
  box-shadow: 0 0 3px rgb(201, 215, 224), 0 0 9px rgb(164, 180, 189);
}

    .img-container img {
  width: 100%;
  border-radius: 10px;
}

    .title {
  font-weight: 700;
  font-size: 20px;
}

    and remove following block of code:

    .container-box {
  padding: 0 20px 0 20px;
}
    • Include more in README file of your GitHub project's solution and write about your working flow, findings, new learned things, useful resources, etc.

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn

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