NotesWhat is notes.io?

Notes brand slogan

Notes - notes.io

Popular notes
<!--
TERMS & CONDITIONS

01. DO NOT steal or recreate
02. DO NOT use as a base code
03. DO NOT edit or remove credit
-->

<head>

<!-------MUSIC PLAYER BY GLENTHEMES-------><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script>
function toggleSound() {
var songfile = document.getElementById('audio');
if (songfile.paused)
songfile.play();
else
songfile.pause();}
$(document).ready(function(){
$(".pressplay").click(function() {
$('.ongaku').toggleClass('lineschange');
$('.ongaku').toggleClass('onionchange');
});
});

function restart() {
$('.ongaku').toggleClass('lineschange');
$('.ongaku').toggleClass('onionchange');
}
</script><link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<meta name="color:background" content="#e7e7e7"/>
<meta name="color:text" content="#000000"/>
<meta name="color:links" content="#566d73"/>
<meta name="color:hover" content="#c6c6c6"/>
<meta name="color:desc" content="#000000"/>
<meta name="color:borders" content="#ededed"/>
<meta name="color:posts" content="#fefefe"/>
<meta name="color:container" content="#f5f5f5"/>
<meta name="color:page accent" content="#d3dadc"/>
<meta name="color:accent" content="#8da2a8"/>

<meta name="if:grayscale" content="1"/>

<meta name="image:background" content=""/>
<meta name="image:sidebar" content="https://via.placeholder.com/260x160"/>
<meta name="image:polaroid 1" content="https://via.placeholder.com/110"/>
<meta name="image:polaroid 2" content="https://via.placeholder.com/80"/>

<meta name="text:title" content="make it two lines">
<meta name="text:subtitle" content="subtitle.">
<meta name="text:desc" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.">

<meta name="text:sidelink" content="link">
<meta name="text:sidelink url" content="/">

<meta name="text:tablink 1" content="link">
<meta name="text:tablink 1 url" content="/">
<meta name="text:tablink 2" content="link">
<meta name="text:tablink 2 url" content="/">
<meta name="text:tablink 3" content="link">
<meta name="text:tablink 3 url" content="/">
<meta name="text:tablink 4" content="link">
<meta name="text:tablink 4 url" content="/">
<meta name="text:tablink 5" content="link">
<meta name="text:tablink 5 url" content="/">


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


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=ABeeZee" rel="stylesheet">

<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<style type="text/css">

@font-face{ font-family:"robold"; src: url('https://dl.dropboxusercontent.com/s/qynix3bz0j8ppva/Roboto-BoldCondensed.ttf’)'); }


/* SCROLLBAR & TOOLTIP */


::-webkit-scrollbar { display:none; width:7px; height:11px; background:{color:scrollbar}; }

#s-m-t-tooltip { width:auto; padding-left:6px; padding-right:5px; border-radius:3px; margin:20px 15px; color:{color:background}; background-color:{color:accent}; z-index:999999999999999; text-transform:uppercase; font-weight:700; letter-spacing:1px; font-size:8px; font-family:'montserrat'; }


/* BODY */


body { background-image:url('{image:background}'); background-attachment:fixed; background-color:{color:background}; color:{color:text}; font-family:'ABeeZee'; font-size:9px; line-height:18px; letter-spacing:1px; }

a { text-decoration:none; color:{color:links}; font-weight:550; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }

a:hover { color:{color:hover}; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }

blockquote { border-left:1px solid {color:borders}; margin-left:10px; padding-left:10px; width:90%; }

blockquote blockquote { border-left:1px solid {color:borders}; margin-left:5px; }

h1 { letter-spacing:1px; font-size:30px; font-weight:900; font-family:'montserrat'; text-align:center; text-transform:uppercase; line-height:30px; -webkit-text-stroke: 1px {color:title}; -webkit-text-fill-color: rgba(0, 0, 0, 0); }

pre { text-align:center; background-color:{color:borders}; border-radius:20px; font-weight:800; font-size:9px; font-family:'montserrat'; letter-spacing:1px; text-transform:uppercase; padding-top:2px; padding-bottom:2px; }

small, sup, sub { font-size:9px; }

b, strong { color:{color:accent}; font-weight:bold; }

