Skip to content
Submitted over 1 year ago

qr code

mahdisafi4•20
@mahdisafi4
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 just find some difficult in the colors

Community feedback

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

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

    Your solution is not responsive now. If you want that this solution is responsive, you can follow these suggestions below.

    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 in CSS file:
    • In order to center the card vertically and horizontally, 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:  #6699CC; */
    background-color: hsl(212, 45%, 89%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
    • If you use flexbox in the body, you don't need to use margin, top and position in the .bord to center the card
    • If you use max-width instead of width and height, the card will be responsive and you'd better reduce the width a bit
    • You'd better give padding to give a gap between the content and the border of the card
    .bord{
      /* position: relative; */
      /* margin-left: 35%; */
      /* top: 50%; */
      /* width: 400px; */
      max-width: 280px;
      /* height: 650px; */
      /* border: 5px solid; */
      border-radius: 20px;
      /* background-color: aliceblue; */
      background-color: white;
      padding: 20px;
}
    • 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% for the img in this way:
    img{
    /* width: 360px; */
     width: 100%;
     display: block;
     border-radius: 20px;
     /* margin: 20px 20px 20px 20px; */
}

    Hope I am helpful. :)

    Marked as helpful
    0
  • Bader Idris•2,880
    @Bader-IdrisPosted over 1 year ago

    You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

    .container {
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

    the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful

    Marked as helpful
    0
    mahdisafi4•20
    @mahdisafi4Posted over 1 year ago

    @Bader-Idris thank you very much i already use it

    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