File Transfer pricing component

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey good work on this one. Regarding your question well here it is

  1. The reason that it is "abrupt" is that, you are transitioning the background-color am I right, in this block of yours

      color: hsl(237, 63%, 64%);
      background: transparent;
      border: 1px solid hsl(237, 63%, 64%);
      /* transition-duration: 1s;
  

  Well it won't work because the reason is that, you set this background: linear-gradient( 90deg , rgb(163, 168, 240), rgb(105, 111, 221)); in your .more-btn and you are not transitioning any background-color at all since linear-gradient is not background-color at all, rather it is background-image and you cannot transition background-image to background-color. Unlike your middle button, it will transition this because there is a styling that declares a background-color to it, this is the styling .block-2 .more-btn { background: white; color: hsl(237, 63%, 64%); } and this will allow you to transition it. Remember that linear-gradient won't work in transitioning background colors.

  2. Well you can make use of transform: scaleY() to that second block so that will will scale only the Y-axis of it. But keep in mind that doing this, it will resize your components inside of it. So if you we to do this, you can adjust only a small margin of it like transform: scaleY(1.1)

  If you need any more help, just drop it here^

  1

  ---

  

  Maksim Deviatilov•185

  @maksimcoderPosted over 3 years ago

  Hello, Pikamart, thanks a lot for your answer I really forgot about linear-gradient which can't be transitioned. Moreover, I'll fix the middle card asap. Thanks a lot!

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @maksimcoder Your welcome on that and well, ughm, the other day I tried to transition linear gradient as well hahahha

  0
• 

  Rayane•1,935

  @RayaneBengaouiPosted over 3 years ago

  Hello Maksim Deviatilov,

  First of all, congrats for the challenge !

  • I think your transition is not working for cards 1 and 3 because you are trying do transition to a linear-gradient background which I believe might be impossible. So for example, if you replace your background: linear-gradient(90deg, rgb(163, 168, 240),rgb(105,111,221)); with a simple background: purple the transition should work.

  • For the second card you could just create a modifier class to adjust the height, so working with flexbox is not a problem here 😉

  Overall, well done for the challenge and happy coding ! 😃

  0

  ---

  

  Maksim Deviatilov•185

  @maksimcoderPosted over 3 years ago

  Hi, RayaneBengaoui, thank you for your help and I will fix my middle card and gradient asap. Have a nice day!

  0