i, em { color:{color:accent}; }

li { line-height:20px; }

big { font-size:11px; font-weight:900; text-transform:uppercase; }


/* HOLDER */


#container { background-color:{color:container}; position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px; width:760px; height:510px; border-radius:5px; overflow:hidden; }

.wave { position:absolute; z-index:9; margin-top:255px; height:70px; width:760px; background:{color:page accent}; transform:rotate(180deg); }

.wave:before { content:""; display:block; position:absolute; border-radius:100% 50%; width:410px; height:80px; background-color:{color:container}; right:-5px; top:40px; }

.wave:after { content:""; display:block; position:absolute; border-radius:100% 50%; width:405px; height:70px; background-color:{color:page accent}; left:0; top:27px; }

.wave_bottom { position:absolute; z-index:9; margin-top:320px; width:760px; height:230px; background-color:{color:page accent}; }


/* SIDEBAR */


#sidebar { position:absolute; z-index:9; margin-top:-20px; }

#title { position:absolute; z-index:999; width:380px; margin-top:100px; }

.title { font-size:35px; font-family:'montserrat'; font-weight:900; padding-top:5px; padding-bottom:5px; text-transform:uppercase; text-align:center; overflow:hidden; letter-spacing:2px; -webkit-text-stroke: 1px {color:accent}; -webkit-text-fill-color: rgba(0, 0, 0, 0); }

.subtitle { color:{color:desc}; font-size:8px; letter-spacing:3px; word-spacing:2px; text-transform:uppercase; text-align:center; font-family:'robold'; }

.desc { position:absolute; z-index:999; margin-top:355px; margin-left:50px; text-align:justify; padding-top:3px; padding-bottom:2px; padding-left:5px; padding-right:3px; font-size:9px; font-family:'ABeeZee'; letter-spacing:1px; word-spacing:5px; width:270px; height:75px; overflow:auto; color:{color:desc}; line-height:16px; }

.sidelinks { width:320px; margin-top:330px; margin-left:30px; padding-left:5px; text-align:center; text-transform:uppercase; position:absolute; z-index:999999; font-family:'robold'; }

.sidelinks a { font-size:8px; font-style:italic; padding-left:3px; margin-right:15px; color:{color:desc}; letter-spacing:3px; box-shadow: 0 -5px {color:container} inset; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }

.sidelinks a:hover { color:{color:hover}; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }

.pagination { font-size:8px; letter-spacing:1px; width:260px; padding-right:10px;position:absolute; margin-left:45px; margin-top:450px; text-align:center; z-index:99999; }

.pagination a { padding:3px; text-transform:uppercase; padding-left:7px; padding-right:7px; letter-spacing:1.5px; border-radius:3px; color:{color:page accent}; font-family:'montserrat'; font-weight:900; background-color:{color:posts}; }


/* POSTS STYLING */


.entries { text-align:justify; position:absolute; z-index:99999; height:510px; width:340px; overflow:auto; margin:auto; left:350px; right:0px; top:25px; bottom:25px; overflow-x:hidden; }

.posts { background-color:{color:posts}; width:300px; margin-bottom:40px; margin-top:30px; text-align:justify; border-radius:3px; padding-left:20px; padding-right:18px; padding-top:15px; padding-bottom:15px; }

.posts img { max-width:300px; height:auto; {block:ifGrayscale} -webkit-filter: grayscale(100%); {/block:ifGrayscale} -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }

.posts img:hover { {block:ifGrayscale}-webkit-filter: grayscale(0%);{/block:ifGrayscale} -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }

iframe { max-width:300px; }

.media img, .media iframe { {block:ifGrayscale} -webkit-filter: grayscale(100%); {/block:ifGrayscale} -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }

.media img:hover, .media iframe:hover { {block:ifGrayscale} -webkit-filter: grayscale(0%); {/block:ifGrayscale} -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }

.html_photoset { {block:ifGrayscale} -webkit-filter: grayscale(100%); {/block:ifGrayscale} -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }

.html_photoset:hover { {block:ifGrayscale} -webkit-filter: grayscale(0%); {/block:ifGrayscale} -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }

