Computers Hardware&Software >> Homer Simpson - a pure CSS/HTML version - Flirtbox.net

Favourites

Home >> Computers Hardware&Software >> Homer Simpson - a pure CSS/HTML version

18.05.2008, 14:26 quote

csstester

Joined: 17 May 2008 Posts: 11 Location: United Kingdom, England, London

Visit poster's website

This is NOT a picture - this is made of just a couple of lines of HTML/CSS

http://www.flirtbox.net/homer.html

This is the source code:

Art:

<div style="width: 100%; height: 466px;">
<div style="float: left; border: 2px solid #000; line-height: normal; background-color: #fff;">
<div style="width: 6.23em; height: 7.7em; font-family: Verdana; font-size: 60px; overflow: hidden;">
<div style="margin-top: -0.7em">
<div style="position: absolute; padding-left: 1.56em; padding-top: 0.37em;">
<div style="font-size: 2.57em; font-weight: bold; color: #000;">o</div>
</div>
<div style="position: absolute; padding-left: 1.62em; padding-top: 0.53em;">
<div style="font-size: 2.38em; font-weight: bold; color: #fff;">o</div>
</div>
<div style="position: absolute; padding-left: 1.2em; padding-top: 0.67em;">
<div style="font-size: 2.48em; color: #000;">o</div>

