CKBrown - Template 5

by sanford

HTML

<script src="https://raw.github.com/tbela99/template/master/Source/Template.js"></script>
<script src="http://www.imprimia.com/clients/carolkbrown/scripts-1.0.1.js"></script>
<div id="header" style="float:left;">
    <div id="carol"><a href="www.carolkbrown.com">carol k brown</a>

        <div class="piecewrapper"
        id="repeating-block-3" data-repeating-block="fetch-images-of:Featured"> <a href="zoompage.html">
    <div class="featured"><img src="http://dummyimage.com/100x100/666/fff&text=featured"  data-template="src:{derived_thumb}">
    <div class="image_metadata"><span class="image_title"  data-template="html:{name}"></span><span class="image_description"  data-template="html:{description}"></span></div></div></a>

        </div>
    </div>
</div>
<div id="title" style="width:200px;" data-template="text:{name}"></div>
<div id="container1" style="width:700px;">
    <div class="piecewrapper2" id="repeating-block-1" data-repeating-block="fetch-images-of:pieces1"
    style="float:right;"> <a href="zoompage.html">
    <div class="pieces1"><img src="http://dummyimage.com/300x200/000/fff&text=pieces1" data-template="src:{derived_thumb}">
    <div class="image_metadata"><span class="image_title" data-template="html:{name}"></span><span class="image_description" data-template="html:{description}"></span></div></div></a>

    </div>
</div>
<hr width="100%" size="2">
<div id="container2" style="width:700px;">
    <div class="piecewrapper" id="repeating-block-2" data-repeating-block="fetch-images-of:Individuals"> <a href="zoompage.html">
            <img src="http://dummyimage.com/45x45/666/fff&text=pieces2" data-template="src:{derived_thumb}">
        <div class="image_metadata"><span class="image_title" data-template="html:{name}"></span><span
    class="image_description" data-template="html:{description}"></span></div></div></a>

    </div>
</div>
<div id="home"><a href="www.carolkbrown.com">&lt;</a>
</div>

CSS

body {
    font-family: Tahoma, Geneva, sans-serif;
    background-color: #000000;
    font-size: 12px;
    color: #FFFFFF;
}
#header {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12pt;
    clear: both;
    float: left;
    padding-left:60px;
}
.piecewrapper {
    clear:both;
    float:left;
}
.piecewrapper2 {
    clear:both;
    float:right;
}
hr {
    clear: both;
}
h2 {
    font-size: 9pt;
}
#carol {
    font-size:12pt;
    float:left;
    padding-top:30px;
}
#title {
    color: #FFFFFF;
    font-size: 16pt;
    clear:both;
    float:left;
}
#container1 {
    padding-left:60px;
}
#container2 {
    padding-left:60px;
}
#container3 {
    padding-left:125px;
}
.pieces1 {
    padding-top:5px;
    padding-left:5px;
}
.pieces2 {
    padding-left:5px;
    padding-top:5px;
}
.pieces3 {
    padding-top:5px;
    padding-left:5px;
}
#home {
    clear:both;
    float:left;
    font-size:12pt;
    padding-left:700px;
}
.image_title a:hover span {
    visibility: visible;
}
a:link {
    text-decoration: none;
    color: #7F7F7F;
}
a:visited {
    text-decoration: none;
    color: #7F7F7F;
}
a:hover {
    color: #7F7F7F;
    text-decoration: none;
}
a:active {
    color: #7F7F7F;
    text-decoration: none;
}