#permalink { background-color:{color:posts}; letter-spacing:1.5px; text-align:left; text-transform:uppercase; font-size:8px; font-family:'robold'; padding-top:6px; padding-bottom:6px; padding-right:10px; margin-top:20px; border-radius:3px; }

#tags { letter-spacing:1.5px; font-size:8px; margin-top:-8px; text-align:left; line-height:10px; text-transform:uppercase; font-family:'robold'; }

#tags a { margin-left:3px; margin-right:3px; color:{color:links}; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }

#tags a:hover { color:{color:hover}; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }


/* QUOTE STYLING */


#q { color:{color:text}; letter-spacing:1px; font-weight:900; font-family:'montserrat'; font-size:20px; text-align:center; line-height:25px; text-transform:uppercase; padding-top:20px; padding-left:20px; padding-right:20px; }

.source { color:{color:text}; margin-top:5px; font-size:8px; font-family:'robold'; text-align:center; letter-spacing:1.5px; text-transform:uppercase; padding-bottom:5px; }

.source a { font-weight:900; font-size:7px; }

.source a:hover { color:{color:hover}; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }


/* ASK STYLING */


#question { line-height:12px; color:{color:text}; letter-spacing:1px; font-size:9px; text-align:center; padding-bottom:10px; background-color:{color:page accent}; }

#asker { font-family:'robold'; letter-spacing:3px; font-size:8px; text-transform:uppercase; background-color:{color:accent}; padding-top:5px; padding-bottom:4px; padding-left:5px; }

#asker b { color:{color:posts}; font-weight:800; }

#asker a { color:{color:posts}; font-family:'montserrat'; letter-spacing:1px; padding-top:3px; padding-bottom:4px; padding-left:9px; padding-right:9px; border-radius:3px; font-size:9px; font-weight:800; text-align:left; text-transform:uppercase; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }

#asker a:hover { color:{color:hover}; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }

#answer { margin-top:20px; }


/* AUDIO STYLING */


.playbutton { width:30px; height:30px; overflow:hidden; position:relative; margin-top:25px; margin-left:25px; z-index:9; opacity:.7; }

.albumart img { height:60px; width:60px; position:relative; margin-top:-65px; margin-left:0px; margin-left:10px; {block:ifGrayscale} -webkit-filter: grayscale(100%); {/block:ifGrayscale} -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }

.albumart img:hover { {block:ifGrayscale} -webkit-filter: grayscale(0%); {/block:ifGrayscale} -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }

.albumdetails { margin-top:-68px; text-align:;left; margin-left:75px; padding:5px; text-transform:uppercase; font-size:8px; letter-spacing:1px; }

.albumdetails lame { letter-spacing:1px; font-size:8px; line-height:70%; display:inline-block; text-transform:uppercase; color:{color:accent}; background-color:{color:posts}; margin-right:5px; font-weight:800; }


/* CREDIT */


#credit a { right:20px; bottom:20px; position:fixed; padding:5px; font-size:16px; }


/* tabs base credit to alyofrp */


.tabzcon { margin-left:0px; margin-top:0px; position:absolute; z-index:99999999999999; overflow:hidden; width:760px; height:510px; background-color:{color:container}; color:{color:text}; border-radius:5px; }

.tabzclose { z-index:99999999999; font-size:10px; padding:3px; color:{color:text}; margin-top:5px; margin-right:10px; float:right; }

.tabzclose:hover { cursor:pointer; }

#tab { position:absolute; z-index:9; margin-top:115px; margin-left:185px; width:365px; height:240px; background-color:{color:posts}; border-radius:3px; overflow:hidden; }


/* NAVIGATION */


.tabtitle { position:absolute; z-index:99; margin-top:110px; margin-left:190px; font-size:50px; font-family:'montserrat'; font-weight:900; color:{color:accent}; }

.tablinks { position:absolute; z-index:99999999; margin-top:15px; margin-left:30px; padding-top:5px; width:300px; height:20px; text-align:left; overflow:hidden; }

.tablinks a { font-size:8px; font-family:'robold'; font-style:italic; letter-spacing:3px; text-transform:uppercase; box-shadow: 0 -5px {color:page accent} inset; margin-right:10px; color:{color:desc}; padding-left:3px; padding-right:5px; }

.tablinks a:hover { color:{color:hover}; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }

.tabstats { overflow:auto; position:absolute; z-index:9; width:280px; height:auto; padding-top:5px; padding-bottom:10px; padding-left:10px; padding-right:10px; text-align:right; text-transform:uppercase; margin-top:355px; margin-left:290px; font-size:8px; font-weight:500; font-family:'robold'; letter-spacing:1px; line-height:23px; color:{color:desc}; }

.tabstats special { padding-left:7px; padding-right:7px; font-size:8px; font-style:italic; letter-spacing:3px; margin-right:5px; color:{color:accent}; box-shadow: 0 -5px {color:container} inset; }

.biography { overflow:auto; position:absolute; z-index:999; width:210px; height:160px; text-align:justify; margin-top:55px; margin-left:75px; font-size:9px; font-family:'ABeeZee'; letter-spacing:1px; color:{color:desc}; padding-right:30px; border-right:1px solid {color:page accent}; }


{CustomCSS}

/*-------MUSIC PLAYER BY GLENTHEMES-------*/
.glenplayer {
position:fixed;
left:0;
bottom:30px; /* position from bottom of screen */
width:65px;
height:63px;
}

.dough {
z-index:999997;
position:fixed;
left:0;
width:65px;
height:63px;
background-color:rgba(255,255,255,0.4); /* background color of music player wrapper */
border-radius:0px 30px 30px 0px;
}

.pressplay {z-index:999999; position:fixed; margin-top:10px; left:10px; cursor:pointer;}

.pressplay:hover {left:0px; padding-left:160px;}

.pressplay:hover ~ .dough {width:215px;}

.pressplay:hover ~ .musicinfo {left:10px;}

.musicinfo {
z-index:999998;
position:fixed;
margin-top:10px;
left:-140px;
width:140px;
height:40px;
background-color:#fff; /* background color of song info */
font-family:Karla; /* font of song info */
font-size:10px; /* font size of song info */
text-align:right;
display:table;
}

.pressplay, .dough, .musicinfo {
-webkit-transition: all 1.6s ease;
-moz-transition: all 1.6s ease;
-o-transition: all 1.6s ease;
-ms-transition: all 1.6s ease;
transition: all 1.6s ease;
}

.infomid {display:table-cell; vertical-align:middle;}

.infotext {max-height:40px; padding:0px 10px 0px 10px; overflow:auto;}

.wonton {
width:40px;
height:40px;
background-color:#fff; /* background color of play button */
border-radius:100%;
}

.shrimp {padding-top:6px; margin-left:13px; width:15px; height:20px; background-color:transparent; overflow:hidden;}

.onion {
display:block;
margin-left:1px;
margin-top:6px;
font-size:15px;
color:#111; /* color of play button */
}

.onionchange {display:none;}

