Assessment wanted for Fundamental CSS comprehension - image alignment

MDN Learn
#1

Hello,
I am trying the Fundamental CSS comprehension exercise and I am not quite getting the image to line up all the way to the top. Also, the footer and header have the gradient but I do not want the gradient on the bottom of the header and on the top of the footer so it looks like:
image

How do I achieve this look?
code location: https://codepen.io/sonali_1/pen/abROEKP
Task: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension#assessment_or_further_help

#2

Hi @sdpatel and welcome to the community :wave:

Nice work so far!

Here are a view hints:

  • You could use a top down gradient (to bottom) where the second color matches the color of the .card. This would give you a smooth transition from header to article.
  • border-radius is a short hand property with up to four values (one for each corner). You could use something like border-radius: <value> <value> 0 0; to only make the two top corners round.
  • If you would define fixed heights for header, article and footer (that match the total height of the card), you could use max-height: 100%; on the image to make it exactly as high as the article (middle part).

I hope these hints will get you further. Feel free to ask for more help if needed. :slightly_smiling_face:

Have a nice day,
Michael

#3

@michael Thank you so much for all the hints. I was able to achieve the desired result!
Have a great day!
Sonali

1 Like
#4

Congratulations!

Keep up the great work. :+1:

By the way, your email address is visible in your post. It ended up in the optional “name” field of your profile. I recommend removing it.

#5

Removed it :+1: Thank you.

1 Like