Frontend Mentor - QR code challenge

👾Hello , congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

Here's is some advice to improve even more your solution:

Give the proper alignment for the card using the tags display: flex and min-height: 100vh inside body:

body {
    min-height: 100vh;
    background-color: rgba(192, 229, 252, 0.726);
    display: flex;
    align-items: center;
    justify-content: center;
}

Remove these margins to allow the aligment:

.card {
    width: 210px;
    /* height: 364px; */
    padding: 0.8em;
    background: white;
    position: relative;
    /* overflow: visible; */
    /* margin-left: 560px; */
    /* margin-top: 110px; */
    border-radius: 19px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
}

This is the correct color for the background body { background-color: hsl(212deg 66% 92%);} and you can find all these values in the file called style-guide.md.

👋 I hope this helps you and happy coding!

Hi Mahmud,

Great job on your first project ! For the next project I recommend to create a seperate css file for your style. Your code will be way cleaner and thus easier to read. You forgot to center your main-conatiner aswell. For that, personnaly, I create an overlay underneath to center my main-container (not sure it is the best solution though - I am a beginner aswell :D). Try to read your whole code before submitting it to fix minor coding typo such as empty <div>, forgot indents, useless spaces between elements. Oh and a last one read the report right below the design comparison to simply fix a few things.

Over all great job ! Have a good one.

Congratulation on completing this frontend mentor challenge. Your solution looks great. I see you have received some incredible feedback. If you don't mind adding some:

• You should use <main> landmark to wrap the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

• In my opinion, the image is an important content. 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.

• There are s me unnecessary div’s has to be removed.

• consider Indenting your code consistently. It makes it really hard to read and find bugs like this. Your code editor can even do this formatting automatically for you.

Hopefully this feedback helps.