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: https://github.com/surajsharma19/QR-code-component
- Live Site URL: https://surajsharma19.github.io/QR-code-component/
- HTML5 markup
- CSS custom properties
I learn about basic of HTML and CSS and also about how to use postion to center the element, what is the use of max-width and how to use box-shadow.
.card{
width: 100%;
max-width: 302px;
height: 470px;
position: absolute;
margin: auto;
inset: 0;
border-radius: 16px;
background-color: hsl(0, 0%, 100%);
box-shadow: 0 0 10px hsla(219, 15%, 55%, 0.304);
padding: 16px;
text-align: center;
}
I am learning more about CSS and will learn more about flexbox, grid and responsiveness.
- Website - Suraj Sharma
- Frontend Mentor - @surajsharma19