ControlC ControlC · Pastebin
Login Register

Page: Wander [About Me]

Pasted: Dec 15, 2019, 5:14:50 pm · Views: 627
<!------------------------------------
____ ___ _ ___ ___ ___ ___ ___ ___
/ __|/ _ \| | / _ \ / __/ _ \| \| __/ __|
\__ \ (_) | |_| (_) | | (_| (_) | |) | _|\__ \r
|___/\___/|____\___/ \___\___/|___/|___|___/


**** PAGE: WANDER ****
Page Updated and Slightly Re-designed in November 2020

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

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


<!--- GOOGLE MATERIAL & 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>

<!----- 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:#2bafc8;
--text:#b5b5b5;
--title:#fff;
}



/* TOOLTIPS */
#s-m-t-tooltip {
display: block;
margin: 15px;
color:var(--boxes);
background:var(--accent);
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 // HIDDEN // DO NOT TOUCH */
iframe.tmblr-iframe {
display:none;
z-index:99999999!important;
top:8px!important;
right:50px!important;
opacity:0;
transition: all 0.3s ease 0s;
filter:invert(1) contrast(150%);
-webkit-filter:invert(1) contrast(150%);
-o-filter:invert(1) contrast(150%);
-moz-filter:invert(1) contrast(150%);
-ms-filter:invert(1) contrast(150%);
transform:scale(0.65);
transform-origin:100% 0;
-webkit-transform:scale(0.65);
-webkit-transform-origin:100% 0;
-o-transform:scale(0.65);
-o-transform-origin:100% 0;
-moz-transform:scale(0.65);
-moz-transform-origin:100% 0;
-ms-transform:scale(0.65);
-ms-transform-origin:100% 0;}


/* MAIN BODY/HTML CONTAINER */
body, html {
height: 100%;
margin: 0;
font-size:12px;
font-family:{select:Body Font};
overflow-x:hidden;
background-image:url('{image:Background}');
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:870px;
height:400px;
top:calc(50% - 200px);
left:calc(49% - 450px);}

/*FIRST BOX :: PROFILE CONTAINER*/
.profile {
position:fixed;
width:290px;
height:270px;
border-radius:5px;
border:1px solid var(--borders);
background:var(--boxes);}

.pinfo {
position:fixed;
margin-top:60px;
margin-left:30px;
width:290px;
text-align:left;
letter-spacing:1px;
font:0.85em 'Poppins', sans-serif;
line-height:25px;
color:var(--text);}


/* 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);}


/*TOP SOLID COLOR BAR :: PROFILE SECTION*/
.bar1 {
position:fixed;
z-index:999999;
margin-left:20px;
margin-top:20px;
width:250px;
height:20px;
background:var(--borders);}

/*BOTTOM SOLID COLOR BAR :: PROFILE SECTION*/
.bar2 {
position:fixed;
z-index:999999;
margin-left:20px;
margin-top:230px;
width:250px;
height:20px;
background:var(--borders);}

/*SOLID TOP ACCENT COLOR BAR :: PROFILE SECTION*/
.bar3 {
position:fixed;
z-index:999999;
margin-left:20px;
margin-top:20px;
width:100px;
height:20px;
background:var(--accent);}


/* SOLID BOTTOM ACCENT COLOR BAR :: PROFILE SECTION*/
.bar4 {
position:fixed;
z-index:999999;
margin-left:170px;
margin-top:230px;
width:100px;
height:20px;
background:var(--accent);}


/*ICON AND TITLE BOX CONTAINER*/
.titlebox {
position:fixed;
z-index:999999;
margin-top:300px;
width:290px;
height:100px;
border-radius:5px;
background:var(--boxes);}


/*ICON IMAGE*/
.titlebox img {
position:fixed;
z-index:999999;
margin-top:0px;
margin-left:0px;
width:100px;
height:100px;}

