Page: Bittersweet [About Me]

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


 **** PAGE: BITTERSWEET ****

 .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;
  --hover:#ccc;
  --text:#000;
  --title:#fff;
  --titlebackgrounds:#000;
  --paletteone:#0d0d0d;
  --palettetwo:#c93643;
  --palettethree:#c4a470;
  --palettefour:#a3a3a2;
  --palettefive:#847468;
  --palettesix:#4b4b4b;
}



/* TOOLTIPS */
#s-m-t-tooltip {
display: block;
margin: 15px;
color:var(--title);
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 / TAGS LINKS HOVER COLOR*/
color:var(--hover);}


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


/*FIRST BOX :: ABOUT ME*/
.about {
position:fixed;
height:100px;
width:400px;
text-align:center;
border-top-left-radius:8px;
border-top-right-radius:8px;
background:var(--titlebackgrounds);}


/* MAIN TITLE */
.abouttitle {
position:fixed;
z-index:999999;
letter-spacing:1.3px;
text-transform:uppercase;
text-align:center;
width:400px;
font:bold 2em 'Poppins', sans-serif;
font-weight:600;
color:var(--title);
line-height:94px;}


/* BIO/ABOUT ME BOX CONTAINER */
.biobox {
position:fixed;
margin-left:280px;
margin-top:100px;
width:120px;
height:120px;}

/*BIO/ABOUT ME BOX ICON IMAGE*/
.biobox img {
position:fixed;
z-index:999999;
border-bottom-right-radius:8px;
width:120px;
height:120px;}


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

/* PROFILE BOX TITLE LABELS */
tt {
text-transform:uppercase;
text-align:left;
letter-spacing:1.3px;
font-weight:700;
font:bold 0.90em 'Poppins', sans-serif;
color:var(--text);}



/*NAVIGATION LINK BOX CONTAINER */
.linkbox {
position:fixed;
z-index:999;
margin-left:440px;
width:450px;
height:220px;
border-radius:8px;
border:1px solid var(--borders);
background:var(--boxes);}


/*--- CUSTOM NAVIGATION LINKS CONTAINER ---*/
.links{
position:fixed;
width:550px;
z-index:9999999999;
text-align:left;
color:var(--text);
margin-top:-15px;
margin-left:40px;}

/*--- CUSTOM NAVIGATION LINKS STYLING ---*/
.links a {
z-index:9999999999;
font:0.90em 'Poppins', sans-serif;
font-weight:600;
width:150px;
letter-spacing:1px;
text-transform:uppercase;
text-align:left;
color:var(--text);
display:block;
padding-left:66px;
padding-top:38px;}

/*--- CUSTOM NAVIGATION LINKS LINK STYLE CONTAINER ---*/
.links li {
z-index:9999999999;
margin-left:10px;
float:left;
display:block;}

/*--- CUSTOM NAVIGATION LINKS HOVER ---*/
.links a:hover {
z-index:9999999999;
color:{color:Hover};
-webkit-filter: blur(1px);
filter: blur(1px);}

/*--- CUSTOM NAVIGATION LINKS SUBTITLE ---*/
.links span {
z-index:9999999999;
font-style:italic;
letter-spacing:1.3px;
color:var(--text);
font:0.88em 'Poppins', sans-serif;}


/*--- CUSTOM NAVIGATION LINKS ICONS CONTANIER ---*/
.links ic {
position:absolute;
width:100px;
height:100px;
float:left;}


/*--- CUSTOM NAVIGATION LINKS ICONS STYLE ---*/
.links i {
position:absolute;
z-index:99999999999999999999999!important;
margin-left:-10px;
margin-top:30px;
border-radius:100px;
width:40px;
height:40px;
font-size:1.8em;
text-align:center;
line-height:40px;
color:var(--accent);
border:4px solid var(--background);
background:var(--boxes);}


/*--- CUSTOM LINKS NAVIGATION BORDER LEFT ---*/
.bdd {
position:fixed;
width:1px;
height:150px;
margin-left:65px;
margin-top:50px;
background-color:var(--background);}


/*--- CUSTOM LINKS NAVIGATION BORDER RIGHT ---*/
.bddd {
position:fixed;
width:1px;
height:150px;
margin-left:290px;
margin-top:50px;
background-color:var(--background);}


/*--- SKILLS BOX CONTAINER ---*/
.skillbox {
position:fixed;
z-index:99999;
margin-left:0px;
margin-top:280px;
width:280px;
height:200px;
border-radius:8px;
border:1px solid var(--borders);
background:var(--boxes);}


/*--- SKILLS STYLING ---*/
.skills {
text-align: right;
margin-left:10px;
padding-top:1px;
Padding-bottom:1px;
padding-right:4px;
border-radius:3px;
margin-bottom:10px;
color:var(--title);}


/*--- SKILLS STYLING CHANGE THE NUMBERS HERE AND CHANGE THE NUMBERS IN THE LOWER PART OF THE HTML AS WELL TO MATCH  ---*/
.html {width: 90%; background-color:var(--titlebackgrounds);}
.ps {width: 70%; background-color:var(--titlebackgrounds);}
.js {width: 45%; background-color:var(--titlebackgrounds);}



/* --- SKILLS TITLES ---*/
st {
font-weight:600;
padding-left:10px;
font:bold 1em 'Poppins', sans-serif;
letter-spacing:1px;}


