Oh! I will look for that and I hope I could help a lot as soon as I understand a little bit more ! hehe
Hi! No… did you find why?
Thank you @chrisdavidmills for the hint about using border-radius , I had the same doubt as @maurodibert and that gave me the answer 
About github, I think it would be a good idea to make a long project with all our assessments uploaded to our github personal page, maybe aside of the main content of the course (in order to not make the course dependant of third party services). Or a bunch of them, the most challenging for example.
Anyway, this is my code
article{
background: url(top-image.png) no-repeat top;
background:
linear-gradient(to bottom, rgba(0, 0, 0, 0.2 ), rgba(255, 255, 255, 0.1) 33%, rgba(255, 255, 255, 0.1) 66%, rgba(0, 0, 0, 0.2)),
url(top-image.png) no-repeat top,
url(bottom-image.png) no-repeat bottom,
white;
border-top: 1mm solid red;
border-bottom: 1mm solid red;
}
h1 {
background: url(logo.png) no-repeat center;
border-radius: 64px;
border: thin solid white;
/* filter: drop-shadow(4px 4px 3px black); */
box-shadow: 4px 4px 4px black;
}
and the live preview. It ended up being almost the same as the css of the finished example provided by chris; the only difference is that I centered the logo so the white border around it looked equally thick.
Edit: Somehow in my first attempt my message got blocked for using github links (that’s why I put the code instead) and even worse , all my previous messages in the past assessment got marked as spam immediately after and got hidden. What a let down!! It discourages me to write comments and I’ve just started.
Edit 2: It’s all right now 
.
Hi @2alin — sorry to hear about your troubles with github links. That is really strange. You can always contact me directly if you have more troubles (cmills@mozilla.com).
Congrats on the great work - the code is looking pretty good.
1 Like
Can I get a marking scheme for the same assessment ?
Sure thing @sarth03:
- Live example: https://mdn.github.io/learning-area/css/styling-boxes/letterheaded-paper-finished/
- Source code: https://github.com/mdn/learning-area/tree/master/css/styling-boxes/letterheaded-paper-finished
- Marking guide: https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-finished/marking-guide.md
So, I got a question. In the “Box Model Recap” module there’s this statement(under “Changing the box model completely”) and I quote: “The total width of a box is the sum of its width, padding-right, padding-left, border-right, and border-left properties.”
What about margins?
Nope, margin doesn’t count towards the total width of a box. Although it does affect the box’s position on the page relative to other boxes around it. Margin creates space outside the box.
If you look at the live example below where you found that line, it provides what the statement is saying is true.
‘’‘https://github.com/keshavgoyal2807/mdn-css1’’’
‘’’ I want to practice more css related topics and examples can you please tell me where to find the stuff for practicing css and html. please help me’’’
‘’’ Any suggestions to this assessment are appreciated’’’
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);
}
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.
Thanks you very much for reply.
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;
}
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:
- Live example: https://mdn.github.io/learning-area/css/styling-boxes/letterheaded-paper-finished/
- Source code: https://github.com/mdn/learning-area/tree/master/css/styling-boxes/letterheaded-paper-finished
- Marking guide: https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-finished/marking-guide.md
Best regards. Let me know if you need any more help.
@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 
1 Like
I have just completed the assessment.
This was sufficiently difficult 
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!
Hi @mbrasseau!
I’ve looked at your code, and it looks really good. In fact, I think your looks better than mine
So yes, OK but different sums it up. Better than OK though!
1 Like
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!
@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