Volcano
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>hot-footed love fight!</title>
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Arimo:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
<style type="text/css">
html{padding-bottom:8px;}
#navbar-iframe {
opacity:0.2;
border:none!important;
font:8pt/8px arial!important;
background:transparent!important;
color:white;}
#navbar-iframe:hover{
opacity:.6;}
body {
background: #f5f5f5 url(http://i28.tinypic.com/kcaqyp.jpg) repeat fixed;
margin: 0 0 5px 0;
padding: 0;
font: 9px/20px 'arimo', verdana,arial;
color: #666;}
h1 {
font:30pt/35px arial black;
margin: 4px; color:#222; }
h2{
font-weight:normal;
color:#444;
margin:0px;line-height:85%; }
.converse{
position:fixed;
top:0%;
left:50%;
margin:-30px -150px;
width:700px;
height:600px;
background:url(http://i54.tinypic.com/28sscbc.jpg) center;}
.container {
width: 550px;
margin: 40px -400px;
position:absolute;
top:0%;
left:50%;}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 25px;
width: 100%; }
ul.tabs li {
float: left;
padding: 0;
height: 25px;
line-height:25px;
padding: 4px 4px 0px 4px;
margin-top:-4px;
background: ;
overflow:hidden;
position: relative; }
ul.tabs li a {
background: #4612A6 url(http://i51.tinypic.com/2cgkhus.jpg) -53px top;
text-decoration: none;
color: rgba(0,0,0,0.8);
display: block;
font-size: 1.2em;
padding: 0 20px;
outline: none; }
ul.tabs li a, ul.tabs li{
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;}
ul.tabs li a:hover {
background: #111 url(http://i51.tinypic.com/2cgkhus.jpg) -23px bottom!important;
color:#ddd ;}
ul.tabs li a.pink, .pink{background-color:#FD2CC1;}
ul.tabs a.sea, .sea{background-color:#41FDFF;}
ul.tabs a.yell, .yell{background-color:#E3F632;}
ul.tabs a.blu, .blu{background-color:#1E92FF;}
.purp{background-color:#360E81;}
html ul.tabs li.active,html ul.tabs li.active a, html ul.tabs li.active a:hover {
background: #fff!important; color:black;
border-bottom: 1px solid #fff; cursor:default; }
html ul.tabs li.active a{
-moz-box-shadow:0px 0px 6px rgba(0,0,0,0.3);
-webkit-box-shadow:0px 0px 6px rgba(0,0,0,0.3);
box-shadow:0px 0px 6px rgba(0,0,0,0.3);
margin:0px;}
html ul.tabs li.active{
overflow:hidden;
padding:4px 4px 0px 4px;
top:px;background:transparent!important; }
.tab_container {
clear: both;
float: left;
width: 100%;}
.tab_content, .boob {
padding: 20px;
font-size: 8pt;
margin-bottom:15px;
font-weight:normal;
text-align:justify;
-moz-box-shadow:0px 0px 6px rgba(0,0,0,0.2);
-webkit-box-shadow:0px 0px 6px rgba(0,0,0,0.2);
box-shadow:0px 0px 6px rgba(0,0,0,0.2);
display:block;
clear:both;
background:#fff;}
.tab_content h2 {
margin:4px;
padding:10px;
font-family:'raleway', arial narrow;
color:#111;
text-transform:uppercase;}
.tab_content h3 a, h3{
color: ;
font-family:'arial narrow', arial narrow;
font-size:140%; text-align:right;
font-weight:normal;
display:block;
text-transform:uppercase;
text-decoration:none;
border:none!important;}
.tab_content img {
float: left;
margin: 5px;
border: 1px solid #ddd;
padding: 5px;
background:white;}
h2 font{
text-align:right;
background:transparent!important;}
a{
text-decoration:none;
color:#1E92FF; }
a:hover, h3 a:hover{color:black;}
.coo{
font:55pt/30px arial;
text-align:center;
width:20px;
display:block;
float:right;
position:relative;
right:-20px;
top:-23px;
text-shadow:0px 0px 3px rgba(0,0,0,0.7);}
.coo a{display:block;}
.coo a:hover font{color:#222!important;}
textarea{
background:#222;
border:1px solid #111;
color:#777;
font:9.8px/13px small fonts, arial;
margin:3px auto;
align :center;
clear:both;
width:99%;
padding:3px;
min-height:55px;}
blockquote{
margin:2% 30px;
padding:10px;
border:1px solid #ddd;}
.blackbox{
-moz-box-shadow:0px 0px 6px rgba(0,0,0,0.4);
-webkit-box-shadow:0px 0px 6px rgba(0,0,0,0.4);
box-shadow:0px 0px 6px rgba(0,0,0,0.4);
color:#aaa!important;
clear: both;
display:block;
font-family:verdana;
background:rgba(18,18,18,0.8);
padding: 2px 0;
text-align:center;
margin:0px 0px 30px;}
blockquote a{color:#FD2CC1;}
#tab3 div.linkies a{
float:left;
margin:1px;
padding:4px;
color:#4f4f4f;
border:1px solid #eee;
background:url(http://i1128.photobucket.com/albums/m497/aeriniq/newbies/stripe_6904b7cd81d13480771a413267f645e7.png) repeat; }
#tab3 div.linkies a:hover{
background:#222 url(http://i1128.photobucket.com/albums/m497/aeriniq/newbies/stripe_f89088c231c90dcab18d8239b219e1da.png);
color:#000;}
.divlink{
width:100px;
height:35px;
border:1px solid;
position:fixed;
top:0%;
left:50%;
margin-left: 210px;
margin-top:295px;
width:200px;
border:none;
border-bottom:1px dotted #555;
color:rgba(0,0,0,0);}
a:hover .divlink {
background:rgba(0,0,0,0.12);
border:1px solid rgba(0,0,0,0.1);
text-align:right;
color:#222;
font-size:12pt}
.ooo a:hover{color: rgba(0,0,0,0.8)!important; background:rgba(0,0,0,0.1)!important;}
div.boob:hover div.d {background:#eee!important;}</style>
<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
</head>
<body>
<div class=converse></div>
<div class="container">
<h1 style="font-family:'raleway', verdana, sans-serif;" onClick="window.location.reload()" onmouseover="this.style.color='#1E92FF'; this.style.cursor='pointer'" onmouseout="this.style.color='#000'">
<!--HEADER GOES HERE-->
VOLCANO on the BALCONY!
<!--HEADER ENDS HERE-->
</h1>
watch your step if you dare risk getting closer to me.<br><br>
<ul class="tabs">
<li><a href="#tab1">Home</a></li>
<li><a href="#tab2" class=pink>Profile</a></li>
<li><a href="#tab3" class=sea>Ask</a></li>
<li><a href="#tab4" class=yell>Credits</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content" style="background:transparent;padding:0px; -moz-box-shadow:none; box-shadow:none; -webkit-box-shadow:none;">
<Blogger>
<div class=boob style="margin-bottom:25px;">
<span class="coo">
<script type="text/javascript">
<!-- hide
numquotes = 10;
var quotes = new Array(numquotes);
quotes[0]="<a href='<$BlogItemURL$>'><font color=#1E92FF>★</font></a>";
quotes[1]="<a href='<$BlogItemURL$>'><font color=#41FDFF>☁</font></a>";
quotes[2]="<a href='<$BlogItemURL$>'><font color=#5A27B8>♥</font></a>";
quotes[3]="<a href='<$BlogItemURL$>'><font color=#FD2CC1> ♡</font></a>";
quotes[4]="<a href='<$BlogItemURL$>'><font color=#E3F632>☀</font></a>";
quotes[5]="<a href='<$BlogItemURL$>'><font color=#1E92FF>♥</font></a>";
quotes[6]="<a href='<$BlogItemURL$>'><font color=#41FDFF>☀</font></a>";
quotes[7]="<a href='<$BlogItemURL$>'><font color=#5A27B8> ★</font></a>";
quotes[8]="<a href='<$BlogItemURL$>'><font color=#FD2CC1> ☁</font></a>";
quotes[9]="<a href='<$BlogItemURL$>'><font color=#E3F632>♡</font></a>";
var rand = Math.floor(Math.random()*numquotes);
document.write(quotes[rand]);
// -->
</script>
</span>
<div class=d style="background:rgba(222,222,222,.89); font-family:small fonts, arial;letter-spacing:4px; height:15px;line-height:0px; margin-bottom:5px; color:white;"> </div>
<h3 style="color:black; display:inline;">{title}</h3> <br>
<!-- START OF POSTS -->
<center>
{block:Posts}
<!-- Text Posts -->
<p>
{block:Regular}
<div id="posts">
<div id="postmeta">{ShortMonth} {DayOfMonthWithZero}, {Year}
<a href="{Permalink}" title="Permalink"> {NoteCount} Notes.</a></div>
<div class="regular">
{block:Title}
<h1>{Title}</h1>
{/block:Title}
{Body}
</div>
</div>
{/block:Regular}
<!-- Photo Posts -->
<p>
{block:Photo}
<div id="posts">
<div id="postmeta">{ShortMonth} {DayOfMonthWithZero}, {Year} <a
href="{Permalink}" title="Permalink"> {NoteCount} Notes.</a></div>
<div class="photo">
{LinkOpenTag}<center><img src="{PhotoURL-500}" alt="{PhotoAlt}" border="1" class="border"/></center><br><p>{LinkCloseTag}<br>
{block:Caption}{Caption}{/block:Caption}
</div>
<p>
</div>
{/block:Photo}
<!-- Quote Posts -->
{block:Quote}
<div id="posts">
<div id="postmeta">{ShortMonth} {DayOfMonthWithZero}, {Year} <a
href="{Permalink}" title="Permalink"> {NoteCount} Notes.</a></div>
<div class="quote">
<div class="quotes">
<p class="blockquote">"<i>{Quote}
</i>"</p>
</div>
{block:Source}<div class="source">—
{Source}</div>{/block:Source}
</div>
</div>
{/block:Quote}
<!-- Link Posts -->
{block:Link}
<div id="posts">
<div id="postmeta">{ShortMonth} {DayOfMonthWithZero}, {Year} <a
href="{Permalink}" title="Permalink"> {NoteCount} Notes.</a></div>
<u><a href="{URL}" class="link" {Target}>{Name}
</a></u>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
</div>
{/block:Link}
<!-- Chat Posts -->
{block:Conversation}
<div id="posts">
<div id="postmeta">{ShortMonth} {DayOfMonthWithZero}, {Year} <a
href="{Permalink}" title="Permalink"> {NoteCount} Notes.</a></div>
<div class="conversation">
{block:Title}<h1><a
href="{Permalink}">{Title}</a></h1>{/block:Title}
<ul>{block:Lines}
<li class="{Alt}">{block:Label}
<span
class="label">{Label}</span>{/block:Label}
{Line}</li>
{/block:Lines}</ul>
</div>
</div>
{/block:Conversation}
<!-- Audio Posts -->
{block:Audio}
<div id="posts">
<div id="postmeta">{ShortMonth} {DayOfMonthWithZero}, {Year} <a
href="{Permalink}" title="Permalink"> {NoteCount} Notes.</a></div>
<div class="audio">
{AudioPlayerWhite}
{block:Caption}{Caption}{/block:Caption}
</div>
</div>
{/block:Audio}
<!-- Video Posts -->
{block:Video}
<div id="posts">
<div id="postmeta">{ShortMonth} {DayOfMonthWithZero}, {year} <a
href="{Permalink}" title="Permalink"> {NoteCount} Notes.</a></div>
<div class="video">
<center>{Video-400}</center>
<p>{block:Caption}{Caption}{/block:Caption}</p>
</div>
</div>
{/block:Video}
{/block:Posts}
{block:PostNotes}
<h2>Notes</em></h2>
{PostNotes}
{/block:PostNotes}
<a href="{PreviousPage}" class="page">« PREVIOUS //</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}" class="page">NEXT »</a>
{/block:NextPage}
</center>
<br><br>
</div>
</Blogger>
</div>
<div id="tab2" class="tab_content">
<h2><font style=" padding:11px;" class=pink>Profile</font></h2>
<div style="background: -moz-linear-gradient(left, #FD2CC1, #E3F632); background: -webkit-gradient(linear, left, right, from(#FD2CC1), to(#E3F632)); filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#E3F632', startColorstr='#FD2CC1', gradientType='1'); font-family:small fonts, arial;letter-spacing:4px; overflow:hidden; height:5px;line-height:1px; margin-bottom:8px; color:white;"><marquee behavior=alternate style="color:#fff; clear:both;" scrolldelay=60 scrollamount=33 loop=4 onfinish="this.style.display='none'">■</marquee></div>
<center> <img src="{PortraitURL-128}" />
</center>
<p><br />
{block:Description}{Description}<br>
{/block:Description}</p>
<p> </p>
<p><br />
</p>
</center>
<!--PROFILE ENDS HERE-->
</div>
<div id="tab3" class="tab_content">
<h2><font style="padding:11px;" class=sea> Ask</font></h2>
<div style="background: -moz-linear-gradient(left, #41FDFF, #1E92FF); background: -webkit-gradient(linear, left, right, from(#41FDFF), to( #1E92FF)); filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr=' #1E92FF', startColorstr='#41FDFF', gradientType='1'); font-family:small fonts, arial;letter-spacing:4px; overflow:hidden; height:5px;line-height:1px; margin-bottom:8px; color:white;"><marquee behavior=alternate style="color:#fff; clear:both;" scrolldelay=60 scrollamount=33 loop=4 onfinish="this.style.display='none'">■</marquee></div><center>
<iframe frameborder="0" border="0" scrolling="no" width="400px" height="150" allowtransparency="true"
src="http://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden; :; text-align: center;"></iframe></center>
<p> </p>
</div>
</p><br><br>
<div style="display:block; background:#444; clear:both; border:1px solid #222; padding:4px;">
<!--START DELETE-->
<!--GRADIENT CODES ARE HERE
<h3>gradient code : this is one of my own making :D</h3>
<textarea><style>div.rainbow{
background: -moz-linear-gradient(left, #FD2CC1, #E3F632);
background: -webkit-gradient(linear, left, right, from(#FD2CC1), to(#E3F632));
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#E3F632', startColorstr='#FD2CC1', gradientType='1');
height:4px; line-height:4px; overflow:hidden;
color:white;}
</style>
</textarea>
<textarea><div class=rainbow>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div></textarea>
<div style="border:1px dotted #aaa; padding:8px;">
example here: no text<style>div.rainbow{
background: -moz-linear-gradient(left, #FD2CC1, #E3F632);
background: -webkit-gradient(linear, left, right, from(#FD2CC1), to(#E3F632));
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#E3F632', startColorstr='#FD2CC1', gradientType='1');
color:white; height:6px; line-height:4px; overflow:hidden; font:arial;}
</style><div class=rainbow>
</div>
example here: symbol<style>div.rainbow3{
background: -moz-linear-gradient(left, #63799B, #fff);
background: -webkit-gradient(linear, left, right, from(#FD2CC1), to(#fff));
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ffffff', startColorstr='#FD2CC1', gradientType='1');
color:white; height:9px; line-height:8px; overflow:hidden; font:arial;}
</style><div class=rainbow3>★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ </div>
example here: block imitation<style>div.rainbow2{
background: -moz-linear-gradient(left, #BC82FF, #AAFF41);
background: -webkit-gradient(linear, left, right, from(#BC82FF), to(#AAFF41));
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr=' #AAFF41', startColorstr='#BC82FF', gradientType='1');
color:white; height:7px; line-height:6px; overflow:hidden; font:arial!important; letter-spacing:4px;}
</style><div class=rainbow2>|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</div>
example here: diagonal lines
<div class=rainbow style="font-family:terminal; line-height:6px; height:5px; letter-spacing:-3px;;">\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\</div>
</div>-->
<!--END DELETE-->
</div>
<div id="tab4" class="tab_content">
<h2><font style="padding:11px;" class=yell>Credits</font></h2>
<div style="background: -moz-linear-gradient(left, #E3F632, #41FDFF); background: -webkit-gradient(linear, left, right, from(#E3F632), to(#41FDFF)); filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#41FDFF', startColorstr='#E3F632', gradientType='1');font-family:small fonts, arial;letter-spacing:4px; overflow:hidden; height:5px;line-height:1px; margin-bottom:8px; color:white;"><marquee behavior=alternate style="color:#fff; clear:both;" scrolldelay=60 scrollamount=33 loop=6 onfinish="this.style.display='none'">■</marquee> </div>
<img src=http://i1128.photobucket.com/albums/m497/aeriniq/534.png>
<p>Put some links to other places here. </p>
<a href=#>find me</a> <font face=verdana>♡</font>
<a href=#>find me</a> <font face=verdana>♡</font>
<a href=#>find me</a> <font face=verdana>♡</font>
<a href=#>find me</a> <font face=verdana>♡</font>
<a href=#>find me</a> <font face=verdana>♡</font>
<a href=#>find me</a> <font face=verdana>♡</font>
<a href=#>find me</a>
<p>Jezebel had whiskey snakeoil, askin' weren't, skanky aunt townfolk fetched. Fit tractor, them broke askin', them havin' rattler fell heffer, been tax-collectors buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin' cow. </p>
<br> <br>
jquery help: <a href="http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery">★</a>
inspiration and bg transparency<a href=http://fivepointsapart.blogspot.com>★</a>
layout design: <a href=http://traumalust.blogspot.com>♥</a>
hosted by <a href=http://blogger.com>blogger</a>
</div>
</div>
<div class=blackbox></div>
</div>
<a href="http://www.blogger.com/follow-blog.g?blogID=740094870150702733" style="border:0px; position:absolute; top:0%; left:50%; margin-left: 0px; opacity:.6; margin-top:0px;" onmouseover="this.style.opacity='0.4'" onmouseout="this.style.opacity='.6'">
</body>
</html>
<div style="position:absolute;top:0px;left:0px;border:0px;"><a style="position:fixed;" href="http://sweeetposh.tumblr.com" title="Visit Sweeetposh Themes!" target=_blank><img src="http://i52.tinypic.com/ayaot5.png" alt="Sweeetposh Themes" border=0></a></div> Pasted: Oct 4, 2011, 9:20:19 am
Views: 487