NotesWhat is notes.io?

Notes brand slogan

Notes - notes.io

<!---

theme: fırtına

do not steal, claim as your own, redistribute.
do not remove the credit.

coded by
aubretia (ifallontragedy)

--->



<!DOCTYPE html>
<head>

<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}

<!--Default Variables-->

<meta name="color:background" content="#f6f6f6"/>
<meta name="color:post bg" content="#fff"/>
<meta name="color:text" content="#444444"/>
<meta name="color:link" content="#a2a2a2"/>
<meta name="color:hover" content="#aa9f7c"/>
<meta name="color:border" content="#e7e7e7"/>
<meta name="color:accent" content="#a56d68"/>

<meta name="image:background" content="" />

<meta name="text:main font" content="'hind', sans-serif" />
<meta name="text:secondary font" content="georgia, serif" />
<meta name="text:title" content="title" />
<meta name="text:link i" content="" />
<meta name="text:link ii" content="" />
<meta name="text:link iii" content="" />
<meta name="text:link iv" content="" />
<meta name="text:link i text" content="link i" />
<meta name="text:link ii text" content="link ii" />
<meta name="text:link iii text" content="link iii" />
<meta name="text:link iv text" content="link iv" />

<meta name="if:500px posts" content="0"/>


<!-- jquery for tooltips-->


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<link href='https://fonts.googleapis.com/css?family=Hind:400,300,700' rel='stylesheet' type='text/css'>

<style type="text/css">

/*scrollbar and selection*/
#s-m-t-tooltip{
color: {color:text};
width: auto;
font-size: 7px;
padding: 2px 4px;
text-transform: uppercase;
background-color: {color:background};
z-index: 100;
border: 1px solid {color:border};
position: absolute;
display:inline-block;
margin-top: 20px;
margin-left: 10px;
}

::-webkit-scrollbar-thumb:vertical {
background-color: {color:accent};
width:1px;
height:2px;
border-left: 9px solid {color:background};
border-right: 9px solid {color:background};
}

::-webkit-scrollbar-thumb:horizontal {
background-color:{color:background};

}

::-webkit-scrollbar {
width: 19px;
background-color:{color:background};

}

::-webkit-scrollbar-track {
background-color: #ddd;
border-left: 9px solid {color:background};
border-right: 9px solid {color:background};
border-top: 0px solid {color:background};
border-bottom: 0px solid {color:background};
}


::selection {
color:{color:background};
background-color: {color:accent};
}

::-moz-selection {
color:{color:background};
background-color: {color:accent};
}



/*main*/
body {
background:{color:background};
{block:ifbackgroundimage}background-image:url('{image:background}');{/block:ifbackgroundimage}
color:{color:text};
font-family: {text:main font};
font-size: 9.5px;
letter-spacing: 0.2px;
font-weight:300;
-webkit-font-smoothing: antialiased;
word-spacing: 2px;
text-align:justify;
line-height:1.1em;
margin: 0;
overflow-y: scroll;
overflow-x: hidden;
}

a {
color:{color:link};
text-decoration: none;
}

a:hover {
color: {color:hover};
}

#entries {
position:relative;
height: 100%;
margin-left: 450px;
padding-bottom: 10px;
padding-top: 120px;
line-height:130%;
{block:ifnot500pxposts}width: 400px;{/block:ifnot500pxposts}
{block:if500pxposts}width: 500px;{/block:if500pxposts}
}

#posts {
padding: 15px;
text-align: justify;
height: 100%;
background: {color:post bg};
border: 1px solid {color:border};
line-height:130%;
{block:ifnot500pxposts}width: 400px;{/block:ifnot500pxposts}
{block:if500pxposts}width: 500px;{/block:if500pxposts}
position: relative;
margin-bottom: 9px;
}

#posts img {
{block:ifnot500pxposts}max-width: 400px!important;{/block:ifnot500pxposts}
{block:if500pxposts}max-width: 500px!important;{/block:if500pxposts}
margin: auto;
}

#permalink {
word-spacing: 3px;
margin-top: 15px;
border-top: 1px solid {color:border};
font-size: 9px;
padding-top: 10px;
letter-spacing: 0.5px;
color: silver;
}


#permalink a {
color: silver;
}

.date {
text-transform: uppercase;
margin-right: 3px;
font-weight: bold;
}

.date .dt a {
padding: 1px 5px 0px 5px;
background: {color:accent};
color: {color:post bg}!important;
}

.tags {
margin-top: 4px;
text-align: justify;
}

.tags a {
padding-right: 3px;
color: silver;
}

.tags a:hover {
color: {color:hover}!important;
}

.tags a::before {
content: '#';
opacity: 0.5;
}

.tags a::after {
margin-right: 10px;
}


