Daegu all-in-one ver.

<!---
BY SIMPLETHEMES.TUMBLR.COM
EDIT BUT DO NOT REMOVE CREDIT
ALL IN ONE BASE CODE BY NEONBIKETHEMES
--->

<!DOCTYPE html>
<head>

    <title>{Title}</title>

    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>

<style type="text/css">

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-thumb:vertical {
    background-color: #c2c7ca;
    border-right:4px solid #fff;
    border-top:5px solid #fff;
    border-bottom:5px solid #fff;}
::-webkit-scrollbar {
    background-color: #ccc;
    width:5px;height:0;
    border-right:4px solid #fff;
    border-top:5px solid #fff;
    border-bottom:5px solid #fff;}

.tmblr-iframe {
    margin:10px;
    opacity:.2;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

.tmblr-iframe:hover{
    opacity:.65;
    -moz-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    -webkit-transition-duration: 0.6s;
    transition-duration: 0.6s;
}

#s-m-t-tooltip{
    font-family:calibri;
    max-width:300px;
    margin-top:25px;
    margin-left:15px;
    z-index:999999;
    letter-spacing:1.6px;
    text-transform:uppercase;
    font-size:8.5px;
    border: solid 1px #ddd;
    background-color:#fcfcfc;
    color:#666;
    padding:3px 5px;
}

body {
    background:#e6ecf0;
    font-family: Arial, Helvetica, sans-serif;
    color:#000;
    font-size:11px;
}

a{
    color:#000;
    border-bottom:1px solid #000;
    text-decoration:none;
}

a:hover{
    color:#000;
    cursor:help;
}

                /*              container                */

.container {
    border:1px solid #c2c7ca;
    width:500px;
    height:420px;
    position:absolute;
    left:50%;
    top:50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.header{
    height:100px;
    width:500px;
    background: #fff url('HEADER URL HERE') no-repeat;/*HEADER URL HERE*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.icon img{
    width:80px;
    height:80px;
    border-radius:80px;
    border:4px solid #fff;
    margin-top:-40px;
    margin-left:40px;
}

.bar{
    margin-top:-50px;
    height:35px;
    background:#fff;
    border-bottom:1px solid #c2c7ca;
    border-top:1px solid #c2c7ca;
}

.nav{
    display:inline-block;
    margin-left:150px;
    margin-top:-11px;
}
.nav a{
    display:inline-block;
    font-size:11px;
    padding:11px;
    border-bottom:2px solid transparent;
    text-decoration:none;
    color:#66757f;
}

.nav a:hover{
    border-bottom:2px solid #62adb2;/*color accent*/
}

.ttl {
    color:#000;
    font-size:16px;
    font-weight:bold;
    letter-spacing:1px;
}

h1{
    color:#000;
    font-size:16px;
    font-weight:bold;
    letter-spacing:1px;
}

.name{
    padding-top:3px;
    padding-bottom:10px;
    color:#7a7794;
}

.about{
    padding:20px;
}

.details {
    color:#657786;
    width:150px;
    font-size:12px;
    line-height:16px;
    display:inline-block;
    padding-right:20px;
}

 .bio {
     width:263px;
     border:1px solid #c2c7ca;
     vertical-align:top;
     display:inline-block;
     text-align:justify;
     background:#fff;
     padding:10px;
     height:220px;
     overflow:auto;
}

.linksa{
    padding:20px;
    display:inline-block;
    height:243px;
    overflow-x:auto;
}

.tagsa{
    padding:20px;
    height:243px;
    overflow-x:auto;
    display:inline-block;
}

.linksa a{
    padding-top:10px;
    padding-bottom:10px;
    padding-right:35px;
    padding-left:35px;
    margin:20px;
    display:inline-block;
    border-bottom:none;
    background:#fff;
}

.tagsa a{
    padding-top:10px;
    padding-bottom:10px;
    padding-right:35px;
    padding-left:35px;
    margin:20px;
    display:inline-block;
    border-bottom:none;
    background:#fff;
}

.cred{
    position:fixed;
    right:15px;
    font-size:.9em;
    bottom:10px;
}

.cred a{
    color:#000;
}

    .tabs {
    width:100%;
    margin-left:0px;
    display:inline-block;
    }

    /*----- Tab Links -----*/

    /* Clearfix */
    .tab-links:after {
        display:block;
        clear:both;
        content:'';
    }

    .tab-links li {
        display:inline-block;
        list-style:none;
    }

        .tab-links{
            display:inline-block;
        }

        .tab-links a {
            display:inline-block;
        }

        .tab-links a:hover {
            text-decoration:none;
        }

    li.active a, li.active a:hover {
        border-bottom:2px solid #62adb2;/*color accent*/
    }

    /*----- Content of Tabs -----*/
    .tab-content {
    }
        .tab {
            display:none;}
        .tab.active {
            display:block;}


</style>
</head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:30,
tip_fade_speed:300,
attribute:"title"
});
});
})(jQuery);
</script>

