Design comparison
Solution retrospective
I've gained valuable insights into creating responsive web designs with fonts and images. Moving forward, I'm eager to explore integrating 3D card elements into my projects. This additional dimension promises to enhance both the visual appeal and user experience of my designs.
What challenges did you encounter, and how did you overcome them?When facing the challenge of positioning components at the center of the screen, I explored various methods to achieve this, such as utilizing "display: flex;" with "justify-content: center;", and employing "position: absolute;" with "top: 50%;" and "left: 50%;" alongside "transform: translate(-50%, -50%);". Through experimentation and research, I successfully implemented these techniques to ensure the desired center alignment of the components on the screen.
What specific areas of your project would you like help with?I appreciate the offer, but for now, I prefer to tackle challenges and find solutions on my own. Thank you for understanding.
Community feedback
- @DreamleafPosted 11 months ago
An interesting trick of the eye can happen with border-radius, where there are 2 corners nested (like the image inside the card here).
If you make the inner border-radius (on the card) slightly smaller, it has a better visual effect and looks neater. The design here does that, even though it's a smaller detail that most people wouldn't notice, but it helps with the overall look.
It's probably not a "thing", but I always think of nested corners to have a V shape pointing to the corners and providing a kind of visual perspective to a design.
Marked as helpful0@PiriyaLapaPosted 11 months ago@Dreamleaf Thank you for guiding me, I will adopt your trick. Thank you so much.
1 - @danielmrz-devPosted 12 months ago
Hello @PiriyaLapa
Your peoject looks great!
If you change the main text color to
#2B3440
and give your card abox-shadow
, it'll look even closer to the original design.Other than those little details, you did a great job!
0
Please log in to post a comment
Log in with GitHubJoin 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