/*LEFT SIDE*/
#left {
position: fixed;
width: 130px;
margin-top: 120px;
margin-left: 270px;
background: {color:post bg};
border: 1px solid {color:border};
padding: 30px 20px;
}

#left b {
color: {color:text};
}

.dsc {
margin-top: 10px;
}

.title a, .title {
font-family: {text:secondary font};
text-align: center;
margin-bottom: 10px;
font-size: 13px;
color: {color:text};
}

.border {
width: 50px;
height: 2px;
background: {color:accent};
margin: auto;
margin-bottom: 10px;
text-align: auto;
}

.links {
text-align: center;
margin-bottom: 15px;
}

.links a {
display: inline-block;
font-weight: normal;
font-weight: bold;
text-transform: uppercase;
text-align: left;
font-size: 7px;
font-family: {text:main font};
letter-spacing: 1px;
padding: 0px 2.5px;
}

.right { text-align: center; }

.right img { width: 70px; }

/*pagination*/
#pag {
position: fixed;
text-transform: uppercase;
font-size: 8px;
text-align: center;
width: 170px;
top: 100px;
left: 270px;
}

#pag a {
color: {color:links};
font-weight: bold;
}

#pag a:hover {
color: {color:hover};
}


/*inside posts*/
#posts img, #posts img a {
{block:ifnot500pxposts}max-width: 400px;{/block:ifnot500pxposts}
{block:if500pxposts}max-width: 500px;{/block:if500pxposts}
}

bold, strong, b {
color: {color:accent};
}

i, italic, em {
font-style: italic;
}

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

code {
font-family: courier new;
letter-spacing: 0px;
font-size: 12px;
}

blockquote {
border-left: 1px solid {color:border};
padding-left: 10px;
margin-left: 5px;
max-width: 400px!important;
margin-right: 5px;
}

ul li {
list-style: circle;
list-style-position: outside;
}

ol li {
list-style: lower-roman;
list-style-position: outside;
}

.chat {
font-family: courier new;
}

.chat b {
font-family: {text:main font};
}

/*notes*/
ol.notes {
list-style-type:none;
margin-left: -40px;
{block:ifnot500pxposts}width: 430px;{/block:ifnot500pxposts}
{block:if500pxposts}width: 530px;{/block:if500pxposts}
}

ol.notes li.note {
list-style-type:none;
border-bottom: 1px solid {color:border};
padding: 5px;
}

ol.notes li.note img {
display: none;
}

img {
filter: none;
}

/*post title*/
.ptitle {
line-height: 130%;
color: {color:accent};
font-size: 14px;
font-family: {text:secondary font};
}

.ptitle a {
color: {color:accent};
}

.ptitle a:hover {
color: {color:hover};
}

/*quote*/
.quote {
text-align: center;
font-size: 16.5px;
font-family: {text:secondary font};
line-height: 1.3em;
margin-bottom: 20px;
word-spacing: 3px;
color: {color:accent};
}

.source {
width: 250px;
border-top: 1px solid {color:border};
font-style: normal;
margin-bottom: 10px;
text-align: center;
margin-top:-5px;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1;
}

/*ask*/
#ask {
padding-bottom: 15px;
padding-top: 10px;
margin-bottom:7px;
border-bottom: 1px solid {color:border};
text-align: center;
}

.asker {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 7px;
font-family: {text:secondary font};
text-align: right;
}

.asker a {
color: {color:accent};
}

.asker a:hover {
color: {color:hover};
}

.askicon {
float: right;
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
-webkit-border-radius: 100%;
border-radius: 100%;
-moz-border-radius: 100%;
margin-left: 5px;
width: 16px;
}

/*audio*/
.albumart img {
width: 70px;
float: right;
padding: 3px;
border: 1px solid {color:border};
}

.albumart {
text-align: center;
}

.audio {
margin-bottom: 5px;
}

#play {
opacity: 0.5;
background-color: white;
z-index: 1000;
{block:ifnot500pxposts}margin: 2px 340px;{/block:ifnot500pxposts}
{block:if500pxposts}margin: 2px 440px;{/block:if500pxposts}
position: absolute;
top: 30px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
left: 15px;
-moz-transition-duration:0.6s;
-webkit-transition-duration:0.6s;
-o-transition-duration:0.6s;
}

.button {
width: 18px;
height: 30px;
overflow: hidden;
position: relative;
z-index: 1000;
margin: 8px 16px 5px 8px;
}

#play:hover {
opacity: 1;
-moz-transition-duration:0.6s;
-webkit-transition-duration:0.6s;
-o-transition-duration:0.6s;
}

/*credit*/
#credit {
font-size:8px;
padding-bottom: 60px;
top: 20px;
{block:ifnot500pxposts}width: 420px;{/block:ifnot500pxposts}
{block:if500pxposts}width: 520px;{/block:if500pxposts}
margin-left: 450px;
line-height: 100%;
text-align: center;
letter-spacing: 0.5px;
text-transform: uppercase;
}

