Request for assessment of "A cool-looking box" MDN exercise

Hello, I have completed the last exercise of the CSS building blocks section. Again, I would like to ask someone with more experience to take a look.

Also, I have two additional questions:

  1. I used the display: flex; declaration in order to center the text vertically. Was that the right approach?
  2. I’m not sure about the box-shadow declarations I used. I tried to search MDN for more info about applying several box-shadows at once but I wasn’t able to find anything. I have completed the exercise thanks to some stack overflow post I found. Could you provide me a link with more info on box-shadows?
  3. I also created a second box, using ‘Box-shadow generator’ that I found on MDN.

A cool-looking box - Learn web development | MDN (mozilla.org)

My solution:

Edit fiddle - JSFiddle - Code Playground

Hello @Rastko_Gojgic

you doing great well done

  1. i am not experience to say if there better way or not but it always depend on the use case check this to see many ways to align it vertically
    https://www.w3docs.com/snippets/css/how-to-vertically-center-text-with-css.html and i guess using flex is better than many other ways in that case

  2. for box-shadow check this one https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow the last example already multi shadow option
    box-shadow: 3px 3px red, -1em 0 .4em olive; notice the comma the seperate 2 shadow
    if you checked the syntax part https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#syntax you would see it mention it

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

hope that help and have a nice day :slight_smile:

1 Like

Nice, this seems very useful, thanks for the reply.

Have a nice day!

2 Likes

thanks and you welcome :slight_smile: