Atom, CSS button creator, Google Fonts.

Community feedback

• 

  Mihir Shjah•15

  @Mojo11Posted about 3 years ago

  Could you also brief me why the width is set to 100%?

  0
• 

  Mohamed Hussein•305

  @MohamedHussein05Posted about 3 years ago

  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

  @Mojo11Posted about 3 years ago

  @MohamedHussein05 I have gathered everything in a single div yet I am not able to get border radius and shadow.

  0

  

  Mohamed Hussein•305

  @MohamedHussein05Posted about 3 years ago

  @Mojo11 you just need to use overflow: hidden on the container div, and width: 100% on the img.

  0
• 

  ashkan naeimi•20

  @npr-devPosted about 3 years ago

  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

  @Mojo11Posted about 3 years ago

  @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-devPosted about 3 years ago

  @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

  @Mojo11Posted about 3 years ago

  @Ashkannp yeah it is working for me now. Thanks!

  1