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-1-eta.vercel.app
I started by separating the different elements into groups using
tags. I then assigned them each an ID or a class. I styled them and spent way to long trying to make it centered.
- HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
I learned how using a CSS Grid can make life easier. And how to properly center a div.
I am happy I got the box shadow working on the 'Proceed to Payment' button.
#pay {
border: 1px transparent solid;
background-color: hsl(245, 75%, 52%);
color: white;
text-decoration: none;
padding: 10px 0 10px 0;
border-radius: 10px;
font-weight: 700;
width: 300px;
margin-top: 30px;
box-shadow: 0px 10px 20px 3px rgba(56, 41, 224, 0.3);
}- Google - This helped me solve all my issues.
- Website - WIP
- Frontend Mentor - @Carter121
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent