JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://carolkbrown.broadleafclients.com/_js/3rdparty/template/Template.js"></script>
<script src="http://carolkbrown.broadleafclients.com/_js/3rdparty/milkbox/js/milkbox.js"></script>
<link rel="stylesheet" href="http://carolkbrown.broadleafclients.com/_js/3rdparty/milkbox/css/milkbox/milkbox.css">
<link rel="stylesheet" href="http://carolkbrown.broadleafclients.com/_css/core.css">
<script src="http://carolkbrown.broadleafclients.com/_js/scripts-1.0.4.js"></script>
<div id="wrapper"> <div id="header" style="height:300px;">
<div id="carolhome">carol k. brown</div>
</div>
<div id="container1" style="width:700px;">
<div id="piecewrapper" id="repeating-block-2" data-repeating-block="fetch-subalbums-of:Index - Row 1">
<a data-template="href:{pagetemplate}?cat_id={cat_id}">
<div data-template="id:link{cat_id}" class="row1"><img src="http://carolkbrown.piwigo.com/uploads/5/d/t/5dtz9u6g22//2013/03/12/20130312204241-1610db87.gif" data-template="src:{album_thumb_url}">
<div class="image_metadata"><span class="image_title"></span><span class="image_description"></span></div></div></a>
</div>
</div>
<hr>
<div id="container2" style="width:700px;">
<div id="piecewrapper" id="repeating-block-2" data-repeating-block="fetch-subalbums-of:Index - Row 2">
<a data-template="href:{pagetemplate}?cat_id={cat_id}">
<div data-template="id:link{cat_id}" class="row2"><img src="http://carolkbrown.piwigo.com/uploads/5/d/t/5dtz9u6g22//2013/03/12/20130312204241-1610db87.gif" data-template="src:{album_thumb_url}">
<div class="image_metadata"><span class="image_title"></span><span class="image_description"></span></div></div></a>
</div>
</div>
<div id="homecontainer">
<div id="resume"><a href="http://carolkbrown.com/resume.html">resume</a></div>
<br>
<div id="contact"><a href="mailto:[email protected]">contact</a></div>
</div>
</div>
CSS
body {
font-family: Tahoma, Geneva, sans-serif;
background-color: #000000;
font-size: 12px;
color: #FFFFFF;
}
#wrapper {
padding-left:60px;
}
#header {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12pt;
float: left;
}
IMG { position: relative; }
.piecewrapper {
padding-left:8px;
}
.row1 {
float:left;
padding-left:10px;
}
.row2 {
float:left;
padding-left:10px;
}
hr {
height: 0;
width: 700px;
float: left;
}
#carolhome {
color:#FFFFFF;
font-size:26pt;
float:left;
padding-top:30px;
}
#container1 {
clear:both;
float:left;
padding-left:30px;
}
#container2 {
clear:both;
float:left;
padding-left:30px;
}
/* suppress secondary albums in album groups */
DIV#link63 { display: none; /* c-print plates */ }
DIV#link13 { display: none; /* squares */ }
/* bump Self Portraits right */
DIV#link47 { margin-left: 60px; }
#resume {
clear:both;
float:right;
font-size:14pt;
}
#contact {
clear:both;
float:right;
font-size:14pt;
}
#homecontainer {
clear:both;
font-size:12pt;
width: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;
}
JavaScript
pagetemplates[47] = "/PMFFn/150/show/light/"; // Self Portraits
pagetemplates[65] = "/PMFFn/150/show/light/"; // TEST: flowers
pagetemplates[54]= "/u9Y5n/172/show/light/"; // Encounters
pagetemplates[51]= "/u9Y5n/172/show/light/"; // Pedestrian
pagetemplates[24]= "/u9Y5n/172/show/light/"; // Pedestrian 2006
pagetemplates[27]= "/u9Y5n/172/show/light/"; // Passerby
pagetemplates[29]= "/u9Y5n/172/show/light/"; // Home Décor | c-prints
pagetemplates[9]= "/s6VBE/204/show/light/"; // Tondos
pagetemplates[13]= "/s6VBE/204/show/light/"; // Squares
pagetemplates[20]= "/s6VBE/204/show/light/"; // Edgewater Ballroom
pagetemplates[31]= "/s6VBE/204/show/light/"; // Early Sculpture Aluminum
pagetemplates[34]= "/s6VBE/204/show/light/"; // Early Sculpture Steel
pagetemplates[38]= "/s6VBE/204/show/light/"; // Domestic Architecture
pagetemplates[4]= "/V7bXr/282/show/light/"; // Frame Drawings
pagetemplates[63]= "/V7bXr/1282/show/light/"; // Home Décor | plates
pagetemplates[42]= "/DnZfg/142/show/light/"; // Details
pagetemplates[17]= "/DnZfg/142/show/light/"; // Seduction Forest