Bilingual Book Starting Point

by clayshannon

HTML

<h1 class="smallcaps">Title of Book / Titulo del Libro</h1>
<h2>by <span >Author Name</span></h2>

<p><em><span class="consolas">In </span><span class="english">English</span><span class="consolas"> and </span><span><strong>Spanish</strong></span></em><em><span class="consolas"> / En </span><span class="english">Inglés</span><span class="consolas"> y </span><span><strong>Español</strong></span></em></p>

<p class="smallfont">Translated by/Traducida por ?</p>

<hr/>
<section>

<p class="chapter">CHAPTER/CAPÍTULO 1</p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>

</section>
<hr />
<section>
<p class="chapter">CHAPTER/CAPÍTULO 2</p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p...

CSS

body {
    font-family:"Segoe UI", "Palatino Linotype", "Bookman Old Style", "Candara", "Calibri", "Consolas", serif;
    font-size: 1.2em;
}
section, aside, header, footer, nav, article, time {
    display: block;
}
h1 {
    font-family: "Lucida Sans", "Courier";
    text-shadow: -4px 4px 3px #999999;
    font-size: 3em;
}
h2 {
    font-family:"Segoe UI Light", "Consolas", sans-serif;    
}
h3 {
    font-family:"Lucida Sans", "Consolas", "Baskerville", "Palatino Linotype", sans-serif;    
}
.chapter {
    font-size: 2em;
    font-family:"Consolas";
    background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.smallcaps {
    font-variant: small-caps;
}
.smallfont {
    font-size: 0.6em;
}aside {
    color: cornsilk;
    font-family:'Bookman Old School', Candara, Calibri, serif;
}
aside p:last-child {
    margin-bottom:0;
}
span:hover {
    position:relative;
    cursor:pointer;
}
span[title]:hover:after {
    content: attr(title);
    background:yellow;
    padding: 4px 8px;
    color: #000;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 20;
    white-space: nowrap;
}
.marginalize {
    margin-left: 5em;
    margin-right: 5em;
    color: navy;
}
.tightvert {
    line-height: .5;
}
.english {
    font-family:"Segoe UI";
}
.spanish {
    font-family: Candara, "Bookman Old School";
    margin-left: 1em;
    margin-right: 1em;
}
.consolas {
    font-family:"Consolas";
}