Skip to content

Instantly share code, notes, and snippets.

@lorenzoferrante
Created October 13, 2013 11:27
Show Gist options
  • Save lorenzoferrante/6961148 to your computer and use it in GitHub Desktop.
Save lorenzoferrante/6961148 to your computer and use it in GitHub Desktop.
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
@import url(http://fonts.googleapis.com/css?family=Raleway:400,600,800,100);
@import url(http://fonts.googleapis.com/css?family=Alegreya:400,700);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400);
body{
background: #fff;
margin: 0;
padding: 0;
}
/*background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;*/
div#header {
width: 100%;
height: auto;
padding-top: 5px;
padding-bottom: 20px;
background-color: #f3f4f4;
}
div.text {
width: 500px;
max-width: 90%;
margin: 0 auto;
}
ul {
margin-left: -40px;
}
li {
font-family: 'Alegreya';
font-size: 20px;
color: rgba(0,0,0,0.7);
display: inline;
}
h1 {
font-family: 'Alegreya';
color: rgba(0,0,0,0.8);
font-size: 40px;
}
h2 {
font-family: 'Raleway';
color: rgba(0,0,0,0.5);
font-weight: 300;
margin-top: 40px;
font-size: 19px;
}
p {
font-family: 'Alegreya';
font-size: 20px;
color: rgba(0,0,0,0.8);
text-align: justify;
}
p.color {
font-family: 'Source Sans Pro';
color: rgba(0,0,0,0.4);
font-style: italic;
font-size: 18px;
}
p.end:after {
content: '';
margin: 0 auto;
width: 110px;
height: 50px;
background-image: url('http://s17.postimg.org/3kx7tt2u3/Schermata_2013_10_13_alle_12_33_34.png');
display: block;
font-size: 3.1rem;
line-height: 1;
text-align: center;
color: #c4c9cc;
}
hr {
border: none;
margin-bottom: 0;
display: block;
}
hr:after {
content: "★ ★ ★";
font-size: 1rem;
font-family: 'Raleway', sans-serif;
font-weight: 400;
line-height: .857142857;
letter-spacing: .6em;
color: #c4c9cb;
display: block;
text-align: center;
margin-top: 2rem;
margin-bottom: 1.75rem;
}
<div id="header">
<div class="text">
<h2>LORENZO FERRANTE</h2>
<ul>
<li>About</li>
<li>Blog</li>
<li>Books</li>
</ul>
</div>
</div>
<div class="text">
<h1>Test Page</h1>
<p>This page exists for one purpose; to demonstrate the visual styles of the various elements that comprise the design of this site. This is not only for my own benefit, as the designer and maintainer, but also to satisfy the curiousty of those interested in such things (like myself).
</p>
<p class="color">This page exists for one purpose; to demonstrate the visual styles of the various elements that comprise the design of this.
</p>
<hr></hr>
<p>This page exists for one purpose; to demonstrate the visual styles of the various elements that comprise the design of this site. This is not only for my own benefit, as the designer and maintainer, but also to satisfy the curiousty of those interested in such things (like myself).
</p>
<p class="color">This page exists for one purpose; to demonstrate the visual styles of the various elements that comprise the design of this.
</p>
<p class="end"></p>
</div>
// alert('Hello world!');
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment