THE CIRCUS - a display page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!---

    CIRCUS
    a display page for all of your creations

    theme by ciralism.tumblr.com

    // can also be used effectively as a network or character page
    // as always, you must leave the credit intact and follow the rules

    :: enjoy! ::

--->
<head>
    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
<link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,700,900' rel='stylesheet' type='text/css'>
<style type="text/css">

body {width:100%;height:100%;background-color:#f3f3f3;font-family:Lato, Sans-Serif;font-size:11px;}
a {text-decoration:none;color:#000;border:none;-webkit-transition-duration:500ms;-moz-transition-duration:500ms;-o-transition-duration:500ms;-m-transition-duration:500ms;transition-duration:500ms;}
a:hover, a:visited {text-decoration:none;color:#000;}
a:hover {color:#2c3b74;/*ACCENT COLOR*/}
.credit {position:fixed;text-transform:uppercase;font-size:7px;font-weight:bold;right:5px;bottom:5px;letter-spacing:1px;}
b, i, em, pre {font-size:1em;}
ul {list-style-type:none;margin-left:-20px;}
ol {list-style-type:upper-roman;}
ul li {padding-left:15px;position:relative;}
ul li:before {content:'\00BB';position:absolute;left:0px;}

.container {width:600px;margin:50px auto;}
header {width:calc(100% - 30px;);padding:20px 15px;background-color:rgba(0,0,0,.9);color:#fff;z-index:1;}
.title {font-weight:900;text-transform:uppercase;font-size:13px;letter-spacing:2px;text-align:left;float:left;}
.subtitle {font-weight:500;text-transform:uppercase;font-size:8px;letter-spacing:2px;display:inline-block;margin-top:3px;margin-left:18px;}
.subtitle::before {content:"";position:absolute;height:25px;width:1px;background-color:#bbb;margin-left:-10px;margin-top:-7px;}
.first {background-color:#fff;border:1px solid #eee;padding:15px;margin-top:10px;height:93px;}
.sb img {width:90px;height:90px;float:left;}
.links {position:absolute;margin-top:0px;}
.links a {display:block;padding:5px 2px;text-align:center;background-color:#fff;width:70px;margin-left:8px;margin-top:9px;font-size:7px;text-transform:uppercase;letter-spacing:1px;font-weight:bold;text-align:center;opacity:0;}
.links a:hover {letter-spacing:4px;color:#000;transition-delay:0!important;-webkit-transition-delay:0!important;}
.first:hover .links a {opacity:1;}
.un {-webkit-transition-delay:400ms;transition-delay:400ms;-moz-transition-delay:400ms;-ms-transition-delay:400ms;-o-transition-delay:400ms;}
.deux {-webkit-transition-delay:200ms;transition-delay:200ms;-moz-transition-delay:200ms;-ms-transition-delay:200ms;-o-transition-delay:200ms;}
.trois {-webkit-transition-delay:0;transition-delay:0;-moz-transition-delay:0;-ms-transition-delay:0;-o-transition-delay:0;}
.first:hover .un {-webkit-transition-delay:0ms;transition-delay:0ms;-moz-transition-delay:0s;-ms-transition-delay:0s;-o-transition-delay:0s;}
.first:hover .trois {-webkit-transition-delay:400ms;transition-delay:400ms;-moz-transition-delay:400ms;-ms-transition-delay:400ms;-o-transition-delay:400ms;}
.description {width:450px;margin-left:111px;font-weight:300;line-height:170%;}
.description b,.description a,.features b,.features a {font-weight:400;}
table {width:calc(100% + 20px);margin-left:-16px;margin-top:10px;}
table td {display:inline-block;margin-top:10px;margin-left:15px;}

.item {width:270px;height:170px;padding:10px;border:1px solid #eee;background-color:#fff;}
.item img {width:270px;height:170px;-webkit-transition-duration:500ms;-moz-transition-duration:500ms;-o-transition-duration:500ms;-m-transition-duration:500ms;margin-left:0;}
.info {-webkit-transition-duration:500ms;-moz-transition-duration:500ms;-o-transition-duration:500ms;-m-transition-duration:500ms;transition-duration:500ms;opacity:0;width:250px;height:150px;position:absolute;background-color:rgba(0,0,0,.8);color:#fff;padding:10px;margin-top:-170px;margin-left:0px;}
.item:hover .info {opacity:1;}
.i-title {width:calc(100%);background-color:rgba(0,0,0,.9);margin-left:-10px;color:#fff;padding:10px;height:15px;margin-top:-10px;}
.name {text-transform:uppercase;font-weight:900;letter-spacing:2px;display:inline-block;}
.sub-name {font-size:8px;font-weight:bold;display:inline-block;margin-left:16px;}
.sub-name::before {content:"";position:absolute;width:1px;height:20px;background-color:#bbb;margin-left:-8px;margin-top:-5px;}
.features {font-weight:300;padding:12px;}
.info a {color:#fff;}
</style>
</head>
<body>

<div class="container">
<header><div class="title">PAGE TITLE</div><div class="subtitle">PAGE SUBTITLE</div></header>
<div class="first">
    <div class="sb"><img src="ICON IMAGE SOURCE URL"></div>
    <div class="links">
        <a href="URL" class="un">LINK</a>
        <a href="URL" class="deux">LINK</a>
        <a href="URL" class="trois">LINK</a>
    </div>
    <div class="description">DESCRIPTION GOES HERE</div>
</div>


  <table>
      <tr>
      <!--ITEM--->
          <td class="item"><img src="ITEM 1 IMAGE">
          <div class="info">
              <div class="i-title"><a class="name" href="URL">ITEM 1 TITLE<div class="sub-name">ITEM 1 SUBTITLE</div></a>
</div>
            <div class="features">
                ITEM ONE INSIDE TEXT
            </div>
          </div>
        </td>
        <!---/ITEM--->
        <!---ITEM--->
       <td class="item"><img src="ITEM 2 IMAGE">
          <div class="info">
              <div class="i-title"><a class="name" href="URL">ITEM 2 TITLE<div class="sub-name">ITEM 2 SUBTITLE</div></a>
</div>
            <div class="features">
                ITEM TWO INSIDE TEXT
            </div>
          </div>
        </td>
        <!---/ITEM--->
        </tr>
        <!---ADD MORE ROWS AND ITEMS AS DESIRED. TO CREATE A NEW ROW, SIMPLY OPEN A NEW <tr> AND COPY/PASTE THE ITEMS FROM ABOVE -->
  </table>
</div>
 <!---this is the credit. you may not alter it in any way-->
<a href="http://ciralism.tumblr.com" class="credit">ciralism</a>
</body>
</html>