Mihir Shjah• 15
@Mojo11
Posted
Could you also brief me why the width is set to 100%?
0
Design comparison
Solution retrospective
I created my version of the order summary but there are still a lot of things that are not there. I wanted the box to be rounded and also the box shadow could have been there. Also the change link, I was not able to shift it next to the annual plan. Can anyone suggest how these things can be resolved ?
Community feedback
Mohamed Hussein• 305
@MohamedHussein05
Posted
Well done I see that you did your best there, now about your questions:
for rounded corners check this article : Rounded corners
and this one for box shadows: How to add a shadow to an element
finally in order to layout things you should learn layout tools like flexbox and CSS grid, check this list for Flexbox basics.
hope this helps and if you need anything else don't hesitate to ask.
0
Mihir Shjah• 15
@Mojo11
Posted
@MohamedHussein05 I have gathered everything in a single div yet I am not able to get border radius and shadow.
0
Mohamed Hussein• 305
@MohamedHussein05
Posted
@Mojo11 you just need to use overflow: hidden on the container div, and width: 100% on the img.
0
ashkan naeimi• 20
@npr-dev
Posted
Hi, 1-for the round edge use border-radius. 2- for the box shadow use box shadow generator online but still you should learn how it works. 3- for the change next to annual, put all of them in a div together and display flex naturally aligns everything next to each other. then use margin auto to center everything and use padding on the parent to replicate the original design more.
0
Mihir Shjah• 15
@Mojo11
Posted
@Ashkannp Thank you so much on the solutions. I'll definitely try them out. also for the round radius and shadow how do I group all the div's together ?
0
ashkan naeimi• 20
@npr-dev
Posted
@Mojo11 all your main code should be in a main div either a div or in a main html element. when you did that put all your code in the main div again in another div like section or div works too, give border radius to the main div. and make its overflow hidden to it cover the image corners. i suggest to read on links Mohamed kindly provided you as they help you alot. summery:
<main> img <section> your code </section> </main>0
Mihir Shjah• 15
@Mojo11
Posted
@Ashkannp yeah it is working for me now. Thanks!
1
Please log in to post a comment
Log in with GitHub
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