Sucking black page

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="cosmo/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lovers+Quarrel' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Quicksand:400,700,300' rel='stylesheet' type='text/css'>

<title>Hello There!</title>
<link rel="shortcut icon" href="{Favicon}"/>

<style type="text/css">

#top1 { position:fixed; width:auto; height:auto; letter-spacing: 1px; right:10px; bottom:10px; padding:8px; font-size:30px; font-family:Lovers Quarrel; line-height:14px; text-align:right; z-index:99;
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
text-shadow:none;
}

a {text-decoration:none; color:#000;}
a:hover {text-decoration:none; background:#000; color:#fff;}
a:active {text-decoration:none;}

u {text-decoration:none; border-bottom:1px solid #000;}
b {color:#000; text-transform:uppercase; font-size:10px;}
i {color:#000;}

body {

    background:#f3f3f3;
    font-family:Open Sans;
    color:#999;
    font-size:11px;

}

#content {

    margin-top:50px;
    padding:20px;
    width:900px;
    margin-left:400px;
    background:transparent;

}

.tab-content .tab-pane {
  display: none;
  margin-left:0px;
  background-color: #fff;
  padding:25px;
  overflow-y: auto;
  height:500px;
  margin-top:60px;
}

.tab-content .active { display: block; text-decoration:none; }

#navigation{
z-index:4;
background:#fff;
float:left;
margin-left:0px;
width:250px;
margin-top:30px;
}
#navigation a {
cursor:pointer;
text-shadow:none;
margin-top:10px;
font-size:10px;
font-family:Quicksand;
font-weight:bold;
display:inline-block;
text-align:left;
color:#999;
width:240px;
padding:10px;
margin-left:30px;
background:#fbfbfb;
border:1px solid #eee;
border-radius:5px;
text-transform:uppercase;
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}
#navigation a:hover {
text-shadow:none;
color:#fff;
box-shadow:inset 310px 0px #000;
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}

::-webkit-scrollbar{
width:3px;
height:4px;
background:#fff
}

::-webkit-scrollbar-thumb{
background-color:#eee;
}

.fb {

    padding-top:0px;
    padding:10px;
    background:transparent;

}

.fb img{

    width:70px;
    padding:4px;
    background:#fbfbfb;
    border:1px solid #eee;
    margin:9.5px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border-radius:2px;

}

.ff {

    padding-top:0px;
    padding:10px;
    background:transparent;

}

.ff img{

    max-width:48px;
    padding:4px;
    background:#000;
    margin:7px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border-radius:100%;

}
.ff a:hover {background:transparent;}
.ff img:hover {

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
      -webkit-transform: rotate(-360deg);
     -moz-transform: rotate(-360deg);
       -o-transform: rotate(-360deg);
      -ms-transform: rotate(-360deg);
          transform: rotate(-360deg);
          border-radius:10%;

}

.title {

    font-family:quicksand;
    text-align:left;
    font-size:15px;
    padding:15px;
    font-weight:bold;
    color:#141414;
    text-transform:uppercase;
    background:#fbfbfb;
    border:1px solid #eee;
    border-radius:2px;
    margin-bottom:20px;

}

#pi {
    background:#000;
    color:#fff;
    margin-left:-15px;
    margin-top:-15px;
    margin-bottom:-15px;
    padding:18px;
    font-size:22px;
    margin-right:10px;
}

#sidebar {

    background:#fff;
    height:100%;
    width:300px;
    left:0px;
    top:0px;
    position:fixed;

}

#link{
z-index:4;
background:#fff;
float:left;
margin-left:0px;
margin-top:10px;
}
#link a {
cursor:pointer;
text-shadow:none;
margin-top:0px;
margin-right:15px;
font-size:12px;
font-family:Quicksand;
font-weight:bold;
display:inline-block;
text-align:left;
color:#999;
width:385px;
padding:15px;
background:transparent;
border-bottom:1px solid #eee;
text-transform:uppercase;
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}
#link a:hover {
text-shadow:none;
letter-spacing:3px;
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}

h4 {

background:#000;
text-transform:uppercase;
text-align:left;
color:#fff;
font-size:12px;
font-weight:bold;
padding:15px;

}

