This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help us to improve our coding skills by building realistic projects.
In this project i have given the solution for QR code components from Frontend Mentor
- Solution URL: solution URL here
- Live Site URL: live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
In this project i have learnt how box model works and how to display flex property
<body>
<div class="container">
<div class="row">
<div class="card">
<div class="card_img_container">
<img src="./images/image-qr-code.png" alt="qr_code_image">
</div>
<div class="card_content_container">
<h1 class="card_title">Improve your front-end skills by building projects</h1>
<p class="card_description">Scan the QR code to visit Frontend Mentor and take your coding skills to the next
level</p>
</div>
</div>
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--clr-White: #ffffff;
--clr-Light-gray: #d6e2f0;
--clr-Grayish-blue: #7b879d;
--clr-Dark-blue: #1f3251;
}
/* only for paragraph */
html {
font-size: 15px;
}
body {
font-family: 'Outfit', sans-serif;
background-color: var(--clr-Light-gray);
}
.container {
width: 100%;
/* margin: auto; */
}
.row {
display: flex;
flex-wrap: wrap;
height: 750px;
justify-content: center;
align-items: center;
}
img {
width: 100%;
height: auto;
}
.card {
background-color: var(--clr-White);
padding: 1.25rem;
width: 323px;
/* margin: auto; */
border-radius: 10px;
}
.card_img_container {
margin-bottom: 1.5rem;
}
/* if we want to give the border radius for the image we need to add radius by mentioning the ing tag using parent class */
.card_img_container img {
border-radius: 10px;
}
.card_content_container {
text-align: center;
margin-left: 1.25rem;
margin-right: 1.25rem;
}
.card_title {
font-size: 20px;
font-weight: 700;
color: var(--clr-Dark-blue);
margin-bottom: 1.5rem;
}
.card_description {
font-weight: 400;
color: var(--clr-Grayish-blue);
margin-bottom: 2rem;
}- Website - sajaikumar
- Frontend Mentor - @sajai20