This is a solution to the Single price grid 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 for the component depending on their device's screen size
- See a hover state on desktop for the Sign Up call-to-action
- Solution URL: https://www.frontendmentor.io/solutions/single-price-grid-component-RPOc9BPYp
- Live Site URL: https://single-price-grid-component-seven-mu.vercel.app/
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
Learnt how to use display:grid
. Though this is a very basic appliction of the property, I used it to layout the bottom part of the component. Flexbox would have been another option, but what would you gain if you do not apply anything you learn.😉
.bottom {
display: grid;
grid-template-columns: 1fr 1fr;
}
- WebDevSimplied - Learn CSS grid in 20 minutes - This helped me use the grid structure in the project.
- LinkedIn - Quartey-Papafio Nii Laryea
- Frontend Mentor - @Pap-Ski