English to Spanish

by clayshannon

HTML

<h1 class="smallcaps">English Title / Spanish Title</h1>
<h2>by <span >Author (year)</span></h2>

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

<p class="smallfont">Traducida por/Translated by B. Clay Shannon</p>

<hr/>
<section>

<p class="chapter">CAPÍTULO/CHAPTER 1</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>
<p class="english"><strong>replaceEnglish</strong></p>
<p>replaceSpanish</p>

</section>
<hr...

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;
}
.spanish {
    font-family:"Segoe UI";
}
.english {
    font-family: Candara, "Bookman Old School";
    margin-left: 1em;
    margin-right: 1em;
}
.englishnomargin {
    font-family: Candara, "Bookman Old School";
}
.consolas {
    font-family:"Consolas";
}