Assessment wanted: fancy letterhead

MDN Learn
#1

I have completed the skill test Fancy Letterhead Paper and would like to be assessed. View my code from Glitch

NOTE: I don’t know how to do the following -

Now comment out the filter and implement the drop shadow in a different (slightly more cross-browser compatible) way, which still follows the shape of the round image.

#2

Hello @Arittra :wave: Well done on the test, your cover letter looks great! I couldn’t help but notice a few things.

:hash: :one:
The letter has a fairly dark background which could make it difficult to read actual text written on there. You already use the background property to group several properties at once such as background-image, backgroud-position and background-repeat. You could add just one line to make all these background images and gradient sit on top of a plain white background.

body article {
  background: ...,
    white;
}

:hash: :two:
Now about that filter… There is another CSS property called box-shadow, and the documentation page for it says that it is supported older browsers. Unfortunately it cannot be used as simply as the filter property since it will very literally draw the shadow of the box (and most of the time the box has a rectangular shape). For that reason, changing the shape of the box is required and to do so you can use the border-radius property which will bend the border of the box. Here is the code I wrote to do so:

h1 {
  border-radius: 50%;
  box-shadow: 3px 3px 3px black;
}

I highly recommend that you have a look at the documentation page for border-radius and that you play with that property to get how it works. While you do that, don’t forget to set a border like border: 1px solid black to really see what’s happening.

Have a great day!

1 Like