005 MR.MR - 2nd All in One Page

<!--
                      MR.MR. ʙʏ ʏᴏᴏɴᴏʀᴀ

                    Lᴇᴛ's ᴋᴇᴇᴘ ɪᴛ sɪᴍᴘʟᴇ.

        Dᴏ NOT sᴛᴇᴀʟ ᴀɴʏᴛʜɪɴɢ ғʀᴏᴍ ᴛʜᴇ ᴄᴏᴅᴇ. Iғ ʏᴏᴜ
        ᴀʀᴇ ᴄᴜʀɪᴏᴜs ɪɴ ʜᴏᴡ sᴏᴍᴇᴛʜɪɴɢ ᴡᴏʀᴋs, ᴊᴜsᴛ ɢᴏ
        ᴀɴᴅ ᴀsᴋ ᴍᴇ.

        Dᴏ NOT ᴄʟᴀɪᴍ ɪᴛ ᴀs ʏᴏᴜʀs.

        Dᴏ NOT ʀᴇᴍᴏᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛ.

        -------------Nᴏᴡ ᴄᴏɴᴛɪɴᴜᴇ ᴇɴᴊᴏʏɪɴɢ ᴍʏ ᴛʜᴇᴍᴇ.
-->
<head><title>MR.MR. | ʏᴏᴏɴᴏʀᴀ's 2nd PAGE</title>
<link rel="shortcut icon" href="{Favicon}">
<script src="http://code.jquery.com/jquery-1.10.0.min.js">
</script>
<script>
$(document).ready(function(){

 $(".one").click(function(){
  $(".1").fadeIn();
    $(".2,.3,.4").fadeOut();
 });

  $(".two").click(function(){
    $(".2").fadeIn();
    $(".1,.3,.4").fadeOut();
  });
  $(".three").click(function(){
    $(".3").fadeIn();
    $(".1,.2,.4").fadeOut();
  });
  $(".four").click(function(){
    $(".4").fadeIn();
    $(".1,.2,.3").fadeOut();
  });
});
</script>
<link rel="stylesheet" href="http://static.tumblr.com/l9mi3bq/4I9nfk2eg/sc.css" />
<script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips();
});
})(jQuery);
</script>

<style type="text/css">

::-webkit-scrollbar-thumb:vertical {
    background-color:#13e2dd;
    height: 10px;
    border: 4px solid #fdfdfd;

}
::-webkit-scrollbar-thumb:horizontal {
    background-color:#13e2dd;
    height: 10px;
    border: 4px solid #fdfdfd;

}
::-webkit-scrollbar {
    background-color: #fdfdfd;
    height:10px;
    width:9px;

}

#s-m-t-tooltip {
color:#1f3161;
background-color:#fefefe;
border-color:#e83c8e;
}

body {
background:#F3F5F7;
}

#friends{
overflow-y:auto;
}

#icon img{
width:90px;
margin:0px 5px 10px 5px;
}

#tops{
position:relative;
margin:0px;
height:60px;
z-index:-1;
}



/*-
   DELETE .top AND .bottom IF YOU DON'T WANT THE BORDERS IN THE PAGE
-*/
.top{
    border-top-color:#e83c8e;
    border-left-color:#e83c8e;
 }
.bottom{
    border-right-color:#e83c8e;
    border-bottom-color:#e83c8e;
}

/*--
     THE CONTAINER
-*/
.container{
    background:#fefefe; /*- CHANGE THE BACKGROUND OF THE CONTAINER-*/
    border:20px solid #1f3161; /*-CHANGE THE BORDER OF THE CONATINER-*/
}
#tiny_desc{
color:#fff; /*- COLOR OF THE TEXT OF THE MINI DESCRIPTION -*/
border:5px solid #fff; /*-FOR IT TO LOOK GOOD, PUT THE SAME COLOR AS THE BACKGROUND OF THE CONTAINER -*/
background:#1f3161; /*-THE BACKGROUND COLOR OF THE TINY DESCRIPTION-*/
}
#side_title{
color:#e83c8e; /*--COLOR OF THE SIDE TITLE-*/
}
#main_side img{
border:10px solid #25a8dc; /*-COLOR BORDER OF THE MAIN FOUR ICONS-*/
}

