<a id="tfpiot-og" href="https://thingsfittingperfectlyintothings.tumblr.com/" target="_blank">
<div id="tfpiot-main">
<span class="things-small">things</span>
<span class="fitting">fitting</span>
<span class="perfectly">perfectly</span>
<span class="into">into other</span>
<span class="things-large">things</span>
</div>
</a>
<a id="toggle" href="toggle">Toggle</a>
body{
font-size:100%;
}
#tfpiot-main{
width:32.142857em;
height:32.142857em;
background:#254b65;
border-radius:50%;
margin:0 auto;
text-align:center;
}
#tfpiot-og{
margin:1em auto;
width:32.142857em;
height:32.142857em;
background:url('https://static.tumblr.com/cd0bb3827a136b3b89ad1341868ecb58/cw6ty6h/miYmjeyte/tumblr_static_logo_perfect_450.png') center center no-repeat;
background-size:100% 100%;
display:block;
text-decoration:none;
}
span{
font-family: sans-serif;
color:#fff;
font-weight:bold;
display:block;
position:relative;
letter-spacing:-0.055em;
}
span.things-small{
font-size:2.1em;
top:0.275em;
left:-1.5em;
}
span.fitting{
font-size:8.75em;
top:-0.175em;
left:0.025em;
}
span.perfectly{
font-size:8.25em;
top:-0.625em;
left:-0.05em;
letter-spacing:-0.05em;
}
span.into{
font-size:5.85em;
top:-1.25em;
left: -.175em;
}
span.things-large{
font-size:9.25em;
top:-1.07em;
left:-.03em;
}
#toggle {
position: fixed;
top: 0;
left: 0;
}
$(document).ready(function(){
$('#toggle').on('click',function(e){
e.preventDefault();
$('#tfpiot-main').toggle(0);
});
});
This Pen doesn't use any external CSS resources.