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.
Desktop Site
Mobile Site
- Solution URL: GitHub Solution Link
- Live Site URL: Live Site link
- Semantic HTML5 markup
- Vanilla CSS
- TailWind CSS
I learnt how to change the display size of the website for desktop and mobile separately and customize them as need for the two screens. This was done by using @media element of CSS Further, I also learnt how to add an Image in a box element using div
@media only screen and (max-width: 375px) {
div.box {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: block;
}
I'd like to continue my focus on writing better CSS and also incorporate TailWindcss in my future learnings
- W3 Schools - This helped me is clearing my understanding of CSS syntax and elements
- Website - QR-Code Component
- Frontend Mentor - @Bharvi-Sampat
- Twitter - @bharvisampat