This is a solution to the Four card feature section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- Solution URL: Github Code Link
- Live Site URL: Four Card Feature Section
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
/* FEATURE CARD TEXT CONTENT */
.feature-card-text-content {
display: flex;
flex-direction: column;
align-items: center;
margin: 3rem 0 0;
}
.big-heading {
color: var(--grayish-blue);
font-size: 2rem;
}
.small-heading {
color: var(--dark-blue);
font-size: 2rem;
}
.card-description {
color: var(--grayish-blue);
text-align: center;
width: 30rem;
padding: 1rem 0 0;
}
/* FEATURE CARD BANNER */
.feature-card-banner {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
margin: 3rem 0 0;
}
.banner-box {
background-color: var(--light-gray);
box-shadow: 4px 2px 8px var(--bs-cls);
border-radius: 8px;
padding: 1.4rem 2rem;
}
.supervisor-box, .karma-box {
transform: translateY(9rem);
}
.banner-heading {
font-size: 1.4rem;
color: var(--dark-blue);
}
.banner-description {
color: var(--grayish-blue);
font-size: .9rem;
width: 20rem;
line-height: 1.5;
}
.banner-img {
padding: 4rem 0 0;
position: relative;
left: 16rem;
}olor: papayawhip;
- FlexBox
- Tranform Property
- Website - Four Card Feature Section
- Frontend Mentor - @AmanGupta1703