Frontend Mentor | Carlos Chaves's profile

Allan•310

@Mut1s0

Submitted almost 2 years ago

Responsive QR code component made with Tailwind CSS

#react#tailwind-css

1

Carlos Chaves•260

@sircarloschaves

Posted almost 2 years ago

Hi brother!

If you pay attention, you will notice that the internal border-radius is different from the external border-radius, in different layouts you will also notice this, that if you apply the same border-radius that is in the parent to the child, it will look different even though it's the same number.

There is a 'hack' to smooth out this difference, which is as follows: You will do a calculation, which in this case will be the external border-radius - the padding or the space between the external border and the internal border.

If you want to know more, read this article that talks about it: Perfect nested border radius in CSS

Marked as helpful

Cheosphere•1,040

@Cheosphere

Submitted over 2 years ago

Easybank Landing Page (HTML | CSS | JS Vanilla => animejs library)

9

Carlos Chaves•260

@sircarloschaves

Posted almost 2 years ago

Hey, how do I animate a button with a gradient like you did?

rzho17•50

@rzho17

Submitted almost 2 years ago

Responsive Social Proof Section

1

Carlos Chaves•260

@sircarloschaves

Posted almost 2 years ago

What's up friend, how's it going?

Let's go:

For the testimonial containers you could have used display: grid, you would do grid-template-columns: 1fr in the mobile layout, and when you switched to the desktop you would do grid-template-columns: repeat(3 , 1fr);
I think it's interesting that you don't specify a size for the container, but rather let padding-block define the size of your container, but if you found the responsiveness the way you did it best, and it worked, everything is fine. But in general you don't want to specify a fixed size for your designs.