PAGE 01 | A LOVE MODERNE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>


<!--

// P A G E  0 1 : A LOVE MODERNE

iliyon.tumblr.com

1. do not remove credit
2. do not take any part of this code and claim it as your own.
3. message me if something just goes plain wrong.
4. like/reblog if using,
5. enjoy.

-->



<title>{Title}</title>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,700' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
font:10px open sans;
line-height:15px;
text-align:justify;
color:#444;
margin:0px;
cursor:default;
}
a{color:#ccc; text-decoration:none; transition:0.6s;}
a:hover{color:#F23F3F; transition:0.6s;}

::-webkit-scrollbar-thumb { background-color: #ccc; margin-right:5px;}
::-webkit-scrollbar { height:5px; width: 5px;}
::-webkit-scrollbar-track { background-color:#F23F3F; -moz-box-shadow: inset 0 0 0 2px #fff; -webkit-box-shadow: inset 0 0 0 2px #fff; box-shadow: inset 0 0 0px 2px #fff; }

.init{
position:absolute;
top:210px;
width:500px;
left:0px;
right:0px;
margin:auto;
}
.text{text-transform:uppercase; font:50px josefin sans; letter-spacing:-3px; position:relative; top:-91px; left:400px; color:#ccc;}
.emdash{width:100px; height:1px; background:#ccc; left:25px; margin-right:30px; display:inline-block; top:-13px; position:relative;}

.topbar{
width:100%;
left:0px; top:0px;
box-shadow:0px 1px 8px #ccc;
padding:15px;
position:fixed;
font:10px open sans;
letter-spacing:4px;
font-weight:700;
text-transform:uppercase;
text-align:center;
background:#fff;
z-index:99999999;
}
.topbar a{color:#ccc; font-weight:300; letter-spacing:2px;}
.topbar a:hover{color:#F23F3F;}

.holder{
width:90%;
position:absolute;
top:100%;
opacity:1;
padding-left:90px;
padding-top:16px;
padding-bottom:120px;
transition:0.6s;
}
.link{position:relative; display:block; border-bottom:1px #ccc solid; font:10px open sans; text-transform:uppercase; text-align:center; letter-spacing:2px; padding:3px; margin-bottom:7px;}
.link .liner{position:absolute; z-index:2; width:0px; left:50%; margin:auto; transition:0.6s; bottom:-1px; height:1px; background:#F23F3F;}
.link:hover .liner{width:50%; transition:0.6s;}
.link .liner2{position:absolute; z-index:2; width:0px; right:50%; margin:auto; transition:0.6s; bottom:-1px; height:1px; background:#F23F3F;}
.link:hover .liner2{padding-left:50%; transition:0.6s;}
.spadecard .crosser{height:100%; left:125px; top:0px; position:absolute; -webkit-transform:rotate(32deg); width:1px; background:#eee; transition:1.5s ease-out; opacity:1;}
#crosseralt{-webkit-transform:rotate(-32deg); background:#F23F3F; height:93%; top:30px; left:135px;}
.spadecard:hover .crosser{opacity:0; transition:0.6s;}
.spadecard{
width:230px;
height:360px;
box-shadow:1px 1px 10px #ccc;
border-radius:5px;
margin-right:20px;
margin-left:20px;
padding:10px;
position:relative;
display:inline-block;
}
.spadecard:hover #content{opacity:1; transition:0.8s; -webkit-transform:rotateY(0deg);}
.spadecard #content{
-webkit-transform:rotateY(90deg);
opacity:0;
transition:0.8s;
width:205px;
height:300px;
overflow:hidden;
margin:auto;
margin-top:45px;
}
#subcontent{
height:250px;
overflow:auto;
padding-right:10px;
}
#title{
text-align:right;
text-transform:uppercase;
font:12px open sans;
letter-spacing:px;
margin-bottom:20px;
}
#tag a{
font:8px open sans;
text-transform:uppercase;
letter-spacing:2px;
margin-right:3px;
}
#tagsect{
font:10px open sans;
margin-bottom:7px;
text-transform:uppercase;
text-align:left;
}
#ava{float:left;}
#ava img{border:6px #f5f5f5 solid; width:40px; margin-right:10px;}
.type{
font:16px open sans;
text-transform:uppercase;
position:absolute;
left:17px;
color:#ccc;
}
.clover{
position:absolute;
top:34px;
left:15px;
}
.hearts{
height:0px;
width:0px;
border-left:6.5px solid transparent;
border-right:6.5px solid transparent;
border-top:10px solid #fff;
left:17px;
top:37px;
position:absolute;
}
.heartwrapper{
position:absolute;
z-index:-1;
left:15px;
top:36px;
height:0px;
width:0px;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:12px solid #F23F3F;
}
#spadeswrapper{
position:absolute;
z-index:-1;
left:15px;
top:36px;
height:0px;
width:0px;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-bottom:12px solid #ccc;
}
#spades{
height:0px;
width:0px;
left:17px;
top:37px;
position:absolute;
border-left:6.5px solid transparent;
border-right:6.5px solid transparent;
border-bottom:10px solid #fff;
}
#diamonds{
width:7px;
height:7px;
position:absolute;
top:38px;
left:18px;
border:1px #F23F3F solid;
-webkit-transform:rotate(45deg);
}
#h{color:#F23F3F;}
#cr{font:8px helvetica; position:fixed; right:10px; bottom:5px; text-transform:uppercase; z-index:99999;}
</style>
</head>
<body>
<div id=top></div>
<div class=topbar>
<!-- REPLACE TITLE WITH YOUR OWN -->a love moderne<div style="display:inline-block; width:70px; background:#ccc; height:1px; position:relative; top:-2px; margin:0px 15px;"></div>
<a href=/>index</a><div style="display:inline-block; width:30px;"></div>
<a href=/ask>message</a><div style="display:inline-block; width:30px;"></div>
<a href="http://www.tumblr.com/dashboard">dashboard</a><div style="display:inline-block; width:30px;"></div>
</div>
<div id=cr><a data-scroll data-speed="500" data-easing="easeInCubic" data-url="true" href=#top>up, up and away</a> / <a href="http://iliyon.tumblr.com/">iliyon</a></div>

<!-- START OF WRAPPER DIV
LEAVE THIS STUFF ALONE -->
<div class=init>
<img src="http://i.imgur.com/tJ0Y1bK.png">
<div class=text><div class=emdash></div> <a data-scroll data-speed="500" data-easing="easeInCubic" data-url="true" href=#s><!-- UNLESS YOU WANT TO CHANGE THE TEXT -->start</a></div>
<div style="text-align:center; text-transform:uppercase; margin-top:-45px; font-size:9px; letter-spacing:2px; color:#ccc;">
flip the cards, see what i've got
</div>
</div>
<!-- /END OF WRAPPER DIV
THANKS FOR LEAVING IT ALONE -->

<!-- START OF CARD LAYOUT
WATCH IT WHERE YOU SHOULD FILL THINGS -->
<div class=holder id=s>

<!-- START OF CLOVER CARD -->
<div class=spadecard>
<div class=crosser></div>
<div class=type>A</div> <!-- THIS INDICATES AN ACE CARD. REPLACE WITH WHATEVER YOU WANT IF YOU WISH -->
<div class=clover>
<img src="http://i.imgur.com/6o4iozN.png" width=16></div>
<!-- START OF CONTENT,
FILL IT UP -->
<div id=content>
<div id=title>about</div><!-- REPLACE TITLE FOR HEARTS CARD -->
<div id=subcontent>
<div id=ava><img src="{PortraitURL-40}"></div>
<!-- START OF ABOUT YOU CONTENT -->
About you. Short and sweet. <b>Bold</b> <i>italic</i> <u>underwear</u> i mean underline, <a href=#>link</a>. Aenean nulla orci, malesuada eu dapibus ut, fringilla in nunc. Proin volutpat est id accumsan vulputate. Duis euismod aliquam magna posuere rhoncus. Curabitur eget vehicula libero. Sed in malesuada lectus.
<p>
Ut dignissim lectus vitae mauris dignissim, vel ultricies augue eleifend. Morbi tortor velit, consectetur ut interdum at, euismod ac nulla. Cras vel nibh posuere, mattis est id, dignissim sem. Fusce sed erat nec erat elementum iaculis. Etiam eget elit non turpis dictum vulputate eget et sapien. Praesent lacinia purus vel lorem molestie interdum vitae vel mauris. Etiam quis tincidunt nibh. Praesent nec vulputate mi. Praesent ac luctus ligula, vitae venenatis nibh.
</div>
<!-- /END OF CONTENT -->
</div>
</div>
<!-- /END OF CLOVER CARD-->

<!-- START OF HEARTS CARD -->
<div class=spadecard>
<div class=crosser id=crosseralt></div>
<div class=type id=h>A</div> <!-- THIS INDICATES AN ACE CARD. REPLACE WITH WHATEVER YOU WANT IF YOU WISH -->
<div class=clover style="left:13px;">
<img src="http://i.imgur.com/mu0jyZs.png">
</div>
<!-- START OF CONTENT,
FILL IT UP -->
<div id=content>
<div id=title>links</div> <!-- REPLACE TITLE FOR CLOVER CARD -->
<!-- START OF LINKS
YOU CAN ADD MORE TO YOUR HEART'S CONTENT
JUST FOLLOW THE PATTERN -->
<div id=subcontent>
<a href=#><div class=link><!-- REPLACE THE TEXT FOR LINK HERE -->letter a <div class=liner></div> <div class=liner2></div></div></a>
<a href=#><div class=link>letter b <div class=liner></div> <div class=liner2></div></div></a>
<a href=#><div class=link>letter c <div class=liner></div> <div class=liner2></div></div></a>
<a href=#><div class=link>letter d <div class=liner></div> <div class=liner2></div></div></a>
<a href=#><div class=link>letter e <div class=liner></div> <div class=liner2></div></div></a>
</div>
<!-- /END OF CONTENT -->
</div>
</div>
<!-- /END OF HEARTS CARD -->

<!-- START OF SPADES CARD -->
<div class=spadecard>
<div class=crosser></div>
<div class=type>A</div> <!-- THIS INDICATES AN ACE CARD. REPLACE WITH WHATEVER YOU WANT IF YOU WISH -->
<div class=clover>
<img src="http://i.imgur.com/iVV3z9X.png">
</div>
<div id=content>
<div id=title>taggity tag</div>
<div id=subcontent>
<!--START OF CONTENT,
FILL IT UP -->
<div id=tag>
<div id=tagsect>prettiful things</div><!-- THIS INDICATES YOUR TAG SECTION. REPLACE IF YOU WISH -->
<a href=#>tag</a> <a href=#>tag</a> <a href=#>tag</a> <a href=#>tag</a> <a href=#>tag</a> <a href=#>tag</a> <a href=#>keep tagging</a> <a href=#>until you</a> <a href=#>can't take it</a>
<p>
<div id=tagsect>things you do</div> <!-- THIS INDICATES YOUR TAG SECTION. REPLACE IF YOU WISH -->
<a href=#>tag</a> <a href=#>tag</a> <a href=#>tag</a> <a href=#>tag</a> <a href=#>tag</a> <a href=#>tag</a> <a href=#>this can</a> <a href=#>go on</a> <a href=#>and on</a> <a href=#>until</a> <a href=#>the end</a> <a href=#>of time</a>
<p>
<div id=tagsect>what else</div> <!-- THIS IS YET ANOTHER TAG SECTION. USE WISELY -->
<a href=#>tag</a> <a href=#>tag</a> <a href=#>tag</a> <a href=#>tag</a> <a href=#>tag</a> <a href=#>tag</a> <a href=#>tag</a> <a href=#>tag</a> <a href=#>tag</a> <a href=#>tag</a> <a href=#>a sudden</a> <a href=#>silent</a> <a href=#>sentimental</a> <a href=#>gnome</a>
<p>
<div id=tagsect>useful things</div> <!-- -->
<a href=#>where</a> <a href=#>is</a> <a href=#>the</a> <a href=#>bathroom</a> <a href=#>when</a> <a href=#>you</a> <a href=#>need it</a> <a href=#>the most</a> <a href=#>?</a>
</div>
<!-- /END OF CONTENT -->
</div>
</div>
</div>
<!-- /END OF SPADES CARD -->

<!-- START OF DIAMONDS CARD -->
<div class=spadecard>
<div class=crosser id=crosseralt></div>
<div class=type id=h>A</div> <!-- THIS INDICATES AN ACE CARD. REPLACE WITH WHATEVER YOU WANT IF YOU WISH -->
<div class=clover style="left:14px;"><img src="http://i.imgur.com/fm4hxHP.png"></div>
<!-- START OF CONTENT,
FILL IT UP -->
<div id=content>
<div id=title>blogroll</div> <!-- REPLACE TITLE FOR HEART CARD -->
<div id=subcontent>
{block:Following}
{block:Followed}<a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-30}"></a>
{/block:Followed}
{/block:Following}
</div>
<!-- /END OF CONTENT -->
</div>
</div>
<!-- END OF DIAMONDS CARD -->
</div>
<script type="text/javascript" src="http://static.tumblr.com/wb7siqo/GDqn2vz28/smooth-scroll.js"></script>
</body>
</html>