/* --- COLOR PALETTE CONTAINER ---*/
.palettebox {
position:fixed;
z-index:99999;
margin-left:312px;
margin-top:280px;
width:280px;
height:200px;
border-radius:8px;
border:1px solid var(--borders);
background:var(--boxes);}

/* --- PALETTE COLOR TITLES ---*/
pt {
width:45px;
text-align:center;
font:bold 0.90em 'Poppins', sans-serif;
line-height:130px;}


/* --- COLOR PALETTE ONE ---*/
.paletteone {
position:fixed;
margin-left:10px;
margin-top:10px;
width:55px;
height:55px;
border-radius:100px;
background:var(--paletteone);}

/* --- COLOR PALETTE TWO ---*/
.palettetwo {
position:fixed;
margin-left:110px;
margin-top:10px;
width:55px;
height:55px;
border-radius:100px;
background:var(--palettetwo);}

/* --- COLOR PALETTE THREE ---*/
.palettethree {
position:fixed;
margin-left:210px;
margin-top:10px;
width:55px;
height:55px;
border-radius:100px;
background:var(--palettethree);}

/* --- COLOR PALETTE FOUR ---*/
.palettefour {
position:fixed;
margin-left:10px;
margin-top:90px;
width:55px;
height:55px;
border-radius:100px;
background:var(--palettefour);}


/* --- COLOR PALETTE FIVE ---*/
.palettefive {
position:fixed;
margin-left:110px;
margin-top:90px;
width:55px;
height:55px;
border-radius:100px;
background:var(--palettefive);}


/* --- COLOR PALETTE SIX ---*/
.palettesix {
position:fixed;
margin-left:210px;
margin-top:90px;
width:55px;
height:55px;
border-radius:100px;
background:var(--palettesix);}


/*--- TAGS BOX CONTAINER ---*/
.tagsbox {
position:fixed;
z-index:99999;
margin-left:620px;
margin-top:280px;
width:280px;
height:200px;
border-radius:8px;
border:1px solid var(--borders);
background:var(--boxes);}



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

.tags {
margin-left:5px;
margin-top:10px;
width:280px;}

.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(--text);}


/*--- BOX TITLES / LABELS  ---*/
.boxtitles {
width:70px;
padding:8px;
text-align:center;
margin-top:0px;
margin-left:0px;
letter-spacing:1px;
font:1em 'Poppins', sans-serif;
border-top-left-radius:8px;
border-bottom-right-radius:8px;
color:var(--title);
background:var(--titlebackgrounds);}


{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">





<div class="about">
<div class="abouttitle">BITTERSWEET</div>
</div>





<div class="biobox">
<img src="https://i.imgur.com/VQa5f7W.jpg">
</div>

<div class="profile">
<tt>Name</tt>&nbsp;&nbsp; Mark Lee <br>
<tt>Bday</tt> &nbsp;&nbsp; 09 / 02 / 1999 <br>
<tt>Zodiac</tt> &nbsp;&nbsp; Leo <br>
<tt>Residence</tt>&nbsp;&nbsp; Seoul, Korea <br>
<tt>Hobbies:</tt> &nbsp;&nbsp; Rap, Sing, Dance
</div>


<div class="linkbox">

<div class="bdd"></div>
<div class="bddd"></div>
<div class="links" style="list-style-type:none;">
<li> <ic> <i class="material-icons">timeline</i> </ic> <a href="/ask" title="ask"> Ask <br><span> Inbox Me </span></a> </li>
<li> <ic> <i class="material-icons">timeline</i> </ic> <a href="/archive" title="link 2 title"> Archive <br><span> Archvies </span></a> </li>
<li> <ic> <i class="material-icons">timeline</i> </ic> <a href="/" title="link 3 title"> Link Three <br><span> Link Three </span></a> </li>
<li> <ic> <i class="material-icons">timeline</i> </ic> <a href="/" title="link 4 title"> Link Four <br><span> Link Four </span></a> </li>
<li> <ic> <i class="material-icons">timeline</i> </ic> <a href="/" title="link 5 title"> Link Five <br><span> Link Five </span></a> </li>
<li> <ic> <i class="material-icons">timeline</i> </ic> <a href="https://solocodes.tumblr.com" title="theme credit title"> Theme <br><span> Theme Credit </span></a> </li>
</div>
</div>




<div class="skillbox">
<div class="boxtitles">SKILLS</div>
<br>
<st>HTML</st>
<div class="skills html">90%</div>

<st>PHOTOSHOP</st>
<div class="skills ps">70%</div>

<st>JAVASCRIPT</st>
<div class="skills js">45%</div>
</div>



<div class="palettebox">
<div class="boxtitles">PALETTE</div>

<div class="paletteone"><pt>#0d0d0d</pt></div>
<div class="palettetwo"><pt>#c93643</pt></div>
<div class="palettethree"><pt>#c4a470</pt></div>
<div class="palettefour"><pt>#a3a3a2</pt></div>
<div class="palettefive"><pt>#847468</pt></div>
<div class="palettesix"><pt>#4b4b4b</pt></div>
</div>





<div class="tagsbox">
<div class="boxtitles">TAGS</div>
<div class="tags">
<br>
<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>