Skip to content
Submitted over 1 year ago

Qr-code Component using Hyper Text Markup Language and CSS (flex etc.)

AANU GRACE EWONUBARI•90
@Graly129
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

Dear Frontend Expert,

Please help me go through and make corrections where necessary.

Thanks.

Community feedback

  • Ecem Gokdogan•9,380
    @ecemgoPosted over 1 year ago

    Some recommendations regarding your code that could be of interest to you.

    HTML

    • If you want to use the recommended font-family for this project, you can add the following between the <head> tags in HTML file:
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">

    CSS

    • After adding them to the HTML, you can add this font-family to the body
    • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
    • For the color of the screen, you can use the recommended color in the body
    body {
  font-family: "Outfit", sans-serif;
  background-color: hsl(212, 45%, 89%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
    • If you use max-width, the card will be responsive
    • You'd better update padding
    .sub-div {
  /* width: 28%; */
  /* height: 45%; */
 max-width: 300px;
  background-color: #fff;
  /* padding: 1.5% 1.5% 5%; */
  padding: 15px;
  text-align: center;
  border-radius: 20px;
  /* margin: 50px auto; */
  /* position: absolute; */
  /* right: 420px; */
  /* top: 50px; */
}
    • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
    img {
  /* width: 96%; */
  width: 100%;
  border-radius: 20px;
}
    • You'd better add font-size to the h1
    h1 {
  color: hsl(218, 44%, 22%);
  font-size: 20px;
}
    • You don't need to define #container for this solution so you can remove it
    /* #container{
    background-color:  hsl(212, 45%, 89%);
    font-family: 'outfit';
    height:1440px;
    padding: 30px auto;
    position: relative;
} */
    • Finally, if you follow the steps above, the solution will be responsive.

    Hope I am helpful. :)

    Marked as helpful
    0
    AANU GRACE EWONUBARI•90
    @Graly129Posted over 1 year ago

    @ecemgo thank you so much for pointing out the errors and correcting them. I'm super grateful and do not take them for granted.

    1
    Ecem Gokdogan•9,380
    @ecemgoPosted over 1 year ago

    Happy to help, @Graly129 :)

    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