Frontend Mentor | Carlos Chaves's profile

@Mut1s0Submitted over 1 year ago

Responsive QR code component made with Tailwind CSS

#react#tailwind-css

@sircarloschavesPosted over 1 year 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

0

Cheosphere•1,040

@CheosphereSubmitted about 2 years ago

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

9

Carlos Chaves•260

@sircarloschavesPosted over 1 year ago

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

1

rzho17•50

@rzho17Submitted over 1 year ago

Responsive Social Proof Section

1

Carlos Chaves•260

@sircarloschavesPosted over 1 year 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.

0