"Creating fancy letterheaded paper" assessment

MDN Learn
#21

Hi, Chrismills, I had just finished the “Creating fancy letterheaded paper” assessment. Could you please give me some feedback? Here is the css code

/* Your CSS below here */
article {
    background: url('top-image.png') no-repeat;
    background: url('top-image.png') top center no-repeat,
        url('bottom-image.png') bottom center no-repeat,
        linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0), rgba(0,0,0,0.1));
    background-color: white;
    border-width: 1mm 0;
    border-style: solid;
    border-color: red;
}

h1 {
    background: url('logo.png');
    /*filter: drop-shadow(3px 3px 3px black);*/
    -webkit-filter: drop-shadow(3px 3px 3px black);
}
#22

Hi @Tom-Vanderboom! Very nice effort on this one. You basically got it all correct; some slightly different syntax to me, but the end result is fine.

The only thing I’d say is if you look at our version, you’ll see that we have the multiple background images specified in a different order in the background declaration:

This means that the semi-transparent gradient is underneath the graphic, and so doesn’t darken it. I don’t think this is wrong exactly, but just though I’d point it out.

Looking back at this, the filter gives a much nicer end look than the box-shadow, but I’m still not convinced it is supported well enough to use on its own.

#23

Thanks you very much for reply.

#24

Here it is : * {
box-sizing: border-box;
}

html {
font-family: sans-serif;
}

body {
margin: 0;
background: #ccc;
position: relative;
}

article {
width: 90%;
height: 300mm;
border: 2px solid red;
margin: 20px auto;
position: relative;
}

address {
position: absolute;
bottom: 4%;
right: 3%;
}

h1 {
position: absolute;
top: 6%;
left: 8%;
width: 128px;
height: 128px;
font-size: 1.5rem;
letter-spacing: 1px;
text-align: center;
padding: 10px 10px;
color: white;
text-shadow: 1px 1px 1px black;
background-color: gray;
background: url(…/img/logo.png) no-repeat 99% center,
linear-gradient(to bottom,orange, purple 50%, orange);
}

.top-image img{
width: 100%;
position: absolute;
margin-top: -15px;
}

.botton-image img{
width: 100%;
position: absolute;
bottom: 0;
}

#25

Hi @xfaramir,

Thanks for submitting your assessment CSS code. It looks like you have quite a few bits missing or different to how we did this. I think maybe thebest way for us to go forward here is for you to have a look at our version, see what we did, and then have another go?

See the following links:

Best regards. Let me know if you need any more help.

#26

I also tried this.
Published on GitHub Pages.
Please rate this!
I am very happy.
Thanks.

#27

@amaryllis I’ve had a look at this, and it looks really good — congratulations! In fact, I think your color scheme looks slightly nicer than the original :wink:

1 Like
#28

I have just completed the assessment.

This was sufficiently difficult :blush:

I noticed that while my page came out exact, some of my code was different.

Please let me know if these are “ok, but just different”, or if it’s things that could break pages later down the road.

article {
  width: 210mm;
  height: 297mm;
  margin: 20px auto;
  position: relative;
  background: top no-repeat url(top-image.png);
  background: top no-repeat url(top-image.png),
              bottom no-repeat url(bottom-image.png),
              linear-gradient(to top, transparent, white 80%, DarkGray),
              linear-gradient(transparent, white 80%, DarkGray);
  background-color: white;
  border-top: 1mm solid black;
  border-bottom: 1mm solid black;
}

h1 {
  position: absolute;
  border-right: 5px solid rgba(50,50,50,50.7);
  border-bottom: 5px solid rgba(50,50,50,50.7);
  border-radius: 65px;
  top: 12mm;
  left: 20mm;
  width: 128px;
  height: 128px;
  font-size: 20px;
  letter-spacing: 1px;
  text-align: center;
  padding: 44px 0;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-image: url(logo.png);
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.7));
}

Thank you!

#29

Hi @mbrasseau!

I’ve looked at your code, and it looks really good. In fact, I think your looks better than mine :wink:

So yes, OK but different sums it up. Better than OK though!

1 Like
#30

Hey @chrisdavidmills ! I was happy today to see your reply to the other assessment. Here’s the next one for you - I think I realized the issue with box-shadow just while scrolling through this thread. Thanks!

#31

@Pawper hi there!

This is looking mostly good. The only thing I noticed was the borders and background image gradients spill out of the page and across the entire screen. That’s because you need to apply the relevant properties to the <article>, not the <body>.

But apart from that, more great work!

1 Like