Page: Ludens [About Me]

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


 **** PAGE: Ludens ****

 .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>Ludens</title>

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


<!--- GOOGLE MATERIAL, 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><link rel="stylesheet" href="https://unpkg.com/@icon/dripicons/dripicons.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">


<style>


/* COLOR THE PAGE HERE */

:root {
  --background:#f5f5f5;
  --boxes:#fff;
  --accentone:#B997CE;
  --accenttwo:#FFA0AF;
  --accentthree:#FFD473;
  --text:#000;
  --title:#000;
}



/* TOOLTIPS */
.tippy-tooltip.custom-theme {
background-color:var(--text);
color:var(--boxes);
text-align:center;
font-family:'Poppins', sans-serif;
font-weight:bold;
text-transform:uppercase;
letter-spacing:1px;
font-size:0.90em;
box-shadow: 7px 7px 7px -9px rgba(000,000,000, 0.45);}

.tippy-tooltip.custom-theme .tippy-svg-arrow {
fill:var(--text);}


iframe.tmblr-iframe {
display:none;
opacity:0;
z-index:999;
right:80px;
top:60px;
position:fixed;
width:0;
padding-right:0px;
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;}

/* 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;
/*CHANGE THE MAIN BACKGROUND COLOR*/
background-color:#f5f5f5;}


/* ENTRY LINKS / BODY LINKS  */
a:link, a:active, a:visited {
clear:both;
z-index:2!Important;
text-decoration:none;
/*MAIN LINKS COLORS*/
color:var(--text);}

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




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

/* ALL BOX TITLES */
.titles {
position:fixed;
margin-left:40px;
margin-top:216px;
font-weight:700;
letter-spacing:1.1px;
font:bold 1em 'Poppins', sans-serif;
text-transform:uppercase;
padding-bottom:5px;
border-bottom:2px solid var(--background);
color:var(--titles);}

/* PROFILE BOX CONTAINER */
.boxone {
position:fixed;
margin-top:0;
margin-left:0px;
width:280px;
height:400px;
border-radius:5px;
border-bottom:5px solid var(--accentone);
background:var(--boxes);}


