My First UI task, The Preview Card

Hello There

I have some things you could think while doing your future projects:

-It seems that your solution is not really centered and it looks like your component overflows the page, you can fix that adding some style to your body tag, for example:

display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;

It makes your body tag take full device height, stops it from overflowing the page and centers your component vertically and horizontally

I can also see you did not create style for mobile devices media queries are something that could help you with it

Replace <div class="b"> with the main tag to make the content/page accessible. click here for more on web-accessibility and semantic html

Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

There is no need to style . b

Give the body a background-color of hsla(0, 0%, 100%, 0.75).

To center .mainCard using flexbox or grid :

• USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

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

• USING GRID: add min-height:100vh; display: grid place-items: center to the body

body{
min-height: 100vh;
display: grid;
place-items: center;
}

You forgot to add a media query for the mobile design. For more on media queries, click here

To prevent the content from overflowing on smaller screens, replace the height with a padding value for all the sides.

You forgot to give the design the hover effects.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here and here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING