This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Solution URL: cdrn19/qr-code-component-main
- Live Site URL: cdrn19.github.io/qr-code-component-main
In the development of this project we tried to make a resemblance to the original looking for the perfection of each pixel.
Use certain tools to measure each pixel corresponding to your block to make a very exact match.
Don't consider doing any responsive implementations, the project looks perfect on mobile devices.
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Mobile-first workflow
Use tools and principles where you use plain code as long as it depends on the context for which it is being developed.
Since this is a simple project, use the simplest possible code.
I want to learn even more about the box-shadow property, i still don't know how to decipher it to perform this type of challenge .
In this challenge it was used for this section:
<div>
<img src="./images/image-qr-code.png" alt="">
<h2>Improve your front-end skills by building porjects</h2>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>div {
width: 320px;
padding: 16px;
background-color: var(--White);
text-align: center;
border-radius: 20px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}- MDN WEb Docs - This article helped me a bit with box-shadow.
- Website - Carlos Revetti
- Frontend Mentor - @cdrn19
- Twitter - @CarlosRTT
- Platzi - Cdrn19
I want to thank the Platzi School of Web Development and JavaScript School where i am an active studen.
- Platzi - School of Web Development