COME CLEAN, COME EASY. - February 1st, 2014

01 February 2014 @ 11:06 pm

( live preview for version one )
VERSION 1
*BACKGROUND IMAGE MUST BE AT LEAST 400px by 500px

<raw-code>
<table style="font-family: 'century gothic', 'avant garde', sans-serif; color: #000; letter-spacing: 1pt;">
<tr><td width="400px">
<div style="width: 400px; height: 500px; align: float; background: #e14f4f url(IMGURL); background-position: center; background-repeat: no-repeat;">
<div style="width: 200px; background: #fff; position: relative; top: 15px; left: 90px; padding: 9px; text-align: right;">
<span style="font-size: 16pt;">HEADERTEXT</span><br />
<span style="font-size: 9pt;">
<a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «<br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «<br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «<br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «<br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «<br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «<br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «</span>
</div>
</div>
</td></tr>
</table>
</raw-code>

- - -

( live preview for version two )
VERSION 2
*BACKGROUND IMAGE MUST BE AT LEAST 320px by 420px
**LINK NUMBERS ARE FIXED;
if you'd like less boxes or more boxes,
you'll need to change the div position values

<raw-code>
<table style="font-family: 'Courier New', 'Andale Mono', monospace; color: #000; letter-spacing: 0.5pt; line-height: 18pt; text-transform: uppercase;">
<tr><td width="320px">
<div style="width: 320px; height: 420px; align: float; background: #000000 url(IMGURL); background-position: center; background-repeat: no-repeat;">
<div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 15px; left: 120px; padding: 5px; text-align: right;">
<span style="font-size: 16pt; color: #000;">BOXHEADER1</span><br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE1</a><br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE2</a><br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE3</a>
</div>
<div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 30px; left: 120px; padding: 5px; text-align: right;">
<span style="font-size: 16pt; color: #000;">BOXHEADER2</span><br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE1</a><br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE2</a><br />
</div>
<div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 45px; left: 120px; padding: 5px; text-align: right;">
<span style="font-size: 16pt; color: #000;">BOXHEADER3</span><br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE1</a><br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE2</a><br />
</div>
<div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 60px; left: 120px; padding: 5px; text-align: right;">
<span style="font-size: 16pt; color: #000;">BOXHEADER4</span><br />
SUPERSHORT MESSAGE HERE.<br />
</div>
</div>
</td></tr>
</table>
</raw-code>

Tags: !divs, !html, type: navigation

Current Music: fleetwood mac - dreams

9 comments | Leave a comment

Previous Day | Next Day

			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31