#links a {
background:#25a8dc; /*- BACKGROUND OF THE MAIN LINKS--*/
color:#fff; /*- TEXT COLOR OF THE MAIN LINKS-*/
border:10px solid #e83c8e; /*-BORDER OF THE MAIN LINKS-*/
}

#links a:hover{
background-color:#e83c8e; /*-BACKGROUND HOVER OF THE MAIN LINK-*/
border:10px solid #25a8dc; /*-BORDER COLOR OF THE HOVER OF THE MAIN LINK-*/
}

/*--
    ABOUT PAGE
-*/

/*-TIP: TO MAKE THE ABOUT APPEAR, CHANGE THE "none" IN THE "display:none"
TO "block" WHEN YOU FINISH EDITING THE PAGE, CHANGE IT BACK TO "none" OR THE BLOCK WILL APPEAR AND IT WILL LOOK WEIRD.
-*/
.desc a{
color:#5496ac; /*-LINK COLOR OF THE LINKS OF THE ABOUT-*/
}
.desc a:hover{
color:#42268d; /*--LINK COLOR WHEN YOU HOVER ANY LINK IN THE ABOUT-*/
}
.desc i{
color:#68e5e5; /*--COLOR OF THE ITALICIZED TEXT IN THE ABOUT-*/
}
#desc_info {
background-color: #fff; /*-BACKGROUND OF THE TINY BOX FOR YOUR INFO--*/
color: #000; /*--COLOR OF THE TEXT OF THE MINI INFO BOX-*/
}
#about{
color:#081633; /*--COLOR TEXT OF THE ABOUT-*/
background:#fefefe; /*--BACKGROUND OF THE ABOUT-*/
}
#sidebar{
background:#240a27; /*--BACKGROUND OF THE SIDEBAR ON THE TOP LEFT CORNER-*/
}
#sidebar img{
border:10px solid #e83c8e; /*--BORDER COLOR OF THE SIDEBAR-*/
}
#sidelinks{
background:#fff; /*-BACKGROUND OF THE BOX WHERE THE LINKS ARE-*/
}
#sidelinks a{
background:#fff; /*--BACKGROUND COLOR OF THE LINKS-*/
color:#1d3c6b;  /*--TEXT COLOR OF THE LINKS-*/
}
#lilinks a:hover{
color:#000; /*--TEXT COLOR WHEN YOU HOVER THE LINKS-*/
background:#f9e3ff; /*-BACKGROUND COLOR WHEN YOU HOVER THE LINKS-*/
}

/*--
   BLOGROLL
--*/

#blogroll{
background:#d0ccda; /*-BACKGROUND OF THE BLOGROLL--*/
}
#blogcont img{
border:8px solid #e6849d; /*- BORDER OF THE ICONS OF THE BLOGROLL--*/
background:#25a8dc; /*-BACKGROUND COLOR OF THE ICONS--*/
}

/*--
     TO GET THE SAME EFFECT FOR WHEN YOU HOVER, CHANGE THE COLORS TO A DIFFERENT COLOR SO IT WILL LOOK LIKE THAT.
-*/
#blogcont img:hover{
border-top:8px solid #92d4ee;
border-left:8px solid #e1c2ba;
border-bottom:8px solid #9aadd5;
border-right:8px solid #e695bb;
background:#fff;
}

#bottom_links a{
color:#cc2b77; /*-TEXT COLOR OF THE MINI NAVIGATE LINKS--*/
background:#fff; /*--BACKGROUND COLOR-*/
}


/*--
     FRIENDS / BIAS
--*/

#friends{
background:#F8F3F2; /*-BACKGROUND OF THE FRIENDS CONTENT--*/
}

#icon img{
border:10px solid #cc2b77; /*-BORDER COLOR OF THE ICON--*/
background:#f7ccdd; /*-BACKGROUND COLOR OF THE ICON--*/
}

