Twain Books

by clayshannon

HTML

<div class="yearBanner">FICTION</div>
<section class="wrapper"><a class="floatLeft" href="http://www.amazon.com/exec/obidos/ASIN/1456405721/garrphotgall-20" target="_blank"><img height="160" width="107" src="http://ecx.images-amazon.com/images/I/51AxVB0JilL._SL110_.jpg" alt="The Adventures of Huckleberry Finn book cover"></img></a>
    <br/><cite class="nobelTitle">The Adventures of Huckleberry Finn</cite>
    <br/>
    <br/>
    <button><a href="http://www.amazon.com/exec/obidos/ASIN/0448060000/garrphotgall-20" target="_blank" rel="nofollow">Hardcover</a>
    </button>
    <button><a href="http://www.amazon.com/exec/obidos/ASIN/1456405721/garrphotgall-20" target="_blank" rel="nofollow">Paperback</a>
    </button>
    <br/>
    <br/>
    <button><a href="http://www.amazon.com/exec/obidos/ASIN/B00L4Q7OA8/garrphotgall-20" target="_blank" rel="nofollow">Kindle</a>
    </button>
</section>
<section class="wrapper"><a class="floatLeft" href="http://www.amazon.com/exec/obidos/ASIN/0486400778/garrphotgall-20" target="_blank"><img height="160" 

width="107" src="http://ecx.images-amazon.com/images/I/51qa7A+vIsL._SL110_.jpg" alt="The Adventures of 

Tom Sawyer book cover"></img></a>
    <br/><cite class="nobelTitle">The Adventures of Tom Sawyer</cite>
    <br/>
    <br/>
    <button><a href="http://www.amazon.com/exec/obidos/ASIN/B00BM7ES7G/garrphotgall-20" target="_blank" rel="nofollow">Audible</a>
    </button>
    <button><a href="http://www.amazon.com/exec/obidos/ASIN/0486400778/garrphotgall-20" target="_blank" rel="nofollow">Paperback</a>
    </button>
    <br/>
    <br/>
    <button><a href="http://www.amazon.com/exec/obidos/ASIN/B008TVDBPI/garrphotgall-20" target="_blank" rel="nofollow">Kindle</a>
    </button>
</section>

<section class="wrapper" ><a class="floatLeft" href="http://www.amazon.com/exec/obidos/ASIN/0486411109/garrphotgall-20" target="_blank"><img height="160" width="107" src="http://ecx.images-amazon.com/images/I/51qKf+J5xQL._SL110_.jpg" alt="The...

CSS

body {
    background-color: black
}
.yearBanner {
    font-size: 2em;
    color: white;
    font-family:'Segoe UI Light', Candara, Calibri, Consolas, sans-serif;
    width: 400px;
    padding-top: 50px;
    margin-left: 50px;
    padding-bottom: 20px;
}
.floatLeft {
    float: left;
    padding-right: 10px;
    padding-left: 5px;
}
section.wrapper {
    /* this may need to be wider when landscape cover img is used */
    min-width: 400px;
    overflow: hidden;
    display: block;
    float: left;
    margin-top: 5px;
}
.wrapper {
    float: left;
    width: 400px;
    margin-left: 20px;
    padding-bottom: 20px;
}
.nobelTitle {
    font-family: Consolas, sans-serif;
    color: gold;
    font-size: 1.25em;
}