Design comparison
Solution retrospective
QR code component
Tools/ Languages used
I've completed this challenge using HTML and CSS only.
What did I find difficult while building this project?
What was challenging to me was making it responsive for mobile devices. I used css media queries solve this issue.
What areas of the code am I unsure of?
I'm not sure about the colors I chose and the units of measurement I used for the project.
Contributions
In case of any changes that you may feel I should make please do make it/ contact me. This is my first time using 'frontend mentor'.
Community feedback
- @RatifiedPosted over 1 year ago
Hello @Simon-Muchemi
Good job on completing the challenge.
I'd also advise using CSS variables to avoid repetition and make editing your code easy. For example:
:root{ --main-font: 'Outfit', sans-serif; }
Then because we only have one font to be used here, set the font in your body:
body{ font-family: var(--main-font); }
You can now comfortably remove this:
#message{ font-family: Outfit, sans-serif; }
and
#title{ font-family: Outfit, sans-serif; }
You'll have minimized repetition. I hope this helps.
Happy coding lad.
Marked as helpful0 - @hitmorecodePosted over 1 year ago
Congratulations well done. These are the CSS changes I would recommend.
-
Place the font-family inside the body, this will apply to the entire page. No need to do it for each tag.
-
Use fixed width and height for the card instead of using % and vw. In this case you should avoid % and vw, this will break your page.
-
Stick to one colorization method, you are using named colors, hsl and hex. For best practice avoid named colors.
-
Remove the margin on the #QR-code and add padding on the .container
-
Because the width of the card is smaller than 375px and there is only one card, you don't need to use media queries. If you want to practice with media queries add more cards to the page and make it responsive.
-
In this case the easiest way to center the card on the page is by using flexbox, but if you want to use grid to do it. You have to add grid divisions to your page to achieve this.
These are the few changes you can make to you CSS to make it a bit better :-)
body{ background-color: hsl(218, 8%, 72%); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); place-items: center; font-family: Outfit, sans-serif; } #QR-code{ height: 288px; width: 288px; border-radius: 15px; } .container{ grid-column-start: 2; ### you can combine column-start and column-end by doing this: grid-column: 2 / 3. The first value is for the start and the second for the end. grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; height: 500px; width: 320px; background-color: aliceblue; ### change to hsl or hex border-radius: 15px; text-align: center; box-shadow: 0 10px 8px #8d9090; padding: 20px; } #title{ font-weight: 700; font-size: 18px; color: #2b3e4c; } #message{ font-weight: 400; font-size: 14px; color: hsl(165, 7%, 55%); padding-bottom: 20px; } #title, #message{ margin: 10px; }
If you have any questions regarding this, feel free to ask
Marked as helpful0 -
- @Rampage-SamaPosted over 1 year ago
Lovely stuff Simon quick note you should have a fixed width for your desktop version and a breakpoint for your small devices. Good job none the less!
0
Please log in to post a comment
Log in with GitHubJoin 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