I made the below posters with Mozilla Thimble (you can use it for free). You can remix this project and style your own poster! See at the bottom of this page to learn how to make your own poster online.
There is no gallery selected or the gallery was deleted.
Directions for making your own poster:
To start, go to Mozilla Thimble and click on the ‘Remix’ button beneath the picture of the poster that says “Keep Calm and Carry On”, which is on the home page. Clicking on it will take you to a new ‘editor’ page. If you can’t find the ‘Remix’ button, click here. As a note, the home page on Mozilla Thimble may have changed since this date (January 20, 2016) and the time you are reading this.
OK, so, click on “Style CSS” (in the sidebar thing). You’ll see this (the red is my notes; if there’s a red star (★) it is something you may want to adjust for fun and for appearance’s sake):
body { leave this alone
background-color: darkred; ★ erase the ‘darkred’ and replace with your choice of color; this is the background color; as a note, the program won’t understand particular colors you enter, such as mahogany, but it does identify a whole lot of colors such as maroon
color: white; this is the text color; keep it white since as far as I know you can’t change the color of the crown
font-family: “Gill Sans”, “Gill Sans MT”, Calibri, sans-serif; these are the fonts that it will be in; if your computer doesn’t have the = first font listed (Gill Sans), the computer will do the next option (if = it can)…
text-align: center; you do want your text to be centered ;)
padding: 0; ★try adjusting the padding; it gives more space between the box with the text and all and the top of the screen
} leave this alone
.wrapper { leave this alone
margin: 10px auto; ★ you can just leave the margin here be if = you have adjusted the padding above
max-width: 300px; ★ this is the width of the box/es = around the words and the crown picture
padding: 30px; ★ this makes the boxes bigger around the text, =and will eventually shift the text’s align if you make it larger than a certain number
border: 4px double white; ★★ SO MUCH FUN TO PLAY WITH; changes the thickness and spacing of the two boxes around the text and crown picture; if you have the number at 0 then there will be no box border, and if you have the number at 1 there will only be one box around the text and crown picture
} leave this alone
h1 { leave this alone
font-size: 60px; ★ size of the font (obviously) that you can adjust to your heart’s desire
letter-spacing: 2px; ★ the space between the letters; fun to play with; very convenient
text-transform: uppercase; my recommendation is to leave this alone; you do want your poster to be in all uppercase I believe, although you can do lowercase if you would like
font-weight: normal; ★ you can do: normal, heavy, lighter; it makes the letters thicker
margin-top: 30px; ★ the distance between the words and the crown
margin-bottom: 0; ★ the bottom of the box; the higher the number the more of a distance between the bottom of the box and the words
} leave this alone
h1 span { leave this alone
display: block;
options: block or inline-block;
do block font-size: 50%; ★ change the size of the ‘and’
} leave this alone
Click on “index.html” in the sidebar thing and you will see this (I added the red [my notes] and the red stars (★) for your convenience):
<html> leave this alone
<head> leave this alone
<meta name=3D”viewport” content=3D”width=3Ddevice-width, = initial-scale=3D1″> leave this alone
<!– This is the title of the page – what’s written will appear at = the top of the browser window –>
<title>Keep Calm and Carry On</title> no need to bother with this
<!– This links to the stylesheet for this page –>
<link rel=3D”stylesheet” type=3D”text/css” href=3D”style.css”> leave this alone
</head> leave this alone
<body> leave this alone
<div class=3D”wrapper”> leave this alone
<!– This is the crown image used at the top of the poster –>
<img src=3D”crown.svg” width=3D”125″> leave this alone; this is the image!!!
<!– This is the text of the poster –>
<h1> leave this alone
Keep<br> Calm ★★ this is where the magic happens; type in the first two words you would like to be on the poster; the first word before the <br> (over there the word is Keep) and the second word after the <br>, which in this case is Calm; you can replace these words
<span>and</span> ★ you can change the ‘and’ if you would like; keep in mind that anything between <span> and </span> will be small unless you changed that in the CSS (font-seize: 50% is what it will be automatically set to)
Ride<br> Horses ★★ this is where you write the words you want; have the first word/words before the <br> but after the </span> from the line above; have the second word/s after the <br> but before the </h1> on the line below this one
</h1> leave this alone
</div> leave this alone
</body> leave this alone
</html> leave this alone
Follow the directions in red, and you can make just about any poster you’d like! Be adventurous! Have fun!