002. But I Love DANGER ZONE !

<style type="text/css">
/*-- profile by juice. --*/
@import url(https://fonts.googleapis.com/css?family=Merriweather:100,400italic);
@import url('https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Karla:300,300i,400,400i,600,700,800');

body{
background: #fff; /*-- main background --*/
}
body, a, a:hover {cursor: url(http://i.picpar.com/Hl6d.png), auto;}

::-webkit-scrollbar-thumb:vertical { background: transparent; width: 0px; }
::-webkit-scrollbar { background:transparent; width: 0px; }
::selection { color: #232323;}
::-moz-selection { color: #232323; }

.banner{
position: fixed; margin: auto;
top: 0; bottom: -50px; right: 0; left: 0;
height: 100px; width: 300px;
border-radius: 5px 5px 0px 0px;
background-image: url('http://i.picpar.com/ek6d.png'); /*-- Banner image here 100x300 --*/
background-repeat: no-repeat;
background-position: center;
background-size: 300px; /*-- you might have to adjust if you didn't edit image. --*/
}

.icon{
position: fixed; margin: auto;
top: 0; bottom: -150px; right: 0; left: -200px;
height: 75px; width: 75px;
border: 5px solid #fff; /*-- match body background --*/
background-image: url('http://i.picpar.com/fk6d.png '); /*-- Icon image here. 75x75. --*/
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border-radius: 5px;
}
.line{
position: fixed; margin: auto;
top: 0; bottom: -250px; left: -315px; right: 0;
height: 300px; width: 5px;
background: #7f7f7f; /*-- line background --*/
}

.nav{
position: fixed; margin: auto;
top: 0; bottom: -190px; right: -100; left: 0;
height: 25px; width: 180px;
line-height: 25px;
}
.nav a{
display: inline-block;
margin-left: 27px;
background: #fff;   /*-- match body background --*/
border-radius: 5px;
padding: 3px;
height: 18px; width: 18px;
background-repeat: no-repeat;
background-size: 15px 15px;
background-position: center;
text-decoration: none;
text-align: right;
opacity: .5;
transition: .5s linear;
}
.nav a:hover{
opacity: 1;
transition: .5s linear;
}
.nav a span{
display: block;
height: 15px; width: 50px;
line-height: 15px;
font-family: karla;
font-size: 10px;
text-transform: uppercase;
margin-left: -16.5;
margin-top: 35px;
border-radius: 2px;
text-align: center;
background: #7f7f7f; /*-- match line background --*/
color: #fff; /*-- tab name color --*/
opacity: 0;
visibility: hidden;
transition: .1s linear;
}
.nav a:hover span{
opacity: 1;
visibility: visible;
transition: .1s linear;
}
.nav a span:after{
content: '';
display: block;
position: relative;
margin-top: -24px;
margin-left: 40%;
height: 10px; width: 10px;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
background: #7f7f7f; /*-- match line background --*/
}


a.home{
background-image: url('http://i.picpar.com/hk6d.png');
}
a.friend{
background-image: url('http://i.picpar.com/ik6d.png');
}
a.info{
background-image: url('http://i.picpar.com/jk6d.png');
}

.profile-name{
position: fixed; margin: auto;
top: 0; bottom: -270px; left: 0; right: 0;
height: 25px; width: 290px;
line-height:25px;
background: #fff;
color: #222;
padding-left: 10px;
font-family: karla;
font-size: 16px;
font-weight: 100;
text-transform: uppercase;
text-align: justify;
letter-spacing: 1px;
word-spacing: 2px;

}
.profile-name span{
border-bottom: 1px solid #7f7f7f; /*-- change to match line color --*/
}
.profile-name span.handle{
border-bottom: none;
font-family: merriweather;
font-size: 9px;
font-weight: 100;
text-transform: lowercase;
color: #999;
font-style: italic;
transition: .4s linear;
}
.profile-name span.handle:hover{
color: #000;
transition: .4s linear;
}

.description{
position: fixed; margin: auto;
top: 0; bottom: -335px; left: 0px; right: 0;
height: 25px; width: 290px;
line-height: 12px;
border-left: 1px solid #7f7f7f; /*-- match line background --*/
color: #222;
background: #fff;
padding-left: 10px;
font-family: karla;
text-transform: uppercase;
font-size: 9px;
font-weight: 100;
text-align: justify;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.description b{
font-weight: 600;
letter-spacing: 1px;
color: #000;
}
.description i{
font-weight: 100;
font-family: merriweather;
font-size: 9px;
text-transform: lowercase;
color: #232323;
}
.description u{
text-decoration: none;
border-bottom: 1px dotted #999;
color: #000;
letter-spacing: 1px;
}
.description a{
text-decoration: none;
font-family: karla;
font-size: 9px;
font-weight: 900;
color: #000;
letter-spacing: 0px;
border-bottom: 1px double #999; /*-- change border to match line color --*/
transition: .5s linear;
}
.description a:hover{
color: #232323; /*-- change color to match line --*/
letter-spacing: 1px;
transition: .5s linear;
}

.test:not(:target){
opacity: 0;
visibility: hidden;
transition: .6s linear;
}
.test:target{
opacity: 1;
visibility: visible;
transition: .6s linear;
}

.text-box{
position: fixed; margin: auto;
top: 0; bottom: -460px; left: 0; right: 0;
height: 80px; width: 299px;
border-left: 1px solid #7f7f7f; /*-- change border to match line --*/
background: #fff;
overflow: hidden;
}

.text{
float: left;
height: 60px; width: 279px;
margin-top: 10px;
color: #222;
padding-left: 10px;
font-family: heebo;
text-transform: uppercase;
font-size: 9px;
font-weight: 500;
text-align: justify;
line-height: 115%;
overflow: auto;
}

.text b{
font-weight: 600;
letter-spacing: 1px;
color: #000;
}
.text i{
font-weight: 100;
font-family: merriweather;
font-size: 9px;
text-transform: lowercase;
color: #232323;
}
.text u{
text-decoration: none;
border-bottom: 1px dotted #999;
color: #000;
letter-spacing: 1px;
}
.text a{
text-decoration: none;
font-family: karla;
font-size: 9px;
font-weight: 900;
color: #000;
letter-spacing: 0px;
border-bottom: 1px double #999;
transition: .5s linear;
}
.text a:hover{
color: #232323;
letter-spacing: 1px;
transition: .5s linear;
}

.friends{
position: fixed; margin: auto;
top: 0px; bottom: -250px; right: 0; left: -400px;
height: 300px; width: 55px;
background: #fff;
text-align: center;
overflow-x: auto;
}
.friends .ficon{
display: block;
height: 50px; width: 50px;
margin-top: 10px; margin-left: 2px;
border-radius: 5px;
background: #7f7f7f; /*-- change bg to match line --*/
background-repeat: repeat;
background-position: center;
background-size: 50px 50px;
}

.friends .ficon span{
position: fixed;
display: block;
opacity: 0;
visibility: hidden;
transition: .6s linear;
margin-left: -50px;
margin-top: 0;
width: 75px;
max-height: 100px;
padding: 3px;
color: #333;
background: #fff;
border-right: 1px solid #7f7f7f; /*-- change border color to match line --*/
font-family: heebo;
text-transform: uppercase;
font-size: 9px;
font-weight: 500;
text-align: right;
}
.friends .ficon:hover span{
opacity: 1;
visibility: visible;
margin-left: -85px;
margin-top: 0;
transition: .6s linear;
}

</style>
<div class="bod"></div>
<div class="line"></div>
<div class="banner"></div>
<div class="icon"></div>
<div class="profile-name">
<span>popuko</span> <span class="handle">@popteamgremlin</span>
</div>
<div class="description">
BUT I LOVE DANGER ZONE...<i>italic.</i> <b>bold.</b> <u>underline.</u> <a href="#">link.</a><br>
name / age / something. if you write too much it ellipsis off. like so
</div>

<div class="nav">
<a href="#" class="home"><span>home</span></a>
<a href="#f" class="friend"><span>friends</span></a>
<a href="#m" class="info"><span>more</span></a>
</div>

<div class="text-box">
<div class="text">
星キラキラ
いつか二人で 夢の舞台 手を広げ
中指立てるんだ 退屈な世界
これからも一緒だよ、ずっとずっと
仲良しこよしのダーリンダーリン


ポカポカ天気 公園に出掛けよ
鬼ごっこ シーソーゲーム 何しよっか♡
思い出全部 一緒じゃなきゃイヤ！
楽しみ無限大！早く行こー！


宝探しはしないの？
目の前に君がいる
もう見つかってるよ


今日も二人で 笑顔のピース集めて
思い出作るんだ 寂しい世界
これからも一緒だよ、ずっとずっと
仲良しこよしでハッピーハッピー


怖いものなんて きっと何もないよ
どんな時も手を繋いで 駆け抜けよ〜！


無邪気な笑顔 曇らせないよ
雨にも風にも 立ち向かえ♡


半端者で悪いかなぁ…？
遊びたいだけだから…
怒らないで


毎日二人で 笑顔のピース探して
世界中旅しよう ワクワクだぞい
口ずさめこの唄 ずっとずっと
仲良しこよしの best friend


「売れない」「売れるわけないよ」
つれない事 言わないでよね
もしかして マジになってないよね…
そんなわけないよね、ないよね…


星キラキラ


いつか二人で 夢の舞台 手を広げ
中指立てるんだ 退屈な世界
これからも一緒だよ、ずっとずっと
仲良しこよしのダーリンダーリン oh
POPPY PAPPY DAY
</div>
</div>

<div id="f" class="test">
<div class="friends">
<a href="#" target="_blank"><div class="ficon" style="margin-top: 0px; background-image:url('http://i.picpar.com/Al6d.png');">
<span>
pipimi-chan.
</span>
</div></a>
<a href="#" target="_blank"><div class="ficon" style="background-image: url('http://i.picpar.com/Al6d.png');">
<span>
pipimi-chan.
</span>
</div></a>
<a href="#" target="_blank"><div class="ficon" style="background-image: url('http://i.picpar.com/Al6d.png');">
<span>
pipimi-chan.
</span>
</div></a>
<a href="#" target="_blank"><div class="ficon" style="background-image: url('http://i.picpar.com/Al6d.png');">
<span>
pipimi-chan.
</span>
</div></a>

</div>
</div>


<div id="m" class="test">
<div class="text-box">
<div class="text">

Tab two. <a href="#">Link.</a> <i>italic.</i> <b>bold.</b> <u>underline.</u>

</div>
</div>
</div>