h5 {

background:#191919;
text-align:left;
font-size:11.5px;
font-weight:bold;
padding:15px;
padding-left:35px;

}

#favicon {

    float:left;
    margin-right:10px;
    margin-bottom:0px;
    width:70px;
    padding:5px;
    background:#fbfbfb;
    border:1px solid #eee;

}

.ab:first-letter {font-size:15px; font-style:italic; color:#000;}

hr {
    border-color:#eee;
    width:200px;
    margin-left:auto;
    margin-right:auto;
    margin-top:25px;
    margin-bottom:25px;
}

#fz {width:300px;}

</style>

<div id="sidebar">
<img id="fz" src="SIDEBAR-IMAGE-URL" />

<div id="navigation">

<a href="#home" data-toggle="tab" class="active"><li class="fa fa-user"></li>&nbsp;&nbsp;About</a>
<a href="#icons" data-toggle="tab"><li class="fa fa-file-image-o"></li>&nbsp;&nbsp;Icons</a>
<a href="#nav" data-toggle="tab"><li class="fa fa-bars"></li>&nbsp;&nbsp;Links</a>
<a href="#follow" data-toggle="tab"><li class="fa fa-plus"></li>&nbsp;&nbsp;Blogroll</a>
<a href="#subm" data-toggle="tab"><li class="fa fa-paper-plane"></li>&nbsp;&nbsp;Message</a>
<a href="#ask" data-toggle="tab"><li class="fa fa-question"></li>&nbsp;&nbsp;Faq</a>
<a href="/"><li class="fa fa-sign-out"></li>&nbsp;&nbsp;Back</a>

</div>

</div>

<div id="content">

<div id="myTabContent" class="tab-content">

  <div class="tab-pane active" id="home">

 <div class="title"><li id="pi" class="fa fa-user"></li>ABOUT</div>

 <img id="favicon" src="PUT-FAVICON-URL-HERE" />

 <div class="ab">

<b>Bold</b>
<i>Italic</i>
<u>Underline</u>
<a href="/">link</a>
<hr>

 </div>

  </div>

  <div class="tab-pane" id="icons">

<div class="title"><li id="pi" class="fa fa-file-image-o"></li>icons</div>

<div class="fb">

<img src="http://i.imgur.com/faNvvHr.jpg" />
<img src="http://i.imgur.com/RPGzbKe.jpg" />

<!--- REPLACE FOR MORE -->
<img src="URL-IMAGE-HERE" />
<!--- REPLACE FOR MORE -->

</div>

</div>

<div class="tab-pane" id="nav">

<div class="title"><li id="pi" class="fa fa-bars"></li>Links</div>

<div id="link">

<!--- REPLACE FOR MORE -->
<a href="">LINK</a>
<!--- REPLACE FOR MORE -->


</div>

  </div>

  <div class="tab-pane" id="follow">

<div class="title"><li id="pi" class="fa fa-plus"></li>following</div>

<div class="ff">

{block:Following}{block:Followed}<a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-48}"></a>{/block:Followed}{/block:Following}

</div>
  </div>

  <div class="tab-pane" id="subm">

 <div class="title"><li id="pi" class="fa fa-question"></li>Ask me</div>

<iframe style="margin-top:20px; margin-bottom:25px;" frameborder="0" height="200px" id="ask_form" scrolling="yes" src="http://www.tumblr.com/ask_form/YOUR-URL.tumblr.com" width="100%"></iframe>

<div class="title"><li id="pi" class="fa fa-paper-plane"></li>submit</div>

<iframe style="margin-top:20px;" frameborder="0" height="400px" id="ask_form" scrolling="yes" src="http://www.tumblr.com/submit_form/YOUR-URL.tumblr.com" width="100%"></iframe>

  </div>

  <div class="tab-pane" id="ask">

 <div class="title"><li id="pi" class="fa fa-info"></li>Frequently asked questions</div>

<!--- REPLACE FOR MORE -->
<h4>Pergunta or Question ?</h4>
<h5>Resposta or Answer</h5>
<!--- REPLACE FOR MORE -->

  </div>
</div>

</div>

<div id="top1">
<a href="http://amplamente.tumblr.com/" title="amplamente">Am</a>
</div>