</div>
<div style="position: absolute; padding-left: 1.29em; padding-top: 0.85em;">
<div style="font-size: 2.23em; color: #fff;">o</div>
</div>
<div style="position: absolute; padding-left: 1.57em; padding-top: 2.03em;">
<div style="width: 0.32em; height: 0.52em; background-color: #fff;"></div>
</div>
<div style="position: absolute; padding-left: 1.52em; padding-top: 1.56em;">
<div style="font-size: 0.8em; font-style: italic; color: #000;">(</div>
</div>
<div style="color: #000;">
<div style="position: absolute; padding-left: 1.07em; padding-top: 0.62em;">
<div style="font-size: 4.57em;">O</div>
</div>

<div style="position: absolute; padding-left: 1.05em; padding-top: 1.15em;">
<div style="font-size: 3.53em;">O</div>
</div>
<div style="position: absolute; padding-left: 1.12em; padding-top: 0.74em;">
<div style="font-size: 4.63em;">O</div>
</div>
<div style="position: absolute; padding-left: 1.08em; padding-top: 3.64em;">
<div style="font-size: 1.77em; font-weight: bold; font-style: italic;">\</div>
</div>
<div style="position: absolute; padding-left: 1.17em; padding-top: 4.8em;">
<div style="font-size: 3.29em; font-weight: bold; font-style: italic;">L</div>
</div>
<div style="position: absolute; padding-left: 3.14em; padding-top: 5.21em;">

<div style="font-size: 3.01em; font-weight: bold; font-style: italic; height: 0.96em; overflow: hidden;">(</div>
</div>
<div style="position: absolute; padding-left: 4.13em; padding-top: 3.23em;">
<div style="font-size: 0.7em; font-weight: bold;">O</div>
</div>
<div style="position: absolute; padding-left: 1.37em; padding-top: 5.08em;">
<div style="font-size: 0.97em; font-weight: bold;">O</div>
</div>
</div>
<div style="color: #FED90E">
<div style="position: absolute; padding-left: 1.15em; padding-top: 0.76em;">
<div style="font-size: 4.37em;">O</div>
</div>

<div style="position: absolute; padding-left: 1.14em; padding-top: 1.26em;">
<div style="font-size: 3.37em;">O</div>
</div>
<div style="position: absolute; padding-left: 1.2em; padding-top: 0.87em;">
<div style="font-size: 4.42em;">O</div>
</div>
<div style="position: absolute; padding-left: 1.15em; padding-top: 3.61em;">
<div style="font-size: 1.7em; font-weight: bold; font-style: italic;">\</div>
</div>
<div style="position: absolute; padding-left: 1.24em; padding-top: 4.93em;">
<div style="font-size: 3.18em; font-weight: bold; font-style: italic;">L</div>
</div>
<div style="position: absolute; padding-left: 3.03em; padding-top: 5.05em;">

<div style="font-size: 3.2em; font-weight: bold; font-style: italic; height: 0.96em; overflow: hidden;">(</div>
</div>
<div style="position: absolute; padding-left: 4.18em; padding-top: 3.34em;">
<div style="font-size: 0.55em; font-weight: bold;">O</div>
</div>
</div>
<div style="position: absolute; padding-left: 1.84em; padding-top: 2.37em;">
<div style="width: 1.92em; height: 5.76em; background-color: #FED90E;"></div>
</div>
<div style="position: absolute; padding-left: 3.70em; padding-top: 2.73em;">
<div style="width: .30em; height: 1.56em; background-color: #FED90E;"></div>
</div>
<div style="position: absolute; padding-left: 4.36em; padding-top: 3.51em;">
<div style="width: .16em; height: .34em; background-color: #FED90E;"></div>
</div>

<div style="position: absolute; padding-left: 1.62em; padding-top: 5.47em;">
<div style="font-size: 10px">
<div style="width: 2.6em; height: 3.0em; background-color: #FED90E;"></div>
</div>
</div>
<div style="color: #000;">
<div style="position: absolute; padding-left: 1.23em; padding-top: 4.57em;">
<div style="font-size: 0.67em;">|</div>
</div>
<div style="position: absolute; padding-left: 1.23em; padding-top: 4.37em;">
<div style="font-size: 0.67em;">|</div>
</div>
<div style="position: absolute; padding-left: 1.34em; padding-top: 4.37em;">
<div style="font-size: 0.67em;">\</div>

</div>
<div style="position: absolute; padding-left: 1.4em; padding-top: 4.53em;">
<div style="font-size: 0.67em;">\</div>
</div>
<div style="position: absolute; padding-left: 1.55em; padding-top: 4.49em;">
<div style="font-size: 0.67em;">|</div>
</div>
<div style="position: absolute; padding-left: 1.55em; padding-top: 4.19em;">
<div style="font-size: 0.67em;">|</div>
</div>
<div style="position: absolute; padding-left: 1.66em; padding-top: 4.19em;">
<div style="font-size: 0.67em;">\</div>
</div>

<div style="position: absolute; padding-left: 1.76em; padding-top: 4.45em;">
<div style="font-size: 0.67em;">\</div>
</div>
<div style="position: absolute; padding-left: 1.27em; padding-top: 2.54em;">
<div style="font-size: 0.42em; font-weight: bold; font-style: italic;">\</div>
</div>
<div style="position: absolute; padding-left: 1.51em; padding-top: 2.18em;">
<div style="font-size: 0.42em; font-weight: bold; font-style: italic;">\</div>
</div>
<div style="position: absolute; padding-left: 2.31em; padding-top: 5.32em;">
<div style="font-size: 1.47em; font-weight: bold; font-style: italic;">(</div>
</div>
<div style="position: absolute; padding-left: 2.29em; padding-top: 5.69em;">

<div style="font-size: 1.11em; font-weight: bold;">(</div>
</div>
<div style="position: absolute; padding-left: 2.92em; padding-top: 4.72em;">
<div style="font-size: 2.4em; font-weight: bold;">8</div>
</div>
<div style="position: absolute; padding-left: 2.43em; padding-top: 3.96em;">
<div style="font-size: 3.13em; font-weight: bold; font-style: italic;">o</div>
</div>
<div style="position: absolute; padding-left: 2.31em; padding-top: 4.05em;">
<div style="font-size: 3.13em; font-weight: bold; font-style: italic;">o</div>
</div>
<div style="position: absolute; padding-left: 2.33em; padding-top: 4.37em;">
<div style="font-size: 3.06em; font-weight: bold;">o</div>

</div>
</div>
<div style="color: #CDB26F">
<div style="position: absolute; padding-left: 2.39em; padding-top: 5.36em;">
<div style="font-size: 1.38em; font-weight: bold; font-style: italic;">(</div>
</div>
<div style="position: absolute; padding-left: 2.37em; padding-top: 5.75em;">
<div style="font-size: 1.04em; font-weight: bold;">(</div>
</div>
<div style="position: absolute; padding-left: 2.95em; padding-top: 4.82em;">
<div style="font-size: 2.25em; font-weight: bold;">8</div>
</div>
<div style="position: absolute; padding-left: 2.49em; padding-top: 4.15em;">
<div style="font-size: 2.93em; font-weight: bold; font-style: italic;">o</div>

</div>
<div style="position: absolute; padding-left: 2.39em; padding-top: 4.22em;">
<div style="font-size: 2.93em; font-weight: bold; font-style: italic;">o</div>
</div>
<div style="position: absolute; padding-left: 2.4em; padding-top: 4.5em;">
<div style="font-size: 2.87em; font-weight: bold;">o</div>
</div>
</div>
<div style="position: absolute; padding-left: 2.98em; padding-top: 6.09em;">
<div style="width: .76em; height: 1em; background-color: #CDB26F;"></div>
</div>
<div style="color: #000">
<div style="position: absolute; padding-left: 3.69em; padding-top: 4.28em;">
<div style="font-size: 2.2em;">o</div>

</div>
<div style="position: absolute; padding-left: 4.62em; padding-top: 5.42em;">
<div style="font-size: 1.01em;">)</div>
</div>
<div style="position: absolute; padding-left: 4.78em; padding-top: 5.72em;">
<div style="font-size: 0.72em;">)</div>
</div>
<div style="position: absolute; padding-left: 4.53em; padding-top: 5.65em;">
<div style="font-size: 0.94em;">b</div>
</div>
<div style="position: absolute; padding-left: 4em; padding-top: 5.09em;">
<div style="font-size: 1.59em; font-weight: bold;">o</div>
</div>

<div style="position: absolute; padding-left: 3.33em; padding-top: 4.79em;">
<div style="font-size: 1.95em; font-weight: bold;">O</div>
</div>
<div style="position: absolute; padding-left: 3.15em; padding-top: 4.3em;">
<div style="font-size: 2.42em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 3.01em; padding-top: 4.46em;">
<div style="font-size: 2.23em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 2.88em; padding-top: 4.43em;">
<div style="font-size: 2.23em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 2.81em; padding-top: 4.71em;">

<div style="font-size: 1.9em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 3.69em; padding-top: 4.74em;">
<div style="font-size: 1.97em; font-weight: bold;">o</div>
</div>
</div>
<div style="color: #CDB26F">
<div style="position: absolute; padding-left: 3.7em; padding-top: 4.4em;">
<div style="font-size: 2.06em;">o</div>
</div>
<div style="position: absolute; padding-left: 4.57em; padding-top: 5.44em;">
<div style="font-size: 0.95em;">)</div>
</div>

<div style="position: absolute; padding-left: 4.49em; padding-top: 5.66em;">
<div style="font-size: 0.88em;">b</div>
</div>
<div style="position: absolute; padding-left: 4.01em; padding-top: 5.14em;">
<div style="font-size: 1.48em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 3.37em; padding-top: 4.84em;">
<div style="font-size: 1.83em; font-weight: bold;">O</div>
</div>
<div style="position: absolute; padding-left: 3.21em; padding-top: 4.38em;">
<div style="font-size: 2.27em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 3.07em; padding-top: 4.54em;">

<div style="font-size: 2.09em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 2.95em; padding-top: 4.53em;">
<div style="font-size: 2.08em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 2.88em; padding-top: 4.78em;">
<div style="font-size: 1.78em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 3.71em; padding-top: 4.79em;">
<div style="font-size: 1.85em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 2.87em; padding-top: 4.59em;">
<div style="font-size: 1.93em; font-weight: bold;">o</div>

</div>
<div style="position: absolute; padding-left: 3.09em; padding-top: 4.55em;">
<div style="font-size: 1.93em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 2.73em; padding-top: 5.03em;">
<div style="font-size: 1.44em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 2.59em; padding-top: 5.77em;">
<div style="font-size: 0.82em; font-weight: bold;">o</div>
</div>
<div style="position: absolute; padding-left: 3.04em; padding-top: 6.4em;">
<div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000;">/</div>
</div>

<div style="position: absolute; padding-left: 3.03em; padding-top: 6.4em;">
<div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000;">/</div>
</div>
<div style="position: absolute; padding-left: 3.02em; padding-top: 6.4em;">
<div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000;">/</div>
</div>
</div>
<div style="position: absolute; padding-left: 3.24em; padding-top: 2.49em;">
<div style="font-size: 2.76em; font-weight: bold; color: #000;">•</div>
</div>
<div style="position: absolute; padding-left: 3.34em; padding-top: 2.68em;">
<div style="font-size: 2.49em; font-weight: bold; color: #fff;">•</div>
</div>
<div style="position: absolute; padding-left: 4.2em; padding-top: 4.26em;">
<div style="font-size: 0.28em; font-weight: bold; color: #000;">•</div>

</div>
<div style="position: absolute; padding-left: 3.9em; padding-top: 4.05em;">
<div style="font-size: 1.47em; font-weight: bold; color: #000;">•</div>
</div>
<div style="position: absolute; padding-left: 3.99em; padding-top: 4.23em;">
<div style="font-size: 1.2em; font-weight: bold; color: #FED90E;">•</div>
</div>
<div style="position: absolute; padding-left: 3.66em; padding-top: 4.7em;">
<div style="font-size: 10px">
<div style="width: 4.6em; height: 3.88em; background-color: #FED90E;"></div>
</div>
</div>
<div style="position: absolute; padding-left: 3.68em; padding-top: 3.36em;">
<div style="font-size: 1.2em; color: #000;">_</div>
</div>
<div style="position: absolute; padding-left: 3.68em; padding-top: 4.03em;">

<div style="font-size: 1.2em; color: #000;">_</div>
</div>
<div style="position: absolute; padding-left: 3.64em; padding-top: 4.03em;">
<div style="font-size: 1.2em; color: #000;">_</div>
</div>
<div style="position: absolute; padding-left: 1.96em; padding-top: 2.33em;">
<div style="font-size: 3.04em; font-weight: bold; color: #000;">•</div>
</div>
<div style="position: absolute; padding-left: 2.06em; padding-top: 2.5em;">
<div style="font-size: 2.77em; font-weight: bold; color: #fff;">•</div>
</div>
<div style="position: absolute; padding-left: 2.67em; padding-top: 4.23em;">
<div style="font-size: 0.28em; font-weight: bold; color: #000;">•</div>
</div>
<div style="position: absolute; padding-left: 1.46em; padding-top: 5.18em;">

<div style="font-size: 0.66em; color: #000;">C</div>
</div>
<div style="position: absolute; padding-left: 1.47em; padding-top: 5.4em;">
<div style="font-size: 0.66em; color: #000;">C</div>
</div>
<div style="position: absolute; padding-left: 1.62em; padding-top: 5.53em;">
<div style="font-size: 10px">
<div style="width: 2.2em; height: 2.2em; background-color: #FED90E;"></div>
</div>
</div>
<div style="position: absolute; padding-left: 1.45em; padding-top: 5.19em;">
<div style="font-size: 0.8em; font-weight: bold; color: #FED90E;">O</div>
</div>
<div style="position: absolute; padding-left: 1.58em; padding-top: 5.47em;">

<div style="font-size: 0.25em; font-weight: bold; font-style: italic; color: #000;">(</div>
</div>
<div style="position: absolute; padding-left: 1.62em; padding-top: 5.46em;">
<div style="font-size: 0.25em; font-weight: bold; font-style: italic; color: #000;">-</div>
</div>
</div>
</div>
</div>
</div>

23.05.2008, 17:40 quote

titwhipper

Joined: 17 Apr 2008 Posts: 1358 Location: United Kingdom, England, Hampshire

Visit poster's website

But why?
_________________
coffee

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum