Assessment wanted for A cool-looking box

MDN Learn
,
#1

Hello,
I followed the steps provided for a task on the CSS MDN course(https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/A_cool_looking_box) and the code below is the resulting box.
https://codepen.io/BravenUdume/pen/wvjPMjq

Please, I would like my code to be assessed. Thank you for your feedback.

1 Like
#2

Hi @Braven_Udume

Well done. This looks great.

2 Likes
#3

thank you for the feedback.

1 Like
#4

I guess mine is not what’s expected but I tried

#5

Hi @madefromjames

Well done! :slightly_smiling_face:

Just two things:

  • text-align: center; has no effect in this case. You could use align-items: center; instead to center the text vertically. (It’s a Flexbox property.)
  • Your gradient is invalid. When you use percentage values they need to go after the color. You could also remove the percentage value and the colors are evenly applied.

This linear-gradient would make the box mostly green with a small gradient at the top and bottom:

background: linear-gradient(
              rgba(180, 45, 30, 0.2),
              rgba(8, 166, 29, 0.8) 10%,
              rgba(8, 166, 29, 0.8) 90%,
              rgba(47, 52, 146, 0.7)
            );

I hope that helps. See you!
Michael

#6

Thank you for your help @mikoMK

1 Like