Page: Timeless [About Me]

<!------------------------------------
  ____ ___  _    ___     ___ ___  ___  ___ ___
 / __|/ _ \| |  / _ \   / __/ _ \|   \| __/ __|
 \__ \ (_) | |_| (_) | | (_| (_) | |) | _|\__ \
 |___/\___/|____\___/   \___\___/|___/|___|___/


 **** PAGE: TIMELESS ****

 .Dᴇsɪɢɴᴇᴅ & Cᴏᴅᴇᴅ ʙʏ Sᴏʟᴏ Cᴏᴅᴇs > sᴏʟᴏᴄᴏᴅᴇs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ | solocodes.net
 .Send an ask if you need any help for malfunction
 .Please look at the coding for labels on how to customize
 .Go to imgur to host an image for this page or any site of your choice

 .Dᴏ ɴᴏᴛ ʀᴇᴍᴏᴠᴇ ᴄʀᴇᴅɪᴛ
 .Dᴏ ɴᴏᴛ ʀᴇᴅɪsᴛɪʙᴜᴛᴇ
 .Dᴏ ɴᴏᴛ ᴄʟᴀɪᴍ ᴀs ʏᴏᴜʀ ᴏᴡɴ
 .Dᴏ ɴᴏᴛ ᴜsᴇ ᴀs ᴀ ʙᴀsᴇ ᴄᴏᴅᴇ
 .Dᴏ ɴᴏᴛ sᴛᴇᴀʟ
 .Nᴏ ʜᴇᴀᴠʏ ᴛᴡᴇᴀᴋɪɴɢ
 .Eᴅɪᴛ ᴍɪɴᴏʀ ᴛʜɪɴɢs ᴛᴏ ʏᴏᴜʀ ʟɪᴋɪɴɢ

------------------------------------>


<!DOCTYPE html>
<head>

<title>Timeless</title>

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


<!--- GOOGLE MATERIAL, LINEAR, DRIP & FONT AWESOME ICONS ---->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><script defer src="https://use.fontawesome.com/releases/v5.10.1/js/all.js"></script></script><link rel="stylesheet" href="https://unpkg.com/@icon/dripicons/dripicons.css"><link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

<!----- GOOGLE FONTS ----->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Muli:400,600,700|Poppins:400,500,600,700|Open+Sans:400,600,700|Ubuntu:400,700|Raleway:400,600,700|Playfair+Display|Rubik:400,700&display=swap" rel="stylesheet">


<!--- TOOLTIPS --->

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

<script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips();
});
})(jQuery);
</script>
<style>

/* COLOR THE PAGE HERE */

:root {
  --background:#f5f5f5;
  --boxes:#fff;
  --borders:#eee;
  --accent:#fecc4d;
  --text:#000;
  --title:#000;
  --navigationnumbers:#dadada;
}



/* TOOLTIPS */
#s-m-t-tooltip {
display: block;
margin: 15px;
color:var(--accent);
background:var(--text);
font:0.80em 'Poppins', sans-serif;
font-weight:600;
text-align:center;
border-radius:3px;
padding:4px;
margin-left:25px;
letter-spacing:1px;
text-transform: uppercase;
line-height:130%;
min-width:40px;
max-width:150px;
z-index: 9999999999;}


/* TUMBLR CONTROLS */

.tc svg {
display:block;
z-index:99999999999 !important;
width:14px;
height:auto;
overflow:hidden;
overflow:visible;}

.tc svg path {fill:var(--text);}

.tc {
z-index:15;
position:fixed;
top:15px;
right:25px;}

iframe.tmblr-iframe {
z-index:999;
right:-5px;
top:9px;
opacity:0;
position:fixed;
width:0;
padding-right:80px;
filter:contrast(150%) invert(100%);
-webkit-filter:contrast(150%) invert(100%);
transform:scale(0.6);
-webkit-transform:scale(0.6);
transform-origin:100% 0;
-webkit-transform-origin:100% 0;    }

#tumblr_controls:hover, .tmblr-iframe:hover {opacity:.5!important;}