/*--
     TO GET THE SAME EFFECT FOR WHEN YOU HOVER, CHANGE THE COLORS TO A DIFFERENT COLOR SO IT WILL LOOK LIKE THAT.
-*/
#icon img:hover{
border-top:10px solid #f7ccdd;
border-bottom:10px solid #f7ccdd;
border-left:10px solid #222e56;
border-right:10px solid #222e56;
background:#fff;
}

#bottom_link{
border-bottom:5px solid #142e5f; /*--THIS COLOR SHOULD BE THE SAME AS THE "bottom_link a" background COLOR, IF YOU WANT IT DIFFERENT THEN GO AHEAD-*/
}

#bottom_link a{
background:#142e5f; /*--THIS SHOULD BE THE SAME COLOR OF THE BORDER ABOVE-*/
color:#fff; /*--TEXT COLOR OF THE LINK-*/
}

/*--
      LINKS
--*/

.big {
background:#fff; /*--BACKGROUND COLOR OF THE LINKS-*/
 }

.big a {
background-color:#f0f2fb; /*-BACKGROUND COLOR OF THE BIG LINK--*/
color:#e83c8e; /*--TEXT COLOR OF THE BIG LINK-*/
}
.big a:hover {
background-color:#f0f2fb;/*--BACKGROUND COLOR WHEN YOU HOVER OVER THE LINK--*/
color:#355aaa; /*--TEXT COLOR WHEN YOU HOVER THE LINK-*/
}

/*-
IF YOU WANT TO CHANGE THE CURSOR TO ANOTHER, YOU CAN GO TO THIS LINK:

http://yosourwolf.tumblr.com/private/28489464747/tumblr_m7j1jo0BDt1ronu2o

THEY HAVE A LOT OF CUSTOM CURSORS THAT YOU CAN CHANGE IT TO.
-*/


