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
![](C:\Users\user\Desktop\Front end challenges\3-column-card-solution\screencapture-2021-06-12-18_03_30.png)
- Solution URL: https://github.com/Eelyneee/3-column-card-challenges
- Live Site URL: https://eelyneee.github.io/3-column-card-challenges/
- CSS custom properties
- Flexbox
- Media queries
In this challenge, I how to make the website responsive using media queries.
@media only screen and (min-width: 750px) {
.box {
flex-direction: row;
}
.card1 {
border-radius: 10px 0px 0px 10px;
}
.card3 {
border-radius: 0px 10px 10px 0px;
}
} ;
- Media Queries Demystified: CSS Min-Width and Max-Width - This helped me for clear my doubts on min-width and max-width. I'd recommend it to anyone still learning this concept.
- Website - https://www.linkedin.com/in/eelynelow/
- Frontend Mentor - @Eelyneee
- Email - eelyne99@gmail.com