<body>

<div class="container">

<div class="header"></div>
<div class="icon"><img src="ICON URL HERE"/></div><!--ICON URL HERE-->
<div class="bar">
    <div class="nav">
                <div class="tabs">
            <ul class="tab-links">
                <li style="margin-left:-30px"><a href="#tab1" class="active" >Index</a></li>
                <li><a href="#tab2">Messages</a></li>
                <li><a href="#tab3">Links</a></li>
                <li><a href="#tab4">Tags</a></li>
            </ul>
            <a href="http://tumblr.com/dashboard">Dash</a>
        </div>

    </div>
</div>

<div class="tabs">

<div id="tab1" class="tab active">
<div class="tab-content">

<div class="about">

<div class="details">

<div class="ttl">YOUR TITLE HERE</div><!--EDIT YOUR TITLE HERE-->
<div class="name">@{Name}</div>

<!--PUT YOUR DETAILS HERE
ONLY EDIT THE PART AFTER </i> thats the icon u dont wanna edit that
just edit the name part, the birthday part, etc-->

<i class="fa fa-user-o" aria-hidden="true"></i> Name
<br>
<i class="fa fa-asterisk" aria-hidden="true"></i> Pronouns
<br>
<i class="fa fa-calendar" aria-hidden="true"></i> Birthday
<br>
<i class="fa fa-star" aria-hidden="true"></i> Horoscope
<br>
<i class="fa fa-book" aria-hidden="true"></i> Personality type
<br>
<i class="fa fa-map-marker" aria-hidden="true"></i> Location
<br>
<i class="fa fa-heart" aria-hidden="true"></i> R/S status
</div>

<div class="bio">
<!--PUT YOUR BIO HERE-->

You write your bio here hi<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.<br><br>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed ligula. Sed volutpat odio non turpis gravida luctus. Praesent elit pede, iaculis facilisis, vehicula mattis, tempus non, arcu.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.<br><br>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed ligula. Sed volutpat odio non turpis gravida luctus. Praesent elit pede, iaculis facilisis, vehicula mattis, tempus non, arcu.
</div><!--bio-->
</div><!--about-->
</div></div>

<div id="tab2" class="tab">
    <div class="tabcontent">

    <center><br><br><br><br>
        <iframe frameborder="0" align="middle" height="200px" border="none" id="ask_form" scrolling="yes" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" width="90%"></iframe></center>
    </div>
</div>

<div id="tab3" class="tab">
    <div class="tabcontent">
        <div class="linksa">
            <a href="">Link 1</a>
            <a href="">Link 2</a>
            <a href="">Link 3</a>
            <a href="">Link 4</a>
            <a href="">Link 5</a>
            <a href="">Link 6</a>
            <a href="">Link 7</a>
            <a href="">Link 7</a>
            <a href="">Link 4</a>
            <a href="">Link 5</a>
            <a href="">Link 6</a>
            <a href="">Link 7</a>
            <a href="">Link 7</a>
            <a href="">Link 4</a>
            <a href="">Link 5</a>
            <a href="">Link 6</a>
            <a href="">Link 7</a>
            <a href="">Link 7</a>
            <a href="">Link 4</a>
            <a href="">Link 5</a>
            <a href="">Link 6</a>
            <a href="">Link 7</a>
            <a href="">Link 7</a>
            <a href="">Link 9</a>
        </div>
    </div>
</div>

<div id="tab4" class="tab">
    <div class="tabcontent">
        <div class="tagsa">
            <a href="">Tag 1</a>
            <a href="">Tag 2</a>
            <a href="">Tag 3</a>
            <a href="">Tag 4</a>
            <a href="">Tag 5</a>
            <a href="">Tag 6</a>
            <a href="">Tag 7</a>
            <a href="">Tag 8</a>
            <a href="">Tag 9</a>
            <a href="">Tag 5</a>
            <a href="">Tag 6</a>
            <a href="">Tag 7</a>
            <a href="">Tag 8</a>
            <a href="">Tag 9</a>
        </div>
    </div>
</div>

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

</div><!--tabs-->

</div><!--container-->

<!--DO NOT REMOVE-->

<a class="cred" href="http://simplethemes.tumblr.com" target="_blank">S</a>

<script>
$(document).ready(function() {
    $('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = $(this).attr('href');

        // Show/Hide Tabs
        $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();

        // Change/remove current tab to active
        $(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });
});
</script>

</body>
</html>