yuff | Trekking Visualosities

Hello all! Today we shall boldly go, and bring you a visualosities code based on the OG of fandoms! Star Trek!

Small Preview

LIVE PREVIEW

CODE:

<div style="display: inline-block; float: right; font-family: Impact, Charcoal, sans-serif; color: #f1ef84; width: 235px; height: 20px; margin-right: 45px; margin-top: 18px; font-size: 20px; line-height: 20px; text-transform: uppercase; text-align: center;">CHARACTER NAME</div>

<div style="display: inline-block; float: left; height: 165px; width: 180px; font-family: Impact, Charcoal, sans-serif; color: #f1ef84; text-transform: uppercase; margin-top: 28px; margin-left: 10px; font-size: 122%;"><div style="display: inline-block">
USS Enterprise NCC
</div>
<div style="float: right; display: inline-block; text-align: right;">1701 E</div>
<img src="http://i.imgur.com/X9Lfkwn.png" alt="Enterprise" style="margin-top: 15px;">
<div style="font size: 115%; margin-top: 5px;">
Status: <span style="color: #1830a7;">Deployed</span></div></div>

<div style="display: inline-block; float: left; height: 165px; width: 180px; margin-top: 245px; margin-left: -180px; overflow: auto;">

<a href="#LINK-NAME"><img src="THUMBNAIL-URL" style="height: 45px; width: 45px; margin: 1px;" alt="IMAGE TITLE"></a>

</div>

<div style="display: inline-block; float: right; height: 340px; width: 600px; margin-top: 15px; margin-right: 25px; overflow: hidden;">

<div style="height: 340px; width: 600px; overflow: auto; margin: auto;">
<a name="LINK-NAME"></a>
<div style="margin: auto;">

<div style="color: #f1ef84; margin-top: 10px; font-family: 'courier new', courier, monospace;">
<p>Information goes here! If you have no text to add, just delete this line. Each new paragraph should be surrounded by "p" tag.</p>

</div></div>

</div>

<div style="block; clear: both; width: 900px; height: 88px;"><div style="font-family: Impact, Charcoal, sans-serif; display: inline-block; text-transform: uppercase; margin-top: 69px; margin-left: 160px; font-size: 105%;">
<a href="URL" style="color: #969cf1; text-decoration: none;">GAME</a></div>

<div style="display: inline-block; font-family: Impact, Charcoal, sans-serif; text-transform: uppercase; color: #969cf1; float: right; font-size: 105%; margin-top: 69px; margin-right: 155px;">
<a href="URL" style="color: #969cf1; text-decoration: none;">INBOX</a>
</div></div>

</div>

NOTES:

Thanks to the makers of the Star Trek Padd app for the template! You want your iPad or iPhone to look like it came from Star Trek? Check them out!

For the full images, they don't need to be any specific dimensions, but for the sake of the code, don't make their width any bigger than 600px!

Thumbnail images (the ones on the right-hand side) will be resized automatically to 45x45px, but will need to be square shape to look/work properly.

In order to link an image section to a thumbnail, first you want to give a unique name in the a name="LINK-NAME" area of the image. Then in the corresponding image link, make sure to use that exact name in the a href="#LINK-NAME" spot. Don't use any spaces in the name, or it will not work properly!

The Ship section is editable! The default is the Enterprise E, but feel free to change it to another ship's info!

Modifications are totally fine. I'd love to see what you did with it though!

Comments are nice but not necessary. However, please leave the credit line on!

Trekking Visualosities

no subject

no subject