/* PROFILE BOX CONTAINER */
.boxone img  {
position:fixed;
margin-top:0px;
margin-left:0px;
width:280px;
height:200px;
border-top-left-radius:5px;
border-top-right-radius:5px;
background:#B997CE;}

/* PROFILE INFORMATION */
.pinfo {
position:absolute;
z-index:999999;
margin-top:260px;
margin-left:40px;
text-align:left;
font-weight:600;
letter-spacing:1.1px;
font:0.85em 'Poppins', sans-serif;
text-transform:uppercase;
line-height:20px;}

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


/* PROFILE BOX #1 CONTAINER */
.boxone {
position:fixed;
margin-top:0;
margin-left:0px;
width:280px;
height:400px;
border-radius:5px;
box-shadow: 0px 10px 10px -9px rgba(000,000,000, 0.45);
border-bottom:5px solid var(--accentone);
background:var(--boxes);}


/* PROFILE BOX #1 CONTAINER  */
.boxone img  {
position:fixed;
margin-top:0px;
margin-left:0px;
width:280px;
height:200px;
border-top-left-radius:5px;
border-top-right-radius:5px;}


/*LINK BOX #2 CONTAINER */
.boxtwo {
position:fixed;
margin-top:0;
margin-left:320px;
width:280px;
height:400px;
border-radius:5px;
box-shadow: 0px 10px 10px -9px rgba(000,000,000, 0.45);
border-bottom:5px solid var(--accenttwo);
background:var(--boxes);}

/*LINK BOX #2 CONTAINER */
.boxtwo img  {
position:fixed;
margin-top:0px;
margin-left:0px;
width:280px;
height:200px;
border-top-left-radius:5px;
border-top-right-radius:5px;}

/* CUSTOM NAVIGATION LINKS CONTAINER */
.links
{position:fixed;
width:260px;
z-index:99999;
text-align:left;
color:var(--text);
margin-left:22px;
margin-top:240px;}

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

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

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

/* CUSTOM NAVIGATION LINKS HOVER */
.links a:hover {
color:{color:Hover};}

/* CUSTOM NAVIGATION LINKS ICONS CONTANIER */
.links ic {
position:absolute;
margin-top:25px;
margin-left:2px;
float:left;
font:bold 1em 'Poppins', sans-serif;
font-weight:800;
color:var(--accenttwo);}


/*LINK BOX #3 CONTAINER */
.boxthree {
position:fixed;
margin-top:0;
margin-left:320px;
width:280px;
height:400px;
border-radius:5px;
box-shadow: 0px 10px 10px -9px rgba(000,000,000, 0.45);
border-bottom:5px solid var(--accentthree);
background:var(--boxes);}

/*LINK BOX #3 CONTAINER */
.boxthree img  {
position:fixed;
margin-top:0px;
margin-left:0px;
width:280px;
height:200px;
border-top-left-radius:5px;
border-top-right-radius:5px;}

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

.socials a {
z-index:999999;
padding:4px;
font-size:2em;
color:var(--text);
background:var(--boxes);}

/*GO BACK BUTTON CONTAINER */
.back {
position:fixed;
z-index:999999999999!important;
text-align:center;
margin-left:410px;
margin-top:450px;}

/*GO BACK BUTTON STYLINE */
.back a {
font:1.4em 'Poppins', sans-serif;
padding:10px;
border-radius:7px;
height:10px;
font-weight:800;
text-transform:uppercase;
box-shadow: 5px 10px 10px -9px rgba(000,000,000, 0.45);
color:var(--text);
background:var(--boxes);}

.back a:hover {
color:var(--boxes);
background:var(--text);}

/*GO BACK BUTTON ICON */
.back i {
position:relative;
top:3px;}



{CustomCSS}
</style>

</head>
<body>


<div class="box">

<div class="back"><a href="/" title="return home">
<i class="dripicons dripicons-reply"></i>
Go back</a></div>


<div class="boxone">
<div class="boxoneimage"><img src="https://i.imgur.com/vXPNuMl.png"><div>

<div class="titles">Profile</div>

<div class="pinfo">
<tt>Name:</tt>&nbsp;&nbsp; KIM JONGHYUN <br>
<tt>Bday:</tt> &nbsp;&nbsp; April 8, 1990 <br>
<tt>Zodiac:</tt> &nbsp;&nbsp; Aries <br>
<tt>Residence:</tt>&nbsp;&nbsp; SEOUL, SOUTH KOREA <br>
<tt>Pronouns:</tt> &nbsp;&nbsp; HE/HIM <br>
</div>
</div>



<div class="boxtwo">
<div class="boxtwoimage"><img src="https://i.imgur.com/z4I95OO.png"><div>

<div class="titles">Menu</div>

<div class="links" style="list-style-type:none;">

<li> <ic> 01 </ic> <a href="/" title="Link One"> Link One <br><span> Subtitle 1 </span></a> </li>

<li> <ic> 02 </ic> <a href="/" title="Link Two"> Link Two <br><span> Subtitle 2 </span></a> </li>

<li> <ic> 03 </ic> <a href="/" title="Link Three"> Link Three <br><span> Subtitle 3 </span></a> </li>

<li> <ic> 04 </ic> <a href="/" title="Link Four"> Link Four <br><span> Subtitle 4 </span></a> </li>
</div>
</div>

<div class="boxthree">
<div class="boxthreeimage"><img src="https://i.imgur.com/1VcMtYK.png"><div>

<div class="titles">Socials</div>

<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>
<a href="/" title="pinterest"><i class="fab fa-behance"></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>
<a href="/" title="pinterest"><i class="fab fa-deviantart"></i></a>
</div>
</div>


</div>

</body>

<!--- TOOLTIPS --->

<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />

<script>
tippy('a[title]', {
theme: 'custom',
arrow: tippy.roundArrow,
zIndex: 9999999999,
maxWidth: 300,

content(reference) {
const title = reference.getAttribute('title');
reference.removeAttribute('title');
return title;
},
 });
</script>

</html>