Nixie's profile

<style>
body {
overflow:hidden;
background-color:#6ccbf2;
}

@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Salsa');

::-webkit-scrollbar
{
	width: 10px;
	background-color: transparent;
}



#imgcover{
width:200px;
height:200px;
border-radius:50%;
position:absolute;
top:210px;
left:450px;
background-image:url('https://68.media.tumblr.com/06988891e7064a8d29ddd2e09c0cc9e2/tumblr_ojc8g2BfFt1vhyjwio1_500.gif');
background-size:100%;
-webkit-box-shadow: 10px 10px 44px -5px rgba(0,0,0,0.29);
-moz-box-shadow: 10px 10px 44px -5px rgba(0,0,0,0.29);
box-shadow: 10px 10px 44px -5px rgba(0,0,0,0.29);
}

#dialogbox, #dialogbox2, #dialogbox3{
width:200px;
height:60px;
background-color:#747474;
opacity:0.80;
position:absolute;
top:210px;
left:165px;
border-radius:100px 100px 100px 100px;
text-align:center;
font-family: 'Montserrat', sans-serif;
color:#fff;
font-size:8pt;
font-weight:600;
padding:10px;
text-shadow:1px 1px 0 #000;
}

h1{
text-align:center;
font-family: 'Montserrat', sans-serif;
color:#fff;
font-size:8pt;
font-weight:500;
position:absolute;
top:-13px;
left:40px;
}

.floating{
 float: left;
 -webkit-animation-name: Floatingx;
 -webkit-animation-duration: 3s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: ease-in-out;
 -moz-animation-name: Floating;
 -moz-animation-duration: 3s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: ease-in-out;
 margin-left: 30px;
 margin-top: 5px;

}

@-webkit-keyframes Floatingx{
 from {-webkit-transform:translate(0, 0px);}
 65% {-webkit-transform:translate(0, 10px);}
 to {-webkit-transform: translate(0, -0px); }
}

@-moz-keyframes Floating{
 from {-moz-transform:translate(0, 0px);}
 65% {-moz-transform:translate(0, 15px);}
 to {-moz-transform: translate(0, -0px);}
}

#img1{
width:250px;
height:250px;
border-radius:50%;
position:absolute;
top:170px;
left:390px;
background-image:url('http://i.imgur.com/zfn4imE.png');
background-size:100%;
}

#img2{
width:250px;
height:250px;
border-radius:50%;
position:absolute;
top:170px;
left:390px;
background-image:url('http://i.imgur.com/Bo0mw1E.png');
background-size:100%;
}

#img3{
width:250px;
height:250px;
border-radius:50%;
position:absolute;
top:170px;
left:390px;
background-image:url('http://i.imgur.com/rxtsJf8.png');
background-size:100%;
transform: scaleX(-1);
}

#box1, #box2, #box3{
width:210px;
height:150px;
position:absolute;
background-color:#fff6d5;
top:310px;
left:190px;
-webkit-box-shadow: 10px 10px 44px -5px rgba(0,0,0,0.29);
-moz-box-shadow: 10px 10px 44px -5px rgba(0,0,0,0.29);
box-shadow: 10px 10px 44px -5px rgba(0,0,0,0.29);
border-radius:20px;
font-family: 'Montserrat', sans-serif;
color:#ffbfe1;
font-size:9pt;
font-weight:500;
padding:10px;
text-align:center;
}

h2{
font-family: 'Salsa', cursive;
color:#6ccbf2;
font-size:16pt;
font-weight:500;
letter-spacing:1px;
text-shadow:1px 1px #ffbfe1;
text-align:center;
line-height:0px;
}

#one, #two, #three {
width:600px;
heigth:500px;
background-color:transparent;
position:absolute;
top:0px;
left:190
z-index:1;
opacity:0;
transition:all 300ms ease-in;
}

#one:target,#two:target,#three:target{
z-index:2;
opacity:1;
}


#click {
 opacity:1;
 position:absolute;
 display:inline;
 height:150px;
 width:50px;
 left:430px;
 top:400px;
 font-family:tall;
 color:#000;
 float:center;
 z-index:3;
 }

#click a {
 opacity:1;
 display:inline-block;
 width:20px;
 height:20px;
 background-color:#fff6d5;
transition:all 1s ease-in;
}

#click a:hover{
background-color:#ffbfe1;
-webkit-box-shadow: 10px 10px 44px -5px rgba(0,0,0,0.29);
-moz-box-shadow: 10px 10px 44px -5px rgba(0,0,0,0.29);
box-shadow: 10px 10px 44px -5px rgba(0,0,0,0.29);
}

i {
 color:#fff;
 font-size:8pt;
 text-shadow:1px 1px 0 #000;}

b {
 color:#6ccbf2;
 letter-spacing:2px;
 font-style:italic;
 text-shadow:#000 -1px 0px,#000 0 1px,#000 1px 0px,#000 -1px;}

a {
 text-decoration:none;
 font-style:normal;
 color:#838383;
 letter-spacing:0px;
 transition:all 1s ease-in;
 }

a:hover {
 text-decoration:none;
 color:pink;
}




</style>


<div id="one">
<div id="imgcover">
</div>
<div id="img1" class="floating">
</div>
<div id="box1">
<h2>Basic</h2>
<b>Name</b> ♪ Nixie
</div>
<div id="dialogbox" class="floating">
<h1><i> Nixie</i> </h1>
<br>Hi my name is <font style="color :#6ccbf2;">Nixie</font>, nice to meet you. <br>I hope I can <font style="color :#6ccbf2;">serve you</font> today.
</div>
</div>

<div id="two">
<div id="imgcover">
</div>
<div id="img2" class="floating">
</div>
<div id="box2">
<h2>Gallery</h2>

</div>
<div id="dialogbox2" class="floating">
<h1><i> Nixie</i> </h1>
<br>more text
</div>
</div>

<div id="three">
<div id="imgcover">
</div>
<div id="img3" class="floating">
</div>
<div id="box3">
<h2>OOC</h2>
<b>00</b> This code was made for me by <a href="https://roleplay.chat/profile.php?user=Shark+Dad">Daddy</a>, PM him or send a rpc mail for inquiries about commissions and coding aid.
</div>
<div id="dialogbox3" class="floating">
<h1><i> Nixie</i> </h1>
Write stuff here.
</div>
</div>

<div id="click">
<a class="nav hvr-bob" href="#one"> </a> <br>
<a class="nav hvr-bob" href="#two"> </a> <br>
<a class="nav hvr-bob" href="#three"> </a> <br>
</div>