"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
32

Greetings all!
I’ve just finished the task of creating the letterheaded paper.
My solution was similiar to most, with border-radius of 50% and box-shadow with values 3px 3px 3px black, but with the exception, that I’ve put a border with values of 1px solid invert to recreate this outline effect.

Interestingly, when using drop-shadow filter or @chrisdavidmills border-radius and box-shadow, without setting border, I get the desired shadow, but not the “outline”.

I am also wondering, if setting the background-clip property to padding-box would do the job, as well, without the need to set a border.

33

  • {

    box-sizing: border-box;

}

html {

font-family: sans-serif;

}

body {

margin: 0;

background: #ccc;

}

article {

width: 210mm;

height: 297mm;

margin: 20px auto;

position: relative;

}

address {

position: absolute;

bottom: 8mm;

right: 20mm;

}

h1 {

position: absolute;

top: 12mm;

left: 20mm;

width: 128px;

height: 128px;

font-size: 20px;

letter-spacing: 1px;

text-align: center;

padding: 44px 0;

color: rgb(232, 248, 8);

text-shadow: 2px 2px 2px black;

background-image: url(logo.png);

background-position: center;

background-size: 100%;

/* filter: drop-shadow(6px 8px 2px rgba(0,0,0,0.7)); */

-webkit-filter: drop-shadow(6px 8px 2px rgba(0,0,0,0.7));

}

article {

background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1)),

                  linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.1));

background-position: top,bottom;

border-top:1mm solid red;

border-bottom:1mm solid red;

background-color: white;

}

34

Hi @Mamatjan and welcome to the community :wave:

Could you please put you work in an online editor like https://codepen.io/, https://glitch.com or https://jsfiddle.net/. It would make assessing you work much easier for us. And when you are at it, please also create a new topic for your work.
Those instruction can also be found at the bottom of every assessment page.

Thank you very much :blush:
Michael

PS: Your email address is visible in your post. I think it somehow ended up in the optional “name” field of your profile. I recommend removing it.

35

This should be more explicit in the directions. Note that it doesn’t require adding any HTML and that duplicating CSS selectors is okay. Was trying to use ::before and ::after, body article, etc, and of course it didn’t work. Finally got sick of failing and found this along with the answer that I never would’ve reached. I really hate CSS.