This is a solution to the 3-column preview card component 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 depending on their device's screen size
- See hover states for interactive elements
- Solution URL: solution on frontend mentor
- Live Site URL: 3-column-preview-card-component
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- @media you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
@media (max-width: 930px){
.container{
flex-direction: column;
}
.Sedans-card{
border-radius: 10px 10px 0 0;
}
.Luxury-card{
border-radius: 0 0 10px 10px;
}
main{
height:fit-content;
}
}
I don't think so
- Website - working on it
- Frontend Mentor - @AmrEwais