"Creating fancy letterheaded paper" assessment

MDN Learn
#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
#2

Hi @chrisdavidmills! 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?

general

  • 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!
.
.
.

Code
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)); */
}

2 Likes
Learning web development: Marking guides and questions
#3

hi Maurodibert

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

1 Like
#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.
#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:

#6

Hi Mauro!

Have a look at our finished example:

https://mdn.github.io/learning-area/css/styling-boxes/letterheaded-paper-finished/

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

2 Likes
#7

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

#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

1 Like
#9

Oh thanks @chrisdavidmills! 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!

#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!

#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.

1 Like
#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

#13

Hi! No… did you find why?

#14

Thank you @chrisdavidmills for the hint about using border-radius , I had the same doubt as @maurodibert and that gave me the answer :sweat_smile:
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 :smile:.

#15

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
#16

Can I get a marking scheme for the same assessment ?

#17

Sure thing @sarth03:

#18

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?

#19

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.

#20

‘’‘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’’’