/*--THE BODY CURSOR IS FOR THE ONE THAT YOU SEE WHEN YOU ARE NOT HOVERING OVER A LINK-*/
body { cursor:url(http://i.imgur.com/2qleX.jpg), auto; }

/*--THIS ONE IS FOR WHEN YOU HOVER OVER LINKS, THIS IS THE ONE THAT LOOKS LIKE A HAND POINTING-*/
a, a:hover{cursor:url(http://i.imgur.com/IepP2.jpg), auto; }
</style>
</head>
<body>
<!---
     WOULDN'T RECOMMEND TO DELETE THIS.
-->
<div class="top"></div><div class="bottom"></div>

<div id="side_title">BE STRONGER MR.MR.</div>

<div class="container">

<div id="tiny_desc">
Here you can put a little description, or even a music player. Or you can put song lyrics idk m8 the posibilities are endless.
</div>
<div id="main_side">
<div id="icon_1">
<img src="http://static.tumblr.com/l9mi3bq/SQsnfgyd9/mrmr_icon.png"></div>

<div id="icon_2">
<img src="http://static.tumblr.com/l9mi3bq/f13nfif8z/mrmr_icon_2.png"></div>

<div id="icon_3">
<img src="http://static.tumblr.com/l9mi3bq/a2Lnfif9e/mrmr_icon_3.png"></div>

<div id="icon_4">
<img src="http://static.tumblr.com/l9mi3bq/Sjgnfif9s/mrmr_icon_4.png"></div>
</div>

<!---
      I WOULDN'T RECOMMEND TO TOUCH THIS.
--->
<div id="links">
<div id="link_1"><a class="one" href="#">I</a></div>
<div id="link_2"><a class="two" href="#">II</a></div>
<div id="link_3"><a class="four" href="#">iv</a></div>
<div id="link_4"><a class="three" href="#">iii</a></div>
</div>

<!---
TO MAKE THE ABOUT APPEAR, CHANGE THE "none" IN THE "display:none"
TO "block"

WHEN YOU FINISH EDITING THE PAGE, CHANGE IT BACK TO "none" OR THE BLOCK WILL APPEAR AND IT WILL LOOK WEIRD. BE CAREFUL TO NOT DELETE THE ";" IT'S IMPORTANT.
-->
<div class="1"style="display:none;">

<div class="desc">
<div id="sidebar">
<img src="http://static.tumblr.com/l9mi3bq/B72nfig8l/mrmr_sidebar.png">

</div>

<div id="sidelinks">
<a class="two" href="#">ask box</a>
<a class="three" href="#">friends</a>
<a class="four" href="#">links</a>
</div>

<div id="desc_info">

<p>Here you can put your age, your MBTI personality type, your blood type, your phone number. I don't know, whatever you wish.</p>

</div>
<div id="about">
<p>
Here is where you introduce yourself. You can say anything you want. You can write a bible if you want. Go wild.
</p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida mi interdum enim porta elementum. Nunc quis turpis porta, interdum ligula vel, vestibulum tellus. Integer vitae sollicitudin mi. Vestibulum sit amet commodo lacus. Integer elementum eros in magna pretium tempor. Vestibulum lobortis tincidunt volutpat. Nulla mattis fermentum nisi ac ornare. Proin at volutpat mauris. Nam vehicula metus magna, sit amet tristique enim euismod vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce augue lacus, eleifend posuere nunc posuere, facilisis ultricies neque. Integer fringilla, nibh convallis placerat iaculis, elit magna fringilla tortor, sed suscipit odio leo ut diam. Aliquam volutpat vulputate elit sed egestas. Praesent varius turpis id ante consectetur, ac consequat eros gravida.
</p>

<p>
    Maecenas faucibus, mi eget dictum scelerisque, tellus sem luctus ipsum, et imperdiet tellus dolor ac risus. Praesent pellentesque et lacus in molestie. In consequat a erat vel posuere. Suspendisse nibh mauris, congue a lorem non, tincidunt gravida odio. Morbi porta neque nec nibh rhoncus vestibulum. Cras imperdiet leo lectus, quis tincidunt nulla interdum eu. Nullam luctus mauris ut eleifend pretium. Quisque rutrum vestibulum risus et auctor. Pellentesque porttitor, nulla at rhoncus pharetra, sem urna feugiat est, eget posuere ligula velit et lacus. Donec quis nisi pellentesque, dignissim elit a, imperdiet elit. Aenean ut tellus non justo pulvinar ultrices a eu lorem. Suspendisse potenti. Nunc et scelerisque nibh, ut rutrum erat.
</p>
<p>
    Aenean facilisis consectetur rhoncus. Nam sed imperdiet lorem. Donec adipiscing vel mauris sit amet eleifend. Sed tristique semper libero sit amet molestie. Ut tempor elit eget purus rhoncus scelerisque. Donec gravida nunc venenatis congue venenatis. Aenean id orci porta, viverra mi sed, luctus elit. Suspendisse vel mattis urna. Duis et urna et lectus eleifend dignissim in quis nisl. In gravida sem at felis dapibus pulvinar.
</p>

</div>

</div>
</div>

<!---
TO MAKE THE ABOUT APPEAR, CHANGE THE "none" IN THE "display:none"
TO "block"

WHEN YOU FINISH EDITING THE PAGE, CHANGE IT BACK TO "none" OR THE BLOCK WILL APPEAR AND IT WILL LOOK WEIRD. BE CAREFUL TO NOT DELETE THE ";" IT'S IMPORTANT.
-->
<div class="2" style="display:none;">
<div id="blogroll">
<div id="blogcont">
{block:Following}{block:Followed}
<center>
<a title="{FollowedName}" href="{FollowedURL}">
<img src="{FollowedPortraitURL-128}" align="left"></a></center>
{/block:Followed}
{/block:Following}
</div>

<div id="bottom_links">
<a class="one" href="#">about</a>
<a class="three" href="#">friends</a>
<a class="four" href="#">links</a>
</div>
</div>
</div>


<!---
TO MAKE THE ABOUT APPEAR, CHANGE THE "none" IN THE "display:none"
TO "block"

WHEN YOU FINISH EDITING THE PAGE, CHANGE IT BACK TO "none" OR THE BLOCK WILL APPEAR AND IT WILL LOOK WEIRD. BE CAREFUL TO NOT DELETE THE ";" IT'S IMPORTANT.
-->
<div class="3" style="display:none;">
<div id="friends">

<div id="bottom_link">

<a class="one" href="#">about</a>
<a class="two" href="#">blogroll</a>
<a class="four" href="#">links</a>
</div>

<div id="icon"><div id="tops"></div><center>

<a href="http://" title="Name of friend"target="_blank" >
<img src="http://static.tumblr.com/l9mi3bq/f13nfif8z/mrmr_icon_2.png"></a>

<a href="http://" title="Name of friend"target="_blank" >
<img src="https://40.media.tumblr.com/fb345c35bead0d4da0fb09d3659c3d47/tumblr_inline_nsvnlz2GCf1sk4wb3_540.png"></a>

<a href="http://" title="Name of friend"target="_blank" >
<img src="https://41.media.tumblr.com/6e48bb40933a6329e0fc71cae23241ef/tumblr_inline_nsvnm2Ccx61sk4wb3_540.png"></a>

<a href="http://" title="Name of friend"target="_blank" >
<img src="https://40.media.tumblr.com/72671940b637832bc32e894bc2b54574/tumblr_inline_nsvnm6ztZT1sk4wb3_540.png"></a>

<a href="http://" title="Name of friend"target="_blank" >
<img src="http://static.tumblr.com/l9mi3bq/f13nfif8z/mrmr_icon_2.png"></a>

<a href="http://" title="Name of friend"target="_blank" >
<img src="https://40.media.tumblr.com/fb345c35bead0d4da0fb09d3659c3d47/tumblr_inline_nsvnlz2GCf1sk4wb3_540.png"></a>

<a href="http://" title="Name of friend"target="_blank" >
<img src="https://41.media.tumblr.com/6e48bb40933a6329e0fc71cae23241ef/tumblr_inline_nsvnm2Ccx61sk4wb3_540.png"></a>

<a href="http://" title="Name of friend"target="_blank" >
<img src="https://40.media.tumblr.com/72671940b637832bc32e894bc2b54574/tumblr_inline_nsvnm6ztZT1sk4wb3_540.png"></a>


<a href="http://" title="Name of friend"target="_blank" >
<img src="http://static.tumblr.com/l9mi3bq/f13nfif8z/mrmr_icon_2.png"></a>

<a href="http://" title="Name of friend"target="_blank" >
<img src="https://40.media.tumblr.com/fb345c35bead0d4da0fb09d3659c3d47/tumblr_inline_nsvnlz2GCf1sk4wb3_540.png"></a>

<a href="http://" title="Name of friend"target="_blank" >
<img src="https://41.media.tumblr.com/6e48bb40933a6329e0fc71cae23241ef/tumblr_inline_nsvnm2Ccx61sk4wb3_540.png"></a>

<a href="http://" title="Name of friend"target="_blank" >
<img src="https://40.media.tumblr.com/72671940b637832bc32e894bc2b54574/tumblr_inline_nsvnm6ztZT1sk4wb3_540.png"></a>


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

<!---
TO MAKE THE ABOUT APPEAR, CHANGE THE "none" IN THE "display:none"
TO "block"

WHEN YOU FINISH EDITING THE PAGE, CHANGE IT BACK TO "none" OR THE BLOCK WILL APPEAR AND IT WILL LOOK WEIRD. BE CAREFUL TO NOT DELETE THE ";" IT'S IMPORTANT.
-->
<div class="4" style="display:none;">
<div class="big">
<center>
    <a href="/"target="_blank">LINK 1</a>
    <a href="/"target="_blank">LINK 2</a>
    <a href="/"target="_blank">LINK 3</a>
    <a href="/"target="_blank">LINK 4</a>
    <a href="/"target="_blank">LINK 5</a>
    <a href="/"target="_blank">LINK 6</a>
</center>
</div>
</div>
</div>

<!-- PLS do not delete-->
<div class="yoonora">
<a href="http://exoa.tumblr.com/"target="_blank">
<div class="bora">made by yoonora</div></a>
</body>
</html>