Skip to content

Instantly share code, notes, and snippets.

@bartaz
Created April 21, 2012 21:34
Show Gist options
  • Save bartaz/2439754 to your computer and use it in GitHub Desktop.
Save bartaz/2439754 to your computer and use it in GitHub Desktop.
With great power comes great responsibility
/**
* With great power comes great responsibility
*
* Slide from "Learning to teach" presentation by Bartek Szopka
* Front-Trends 2012
*/
@import url(http://fonts.googleapis.com/css?family=The+Girl+Next+Door);
html, body {
height: 100%;
box-sizing: border-box;
}
html {
/* fallback non-gradient background */
background-color: #FEFEFE;
background: url("http://dabblet.com/img/noise.png");
/* multiple backgrounds: colour, texture and gradient for red margin line */
background: linear-gradient(left, rgba(230,100,100,0.7) 1px, transparent 1px) no-repeat 100px 0,
url("http://dabblet.com/img/noise.png"),
#FEFEFE;
}
body {
font-family: 'The Girl Next Door', cursive;
font-size: 4em;
line-height: 1.5em;
color: #333;
text-shadow: .05em .05em .1em rgba(0,0,0,0.2);
margin: 0;
padding: 1.5em 1em 0 150px;
/* paper lines background,
based on http://dabblet.com/gist/1560755 by @LeaVerou
look there for more details ;) */
background: linear-gradient(rgba(50, 100, 200, .7) 1px, transparent 1px);
background-size: 100% 1.5em;
background-origin: content-box;
background-position: 0 1em;
}
blockquote {
margin: 0 0 0 0em;
}
p {
margin: 0;
}
.note {
font-size: 0.55em;
color: #555;
}
.author {
text-align: right;
}
<blockquote>
<p>With great <b>power</b>,<br/> comes great <b>responsibility</b>.</p>
</blockquote>
<p class="author note">* Voltaire / Uncle Ben / Captain Obvious</p>
{"view":"separate","fontsize":"100","seethrough":"1","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment