Responsive Card Component with Semantic HTML

Hello @TGPJonathon!

Your project looks great!

I noticed that you used margin to place your card closer to the middle of the page. Here are two simple and very efficient ways to do it without margins or paddings:

• You can apply this to the body (in order to work properly, you can't use position or margins):

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

Or you can apply this to the element you wanna center:

.element {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
}

I hope it helps!

Other than that, great job!

Hi Jonathon, this looks great!

Just a little detail I noticed, nothing major, in order to apply the border-radius, it's possible to apply directly to the .card-image & .card-content as follows for the mobile layout

.card-image {
border-radius: 1.5rem 1.5rem 0 0;
}

.card-content {
border-radius: 0 0 1.5rem 1.5rem;
}

in order to apply this to the desktop version with a media query try this below

.card-image {
border-radius: 1.5rem 0 0 1.5rem;
}

.card-content {
border-radius: 0 1.5rem 1.5rem 0;
}

I hope this helps :)