.mbar1, .mbar2, .mbar3, .mbar4, .mbar5 {
display:inline-block;
opacity:0;
margin-top:10px;
margin-right:-0.5px;
width:1px;
background-color:#111; /* color of player bars */
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

.mbar1 {
height:7px;
-webkit-animation-name: dance1;
-moz-animation-name: dance1;
-o-transition-name: dance1;
-ms-animation-name: dance1;
animation-name: dance1;
-webkit-animation-duration: 450ms;
-moz-animation-duration: 450ms;
-o-animation-duration: 450ms;
-ms-animation-duration: 450ms;
animation-duration: 450ms;
}

.mbar2 {
height:14px;
-webkit-animation-name: dance2;
-moz-animation-name: dance2;
-o-transition-name: dance2;
-ms-animation-name: dance2;
animation-name: dance2;
-webkit-animation-duration: 650ms;
-moz-animation-duration: 650ms;
-o-animation-duration: 650ms;
-ms-animation-duration: 650ms;
animation-duration: 650ms;
}

.mbar3 {
height:10px;
-webkit-animation-name: dance3;
-moz-animation-name: dance3;
-o-transition-name: dance3;
-ms-animation-name: dance3;
animation-name: dance3;
-webkit-animation-duration: 850ms;
-moz-animation-duration: 850ms;
-o-animation-duration: 850ms;
-ms-animation-duration: 850ms;
animation-duration: 850ms;
}

.mbar4 {
height:12px;
-webkit-animation-name: dance4;
-moz-animation-name: dance4;
-o-transition-name: dance4;
-ms-animation-name: dance4;
animation-name: dance4;
-webkit-animation-duration: 550ms;
-moz-animation-duration: 550ms;
-o-animation-duration: 550ms;
-ms-animation-duration: 550ms;
animation-duration: 550ms;
}

.mbar5 {
height:5px;
-webkit-animation-name: dance5;
-moz-animation-name: dance5;
-o-transition-name: dance5;
-ms-animation-name: dance5;
animation-name: dance5;
-webkit-animation-duration: 750ms;
-moz-animation-duration: 750ms;
-o-animation-duration: 750ms;
-ms-animation-duration: 750ms;
animation-duration: 750ms;
}

.lineschange {opacity:1;}

@keyframes dance1 {50%{height:10px;}}
@keyframes dance2 {50%{height:5px;}}
@keyframes dance3 {50%{height:12px;}}
@keyframes dance4 {50%{height:8px;}}
@keyframes dance5 {50%{height:10px;}}


</style>
</head>
<body>

<!-------MUSIC PLAYER BY GLENTHEMES------->
<div class="glenplayer">
<div class="pressplay" onclick="javascript:toggleSound();">
<div class="wonton">
<div class="shrimp">
<div class="onion ongaku">▶</div>
<div class="mbar1 ongaku"></div>
<div class="mbar2 ongaku"></div>
<div class="mbar3 ongaku"></div>
<div class="mbar4 ongaku"></div>
<div class="mbar5 ongaku"></div>
</div>
</div>
</div>

<div class="musicinfo">
<div class="infomid">
<div class="infotext">
GOT7
<br>
Never Ever
</div>
</div>
</div>

<div class="dough"></div>
</div>

<audio src="https://dl.dropbox.com/s/n29pluo2w3qfw73/got7%20never%20ever.mp3?dl=0" onended="restart();" type="audio/mpeg" id="audio"></audio>

<div id="container">
<div class="wave"></div><div class="wave_bottom"></div>
<div id="sidebar">

<div id="title">
<div class="title">{text:title}</div>
<div class="subtitle">— {text:subtitle} —</div>
</div>

<img src="{image:sidebar}" style="position:absolute; z-index:99; margin-top:155px; height:160px; width:260px; border-top-right-radius:5px; border-bottom-right-radius:5px;">

<div class="desc">{text:desc}</div>

<div class="sidelinks">
<a href="/">refresh.</a>
<a href="/ask">inbox.</a>
<a href="#" class="tablink tabzact" onclick="openAlytut(event, 'navigation');">more.</a>
<a href="{text:sidelink url}">{text:sidelink}.</a>
</div>
<div class="pagination">
{block:PreviousPage}
<a href="{PreviousPage}" class="pagi">back</a> &nbsp;&nbsp;&nbsp; {/block:PreviousPage}
{block:NextPage} <a href="{NextPage}" class="pagi">next</a> {/block:NextPage} {/block:Pagination}
</div>
</div>

<div id="navigation" class="tabzcon alytut" style="display:none">
<span onclick="this.parentElement.style.display='none'" class="tabzclose">
<i class="fa fa-times" aria-hidden="true" style="color:{color:desc};"></i></span>

<div class="wave"></div><div class="wave_bottom"></div>

<img src="{image:polaroid 1}" style="position:absolute; z-index:99; margin-top:250px; margin-left:100px; width:110px; height:110px; background-color:{color:borders}; padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:20px; transform:rotate(-5deg);">
<img src="{image:polaroid 2}" style="position:absolute; z-index:99; margin-top:330px; margin-left:160px; width:80px; height:80px; background-color:{color:borders}; padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:20px; transform:rotate(10deg);">


<div class="tabstats">
<special>name</special> hasegawa shouta &nbsp;
<special>human age</special> 22 y.o &nbsp;
<special>spoken language</special> japanese and korean &nbsp;
<special>human gender</special> male &nbsp;
<special>current living condition</special> alive &nbsp;
<special>affiliated</special> Archangel
</div>

<div id="tab">

<div class="biography">

<b>Personality</b> <br>

Shouta memiliki perangai tenang, sebab jiwa yang dikarunai Tuhan kepadanya ialah kemurnian dan keadilan. Meski pun begitu, Shouta pembicara yang buruk. Cenderung berkata sesuai fakta, hampir tak ada empati. Ia paling benci dibantah atau diminta untuk mengulang perkataannya, sebab Shouta merasa direndahkan. Shouta juga mencintai keadilan di atas apa pun, itu harga mati baginya. Ia tidak akan segan membela keadilan yang berada di depan mata. meski pun begitu, masih ada perangai kemurnian yang tersisa padanya, menjadikan ia memiliki kebaikan hati yang lembut. Apalagi, terhadap mahluk-mahluk tak berdosa seperti hewan dan tumbuhan. <br> <br>

<b>Background Story</b> <br>

</div>

<div class="tablinks">
<a href="{text:tablink 1 url}">{text:tablink 1}</a>
<a href="{text:tablink 2 url}">{text:tablink 2}</a>
<a href="{text:tablink 3 url}">{text:tablink 3}</a>
<a href="{text:tablink 4 url}">{text:tablink 4}</a>
<a href="{text:tablink 5 url}">{text:tablink 5}</a>
</div>

</div>
</div>


<div class="entries">

{block:posts}
<div class="posts" id="{PostID}">

{block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}

{block:Photo}{LinkOpenTag}<img src="{PhotoURL-400}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}

{block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}

{block:Photoset}{Photoset-400}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}