#credit a {
font-weight: bold;
color: {color:accent};
}

#credit a:hover {
color: {color:hover};
}


{CustomCSS}


</style>
</head>


<body>
<div id="content">
<div id="left">
<div class="right"><a href="/"><img src="{PortraitURL-96}"></div></a>
<div class="dsc"><div class="title"><a href="/">{text:title}</a></div>
<div class="border"></div>
<div class="links"><a href="{text:link i}">{text:link i text}</a> <a href="{text:link ii}">{text:link ii text}</a> <a href="{text:link iii}">{text:link iii text}</a> <a href="{text:link iv}">{text:link iv text}</a></div>
{description}</div>
</div>

<div id="pag">{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}">sooner</a>
{/block:PreviousPage} <i>or</i> {block:NextPage}
<a href="{NextPage}">later</a>
{/block:NextPage}{/block:Pagination}
</div>

<div id="entries">

{block:Posts}

<div id="posts">

<div class="cont">

{block:Text}<div class="capt">
{block:Title}<div class="ptitle">{Title}<br></div>{/block:Title}
{Body}</div>
{/block:Text}

{block:Link}<div class="capt">
<div class="ptitle"><a href="{URL}" {Target}>{Name} →</a></div>
{block:Description}{Description}{/block:Description}</div>
{/block:Link}

{block:Quote}<div class="capt">
<center><div class="quote">{Quote}</div>
{block:Source}
<div class="source"><br>{Source}</div></center>
{/block:Source}</div>
{/block:Quote}

{block:Chat}<div class="capt"><div class="chat">
{block:Title}<div class="ptitle">{Title}</div><p>{/block:Title}
{block:Lines}<div style="padding: 10px 0px; border-bottom: 1px solid {color:border}"><div class="{Alt} user_{UserNumber}">
{block:Label}<b>{Label}</b>{/block:Label}</div>
{Line}<br></div>{/block:Lines}<p></p></div></div>{/block:Chat}

{block:Photo}{LinkOpenTag}
{block:ifnot500pxposts}<img src="{PhotoURL-400}">{/block:ifnot500pxposts}
{block:if500pxposts}<img src="{PhotoURL-500}">{/block:if500pxposts}
{LinkCloseTag}
{block:Caption}<div class="capt">
{Caption}</div>
{/block:Caption}
{/block:Photo}

{block:Photoset}
{block:ifnot500pxposts}{Photoset-400}{/block:ifnot500pxposts}
{block:if500pxposts}{Photoset-500}{/block:if500pxposts}
{block:Caption}<div class="capt">
{Caption}</div>
{/block:Caption}
{/block:Photoset}

{block:Video}
{block:ifnot500pxposts}{Video-400}{/block:ifnot500pxposts}
{block:if500pxposts}{Video-500}{/block:if500pxposts}
{block:Caption}<div class="capt">
{Caption}</div>
{/block:Caption}
{/block:Video}

{block:Audio}<div class="capt">
<div class="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}</div>
<div class="audio"><div id="play">
<div class="button">{AudioPlayerWhite}</div></div>
<div style="padding-top: 20px; {block:ifnot500pxposts}width: 316px;{/block:ifnot500pxposts} {block:if500pxposts}width: 416px;{/block:if500pxposts} text-align: center; padding-bottom: 20px; border: 1px solid {color:border}; max-height: 70px;"><b>Track:</b> {block:TrackName}{TrackName}{/block:TrackName}<br>
<b>Artist:</b> {block:Artist}{Artist}{/block:Artist}<br>
<b>Album:</b> {block:Album}{Album}{/block:Album}</div></div>
{block:Caption}{Caption}{/block:Caption}</div>{/block:Audio}



{block:Answer}<div class="capt">
<div id="ask">{Question}</div>
<div class="asker">asked by {Asker}</div>
{Answer}</div>{/block:Answer}


<div id="permalink">
{block:Date}

<div class="date"><span class="dt"><a href="{Permalink}">{DayOfMonth}.{MonthNumber}.{ShortYear}</a></span>{block:NoteCount}<a href="{Permalink}"> {NoteCountWithLabel}</a>{/block:NoteCount}{block:PermalinkPage}{block:RebloggedFrom} · <a href="{ReblogParentURL}" title="reblogged from">{ReblogParentName}</a>{block:ContentSource} / <a href="{ReblogRootURL}" title="originally by">{ReblogRootName}</a>{/block:ContentSource}{/block:RebloggedFrom}{/block:PermalinkPage}</div>

{/block:Date}
{block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}


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

{block:PostNotes}
{PostNotes}
{/block:PostNotes}


{/block:Posts}



{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}

</div>

<div id="credit">coded by <a href="http://aubrieta.tumblr.com">ifallontragedy</a></div>

</div>

</div>

</body></html>
     
 
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.