QRCode completed using vanilla html and css

Please log in to post a comment
Log in with GitHubCommunity feedback
- @Abdul-RahmanNasser
Well Done, you are near from the required design that is some of improvements body element The width should be 1440px and the height should be 960px.
div element with class="card" The width should be 320px. The border-radius should be 20px. padding-bottom should be 40px. You don't need to set a height. You don't need to set a justify-content and align-items because of using text-align property with a value is center. You don't need to set background-color. Its better to set gap between image and div with class="box" with a value is 24px. ".card > .box" isn't necessary, you can ".card" because it is not repeated.
img element The width for image should be 288px.
div element with class="box" You don't need to set font-family property because you do in body selector. You don't need to set width. You should set padding-right and padding-left with a value is 16px.
p element with class="caption" it is better to replace it to h1 element with style is "margin: 0; font-size: 22px; line-height: 120%;" with your other properties.
p element with class="description" The properties should be "font-size: 15px; line-height: 140%; letter-spacing: 0.2px" without padding and that with your other properties. and all selector has scale with a value is 1. all of this is in the sketch with figma.
- @yrjeb
Everything looks good, except for the font sizes, which appear to be inconsistent or not optimized for readability. The variation in font sizes can cause confusion and disrupt the overall visual hierarchy of the content. To address this, it's important to standardize the font sizes for different sections and ensure they are proportionate and easy to read.
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