Submitted over 1 year ago

single price grid

accessibility

Fallou Jeng•540

@falloumacbook

A solution to the Single price grid component challenge

Preview Code

Solution retrospective

Hello, Frontend Mentor Community! 👋

I'm thrilled to announce that I've successfully completed another challenge! 🎉💻

It was really fun building this project, i have learnt so much from it.

Please check out my solution and provide your valuable feedback.

Thank you for your continued support and encouragement.

Happy coding fellas!!!

Code

Please log in to post a comment

Community feedback

P
Daniel 🛸•44,810
@danielmrz-dev
Posted over 1 year ago
Hello @falloumacbook!

Your project looks great!

Since you asked for feedback, I have a few suggestions for you to improve your project:
- I noticed that you used margins to place your card closer to the middle of the page. There are 2 easier and very efficient ways to do it without margins or paddings.
1. You can apply this to the body:
```
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
```
or you can apply this to the element you wanna center:
```
.element {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
}
```
- Also, your box-shadow was applied only on the first container. Give the whole thing a box-shadow and it'll look even closer to the original design.
I hope it helps!

Other than those little details, you did a great job!
Marked as helpful
Master•40
@Fallou-Jeng
Posted over 1 year ago
Nice work

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord