"Creating fancy letterheaded paper" assessment

(Filip sky) #1

Hi Chismills

I am stack on Creating fancy letterheaded paper. I cannot sort out top or bottom image, if one is at right position other one disapear, could you help me please or give a clue?
i cannot sort out border on top as well, any clue or ref page will help me, too.
Thanks in advance.

here is my css:

  • {
    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: white;
text-shadow: 1px 1px 1px black;

/* Your CSS below here */
body {
background: url(top-image.png) no-repeat top white;
border-top:3px red;
border-bottom: 3px red;
body {
background: url(bottom-image.png)no-repeat bottom;}

/*background: yellow; width:auto; height:50px}**/

h1 {
background: url(logo.png);
/* filter shadow for logo */
filter:drop-shadow(2px 2px 1px black);}

"Mozilla splash page" assessment
"Mozilla splash page" assessment
(Mauro Di Bert) #2

Hi @chrismills! Two questions about the Fancy letterhead and one general:

fancy letterhead

  • I’m not finding inside the complete course how to make the correct shadow that follows the circle without using filters (the outer form). Or it’s maybe that you’ve just ment not using “webkit” but the filter instead? (I drop the code below).
  • The second wich is a little bit maybe to obsesive, hehe, buuuuut from obsessions… Ok…: the gradient indications are for making the gradient strictly to right (top and bottom) and that’s not shown in the example that the course gave us. Did I apllied incorrectly?


  • It’s supposed to try to help others in these subjects? For instance: I’ve seen looking for my questions the question from Filib and I think I could help. Should I and that could help you or I’m just messing things and creating caos? hehe.

Finally as a little gift! hehe I saw that you really like rock and metal since you’re a drummer so I thought in gratitude for all your help, giving you this: https://www.youtube.com/watch?v=YPR-26NhKUM hehe. Nice day man!

article {
background-color: white;
background-image: url(top-image.png);
background-repeat: no-repeat;
background-position: top;
background-image: url(top-image.png), url(bottom-image.png), linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.1)), linear-gradient(to bottom right, rgba(0,0,0,0), rgba(0,0,0,0.1));
background-repeat: no-repeat, no-repeat;
background-position: top, bottom;
border-top: 5px solid red;

h1 {
background-image: url(logo.png);
/* -webkit-filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.7));
filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.7)); */

Learning web development: Marking guides and questions
(Filip sky) #3

hi Maurodibert

your article code works, but h1 does not rendering logo.png, do you have any clue?

(Mauro Di Bert) #4

Hi @filip.sky! Look for the next few things:

  • is it the name of tha image correctly in your directory?
  • are you copying and pasting this code or writing it? Because there are some silly but tricky easy to mistake, like the closing and openings, the spacings and so on.

(Mauro Di Bert) #5

And also, if you want to call for help, use the “@” before de name! And It’s really usefull to learn the basic use of this discourse page that’s the first thing I think you’ll have when you enter here.

So @filip.sky :wink:

(Chris Mills) #6

Hi Mauro!

Have a look at our finished example:


Inspect the circle in browser developer tools, and you’ll see that I’ve done this using a combination of border-radius and box-shadow.

For the top to bottom gradient, again look at my example - I’ve used multiple background images to attach all of the images, and specify a top-to-bottom (“to bottom”) gradient that covers all parts of the gradient.

In terms of helping others - please do! I am always very busy and answering all the questions takes up a lot of time. If you get stuck, feel free to ask for my help!

And I love the guitar playing, thanks for sharing! Here is a rough demo of what my current band sounds like: https://www.youtube.com/watch?v=JAcFozYUHUU

(Filip sky) #7

thank you it works now @maurodibert I saw that you put your learning examples on github, how can I do it?

(Chris Mills) #8

I think Mauro is using GitHub (edit - duh, you said that in the question!); we have a beginner’s guide here: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Using_Github_pages

(Mauro Di Bert) #9

Oh thanks @chrismills! And good idea for the circle shadow! Tks for that and thanks too for the music! Do you have a soundcloud or cd in spotify or something like that? Oh… I don’t think this is the place for asking that no? hehe Thanks again! Continue studying!

(Mauro Di Bert) #10

@chris I think (obviously could I be wrong) but it is not well shown as a part of the course and could be really usefull. The other day when I’ve told you about Git, I didn’t know that exist this course on MDN and went for a big trip till I found how to use and upload the examples. I mean… I love to search but could be usefull to have it more close to the content! TKS again!

(Chris Mills) #11

We are on deezer and other streaming sites, and we also have a site at http://vulturiceye.com/ - weird CSS stuff written by me :wink:

the trouble with our GitHub content is that it is a bit light, and I don’t think it would fit anywhere else in the navigation menu. It is in there, but it is a bit hidden.

Eventually, I want to create a full module on GitHub/version control, as it is such an important subject to modern web devs.

(Mauro Di Bert) #12

Oh! I will look for that and I hope I could help a lot as soon as I understand a little bit more ! hehe

(Mauro Di Bert) #13

Hi! No… did you find why?