Submitted over 2 years ago

QR-Code-Component

Femi•40

@mi-olak

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi, thank you for checking my code. I'm open to any and all constructive criticism and suggestions, thanks.

Community feedback

Ahmed Bayoumi•6,740

@Bayoumi-devPosted over 2 years ago

Hey Femi, Document should have one main landmark, Contain the component with <main>.

<main class="main">
      //...
</main>

Marked as helpful

Femi•40

@mi-olakPosted over 2 years ago

@Bayoumi-dev, thanks. I've made the changes.

Ahmed Bayoumi•6,740

@Bayoumi-devPosted over 2 years ago

@mi-olak I also suggest you center the component on the page with Flexbox, by giving the parent element <body> the following properties, and there are some changes to git your project look as close to the design as possible.

body {
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    background-color: hsl(212, 45%, 89%);
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    /* margin-top: 70px;        <--- Remove */
    align-items: center;         /* <--- Add */
    min-height: 100vh;         /* <--- Add */
}
.main {
    width: 320px;
    border: 1px solid darkgray;
    background-color:  hsl(0, 0%, 100%);
    /* margin-left: 38%;       <--- Remove */
    /* margin-right: 38%;        <--- Remove */
    border-radius: 20px;         /* <--- Changed */
    padding: 10px 0;
}

.main h1 {
    color: hsl(218, 44%, 22%);
    font-size: 1.47rem;        /* <--- Add */
/* 
Use REM for font size, It is a must for accessibility because
 px in some browsers doesn't resize when the browser settings are changed. 
*/
}

.main p {
    color: hsl(220, 15%, 55%);
    font-size: 15px;
    padding-bottom: 20px;        /* <--- Changed */
}

See this article ---> CSS REM – What is REM in CSS?

Good Luck!

Marked as helpful

Femi•40

@mi-olakPosted over 2 years ago

@Bayoumi-dev Thank you so much. I could see the difference immediately I made those changes. The article on REM was very helpful.

Please log in to post a comment

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