/*ICON AND TITLE BOX :: TITLE*/
.abouttitle {
position:fixed;
z-index:999999;
margin-left:120px;
margin-top:25px;
font-weight:600px;
letter-spacing:1.2px;
text-transform:uppercase;
font:bold 1.6em 'Poppins', sans-serif;
color:var(--text);}

/*ICON AND TITLE BOX :: MAIN LINKS/NAVIGATION */
.main {
position:fixed;
margin-top:55px;
margin-left:122px;
text-align:left;
width:190px;
color:var(--text);}

.main a {
width:auto;
letter-spacing:1px;
text-align:left;
text-transform:uppercase;
font-weight:400;
font:bold 0.80em 'Poppins', sans-serif;
color:var(--text);}

/*COLOR BLOCK :: TITLE */
.title {
position:fixed;
z-index:999999;
margin-left:320px;
width:290px;
height:180px;
font-weight:600;
text-transform:uppercase;
text-align:center;
letter-spacing:4px;
font:bold 4em 'Poppins', sans-serif;
line-height:170px;
border-radius:5px;
color:var(--accent);
background:var(--accent);
text-shadow:
-1px -1px 0 var(--title),
1px -1px 0 var(--title),
-1px 1px 0 var(--title),
1px 1px 0 var(--title);}

/*SOCIAL MEDIA ICONS CONTAINER/BOX */
.socialbox {
position:fixed;
z-index:999999;
margin-left:320px;
margin-top:220px;
width:290px;
height:180px;
line-height:18px;
font-weight:600;
text-transform:uppercase;
text-align:center;
letter-spacing:4px;
font:0.80em 'Poppins', sans-serif;
border-radius:5px;
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:8px;
font-size:4em;
color:var(--accent);
background:var(--boxes);}


/*NAVIGATION LINK BOX CONTAINER */
.linkbox {
position:fixed;
z-index:99;
margin-left:640px;
width:230px;
height:400px;
border-radius:5px;
border:1px solid var(--borders);
background:var(--boxes);}


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

/*--- 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:56px;}

/*--- 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:48px;
border-radius:100px;
width:40px;
height:40px;
font-size:1.8em;
text-align:center;
line-height:40px;
color:var(--accent);
border:5px solid var(--background);
background:var(--boxes);}

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

{CustomCSS}
</style>

</head>
<body>

<div class="box">
<div class="profile">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>

<div class="pinfo">
<tt>Name:</tt>&nbsp;&nbsp; Jennie Kim <br>
<tt>Bday:</tt> &nbsp;&nbsp; January 16, 1996 <br>
<tt>Zodiac:</tt> &nbsp;&nbsp; Capicorn <br>
<tt>Residence:</tt>&nbsp;&nbsp; Seoul, South Korea <br>
<tt>Pronouns:</tt> &nbsp;&nbsp; She / Her <br>
<tt>Hobbies:</tt> &nbsp;&nbsp; Sing, Rap, Dance <br>
</div>
</div>

<div class="titlebox">
<div class="titleboximage"><img src="https://i.imgur.com/aNTdGC7.jpg"></div>
<div class="abouttitle">Wanderlust</div>
<div class="main">
<a href="/" title="return home">home</a> &middot;
<a href="/ask" title="ask">ask</a> &middot;
<a href="/archive" title="archive">past</a> &middot;
<a href="https://solocodes.tumblr.com" title="theme credit">theme</a>
</div>
</div>


<div class="title">ABOUT</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>


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

<div class="linkbox">

<div class="bdd"></div>
<div class="links" style="list-style-type:none;">
<li> <ic> <i class="material-icons">timeline</i> </ic> <a href="/" title="link 1 title"> Link One <br><span> Link One </span></a> </li>
<li> <ic> <i class="material-icons">timeline</i> </ic> <a href="/" title="link 2 title"> Link Two <br><span> Link Two </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>
</div>
</div>

</div>

</body>
</html>
Create new version