This is a solution to the Order summary card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- See hover states for interactive elements
- Solution URL: https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj/hub/nextjs-app-GGeXP-02L
- Live Site URL: https://fm-order-summary.vercel.app/
- Semantic HTML5 markup
- CSS Grid
- Mobile-first workflow
- Next.js - React framework
- Add fonts from google using Next.js
- Use SVG as background-image
- Center an element inside a div with height: 100vh
- Optimize images with Image component from next/image
- CSS Grid (need to get used use to it)
- Next.js - This helped me for adding a new font from google fonts.
- Rohit Gulam - This helped me for centering my main element.
- Frontend Mentor - @tonytangdev
- Twitter - @tonytangdev
Congrats to myself for completing the challenge by myself ๐