/* MAIN BODY/HTML CONTAINER */
body, html {
height: 100%;
margin: 0;
font-size:12px;
font-family:'Poppins', sans-serif;
overflow-x:hidden;
background-image:url('');
background-repeat:repeat;
background-attachment:fixed;
background-color:var(--background);
color:var(--text);}



/* ENTRY LINKS / BODY LINKS  */
a:link, a:active, a:visited {
clear:both;
z-index:2!Important;
text-decoration:none;
/*MAIN LINKS COLORS
(If you have any links in the about me paragraph, change it's color here) */
color:#000000;}

a:hover {
clear:both;
z-index:99999999!Important;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
/*MAIN LINKS HOVER COLOR*/
color:#ff0000;}

/* ABOUT ME BOX CONTAINER  */
.box {
position:relative;
width:800px;
height:500px;
top:calc(50% - 250px);
left:calc(49% - 400px);}

/*FIRST BOX :: ABOUT ME*/
.about {
position:fixed;
height:100px;
width:250px;}


/* MAIN TITLE*/
.abouttitle {
position:fixed;
z-index:999999;
letter-spacing:6px;
padding:none;
text-transform:uppercase;
font:bold 4em 'Poppins', sans-serif;
background-image: linear-gradient(120deg, var(--accent) 0%, var(--accent)  100%);
background-repeat: no-repeat;
background-size: 100% 0.5em;
background-position: 0 88%;
transition: background-size 0.25s ease-in;
font-weight:800;
color:var(--title);}

/* MAIN TITLE (SUB TITLE) */
.subtitle {
position:fixed;
z-index:999999;
margin-left:0px;
margin-top:70px;
letter-spacing:1.3px;
text-transform:uppercase;
font:bold 1em 'Poppins', sans-serif;
font-weight:600;
color:var(--title);}

/* WATCHING BLOCK CONTAINER */
.watching {
position:fixed;
margin-top:120px;
width:250px;
height:50px;
padding:10px;
border-top-left-radius:8px;
border-top-right-radius:8px;
background:var(--boxes);
border:1px solid var(--borders);}

/* CURRENT WATCHING ICON */
.watching i {
position:fixed;
z-index:99999999999;
margin-top:15px;
margin-left:10px;
font-size:2em;
color:var(--text);;
}

/* CURRENT WATCHING, STUDYING, MUSIC ACCENT DOT */
.dot {
position:fixed;
margin-top:8px;
margin-left:10px;}

.dot span {
z-index:-1;
font-size:3em;
color:var(--accent);}

/* CURRENT WATCHING, STUDYING, MUSIC TEXT */
.currenttext {
position:fixed;
z-index:9999;
margin-left:60px;
margin-top:15px;
letter-spacing:1px;
text-transform:uppercase;
font:bold 0.90em 'Poppins', sans-serif;
font-weight:600;}

/* MUSIC BLOCK CONTAINER */
.music {
position:fixed;
margin-top:192px;
width:250px;
height:50px;
padding:10px;
background:var(--boxes);
border-right:1px solid var(--borders);
border-left:1px solid var(--borders);
border-bottom:1px solid var(--borders);}

/* MUSIC WATCHING ICON */
.music i {
position:fixed;
z-index:99999999999;
margin-top:15px;
margin-left:10px;
font-size:2em;
color:var(--text);}

/* STUDYING BLOCK CONTAINER */
.study {
position:fixed;
margin-top:263px;
width:250px;
height:50px;
padding:10px;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
box-shadow: 0px 10px 10px -9px rgba(000,000,000, 0.45);
background:var(--boxes);
border-right:1px solid var(--borders);
border-left:1px solid var(--borders);
border-bottom:1px solid var(--borders);}

/* STUDYING WATCHING ICON */
.study i {
position:fixed;
z-index:99999999999;
margin-top:15px;
margin-left:10px;
font-size:2em;
color:var(--text);}

/* BIO/ABOUT ME BOX CONTAINER */
.biobox {
position:fixed;
margin-left:300px;
width:220px;
height:240px;
padding:10px;
box-shadow: 0px 10px 10px -9px rgba(000,000,000, 0.45);
background:var(--boxes);
border:1px solid var(--borders);}

/*BIO/ABOUT ME BOX ICON IMAGE*/
.biobox img {
position:fixed;
z-index:999999;
margin-top:25px;
margin-left:75px;
width:80px;
height:80px;
box-shadow: 0px 10px 10px -9px rgba(000,000,000, 0.45);
border-radius:100px;}

/* BIO/ABOUT ME BOX ICONS CONTAINER */
.bioicons {
position:fixed;
width:220px;}

/* BIO/ABOUT ME BOX ICONS LINKS STYLING */
.bioicons a {
font-size:1.3em;
color:var(--text);}

.bioicons a:hover {
color:var(--accent);}


/*BIO/DESCRIPTION :: ABOUT ME SECTION*/
.bio {
position:fixed;
z-index:999999;
margin-top:160px;
width:220px;
font-weight:600;
text-transform:uppercase;
text-align:center;
letter-spacing:1px;
font:0.75em 'Lato', sans-serif;
color:var(--text);
line-height:17px;}

/*BIO/DESCRIPTION QUOTE ICONS */
.bio i {font-size:1em;}

/*ABOUT THE BLOGGER :: TITLE */
.title {
position:fixed;
z-index:999999;
text-align:center;
margin-top:120px;
margin-left:42px;
width:auto;
text-transform:uppercase;
text-align:center;
letter-spacing:1.1px;
font:bold 1em 'Poppins', sans-serif;
background-image: linear-gradient(120deg, var(--accent) 0%, var(--accent)  100%);
background-repeat: no-repeat;
background-size: 100% 0.5em;
background-position: 0 88%;
transition: background-size 0.25s ease-in;
font-weight:800;
color:var(--text);}


/* PROFILE BOX CONTAINER */
.profile {
position:fixed;
margin-left:300px;
margin-top:378px;
width:220px;
height:100px;
padding:10px;
text-transform:uppercase;
text-align:left;
letter-spacing:1px;
font:0.85em 'Lato', sans-serif;
line-height:20px;
border-radius:8px;
box-shadow: 0px 10px 10px -9px rgba(000,000,000, 0.45);
color:var(--text);
background:var(--boxes);
border:1px solid var(--borders);}

tt {
text-transform:uppercase;
text-align:left;
letter-spacing:1.3px;
font:bold 0.90em 'Poppins', sans-serif;
color:var(--text);}



/*SOCIAL MEDIA ICONS CONTAINER/BOX */
.socialbox {
position:fixed;
z-index:999999;
margin-top:378px;
width:270px;
height:120px;
line-height:18px;
font-weight:600;
text-transform:uppercase;
text-align:center;
letter-spacing:4px;
font:0.80em 'Poppins', sans-serif;
border-radius:8px;
box-shadow: 0px 10px 10px -9px rgba(000,000,000, 0.45);
color:var(--title);
border:1px solid var(--borders);
background:var(--boxes);}

/*SOCIAL MEDIA ICONS LINKS STYLING */
.socials {
position:fixed;
margin-top:20px;
margin-left:20px;}

.socials a {
z-index:999999;
padding:15px;
font-size:2.4em;
color:var(--text);}


/*NAVIGATION LINK BOX CONTAINER */
.linkbox {
position:fixed;
z-index:999;
margin-left:570px;
width:230px;
height:260px;
border-radius:8px;
box-shadow: 0px 10px 10px -9px rgba(000,000,000, 0.45);
border:1px solid var(--borders);
background:var(--boxes);}

/*--- LEFT SIDE NAV---*/
.lnav {
position:fixed;
margin-top:20px;
margin-left:0px;}

.lnav n {
position:relative;
z-index:-1;
left:20px;
top:-1px;
font-size:1.8em;
color:var(--navigationnumbers);}


.lnav a {
font:bold 1.1em 'Poppins', sans-serif;
font-weight:800;
display:block;
margin-bottom:11px;
text-transform:uppercase;
letter-spacing:1px;
color:var(--text);}

.lnav a:hover {
color:var(--accent);
}

/*--- RIGHT SIDE NAV---*/

.rnav {
position:fixed;
margin-top:20px;
margin-left:126px;}

.rnav a {
font:bold 1.1em 'Poppins', sans-serif;
font-weight:800;
display:block;
margin-bottom:11px;
letter-spacing:1px;
text-transform:uppercase;
color:var(--text);}

.rnav a:hover {
color:var(--accent);
}

.rnav n {
position:relative;
z-index:-1;
left:15px;
top:-1px;
font-size:1.8em;
color:var(--navigationnumbers);}


/*--- TAGS BOX CONTAINER ---*/

.tagsbox {
position:fixed;
z-index:99999;
margin-left:570px;
margin-top:310px;
width:230px;
height:190px;
border-radius:8px;
box-shadow: 0px 10px 10px -9px rgba(000,000,000, 0.45);
border:1px solid var(--borders);
background:var(--boxes);}



/*--- TAGS BOX :: TAGS STYLING ---*/

.tags {
margin-left:20px;
margin-top:20px;
width:230px;
}

.tags a {
font:bold 0.90em 'Poppins', sans-serif;
font-weight:800;
display:inline-block;
padding:6px;
margin-bottom:10px;
letter-spacing:1px;
text-transform:lowercase;
line-height:17px;
border-radius:5px;}

.tags n {color:var(--accent);}


/* SEARCH BAR*/
.search .query {
position:fixed;
z-index:9999;
margin-top:289px;
margin-left:312px;
border:0;
outline:0;
width:150px;
border-radius:8px;
overflow:hidden;
padding:15px;
padding-left:60px;
font:bold 0.85em 'Poppins', sans-serif;
font-weight:600;
font-style:bold;
letter-spacing:1px;
text-align:left;
text-transform:uppercase;
box-shadow: 0px 10px 10px -9px rgba(000,000,000, 0.45);
color:var(--text);
background:var(--boxes);}

::-webkit-input-placeholder {color: inherit;}
:-moz-placeholder {color: inherit; opacity:1;}
::-moz-placeholder {color: inherit; opacity:1;}
:-ms-input-placeholder {color: inherit;}
input:focus::-webkit-input-placeholder {color: transparent;}
input:focus:-moz-placeholder {color: transparent;}
input:focus::-moz-placeholder {color: transparent;}
input:focus:-ms-input-placeholder { color: transparent;}


/* SEARCH ICON */
.lnr-magnifier {
position:fixed;
z-index:9999999999999;
overflow:hidden;
margin-top:289px;
margin-left:300px;
width:25px;
height:27px;
padding:10px;
text-align:center;
font-weight:900;
font-size:1.2em;
line-height:28px;
border-top-left-radius:8px;
border-bottom-left-radius:8px;
box-shadow: 0px 10px 10px -9px rgba(000,000,000, 0.45);
background:var(--accent);
color:var(--text);}



{CustomCSS}
</style>

</head>
<body>


<div class="tc"><svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px"viewBox="0 0 438.317 438.317" style="enable-background:new 0 0 438.317 438.317;" xml:space="preserve"><g><g><path d="M31.167,266.192l20.4,9.35c8.5,3.967,12.467,13.6,9.35,22.383l-7.933,20.967c-5.95,16.15-3.967,33.433,5.95,47.317c9.633,14.167,25.5,22.383,42.5,22.383c6.233,0,12.467-1.133,18.417-3.4l20.967-7.933c1.983-0.85,3.967-1.133,6.233-1.133c6.8,0,13.317,3.967,16.15,10.483l9.35,20.4c8.5,18.7,26.633,30.317,47.033,30.317s38.533-11.617,47.033-30.317l9.35-20.4c2.833-6.233,9.067-10.483,16.15-10.483c1.983,0,4.25,0.283,6.233,1.133l20.967,8.217c5.95,2.267,12.183,3.683,18.417,3.683l0,0c16.717,0,32.583-8.783,42.5-22.667c9.633-14.167,11.9-31.45,5.95-47.6l-7.933-20.967c-3.117-8.783,0.85-18.417,9.35-22.383l20.4-9.35c18.7-8.5,30.317-26.633,30.317-47.033S426.7,180.625,408,172.125l-20.4-9.35c-8.5-3.967-12.467-13.6-9.35-22.383l7.933-20.967c5.95-16.15,3.967-33.433-5.95-47.317c-9.633-14.167-25.5-22.383-42.5-22.383c-6.233,0-12.467,1.133-18.417,3.4l-20.967,7.933c-1.983,0.85-3.967,1.133-6.233,1.133c-6.8,0-13.317-3.967-16.15-10.483l-9.35-20.4c-8.5-18.7-26.633-30.317-47.033-30.317s-39.383,11.9-47.883,30.6l-9.35,20.4c-2.833,6.233-9.067,10.483-16.15,10.483c-1.983,0-4.25-0.283-6.233-1.133L119,53.408c-5.95-2.267-12.183-3.4-18.417-3.4c-16.717,0-32.583,8.5-42.5,22.383c-9.633,14.167-11.9,31.45-5.95,47.317l7.933,20.967c3.117,8.783-0.85,18.417-9.35,22.383l-20.4,9.35C11.617,180.908,0,199.042,0,219.442S12.467,257.692,31.167,266.192z M45.05,203.008l20.4-9.35c24.65-11.333,36.55-39.95,26.917-65.167l-7.933-20.967c-2.833-7.65,0-13.317,1.983-16.15c4.533-6.8,13.033-9.633,20.967-6.517l20.967,7.933c5.95,2.267,11.9,3.4,18.133,3.4l0,0c20.117,0,38.533-11.9,47.033-30.317l9.35-20.4c4.25-9.633,13.317-10.483,16.15-10.483c2.833,0,11.617,0.85,16.15,10.483l9.35,20.4c8.5,18.417,26.917,30.317,47.033,30.317c6.233,0,12.183-1.133,18.133-3.4l20.967-7.933c7.933-2.833,16.15,0,20.967,6.517c1.983,2.833,4.817,8.5,1.983,16.15l-7.933,20.967c-9.35,25.217,2.267,53.833,26.917,65.167l20.4,9.35c9.633,4.25,10.483,13.317,10.483,16.15c0,2.833-0.85,11.617-10.483,16.15l-20.4,9.35c-24.65,11.333-36.55,39.95-26.917,65.167l7.933,20.967c2.833,7.65,0,13.317-1.983,16.15c-4.533,6.8-13.033,9.633-20.967,6.517l-20.967-7.933c-5.95-2.267-11.9-3.4-18.133-3.4c-20.117,0-38.533,11.9-47.033,30.317l-9.35,20.4c-4.25,9.633-13.317,10.483-16.15,10.483c-2.833,0-11.617-0.85-16.15-10.483l-9.35-20.4c-8.5-18.417-26.917-30.317-47.033-30.317c-6.233,0-12.183,1.133-18.133,3.4l-20.967,7.933c-7.933,2.833-16.15,0-20.967-6.517c-1.983-2.833-4.817-8.5-1.983-16.15l7.933-20.967c9.35-25.217-2.267-53.833-26.917-65.167l-20.4-9.35c-9.633-4.25-10.483-13.317-10.483-16.15C34.567,216.325,35.417,207.542,45.05,203.008z"/><path d="M218.733,292.825c40.517,0,73.667-33.15,73.667-73.667s-33.15-73.667-73.667-73.667s-73.667,33.15-73.667,73.667S177.933,292.825,218.733,292.825z M218.733,179.492c21.817,0,39.667,17.85,39.667,39.667s-17.85,39.667-39.667,39.667s-39.667-17.85-39.667-39.667S196.917,179.492,218.733,179.492z"/></g></g></svg></div>





<div class="box">


<span class="lnr lnr-magnifier"></span>
<form action="/search" method="get" class="search">
<input type="text" name="q" value="{SearchQuery}" class="query" placeholder="Search ">
</form>



<div class="about">
<div class="abouttitle">TIMELESS</div>
<div class="subtitle">Explore & Navigate </div>
</div>

<div class="watching">
<i class="dripicons dripicons-preview"></i>
<div class="dot">
<span class="material-icons">fiber_manual_record</span></div>
<div class="currenttext">Watching: Dexter S1</div>
</div>

<div class="music">
<i class="dripicons dripicons-music"></i>
<div class="dot">
<span class="material-icons">fiber_manual_record</span></div>
<div class="currenttext">Playing: Lo-fi Tracks </div>
</div>

<div class="study">
<i class="dripicons dripicons-lightbulb"></i>
<div class="dot">
<span class="material-icons">fiber_manual_record</span></div>
<div class="currenttext">Studying: Psychology</div>
</div>

<div class="socialbox">
<div class="socials">
<a href="/" title="twitter"><i class="fab fa-twitter"></i></a>
<a href="/" title="facebook"><i class="fab fa-facebook"></i></a>
<a href="/" title="instagram"><i class="fab fa-instagram"></i></a>
<a href="/" title="pinterest"><i class="fab fa-pinterest"></i></a>
<br><br>
<a href="/" title="snapchat"><i class="fab fa-snapchat"></i></a>
<a href="/" title="dribbble"><i class="fab fa-dribbble"></i> </a>
<a href="/" title="spotify"><i class="fab fa-spotify"></i></a>
<a href="/" title="last.fm"><i class="fab fa-lastfm"></i></a>
</div></div>


<div class="biobox">
<div class="bioicons">
<a href="/" title="go back to blog">
<i class="dripicons dripicons-arrow-thin-left"></i></a>

<div style="float:right;">
<a href="https://www.(your blog name).tumblr.com/follow" title="follow me">
<i class="dripicons dripicons-enter"></i></a></div>
</div>

<img src="https://i.imgur.com/QuWKG0j.png">

<div class="title"> About The Blogger</div>
<div class="bio"><i class="material-icons">format_quote</i>
Lorem ipsum is placeholder text used in the graphic, print, and publishing industries for previewing layouts and visual mockups.<i class="material-icons">format_quote</i>
</div>
</div>

<div class="profile">
<tt>Name</tt>&nbsp;&nbsp; Kim Hyun-ah <br>
<tt>Bday</tt> &nbsp;&nbsp; 06 / 06 / 1992 <br>
<tt>Zodiac</tt> &nbsp;&nbsp; Gemini <br>
<tt>Residence</tt>&nbsp;&nbsp; Seoul, Korea <br>
<tt>Hobbies:</tt> &nbsp;&nbsp; Singing, Dance
</div>



<div class="linkbox">
<div class="lnav">
<a href="/" title="return home"> <n>01</n> Home </a> <br>
<a href="/tagged/resources" title="resources"> <n>03</n> Past </a> <br>
<a href="/" title="link 5"> <n>05</n> Link 5 </a> <br>
<a href="/" title="link 7"> <n>07</n> Link 7 </a> <br>
</div>


<div class="rnav">
 <a href="/ask" title="ask"> <n>02</n> Ask </a> <br>
<a href="/" title="link 4"> <n>04</n> Link 4 </a> <br>
<a href="/" title="link 6"> <n>05</n> Link 6 </a> <br>
<a href="https://solocodes.tumblr.com" title="theme credit"> <n>08</n> Theme </a>
</div>
</div>


<div class="tagsbox">
<div class="tags">
<a href="/" title="photography"><n>#</n>Photography</a>
<a href="/" title="nature"><n>#</n>Nature</a>
<a href="/" title="audio"><n>#</n>Audio</a>
<a href="/" title="art"><n>#</n>art</a>
<a href="/" title="history"><n>#</n>History</a>
<a href="/" title="videos"><n>#</n>videos</a>
<a href="/" title="food"><n>#</n>food</a>
<a href="/" title="flowers"><n>#</n>Flowers</a>
<a href="/" title="mythology"><n>#</n>Mythology</a>
<a href="/" title="film"><n>#</n>films</a>
</div>
</div>




</div>

</body>
</html>