QR code using CSS box model

Hello Bolu,

Good work in completing the challenge. Yes CSS flexbox will help with a more responsive outcome instead of using margins to center element.

• To center your card, I recommend you remove all the margins (top and left) you put on your "container" div. Instead add the following attributes to your "body" element:

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;

The first three is to center all child elements horizontally and the last one takes all the size of the height of the device that sees it and centers the content vertically.

• You can use "text-align:center" on your ".top" element to center all text

Hope this helps.

Hi Boluwatife Damilola Somorin,

Congratulation on completing your first frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:

• In my opinion, the alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image. For future use , the alternate should not hyphenated , it should be human readable.

• Adding rel="noopener" or rel="noreferrer" totarget="_blank"links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

The commented rules should be removed
body{

    background-color: hsl(212, 45%, 89%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: 'Outfit', sans-serif;
}
.container {
    background-color: hsl(0, 0%, 100%);
    width: 100%;
    /* height: 70vh; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    max-width: 300px;/* use rem instead of px*/
    padding: 1rem;
    /* margin-top: 100px; */
    /* margin-left: 500px; */
    /* border-style: hidden; */
}
.qr {
    width: 100%;
    display: block;
    /* padding-top: 2px; */
    /* padding-bottom: 3px; */
    border-radius: 10px;
    /* margin-top: 20%; */
    /* margin-bottom: 5%; */
}
.top {
    /* margin-left: 40px; */
    /* padding-bottom: 80px; */
    /* margin-right: 30px; */
    text-align: center;
}
h3{
    font-weight: 700;
    color: hsl(218, 44%, 22%);
    margin: 1rem 0;
    font-size: 1.375rem;
}
p {
      /* margin-bottom: 1rem; */
    font-weight: 400;
    padding: 0 1rem;
    margin-bottom: 1rem;
    line-height: 1.6;
    /*font-family: 'Outfit', sans-serif;*/
    font-weight: 300;
    color: hsl(220, 15%, 55%);
    /* padding-top: 30px; */
    /* padding-left: 10px; */

}

• Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

Hopefully this feedback helps. Happy coding!