This is a solution to the Stats preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout depending on their device's screen size
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
I had some issues with positioning the image, but then i remembered grid area :).
.card-container {
display: grid;
grid-template-areas:
"t t i i"
"t t i i";
text-align: left;
background: var(--clr-Dark-desaturated-blue);
width: 63.25em;
border-radius: 10px;
}
.hero-img {
grid-area: i;
background: url(./images/image-header-desktop.jpg) no-repeat;
background-size: cover;
background-position: center;
background-color: var(--clr-Soft-violet);
background-blend-mode: multiply;
border-radius: 0 10px 10px 0;
width: 450px;
height: 55vh;
}
.card-content {
grid-area: t;
margin: 20px;
}