Submitted 2 months ago

box-shadow,margin,padding

#accessibility

Gokensu•30

@Gokensu

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

Kalpesh Patil•150

@kalpesh172000Posted 2 months ago

Good things

solution is close to the design.

Improvements

you can add the mentioned font from the googlefontapis by adding follwing line in <head> tag.

   <link
       href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rajdhani:wght@300;400;500;600;700&display=swap"
       rel="stylesheet">

and using it as follows in css.

body {
    font-family: 'Outfit', sans-serif;
}

all the child and subchild elements will inherit the font-family.

you can align the main container vertically by making the parent container i.e body into flexbox and using follwoing css.

.body{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

you can add border radius to img.

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