By Tobias Ahlin
@tobiasahlinText compositions are free to use, licensed under MIT. Site design & code © Tobias Ahlin, 2023.
Grumpy wizards make toxic brew for the evil Queen and Jack.
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
123456789 !?:%;&_/"()’[]'$£@”
<!-- Include in <head> to load fonts from Google -->
<link href='https://fonts.googleapis.com/css?family=Merriweather:300' rel='stylesheet' type='text/css'><!-- Typography -->
<div class="lta">
<div class="lta-wrapper">
<h1 class="lta-r1"><span class="lta-source">Jack Kerouac</span>Live, travel,</h1>
<h1 class="lta-r2">adventure, bless,</h1>
<h1 class="lta-r3">and don’t be sorry.</h1>
</div>
</div>
<style type="text/css">
.lta {
color: #fff;
text-align: center;
background-image: url(/images/typesource/forest.jpg);
background-size: cover;
background-color: #d2bd9c;
font-size: 1em;
font-family: Merriweather, serif;
padding: 11em 0 13em;
}
.lta-wrapper {
margin: 0 auto;
display: inline-block;
text-align: left;
}
.lta-r1 {
padding-right: 3.5em;
font-size: 7em;
font-weight: 300;
line-height: 1.1em;
position: relative;
}
.lta-r2 {
font-size: 4.8em;
font-weight: 300;
line-height: 1.2em;
}
.lta-r3 {
font-size: 4.405em;
font-weight: 300;
line-height: 1.3em;
}
.lta-source {
margin-top: -1em;
position: absolute;
top: 0;
right: 0;
text-transform: uppercase;
letter-spacing: 0.4em;
font-weight: 300;
font-size: 0.12em;
float: right;
width: 24em;
height: 24em;
line-height: 23.5em;
border: 0.3em solid #fff;
text-align: center;
}
</style>Text compositions are free to use, licensed under MIT. Site design & code © Tobias Ahlin, 2023.