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: Frontend Mentor Solution
- Live Site URL: Live Site at Vercel
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Responsive Design
- Custom hover states
I learned how to create a clean code, in my first attempt I used some useless divs, I tried my best to don't write useless tags. This challenge was really good to have an idea about how to wrap sections, prepare the website for mobile setting some breakup points and changing the way the elements are disposed as it stretch. Some cool stuff I added to my code was some custom hover states. I finally discoved how to create smooth transitions from the static element and hover element, this is a simple thing, but I have no idea how it was done until today.
- Flexbox Froggy - Here I play small challenges about flexbox
- CSS Zoom on Hover - Here I got some info about the zoom on hover that I applied in my design
- Github - correlucas
- Frontend Mentor - @correlucas