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: Add solution URL here
- Live Site URL: Add live site URL here
To complete this project, I first started by using CodePly.com to figure out the layout for the grid component. I played around with the divs, cols and rows. Then I went on to styling the project. I styled one box at a time, starting with the top box and so forth. After The design looked close to the final design, I went ahead and started figuring out the responsivesness for smaller screens.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
Need to work on Flexbox and Grid.
- Bootstrap - This helped me to understand using Grid layout.
- Codeply - Great editor to use if you dont want to have to keep deleting code. And to also get a rough draft of how you want your project to look.
- Github - taepal467
- Frontend Mentor - @taepal467