- Share this text:
Untitled - posted by guest on 9th September 2020 09:19:26 PM
<!-----------------------------------------------------------------------
About Page [07]: Rogue
Made by glenthemes
Initial release: 2018/11/07
Last updated: 2019/02/02
TERMS OF USE:
1) Do not remove the theme credit.
2) Do not repost/redistribute my themes.
3) Do not take parts of the code and use it as your own.
4) Do not use my themes as a base code.
5) Do not mix my themes together.
Please stick to the Terms! Thank you! :D
Here is the help guide!
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
https://glenthemes.tumblr.com/rogue
------------------------------------------------------------------------>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<!--------------------JAVASCRIPTS-------------------->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:25,
tip_fade_speed:60,
attribute:"title"
});
});
})(jQuery);
</script>
<link href="https://fonts.googleapis.com/css?family=Karla|Exo|Rationale|Barlow+Condensed:400i,500i" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>
<!-------------------------------------------------------------------->
<style type="text/css">
/*--------------------TOOLTIPS--------------------*/
#s-m-t-tooltip {
padding: 5px 9px;
margin: 20px;
background-color:#231131; /* tooltip background color */
border:1px solid #0a3c51; /* tooltip border color */
font-family: exo;
font-size: calc(12px - 3px);
letter-spacing: 1px;
text-transform: uppercase;
color: #c3d4d7; /* tooltip text color */
z-index:9999!important;
max-width:300px;
}
/*--------------------TUMBLR CONTROLS--------------------*/
iframe#tumblr_controls, .iframe-controls--desktop {
top:5px!important;
right:5px!important;
ixed!important;
opacity:0.4;
transform:scale(0.8,0.8);
-webkit-transform:scale(0.8,0.8);
-moz-transform:scale(0.8,0.8);
-o-transform:scale(0.8,0.8);
transform-origin:100% 0;
z-index:999999!important;
transition:0.15s ease-in-out;
}
iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
opacity:1;
}
/*--------------------TEXT HIGHLIGHT--------------------*/
::selection {
background:#000;
color:#74C5BC;
}
::-moz-selection {
background:#000;
color:#74C5BC;
}
/*--------------------BASICS--------------------*/
body {
background:#100b21 url('https://universe-meeps.leagueoflegends.com/v1/assets/images/kda/kda-splash-background.jpg');
;){kind=link}
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
color:#888;
cursor:normal;
font-family:exo;
line-height:1.6em;
font-size:12px;
text-align:left;
overflow:hidden;
}
blockquote {
padding-left:10px;
margin-left:5px;
border-left:1px solid;
border-color:#aaa;
margin:10px;
}
a, .th {
text-decoration:none;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
}
a {
color:#c27ce2; /* links color */
}
b, strong {
font-weight:bold;
color:#74C5BC; /* bolded text color */
}
i, em {color:#75bac7;} /* italicized text color */
pre, code {
white-space:pre-wrap;
display:block;
}
hr {
width:70%;
border-width:0px;
height:1px;
background-color:#bbb;
}
/*--------------------CONTAINER--------------------*/
#bigwrap {
ixed;
margin:0 auto;
top:0;left:0;right:0;
width:max-content;
width:-moz-max-content;
height:100vh;
display:table;
}
#bigmid {
display:table-cell;
vertical-align:middle;
}
#box {
width:inherit;
height:455px;
padding:25px;
background-color:#11081f; /* main container box background color */
border:1px solid #0a3c51; /* main container box border */
}
/*--------------------TOP SECTION--------------------*/
#topflex {display:flex;}
#topflex > div {
align-self:center;
-webkit-align-self:center;
}
.toptitle {
font-family:rationale;
font-size:17px;
text-transform:uppercase;
letter-spacing:3px;
color:#92e9e5; /* top left title color */
line-height:1.2em;
}
.topbar {
flex:1;
margin:auto 10px;
width:100%;
height:1px;
background-image:linear-gradient(to right,transparent,#42d1be,#42d1be,transparent); /* top bar gradient */
}
/* top right navigation links */
.topnav {display:flex;}
.topnav a {margin:0 5px;}
.topnav a:first-child {margin-left:0px;}
.topnav a:last-child {margin-right:0px;}
.topnav .th {
padding:10px;
font-size:12px;
background-color:#2a143a; /* top right navigation icons background */
border-radius:15%;
color:#d9bcf6; /* top right navigation icons color */
}
.topnav .th:hover {
background-color:#84fae2; /* top right nav icons background hover */
color:#111; /* top right nav icons color hover */
}
/*--------------------MAIN CONTENT--------------------*/
#mainflex {
margin-top:25px;
width:inherit;
height:calc(100% - 54px);
display:flex;
}
/*--------------------MAIN: LEFT--------------------*/
.leftcont {
width:270px;
height:400px;
align-self:center;
-webkit-align-self:center;
}
.sbimg {
width:calc(100% - 16px);
height:calc(100% - 16px);
padding:8px;
background-color:#2b153b; /* sidebar image background / padding color */
}
/*-------MUSIC PLAYER-------*/
.music-cont {
bsolute;
margin-top:calc(-42px - 8px);
margin-left:8px;
width:calc(270px - 32px - 16px);
padding:12px 16px;
background:rgba(17,8,23,0.7); /* music player background color */
/* use color-hex.com to convert hex codes to rgb values */
/* the 'a' in 'rgba' is the opacity */
}
#glenplayer02 {display:flex;}
#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}
.music-controls {
user-select:none;
-webkit-user-select:none;
cursor:pointer;
}
.playy, .pausee {color:#becfd2;} /* color of play & pause buttons */
.playy {font-size:13px;}
.pausee {
display:none;
margin-right:2.3px;
}
.sonata {
margin-left:10px;
color:#becfd2; /* color of music note symbol */
}
.labeltext {
margin-left:8px;
font-family:barlow condensed;
text-transform:uppercase;
letter-spacing:2px;
color:#becfd2; /* color of song title */
}
/*--------------------MAIN: RIGHT--------------------*/
.rightcont {
margin-left:25px;
width:430px;
}
/* small title */
.smalltit {
font-family:barlow condensed;
font-weight:400;
font-size:12px;
text-transform:uppercase;
letter-spacing:2px;
color:#74C5BC; /* small title text color */
}
.titflex {
display:flex;
margin-top:7px;
}
/* big title */
.bigtit {
font-family:barlow condensed;
font-weight:600;
font-size:28px;
text-transform:uppercase;
letter-spacing:2.5px;
color:#74C5BC; /* big title text color */
}
/* flashing text input underline */
.input {
align-self:flex-end;
-webkit-align-self:flex-end;
margin-bottom:-2px;
margin-left:2px;
width:13px;
height:2px;
background-color:#74C5BC; /* flashing input line color */
animation: flashing 1s step-start 0s infinite;
-webkit-animation: flashing 1s step-start 0s infinite;
-moz-animation: flashing 1s step-start 0s infinite;
}
@keyframes flashing {
50% {opacity:0;}
}
@-webkit-keyframes flashing {
50% {opacity:0;}
}
@-moz-keyframes flashing {
50% {opacity:0;}
}
/* quote box */
#quotecont {
margin-top:25px;
width:100%;
display:flex;
}
.quote {
width:calc(320px - 25px);
padding:14px 18px;
border-left:1px solid #42d1be; /* quote box border color */
font-family:rationale;
font-size:12px;
text-transform:uppercase;
letter-spacing:1.5px;
color:#d2e5e8; /* quote text color */
text-align:center;
}
.q-topleft, .q-botleft, .q-topright, .q-right1, .q-right2, .q-botright, .arrow1, .arrow2 {
background:#42d1be; /* quote box border color */
}
.q-right1, .q-right2 {height:20px;} /* height of quote borders on right */
.arrow1, .arrow2 {height:10px;} /* quote arrow size */
/* pls do not touch the sections below unless you know what you're doing */
.quote p:last-child {margin-bottom:0px;}
.q-topleft {
bsolute;
width:10px;
height:1px;
}
.q-botleft {
margin-top:-1px;
width:10px;
height:1px;
}
.q-topright {
float:right;
width:10px;
height:1px;
}
.yakisoba {display:flex;}
.q-right1 {width:1px;}
.q-right2 {
bsolute;
align-self:flex-end;
-webkit-align-self:flex-end;
width:1px;
}
.q-botright {
float:right;
margin-top:-1px;
width:10px;
height:1px;
}
.kimchi {display:flex;}
.arrow1 {
align-self:flex-start;
-webkit-align-self:flex-start;
margin-left:-1px;
margin-top:19.5px;
width:1px;
transform-origin:100% 0;
transform:rotate(-68deg);
-webkit-transform:rotate(-68deg);
-moz-transform:rotate(-68deg);
-o-transform:rotate(-68deg);
}
.arrow2 {
bsolute;
align-self:flex-end;
-webkit-align-self:flex-end;
margin-left:8px;
margin-top:-12.5px;
width:1px;
transform-origin:100% 0;
transform:rotate(70deg);
-webkit-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-o-transform:rotate(70deg);
}
/* quote icon */
.q-icon {
float:right;
margin-top:calc(-64px - 5px + 9px);
width:64px;
height:64px;
padding:5px;
background-color:#2B153B; /* quote icon image background / padding color */
border-radius:10%;
}
#bioflex {
margin-top:25px;
height:259px;
display:flex;
}
#bioflex > div {
align-self:center;
-webkit-align-self:center;
}
#mcnugget {width:200px;}
/* stats box */
#statsbox {
height:max-content;
height:-moz-max-content;
padding:14px 15px;
border:1px solid #574c63; /* statistics box border */
font-family:exo;
font-size:11px;
color:#c3d4d7; /* statistics normal text color */
}
#statsbox name {
margin-right:5px;
font-family:rationale;
font-size:13px;
text-transform:uppercase;
letter-spacing:1.5px;
color:#74C5BC; /* statistics name color */
}
/* custom links */
#customlinks {
margin-top:calc(25px - 8px);
margin-left:-2.5px;
width:calc(100% + 10px);
}
#customlinks a {
display:inline-block;
margin:4px 2.7px;
width:80px;
padding:4px 8px;
background-color:#2a143a; /* custom links background color */
font-family:rationale;
font-size:10px;
text-transform:uppercase;
letter-spacing:1.3px;
color:#d9bcf6; /* custom links color */
text-align:center;
}
#customlinks a:hover {
background-color:#84fae2; /* custom links background color on hover */
color:#111; /* custom links color on hover */
}
/* biography box section */
#biosect {
margin-top:15px;
margin-left:25px;
width:212px;
}
.biotit {
padding:8px 10px;
background-color:#2a143a; /* biography title background color */
font-family:barlow condensed;
font-weight:400;
text-transform:uppercase;
letter-spacing:3px;
color:#d9bcf6; /* biography title text color */
text-align:center;
}
.bio {
margin-top:10px;
padding:12px 15px;
border:1px solid #574c63; /* biography text box border */
font-family:exo;
font-size:11px;
color:#c3d4d7; /* biography text color */
line-height:1.8em;
max-height:173px;
overflow:auto;
}
.bio p:last-child {margin-bottom:0px;}
.bio::-webkit-scrollbar {
height:13px;
width:13px;
background-color:#11081F; /* biography scrollbar background */
}
.bio::-webkit-scrollbar-thumb {
background-color:#716381; /* biography scrollbar track */
border:6px solid #11081F; /* biography scrollbar background */
}
.bio::-webkit-scrollbar-track {
background-color:#11081F; /* biography scrollbar background */
}
</style>
</head>
<body>
<div id="bigwrap">
<div id="bigmid">
<div id="box">
<div id="topflex">
<!----TOP BAR {TOP LEFT} TITLE---->
<div class="toptitle">≥ your title here</div>
<div class="topbar"></div>
<!----TOP BAR (TOP RIGHT) NAVIGATION LINKS---->
<!--to change icons: go to the following site-->
<!--scroll down to "filters" and pick what you like-->
<!--//themehive.tumblr.com/honeybee-->
<div class="topnav">
<a href="/" title="return"><span class="th th-home-o"></span></a>
<a href="/ask" title="contact"><span class="th th-envelope-o"></span></a>
<a href="/archive" title="archive"><span class="th th-box-1-o"></span></a>
<!--PLEASE DO NOT REMOVE THE CREDIT! THANK YOU :)-->
<a href="//glenthemes.tumblr.com" title="page by glenthemes"><span class="th th-code"></span></a>
</div><!--topnav--><!--do not delete this line-->
</div><!--topflex--><!--do not delete this line-->
<div id="mainflex">
<div class="leftcont">
<!----SIDEBAR IMAGE---->
<!--put the url between the quotation marks of src=""-->
<img class="sbimg" src="https://66.media.tumblr.com/357d9fe49b9650a0cd5763904a09b53a/tumblr_phu4smLqbl1qg2f5co1_400.png">
<!----MUSIC PLAYER---->
<div class="music-cont">
<div id="glenplayer02">
<div class="music-controls" >
<div class="playy">►</div>
<div class="pausee">❚❚</div>
</div>
<div class="sonata">♫</div>
<!--MUSIC TITLE-->
<div class="labeltext">K/DA — POP/STARS</div>
</div><!--end music player--><!--do not delete this line-->
<!--MUSIC FILE URL-->
<!--put the url between the quotation marks of src=""-->
<!--dropbox help: //glenthemes.tumblr.com/post/164215965424-->
<audio id="tune" src="//dl.dropbox.com/s/rua34en7muqmj3l/POPSTARS.mp3" type="audio"></audio>
</div><!--music-cont--><!--do not delete this line-->
</div><!--leftcont--><!--do not delete this line-->
<div class="rightcont">
<!----BIOGRAPHY AREA: SMALL TITLE-->
<div class="smalltit">a small title here</div>
<div class="titflex">
<!----BIOGRAPHY AREA: BIG TITLE-->
<div class="bigtit">≥ a larger title here</div>
<div class="input"></div>
</div><!--titflex-->
<div id="quotecont">
<div class="takoyaki">
<div class="q-topleft"></div>
<div class="q-topright"></div>
<!----QUOTE---->
<!--make it 1 line only or else it will fuck up!-->
<div class="quote">a quote here - 1 LINE ONLY PLEASE</div>
<div class="q-botleft"></div>
<div class="q-botright"></div>
</div><!--takoyaki-->
<div class="yakisoba">
<div class="q-right1"></div>
<div class="q-right2"></div>
</div><!--yakisoba-->
<div class="kimchi">
<div class="arrow1"></div>
<div class="arrow2"></div>
</div><!--kimchi-->
</div><!--quotecont-->
<!----QUOTE BOX ICON IMAGE---->
<!--put the url between the quotation marks of src=""-->
<img class="q-icon" src="https://78.media.tumblr.com/669b665392c5dcad9e4641d00c370092/tumblr_p3m4ucn8uF1qg2f5co7_r1_250.png">
<div id="bioflex">
<div id="mcnugget">
<div id="statsbox">
<!----STATISTICS BOX---->
<!--use <br> for a line break-->
<name>stat 1</name>stat detail
<br>
<name>stat 2</name>stat detail
<br>
<name>stat 3</name>stat detail
<br>
<name>stat 4</name>stat detail
</div><!--statsbox--><!--do not ddelete this line-->
<!----CUSTOM LINKS---->
<div id="customlinks">
<a href="/">link one</a>
<a href="/">link two</a>
<a href="/">link three</a>
<a href="/">link four</a>
<a href="/">link five</a>
<a href="/">link six</a>
<a href="/">link seven</a>
<a href="/">link eight</a>
</div><!--customlinks-->
</div><!--mcnugget-->
<div id="biosect">
<!----BIOGRAPHY BOX TITLE---->
<div class="biotit">biography</div>
<div class="bio">
<!----BIOGRAPHY TEXT BOX---->
Your bio text goes here.
<br>
A scrollbar will appear if this box gets too long. :)
<p>
<b>bold</b> <i>italic</i> <a href="/">link</a>
</div><!--bio--><!--do not delete anything below-->
</div><!--biosect-->
</div><!--bioflex-->
</div><!--rightcont-->
</div><!--mainflex-->
</div><!--box-->
</div><!--bigmid-->
</div><!--bigwrap-->
</body>
</html>
RAW Paste Data
<!-----------------------------------------------------------------------
About Page [07]: Rogue
Made by glenthemes
Initial release: 2018/11/07
Last updated: 2019/02/02
TERMS OF USE:
1) Do not remove the theme credit.
2) Do not repost/redistribute my themes.
3) Do not take parts of the code and use it as your own.
4) Do not use my themes as a base code.
5) Do not mix my themes together.
Please stick to the Terms! Thank you! :D
Here is the help guide!
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
https://glenthemes.tumblr.com/rogue
------------------------------------------------------------------------>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<!--------------------JAVASCRIPTS-------------------->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:25,
tip_fade_speed:60,
attribute:"title"
});
});
})(jQuery);
</script>
<link href="https://fonts.googleapis.com/css?family=Karla|Exo|Rationale|Barlow+Condensed:400i,500i" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>
<!-------------------------------------------------------------------->
<style type="text/css">
/*--------------------TOOLTIPS--------------------*/
#s-m-t-tooltip {
padding: 5px 9px;
margin: 20px;
background-color:#231131; /* tooltip background color */
border:1px solid #0a3c51; /* tooltip border color */
font-family: exo;
font-size: calc(12px - 3px);
letter-spacing: 1px;
text-transform: uppercase;
color: #c3d4d7; /* tooltip text color */
z-index:9999!important;
max-width:300px;
}
/*--------------------TUMBLR CONTROLS--------------------*/
iframe#tumblr_controls, .iframe-controls--desktop {
top:5px!important;
right:5px!important;
ixed!important;
opacity:0.4;
transform:scale(0.8,0.8);
-webkit-transform:scale(0.8,0.8);
-moz-transform:scale(0.8,0.8);
-o-transform:scale(0.8,0.8);
transform-origin:100% 0;
z-index:999999!important;
transition:0.15s ease-in-out;
}
iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
opacity:1;
}
/*--------------------TEXT HIGHLIGHT--------------------*/
::selection {
background:#000;
color:#74C5BC;
}
::-moz-selection {
background:#000;
color:#74C5BC;
}
/*--------------------BASICS--------------------*/
body {
background:#100b21 url('https://universe-meeps.leagueoflegends.com/v1/assets/images/kda/kda-splash-background.jpg');
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
color:#888;
cursor:normal;
font-family:exo;
line-height:1.6em;
font-size:12px;
text-align:left;
overflow:hidden;
}
blockquote {
padding-left:10px;
margin-left:5px;
border-left:1px solid;
border-color:#aaa;
margin:10px;
}
a, .th {
text-decoration:none;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
}
a {
color:#c27ce2; /* links color */
}
b, strong {
font-weight:bold;
color:#74C5BC; /* bolded text color */
}
i, em {color:#75bac7;} /* italicized text color */
pre, code {
white-space:pre-wrap;
display:block;
}
hr {
width:70%;
border-width:0px;
height:1px;
background-color:#bbb;
}
/*--------------------CONTAINER--------------------*/
#bigwrap {
ixed;
margin:0 auto;
top:0;left:0;right:0;
width:max-content;
width:-moz-max-content;
height:100vh;
display:table;
}
#bigmid {
display:table-cell;
vertical-align:middle;
}
#box {
width:inherit;
height:455px;
padding:25px;
background-color:#11081f; /* main container box background color */
border:1px solid #0a3c51; /* main container box border */
}
/*--------------------TOP SECTION--------------------*/
#topflex {display:flex;}
#topflex > div {
align-self:center;
-webkit-align-self:center;
}
.toptitle {
font-family:rationale;
font-size:17px;
text-transform:uppercase;
letter-spacing:3px;
color:#92e9e5; /* top left title color */
line-height:1.2em;
}
.topbar {
flex:1;
margin:auto 10px;
width:100%;
height:1px;
background-image:linear-gradient(to right,transparent,#42d1be,#42d1be,transparent); /* top bar gradient */
}
/* top right navigation links */
.topnav {display:flex;}
.topnav a {margin:0 5px;}
.topnav a:first-child {margin-left:0px;}
.topnav a:last-child {margin-right:0px;}
.topnav .th {
padding:10px;
font-size:12px;
background-color:#2a143a; /* top right navigation icons background */
border-radius:15%;
color:#d9bcf6; /* top right navigation icons color */
}
.topnav .th:hover {
background-color:#84fae2; /* top right nav icons background hover */
color:#111; /* top right nav icons color hover */
}
/*--------------------MAIN CONTENT--------------------*/
#mainflex {
margin-top:25px;
width:inherit;
height:calc(100% - 54px);
display:flex;
}
/*--------------------MAIN: LEFT--------------------*/
.leftcont {
width:270px;
height:400px;
align-self:center;
-webkit-align-self:center;
}
.sbimg {
width:calc(100% - 16px);
height:calc(100% - 16px);
padding:8px;
background-color:#2b153b; /* sidebar image background / padding color */
}
/*-------MUSIC PLAYER-------*/
.music-cont {
bsolute;
margin-top:calc(-42px - 8px);
margin-left:8px;
width:calc(270px - 32px - 16px);
padding:12px 16px;
background:rgba(17,8,23,0.7); /* music player background color */
/* use color-hex.com to convert hex codes to rgb values */
/* the 'a' in 'rgba' is the opacity */
}
#glenplayer02 {display:flex;}
#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}
.music-controls {
user-select:none;
-webkit-user-select:none;
cursor:pointer;
}
.playy, .pausee {color:#becfd2;} /* color of play & pause buttons */
.playy {font-size:13px;}
.pausee {
display:none;
margin-right:2.3px;
}
.sonata {
margin-left:10px;
color:#becfd2; /* color of music note symbol */
}
.labeltext {
margin-left:8px;
font-family:barlow condensed;
text-transform:uppercase;
letter-spacing:2px;
color:#becfd2; /* color of song title */
}
/*--------------------MAIN: RIGHT--------------------*/
.rightcont {
margin-left:25px;
width:430px;
}
/* small title */
.smalltit {
font-family:barlow condensed;
font-weight:400;
font-size:12px;
text-transform:uppercase;
letter-spacing:2px;
color:#74C5BC; /* small title text color */
}
.titflex {
display:flex;
margin-top:7px;
}
/* big title */
.bigtit {
font-family:barlow condensed;
font-weight:600;
font-size:28px;
text-transform:uppercase;
letter-spacing:2.5px;
color:#74C5BC; /* big title text color */
}
/* flashing text input underline */
.input {
align-self:flex-end;
-webkit-align-self:flex-end;
margin-bottom:-2px;
margin-left:2px;
width:13px;
height:2px;
background-color:#74C5BC; /* flashing input line color */
animation: flashing 1s step-start 0s infinite;
-webkit-animation: flashing 1s step-start 0s infinite;
-moz-animation: flashing 1s step-start 0s infinite;
}
@keyframes flashing {
50% {opacity:0;}
}
@-webkit-keyframes flashing {
50% {opacity:0;}
}
@-moz-keyframes flashing {
50% {opacity:0;}
}
/* quote box */
#quotecont {
margin-top:25px;
width:100%;
display:flex;
}
.quote {
width:calc(320px - 25px);
padding:14px 18px;
border-left:1px solid #42d1be; /* quote box border color */
font-family:rationale;
font-size:12px;
text-transform:uppercase;
letter-spacing:1.5px;
color:#d2e5e8; /* quote text color */
text-align:center;
}
.q-topleft, .q-botleft, .q-topright, .q-right1, .q-right2, .q-botright, .arrow1, .arrow2 {
background:#42d1be; /* quote box border color */
}
.q-right1, .q-right2 {height:20px;} /* height of quote borders on right */
.arrow1, .arrow2 {height:10px;} /* quote arrow size */
/* pls do not touch the sections below unless you know what you're doing */
.quote p:last-child {margin-bottom:0px;}
.q-topleft {
bsolute;
width:10px;
height:1px;
}
.q-botleft {
margin-top:-1px;
width:10px;
height:1px;
}
.q-topright {
float:right;
width:10px;
height:1px;
}
.yakisoba {display:flex;}
.q-right1 {width:1px;}
.q-right2 {
bsolute;
align-self:flex-end;
-webkit-align-self:flex-end;
width:1px;
}
.q-botright {
float:right;
margin-top:-1px;
width:10px;
height:1px;
}
.kimchi {display:flex;}
.arrow1 {
align-self:flex-start;
-webkit-align-self:flex-start;
margin-left:-1px;
margin-top:19.5px;
width:1px;
transform-origin:100% 0;
transform:rotate(-68deg);
-webkit-transform:rotate(-68deg);
-moz-transform:rotate(-68deg);
-o-transform:rotate(-68deg);
}
.arrow2 {
bsolute;
align-self:flex-end;
-webkit-align-self:flex-end;
margin-left:8px;
margin-top:-12.5px;
width:1px;
transform-origin:100% 0;
transform:rotate(70deg);
-webkit-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-o-transform:rotate(70deg);
}
/* quote icon */
.q-icon {
float:right;
margin-top:calc(-64px - 5px + 9px);
width:64px;
height:64px;
padding:5px;
background-color:#2B153B; /* quote icon image background / padding color */
border-radius:10%;
}
#bioflex {
margin-top:25px;
height:259px;
display:flex;
}
#bioflex > div {
align-self:center;
-webkit-align-self:center;
}
#mcnugget {width:200px;}
/* stats box */
#statsbox {
height:max-content;
height:-moz-max-content;
padding:14px 15px;
border:1px solid #574c63; /* statistics box border */
font-family:exo;
font-size:11px;
color:#c3d4d7; /* statistics normal text color */
}
#statsbox name {
margin-right:5px;
font-family:rationale;
font-size:13px;
text-transform:uppercase;
letter-spacing:1.5px;
color:#74C5BC; /* statistics name color */
}
/* custom links */
#customlinks {
margin-top:calc(25px - 8px);
margin-left:-2.5px;
width:calc(100% + 10px);
}
#customlinks a {
display:inline-block;
margin:4px 2.7px;
width:80px;
padding:4px 8px;
background-color:#2a143a; /* custom links background color */
font-family:rationale;
font-size:10px;
text-transform:uppercase;
letter-spacing:1.3px;
color:#d9bcf6; /* custom links color */
text-align:center;
}
#customlinks a:hover {
background-color:#84fae2; /* custom links background color on hover */
color:#111; /* custom links color on hover */
}
/* biography box section */
#biosect {
margin-top:15px;
margin-left:25px;
width:212px;
}
.biotit {
padding:8px 10px;
background-color:#2a143a; /* biography title background color */
font-family:barlow condensed;
font-weight:400;
text-transform:uppercase;
letter-spacing:3px;
color:#d9bcf6; /* biography title text color */
text-align:center;
}
.bio {
margin-top:10px;
padding:12px 15px;
border:1px solid #574c63; /* biography text box border */
font-family:exo;
font-size:11px;
color:#c3d4d7; /* biography text color */
line-height:1.8em;
max-height:173px;
overflow:auto;
}
.bio p:last-child {margin-bottom:0px;}
.bio::-webkit-scrollbar {
height:13px;
width:13px;
background-color:#11081F; /* biography scrollbar background */
}
.bio::-webkit-scrollbar-thumb {
background-color:#716381; /* biography scrollbar track */
border:6px solid #11081F; /* biography scrollbar background */
}
.bio::-webkit-scrollbar-track {
background-color:#11081F; /* biography scrollbar background */
}
</style>
</head>
<body>
<div id="bigwrap">
<div id="bigmid">
<div id="box">
<div id="topflex">
<!----TOP BAR {TOP LEFT} TITLE---->
<div class="toptitle">≥ your title here</div>
<div class="topbar"></div>
<!----TOP BAR (TOP RIGHT) NAVIGATION LINKS---->
<!--to change icons: go to the following site-->
<!--scroll down to "filters" and pick what you like-->
<!--//themehive.tumblr.com/honeybee-->
<div class="topnav">
<a href="/" title="return"><span class="th th-home-o"></span></a>
<a href="/ask" title="contact"><span class="th th-envelope-o"></span></a>
<a href="/archive" title="archive"><span class="th th-box-1-o"></span></a>
<!--PLEASE DO NOT REMOVE THE CREDIT! THANK YOU :)-->
<a href="//glenthemes.tumblr.com" title="page by glenthemes"><span class="th th-code"></span></a>
</div><!--topnav--><!--do not delete this line-->
</div><!--topflex--><!--do not delete this line-->
<div id="mainflex">
<div class="leftcont">
<!----SIDEBAR IMAGE---->
<!--put the url between the quotation marks of src=""-->
<img class="sbimg" src="https://66.media.tumblr.com/357d9fe49b9650a0cd5763904a09b53a/tumblr_phu4smLqbl1qg2f5co1_400.png">
<!----MUSIC PLAYER---->
<div class="music-cont">
<div id="glenplayer02">
<div class="music-controls" >
<div class="playy">►</div>
<div class="pausee">❚❚</div>
</div>
<div class="sonata">♫</div>
<!--MUSIC TITLE-->
<div class="labeltext">K/DA — POP/STARS</div>
</div><!--end music player--><!--do not delete this line-->
<!--MUSIC FILE URL-->
<!--put the url between the quotation marks of src=""-->
<!--dropbox help: //glenthemes.tumblr.com/post/164215965424-->
<audio id="tune" src="//dl.dropbox.com/s/rua34en7muqmj3l/POPSTARS.mp3" type="audio"></audio>
</div><!--music-cont--><!--do not delete this line-->
</div><!--leftcont--><!--do not delete this line-->
<div class="rightcont">
<!----BIOGRAPHY AREA: SMALL TITLE-->
<div class="smalltit">a small title here</div>
<div class="titflex">
<!----BIOGRAPHY AREA: BIG TITLE-->
<div class="bigtit">≥ a larger title here</div>
<div class="input"></div>
</div><!--titflex-->
<div id="quotecont">
<div class="takoyaki">
<div class="q-topleft"></div>
<div class="q-topright"></div>
<!----QUOTE---->
<!--make it 1 line only or else it will fuck up!-->
<div class="quote">a quote here - 1 LINE ONLY PLEASE</div>
<div class="q-botleft"></div>
<div class="q-botright"></div>
</div><!--takoyaki-->
<div class="yakisoba">
<div class="q-right1"></div>
<div class="q-right2"></div>
</div><!--yakisoba-->
<div class="kimchi">
<div class="arrow1"></div>
<div class="arrow2"></div>
</div><!--kimchi-->
</div><!--quotecont-->
<!----QUOTE BOX ICON IMAGE---->
<!--put the url between the quotation marks of src=""-->
<img class="q-icon" src="https://78.media.tumblr.com/669b665392c5dcad9e4641d00c370092/tumblr_p3m4ucn8uF1qg2f5co7_r1_250.png">
<div id="bioflex">
<div id="mcnugget">
<div id="statsbox">
<!----STATISTICS BOX---->
<!--use <br> for a line break-->
<name>stat 1</name>stat detail
<br>
<name>stat 2</name>stat detail
<br>
<name>stat 3</name>stat detail
<br>
<name>stat 4</name>stat detail
</div><!--statsbox--><!--do not ddelete this line-->
<!----CUSTOM LINKS---->
<div id="customlinks">
<a href="/">link one</a>
<a href="/">link two</a>
<a href="/">link three</a>
<a href="/">link four</a>
<a href="/">link five</a>
<a href="/">link six</a>
<a href="/">link seven</a>
<a href="/">link eight</a>
</div><!--customlinks-->
</div><!--mcnugget-->
<div id="biosect">
<!----BIOGRAPHY BOX TITLE---->
<div class="biotit">biography</div>
<div class="bio">
<!----BIOGRAPHY TEXT BOX---->
Your bio text goes here.
<br>
A scrollbar will appear if this box gets too long. :)
<p>
<b>bold</b> <i>italic</i> <a href="/">link</a>
</div><!--bio--><!--do not delete anything below-->
</div><!--biosect-->
</div><!--bioflex-->
</div><!--rightcont-->
</div><!--mainflex-->
</div><!--box-->
</div><!--bigmid-->
</div><!--bigwrap-->
</body>
</html>
Public Pastes
Untitled
C++ | 6 min ago
Untitled
Dart | 13 min ago
Untitled
Dart | 14 min ago
# Tk_xy_degree_and_distance.py
Python | 21 min ago
сияй
C++ | 56 min ago
Untitled
Dart | 1 hour ago
Untitled
Dart | 1 hour ago
Dekoration Form1 Class3
VB.NET | 1 hour ago