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: github.com/yusuf-s1/3-column-preview-card-component
- Live Site URL: 3-column-preview-card-component
- HTML5
- CSS
- Flexbox
- CSS Grid (to center main)
- Mobile-first workflow
I learned that line-height property is really efficient and like this projects that have multiple and exact layout we should keep less code with same class name.
<h1>Some HTML code I'm proud of</h1>
.para {
line-height: 1.75;
}
.btn {
.....;
}
.btn1 {
.....;
}
.btn2 {
.....;
}
.btn3 {
.....;
}
- Website - Add your name here
- Frontend Mentor - @yourusername