<div id='container'>
<div class='line'>
<h1>
<a href='#'>First Link</a>
</h1>
<hr>
</div>
<div class='line'>
<h2>
<a href='#'>Second Link</a>
</h2>
<hr>
</div>
<div class='line'>
<h3>
<a href='#'>Last Link</a>
</h3>
<hr>
</div>
</div>
body{
background-color:#e0e0e0;
}
#container {
width: 400px;
margin-top: 175px;
transform: rotate(-15deg);
transform: rotate(-15deg);
transform: rotate(-15deg);
}
.line {
margin-left: 30px;
}
h1,
h2,
h3 {
color: #555;
font-family: Open Sans Condensed;
font-size: 44px;
line-height: 150%;
letter-spacing: 2.5px;
margin: 0;
text-shadow: 1px 1px 4px #999, 4px 2px 8px #999;
}
a {
color: #333;
text-decoration: none;
transition: all 0.25s;
transition: all 0.25s;
transition: all 0.25s;
}
a:hover {
padding-left: 50px;
}
hr {
margin: -10px 0 60px -50px;
background-color: #333;
border: 0;
height: 2px;
width: 350px;
box-shadow: 1px 1px 4px #999, 4px 2px 8px #999;
}
#container hr:nth-child(2) {
margin-bottom: 80px;
}
/*Rezizing*/
#container .line:nth-child(2) {
transform: scale(0.75, 0.75);
transform: scale(0.75, 0.75);
transform: scale(0.75, 0.75);
margin-left: -50px;
margin-top: -35px;
}
#container .line:nth-child(3) {
transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
margin-left: -150px;
margin-top: -50px;
}
This Pen doesn't use any external JavaScript resources.