<h1 class="logo">
<span class="word1">The</span>
<span class="word2">Leonardo</span>
</h1>
<p><a href="http://www.hacknightslc.com/">Hack Night SLC</a> is sponsored by <a href="http://www.theleonardo.org/">The Leonardo.</a> <small>So I recreated their logo with CSS.</small></p>
<!-- @rblakejohnson o{-<]: -->
body {
background: #282828;/* match border color */
text-align: center;
}
a {
color: #dc006c;
}
small {
color: #333;
}
.logo {
font: 84px 'Arial Narrow', sans-serif;/* I picked this font because it's the closest looking 'web safe' font http://cssfontstack.com/ */
color: #fefefe;
text-transform: uppercase;
letter-spacing: -4px;
}
/* stuff for both words */
.logo span {
position: relative;
}
.logo span:before,
.logo span:after {
content: '';
position: absolute;
border-width: 32px;/* makes a nice, big 64px square */
border-style: solid;
border-color: transparent;
height: 0;
z-index: 10;
}
/* stuff for 1st word */
.logo .word1 {
color: #dc006c;
margin-right: -38px;
transform: rotateY(180deg);/* using Prefix free */
display: inline-block;/* required for transform */
z-index: 10;/* stack 1st word on top */
}
.logo .word1:before {
right: -4px;/* would be left, but we flipped the word */
top: -9px;
border-top-color: #282828;/* match background color */
border-right-color: #282828;/* would be left, but we flipped the word */
}
.logo .word1:after {
left: 17px;/* would be right, but we flipped the word */
bottom: -15px;
border-bottom-color: #282828;
border-left-color: #282828;/* would be right, but we flipped the word */
}
/* stuff for 2nd word */
.logo .word2 {
z-index: 0;/* stack 2nd word below */
}
.logo .word2:before {
left: -4px;
top: -6px;
border-top-color: #282828;
border-left-color: #282828;
}
.logo .word2:after {
right: -4px;
bottom: 4px;
border-bottom-color: #282828;
border-right-color: #282828;
}
This Pen doesn't use any external CSS resources.