Order summary card

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  Hello Daníel J., congratulations for your solution!

  **Answering your questions: **

  1. The button box-shadow: to make the button shadow precisely like in the design files, you'll need the premium subscription to copy and paste the exact values from the Figma/Sketch. But I need to say that the worth what you pay for because the time you save is just coding and not trying to guess the design elements.

  You can play around with box-shadows using this box-shadow generator tool: https://html-css-js.com/css/generator/box-shadow/

  2. Image header For the image header fit the container, you can set max-width: 100%; and display:block; to work easily the images, then you apply overflow:hidden; and object-fit:cover; to keep the image inside the container bounds.

  3. Annual Plan Section for the annual plan section, you need to wrap all the content inside a div and inside this div two other divs, so the is the first element, then a div with the "annual plan" / "59..." then the link <a> change. So should be a structure like that:

  <div> <img> <div> <h3><h3> <p><p><a> then you apply display:flex; to this div and change the flex-direction:row; when your card become mobile change the flex-direction to columns to save space inside the container.

  I'll let you the link to my solution, so you can see how I build it. I used the same approach I told you about in my tips:

  https://www.frontendmentor.io/solutions/order-summary-component-vanilla-css-custom-wave-background-hover-tEKUwaT2id

  I hope it helps you. Happy coding!

  1