{block:Quote}<div id="q">{Quote}</div>{/block:Quote}{block:Source}
<div class="source">— {Source}</div>
{/block:Source}

{block:Audio}
{block:AudioPlayer}
<div class="playbutton">{AudioPlayerGrey}</div>{/block:AudioPlayer}
{block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
<div class="albumdetails">
{block:TrackName}<lame>song:</lame> {TrackName}{/block:TrackName}<br>
{block:Artist}<lame>artist:</lame> {Artist}{/block:Artist}<br>
{block:Album}<lame>album:</lame> {Album}{/block:Album}
</div>
{/block:AudioPlayer}
{/block:Audio}

{block:Video}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}

{block:Chat}{block:title}<h1>{title}</h1>{/block:title}<br>{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}

{block:Answer}<div id="question"><div id="asker"><b>{Asker}</b></div><br>{Question}</div><span></center><p><div id="answer">{Answer}</div>{/block:Answer}

<div id="permalink">
<a href="{Permalink}">{TimeAgo}</a> with {NoteCountWithLabel}</span>
</span>
</div>

{block:HasTags}<div id="tags">tagged under:{block:Tags} <a href="{TagURL}">{Tag}</a>&nbsp; {/block:Tags}</div>{/block:HasTags}</div>
{/block:Posts}
{block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
{/block:Posts}</div></div></div>


<div id="credit" data="credit"><a href="http://ultraviclets.tumblr.com" title="made by ness"><span class="th th-plant-vase-o"></span></a></div>



</body>

<script>
function openAlytut(evt, alytutName) {
var i, x, tablinks;
x = document.getElementsByClassName("alytut");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" tabzact", "");
}
document.getElementById(alytutName).style.display = "block";
evt.currentTarget.className += " tabzact";
}
</script>
     
 
what is notes.io
  

Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...

With notes.io;

  • * You can take a note from anywhere and any device with internet connection.
  • * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
  • * You can quickly share your contents without website, blog and e-mail.
  • * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
  • * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.

Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.

Easy: Notes.io doesn’t require installation. Just write and share note!

Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )

Free: Notes.io works for 12 years and has been free since the day it was started.


You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;


Email: [email protected]

Twitter: http://twitter.com/notesio

Instagram: http://instagram.com/notes.io

Facebook: http://facebook.com/notesio



Regards;
Notes.io Team

     
 
Shortened Note Link
  
 
Looding Image
 
     
 
Long File
  
 

For written notes was greater than 18KB Unable to shorten.

To be smaller than 18KB, please organize your notes, or sign in.

  
     

Notes

I'm Feeling Lucky

repost for Instagram

Paste Keyboard iOS - Quick Replies

v 2.7.3

We'd love to hear from you. Please email us at [email protected]

Copyright 2022 Metromedya

ios uygulama geliştirme