827 lines
20 KiB
Plaintext
827 lines
20 KiB
Plaintext
<!-----------------------------------------------------------------------
|
|
About Page [09]: Siderea
|
|
Made by glenthemes
|
|
|
|
Initial release: 2019/01/20
|
|
Last updated: 2021/10/21
|
|
|
|
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! Make D.Va proud :)
|
|
|
|
Editing guide notes are found in GRAY! Please look out for them!
|
|
|
|
Credits:
|
|
- all image icons by @zaryamei
|
|
- "Big Noodle Titling Oblique" font by Sentinel Type @ dafont
|
|
//www.dafont.com/bignoodletitling.font
|
|
- "Silkscreen" font by Jason Aleksandr Kottke @ dafont
|
|
//www.dafont.com/silkscreen.font
|
|
- Bottom border hover transition by web-tiki @ stackoverflow:
|
|
//stackoverflow.com/questions/28623446#28623513
|
|
- D.Va 'call mech' ability icon: Overwatch
|
|
- Feather icon font by colebemis @ twitter
|
|
//feathericons.com/
|
|
- 'Leafo' sticky kit by Leaf Cocoran
|
|
http://leafo.net/sticky-kit/
|
|
- layout inspired by Overwatch's career profile page
|
|
------------------------------------------------------------------------>
|
|
|
|
<!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:0,
|
|
tip_fade_speed:0,
|
|
attribute:"title"
|
|
});
|
|
});
|
|
})(jQuery);
|
|
</script>
|
|
|
|
<link href="//fonts.googleapis.com/css?family=Karla|Inconsolata|Source+Code+Pro" rel="stylesheet">
|
|
|
|
<script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
|
|
|
|
<script src ="//cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.min.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function(){
|
|
var tote = Math.floor(47 + 45 + 40);
|
|
$("#rec-left").stick_in_parent({
|
|
offset_top:tote,
|
|
bottoming:false
|
|
});
|
|
$("#rec-right").stick_in_parent({
|
|
offset_top:tote,
|
|
});
|
|
});
|
|
</script>
|
|
<!-------------------------------------------------------------------->
|
|
|
|
<style type="text/css">
|
|
|
|
@font-face { font-family: "big noodle titling"; src: url('//glen-assets.github.io/fonts/big_noodle_titling_oblique.ttf'); }
|
|
|
|
@font-face { font-family: "silkscreen"; src: url('//glen-assets.github.io/fonts/silkscreen.ttf'); }
|
|
|
|
|
|
/*--------------------TOOLTIPS--------------------*/
|
|
#s-m-t-tooltip {
|
|
padding: 4px 9px;
|
|
margin: 26px 9px 0px 15px;
|
|
background-color: #333; /* tooltip background color */
|
|
border-radius:3px;
|
|
font-family: source code pro;
|
|
font-size: 9px;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
color: #ddd; /* tooltip text color */
|
|
z-index:99999999999999999999999999998!important;
|
|
max-width:40vw;
|
|
}
|
|
|
|
/*--------------------TUMBLR CONTROLS--------------------*/
|
|
#plus-s {
|
|
position:fixed;
|
|
top:0;margin-top:17px;
|
|
right:0;margin-right:15px;
|
|
z-index:10;
|
|
}
|
|
|
|
#plus-s svg {
|
|
width:15px;height:15px;
|
|
color:#555; /* tumblr controls 'plus' symbol color */
|
|
}
|
|
|
|
iframe#tumblr_controls, .iframe-controls--desktop {
|
|
top:calc(1px + 5px)!important;
|
|
right:calc(5px)!important;
|
|
padding-right:40px;
|
|
position:fixed!important;
|
|
|
|
transform:scale(0.7,0.7);
|
|
-webkit-transform:scale(0.7,0.7);
|
|
|
|
transform-origin:100% 0;
|
|
z-index:999999!important;
|
|
opacity:0;
|
|
-webkit-transition: all 0.4s ease-in-out;
|
|
-moz-transition: all 0.4s ease-in-out;
|
|
-o-transition: all 0.4s ease-in-out;
|
|
}
|
|
|
|
iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
|
|
opacity:1;
|
|
}
|
|
|
|
/*--------------------SCROLLBAR--------------------*/
|
|
::-webkit-scrollbar {
|
|
background-color:#fbfbfb; /* scrollbar background color */
|
|
height:13px;
|
|
width:13px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color:#aaa; /* scrollbar color */
|
|
border:6px solid #fbfbfb; /* scrollbar background color */
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color:#fbfbfb; /* scrollbar background color */
|
|
}
|
|
|
|
/*--------------------SMALL CURSOR--------------------*/
|
|
/* feel free to not use this */
|
|
* {
|
|
cursor:url(//78.media.tumblr.com/66991e3a24432876aa22db906d5071de/tumblr_pe9t1ipv6S1qg2f5co6_r1_75sq.png), auto;
|
|
}
|
|
|
|
/*--------------------TEXT HIGHLIGHT--------------------*/
|
|
::selection {
|
|
background:transparent;
|
|
color:#F9878F; /* text highlight color */
|
|
}
|
|
|
|
::-moz-selection {
|
|
background:transparent;
|
|
color:#F9878F; /* text highlight color */
|
|
}
|
|
|
|
/*--------------------BACKGROUND IMAGE--------------------*/
|
|
body, #top-bg {
|
|
background:#fcfcfc url('//66.media.tumblr.com/e9eccce5b5cd2c1eb27592f6ce3bd933/tumblr_pllid0huwL1qg2f5co1_400.png'); /* background image url */
|
|
background-attachment:fixed;
|
|
background-repeat:repeat;
|
|
}
|
|
|
|
#top-bg {
|
|
position:fixed;
|
|
top:0;left:0;right:0;
|
|
margin:0 auto;
|
|
width:820px;
|
|
height:50px;
|
|
z-index:4;
|
|
}
|
|
|
|
/*--------------------BASICS--------------------*/
|
|
body {
|
|
color:#888;
|
|
cursor:normal;
|
|
font-family:inconsolata;
|
|
line-height:1.6em;
|
|
font-size:12px;
|
|
text-align:left;
|
|
}
|
|
|
|
blockquote {
|
|
padding-left:10px;
|
|
margin-left:5px;
|
|
border-left:1px solid;
|
|
border-color:#aaa;
|
|
margin:10px;
|
|
}
|
|
|
|
a, svg {
|
|
text-decoration:none;
|
|
-webkit-transition: all 0.4s ease-in-out;
|
|
-moz-transition: all 0.4s ease-in-out;
|
|
-o-transition: all 0.4s ease-in-out;
|
|
}
|
|
|
|
a {color:#d88989;}
|
|
|
|
b, b {
|
|
font-weight:bold;
|
|
}
|
|
|
|
pre, code {
|
|
white-space:pre-wrap;
|
|
display:block;
|
|
}
|
|
|
|
hr {
|
|
width:70%;
|
|
border-width:0px;
|
|
height:1px;
|
|
background-color:#bbb;
|
|
}
|
|
|
|
/*--------------------MAIN CONTAINER--------------------*/
|
|
#lucio-oh {
|
|
position:absolute;
|
|
top:0;left:0;right:0;
|
|
margin:45px auto;
|
|
width:820px;
|
|
}
|
|
|
|
/*--------------------TOP BAR--------------------*/
|
|
#topbar {
|
|
position:fixed;
|
|
width:inherit;
|
|
height:47px;
|
|
background-color:#37353A; /* top bar background */
|
|
border-radius:3px;
|
|
overflow:hidden;
|
|
z-index:4;
|
|
}
|
|
|
|
/*--------------------TOP BAR - LEFT--------------------*/
|
|
#topnav {float:left;}
|
|
|
|
/* TOP BAR NAV LINKS */
|
|
#topnav a {
|
|
display:inline-block;
|
|
margin:0px -3px;
|
|
padding:20px 15px 15px 15px;
|
|
border-bottom:3px solid transparent;
|
|
font-family:silkscreen;
|
|
text-transform:uppercase;
|
|
font-size:9px;
|
|
color:#e5e5e5; /* top bar links color */
|
|
line-height:1em;
|
|
}
|
|
|
|
#topnav a:not(.left-mini-title):after {
|
|
display:block;
|
|
content:'';
|
|
width:calc(100% + (15px * 2));
|
|
margin-left:-15px;
|
|
padding-bottom:15px;
|
|
margin-bottom:-18px;
|
|
border-bottom:solid 3px #feaeba; /* top bar links hover border color */
|
|
transform:scaleX(0);
|
|
-webkit-transform:scaleX(0);
|
|
-moz-transform:scaleX(0);
|
|
-o-transform:scaleX(0);
|
|
-ms-transform:scaleX(0);
|
|
}
|
|
|
|
#topnav a:not(.left-mini-title):hover:after {
|
|
transform:scaleX(1);
|
|
-webkit-transform:scaleX(1);
|
|
-moz-transform:scaleX(1);
|
|
-o-transform:scaleX(1);
|
|
-ms-transform:scaleX(1);
|
|
transition:all 0.3s ease-in-out;
|
|
-webkit-transition:all 0.3s ease-in-out;
|
|
-moz-transition:all 0.3s ease-in-out;
|
|
-o-transition:all 0.3s ease-in-out;
|
|
-ms-transition:all 0.3s ease-in-out;
|
|
}
|
|
|
|
/* TOP BAR - LEFT - MINI TITLE */
|
|
.left-mini-title, .left-mini-title:hover {
|
|
background-color:#F9878F; /* left mini title background color */
|
|
border-bottom:3px solid #feaeba!important; /* left mini title border */
|
|
color:#fff!important; /* left mini title text color */
|
|
}
|
|
|
|
#topnav a:first-child {margin-left:0px;}
|
|
#topnav a:last-child {margin-right:0px;}
|
|
|
|
/*--------------------TOP BAR - RIGHT--------------------*/
|
|
#user-deco-nav {
|
|
float:right;
|
|
display:flex;
|
|
height:100%;
|
|
}
|
|
|
|
#user-deco-nav > * {
|
|
align-self:center;
|
|
-webkit-align-self:center;
|
|
}
|
|
|
|
/* FOLLOW BUTTON */
|
|
#user-deco-nav svg {
|
|
width:18px;height:18px;
|
|
padding:15px 13px;
|
|
border-bottom:0px solid transparent;
|
|
color:#e5e5e5; /* follow button color */
|
|
}
|
|
|
|
#user-deco-nav a:hover svg {
|
|
padding-bottom:12px;
|
|
border-bottom:3px solid #feaeba; /* follow button border on hover */
|
|
}
|
|
|
|
/* ACTIVE STATUS INDICATOR BAR */
|
|
.green-active-border {
|
|
width:6px;
|
|
height:inherit;
|
|
background:#a5eb81; /* green active status bar color */
|
|
}
|
|
|
|
.small-avi-img {
|
|
width:48px;
|
|
height:48px;
|
|
}
|
|
|
|
/* TOP BAR - RIGHT - MINI TITLE */
|
|
.nametag {
|
|
padding:0 15px;
|
|
font-family:silkscreen;
|
|
font-size:9px;
|
|
color:#e5e5e5; /* right mini title text color */
|
|
}
|
|
|
|
/*--------------------INTRO SECTION--------------------*/
|
|
#beef {
|
|
position:absolute;
|
|
top:0;margin-top:calc(47px + 40px);
|
|
width:inherit;
|
|
max-height:124px;
|
|
overflow:hidden;
|
|
z-index:3;
|
|
}
|
|
|
|
/*--------------------INTRO - LEFT--------------------*/
|
|
#beef-left {
|
|
float:left;
|
|
display:flex;
|
|
}
|
|
|
|
#beef-left > * {
|
|
align-self:center;
|
|
-webkit-align-self:center;
|
|
}
|
|
|
|
/* MAIN 100PX ICON IMAGE */
|
|
.square-pic {
|
|
width:100px;
|
|
height:100px;
|
|
background-color:#444147; /* 100px icon background color */
|
|
border:12px solid #444147; /* 100px icon border color */
|
|
border-radius:3px;
|
|
}
|
|
|
|
.diamond {
|
|
margin-left:-11px;
|
|
width:22px;
|
|
height:22px;
|
|
background:#444147; /* 100px icon arrow color */
|
|
transform:rotate(45deg);
|
|
-webkit-transform:rotate(45deg);
|
|
-moz-transform:rotate(45deg);
|
|
-o-transform:rotate(45deg);
|
|
-ms-transform:rotate(45deg);
|
|
z-index:-1;
|
|
}
|
|
|
|
.sq-txt {margin-left:calc(11px + 17px);}
|
|
|
|
/* LARGE TITLE */
|
|
.sq-name {
|
|
font-family:big noodle titling;
|
|
font-size:30px;
|
|
letter-spacing:2px;
|
|
color:#3d3a40; /* large title text color */
|
|
}
|
|
|
|
/* MAIN EXP BAR */
|
|
.sq-bar {
|
|
margin-top:17px;
|
|
width:250px;
|
|
height:5px;
|
|
background:#eee; /* main EXP bar color (empty) */
|
|
border-radius:3px;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.sq-fill {
|
|
height:inherit;
|
|
background:#fa9fa6; /* main EXP bar color (filled) */
|
|
border-radius:3px;
|
|
}
|
|
|
|
/* define the main EXP bar (filled) width in the 2nd width property */
|
|
/* same value in all of these rows pls! */
|
|
@-webkit-keyframes barfill { from { width:0%; } to { width:48%; } }
|
|
@-moz-keyframes barfill { from { width:0%; } to { width:48%; } }
|
|
@keyframes barfill { from { width:0%; } to { width:48%; } }
|
|
|
|
.bar-fill {
|
|
width:0%;
|
|
-webkit-animation:barfill ease-out 1;
|
|
-moz-animation:barfill ease-out 1;
|
|
animation:barfill ease-out 1;
|
|
-webkit-animation-fill-mode:forwards;
|
|
-moz-animation-fill-mode:forwards;
|
|
animation-fill-mode:forwards;
|
|
-webkit-animation-duration:1s;
|
|
-moz-animation-duration:1s; animation-duration:1s;
|
|
}
|
|
|
|
/* MAIN EXP BAR - NUMBER STATS */
|
|
.sq-numbers {
|
|
margin-top:16px;
|
|
font-family:big noodle titling;
|
|
font-size:16px;
|
|
letter-spacing:1.5px;
|
|
color:#424045; /* main number stats color */
|
|
}
|
|
|
|
/*--------------------INTRO - RIGHT--------------------*/
|
|
#beef-right {
|
|
float:right;
|
|
display:flex;
|
|
max-width:413px;
|
|
height:124px;
|
|
}
|
|
|
|
#beef-right > * {
|
|
align-self:center;
|
|
-webkit-align-self:center;
|
|
}
|
|
|
|
/* D.VA MECH ICON */
|
|
.right-img {
|
|
width:auto;
|
|
height:50px; /* d.va mech icon image height */
|
|
}
|
|
|
|
.right-quote {
|
|
margin-left:20px;
|
|
width:250px;
|
|
font-family:silkscreen;
|
|
text-transform:uppercase;
|
|
font-size:9px;
|
|
color:#333; /* right quote text color */
|
|
text-align:justify;
|
|
line-height:2em;
|
|
}
|
|
|
|
/*--------------------CONTAINER--------------------*/
|
|
#rectangle {
|
|
position:absolute;
|
|
top:0;margin-top:calc(47px + 40px + 124px + 55px);
|
|
margin-bottom:40px;
|
|
width:inherit;
|
|
z-index:2;
|
|
}
|
|
|
|
/*--------------------CHARACTER STATS--------------------*/
|
|
#rec-left {float:left;}
|
|
|
|
.one-row {
|
|
display:flex;
|
|
margin-bottom:12px;
|
|
}
|
|
|
|
.one-row > * {
|
|
align-self:center;
|
|
-webkit-align-self:center;
|
|
}
|
|
|
|
.one-row:last-of-type {margin-bottom:0px;}
|
|
|
|
/* CHARACTER/PLAYER STATS ROW */
|
|
/* CHARACTER NAME */
|
|
.row-nametag {
|
|
width:80px;
|
|
padding:10px 8px;
|
|
background-color:#444147; /* character name background color */
|
|
border-radius:3px;
|
|
font-family:silkscreen;
|
|
font-size:9px;
|
|
color:#e5e5e5; /* character name text color */
|
|
line-height:1em;
|
|
text-align:right;
|
|
}
|
|
|
|
.row-namearrow {
|
|
margin-left:-4px;
|
|
width:8px;
|
|
height:8px;
|
|
background:#444147; /* character name arrow color */
|
|
transform:rotate(45deg);
|
|
-webkit-transform:rotate(45deg);
|
|
-moz-transform:rotate(45deg);
|
|
-o-transform:rotate(45deg);
|
|
-ms-transform:rotate(45deg);
|
|
z-index:-1;
|
|
}
|
|
|
|
/* CHARACTER ICON */
|
|
.row-avi {
|
|
margin-left:10px;
|
|
width:40px;
|
|
height:40px;
|
|
border-radius:3px;
|
|
}
|
|
|
|
/* CHARACTER NUMERIC STATS TEXT */
|
|
.row-txt {
|
|
margin-left:10px;
|
|
width:52px;
|
|
padding:9px 7px;
|
|
background-color:#f8f8f8; /* character stat background color */
|
|
border:1px solid #eee; /* character stat border */
|
|
border-radius:3px;
|
|
font-family:silkscreen;
|
|
font-size:9px;
|
|
color:#666; /* character stat text color */
|
|
line-height:1em;
|
|
text-align:center;
|
|
}
|
|
|
|
/* CHARACTER EXP BARS */
|
|
.row-bar {
|
|
margin-left:10px;
|
|
width:225px;
|
|
height:7px;
|
|
border-radius:3px;
|
|
background-color:#f7f7f7; /* character EXP bar color (empty) */
|
|
overflow:hidden;
|
|
}
|
|
|
|
.row-barfill {
|
|
height:inherit;
|
|
border-radius:3px;
|
|
/* individual character EXP bar colors (filled) are done in HTML */
|
|
/* but you can also assign 1 color to all bars if you want to */
|
|
}
|
|
|
|
/*--------------------BIOGRAPHY SECTION--------------------*/
|
|
#rec-right {
|
|
float:right;
|
|
margin-left:40px;
|
|
width:calc(100% - 463px - 40px);
|
|
}
|
|
|
|
/* BIOGRAPHY TITLE */
|
|
.rec-title {
|
|
display:inline-block;
|
|
margin-bottom:8px;
|
|
font-family:big noodle titling;
|
|
font-size:22px;
|
|
letter-spacing:2px;
|
|
color:#424045; /* biography title text color */
|
|
}
|
|
|
|
.info-row {
|
|
margin-top:12px;
|
|
display:flex;
|
|
}
|
|
|
|
.info-row > * {
|
|
align-self:center;
|
|
-webkit-align-self:center;
|
|
}
|
|
|
|
/* BULLET POINT STATS - ICONS */
|
|
.info-row svg {
|
|
padding:8px;
|
|
background-color:#F9878F; /* bullet point stat icon background color */
|
|
border-radius:3px;
|
|
width:14px;
|
|
height:14px;
|
|
color:#fff;
|
|
}
|
|
|
|
/* BULLET POINT STATS - TEXT */
|
|
.info-txt {
|
|
margin-left:12px;
|
|
font-family:silkscreen;
|
|
font-size:9px;
|
|
color:#555; /* bullet point stat - text color */
|
|
}
|
|
|
|
/* MAIN BIOGRAPHY TEXT SECTION */
|
|
.rec-desc {
|
|
margin-top:20px;
|
|
font-family:inconsolata;
|
|
font-size:12px;
|
|
line-height:2.1em;
|
|
color:#555; /* main biography text color */
|
|
text-align:justify;
|
|
}
|
|
|
|
/* bolded text styling */
|
|
.rec-desc b, .rec-desc strong {
|
|
padding:3px 5px;
|
|
background-color:#f9f9f9;
|
|
border:1px solid #eee;
|
|
border-radius:3px;
|
|
color:#666;
|
|
}
|
|
|
|
/* italicized text styling */
|
|
.rec-desc i, .rec-desc em {color:#9badb7;}
|
|
|
|
/* links styling */
|
|
.rec-desc a {
|
|
color:#d88989;
|
|
padding-bottom:2px;
|
|
border-bottom:1px solid #ddd;
|
|
}
|
|
|
|
.rec-desc a:hover {
|
|
color:#444;
|
|
}
|
|
|
|
.rec-desc p:last-child {margin-bottom:0px;}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!----TUMBLR CONTROLS---->
|
|
<div id="plus-s"><i data-feather="plus"></i></div>
|
|
|
|
<div id="top-bg"></div>
|
|
|
|
<div id="lucio-oh">
|
|
<div id="topbar">
|
|
<div id="topnav">
|
|
|
|
<!----TOP BAR - LEFT---->
|
|
<!--top bar - left - mini title-->
|
|
<a class="left-mini-title">about me</a>
|
|
|
|
<!--top bar - nav links-->
|
|
<!--please do not remove the credit! thanks!-->
|
|
<a href="/">return</a>
|
|
<a href="/ask">mailbox</a>
|
|
<a href="/archive">archives</a>
|
|
<a href="//glenthemes.tumblr.com" title="page by glenthemes">credit</a>
|
|
</div><!--topnav-->
|
|
|
|
|
|
|
|
<!----TOP BAR - RIGHT---->
|
|
<div id="user-deco-nav">
|
|
|
|
<!--follow button - replace 'your-username' with your blog username-->
|
|
<a href="//tumblr.com/follow/your-username" title="follow?"><i data-feather="user-plus"></i></a>
|
|
|
|
<div class="green-active-border"></div>
|
|
|
|
<!--top right icon image-->
|
|
<img class="small-avi-img" src="//78.media.tumblr.com/07dc615cd376b70fcc87996026ff89ea/tumblr_oqxkyjUdBK1taarzno5_r3_400.jpg">
|
|
|
|
<!--top right mini title-->
|
|
<div class="nametag">Siderea</div>
|
|
</div><!--user-deco-nav-->
|
|
</div><!--topbar-->
|
|
|
|
|
|
|
|
<!----INTRO SECTION - LEFT---->
|
|
<div id="beef">
|
|
<div id="beef-left">
|
|
|
|
<!--100px icon image-->
|
|
<img class="square-pic" src="//66.media.tumblr.com/62a881181c9c6802f425c8398d05c3ed/tumblr_pllkes1gTi1qg2f5co7_r1_400.png">
|
|
|
|
<div class="diamond"></div>
|
|
|
|
<div class="sq-txt">
|
|
|
|
<!--main big title-->
|
|
<div class="sq-name">ready, player one!</div>
|
|
|
|
<div class="sq-bar">
|
|
<div class="sq-fill bar-fill"></div>
|
|
</div><!--sq-bar-->
|
|
|
|
<!--number stats-->
|
|
<div class="sq-numbers">9638 / 20000</div>
|
|
</div><!--sq-txt-->
|
|
</div><!--beef-left-->
|
|
|
|
|
|
|
|
<!----INTRO SECTION - RIGHT---->
|
|
<div id="beef-right">
|
|
|
|
<!--d.va mech image-->
|
|
<img class="right-img" src="//66.media.tumblr.com/6eeb05f683e22edeb5a10914a944b48a/tumblr_plnbit7kiu1qg2f5co3_r1_250.png">
|
|
|
|
<!--right quote-->
|
|
<div class="right-quote">We <i>barely</i> won last time. The enemy is out there — adapting, and getting stronger. The rest of the squad, the country? They're all counting on <i>me!</i></div>
|
|
|
|
</div><!--beef-right-->
|
|
</div><!--beef-->
|
|
|
|
|
|
|
|
|
|
<!----CHARACTER/PLAYER STATS---->
|
|
<div id="rectangle">
|
|
|
|
<div id="rec-left">
|
|
|
|
<!--I've given 2 rows as examples that you can copy-->
|
|
<!--START ONE ROW-->
|
|
<div class="one-row">
|
|
<div class="row-nametag">name</div>
|
|
<div class="row-namearrow"></div>
|
|
|
|
<!--character avatar-->
|
|
<img class="row-avi" src="//78.media.tumblr.com/53dc024e5599df92b67f9633fb7996a2/tumblr_inline_ox6a8nkSrl1sf4s4l_400.png">
|
|
|
|
<div class="row-txt">100 hrs</div>
|
|
|
|
<!--define filled bar width and color as follows:-->
|
|
<div class="row-bar">
|
|
<div class="row-barfill" style="width:100%; background-color:#f6d3d5"></div></div>
|
|
</div><!--one-row-->
|
|
<!--END ONE ROW-->
|
|
|
|
|
|
|
|
<div class="one-row">
|
|
<div class="row-nametag">name</div>
|
|
<div class="row-namearrow"></div>
|
|
|
|
<!--character avatar-->
|
|
<img class="row-avi" src="//78.media.tumblr.com/0e64759da8bdb927b18a158406865e44/tumblr_ov65j6yjKr1taarzno3_r1_400.png">
|
|
|
|
<div class="row-txt">70 hrs</div>
|
|
|
|
<!--define filled bar width and color as follows:-->
|
|
<div class="row-bar">
|
|
<div class="row-barfill" style="width:70%; background-color:#ece6e6"></div></div>
|
|
</div><!--one-row-->
|
|
<!--END ONE ROW-->
|
|
|
|
</div><!--rec-left-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!----RIGHT BIOGRAPHY SECTION---->
|
|
<div id="rec-right">
|
|
<div class="rec-title">career profile — D.Va</div>
|
|
|
|
<!--here I've given 3 bullet rows as examples you can copy-->
|
|
<!--START ONE BULLET ROW-->
|
|
<div class="info-row">
|
|
<!--bullet point icon-->
|
|
<!--you can choose one from this list:-->
|
|
<!--//feathericons.com-->
|
|
<!--put the name between the quotation marks of feather=""-->
|
|
<i data-feather="user"></i>
|
|
|
|
<!--bullet point text-->
|
|
<div class="info-txt"><b>real name:</b> Hana Song</div>
|
|
</div><!--info-row-->
|
|
<!--END ONE BULLET ROW-->
|
|
|
|
|
|
<!--START ONE BULLET ROW-->
|
|
<div class="info-row">
|
|
<i data-feather="globe"></i>
|
|
<div class="info-txt"><b>nationality:</b> Korean</div>
|
|
</div><!--info-row-->
|
|
<!--END ONE BULLET ROW-->
|
|
|
|
|
|
<!--START ONE BULLET ROW-->
|
|
<div class="info-row">
|
|
<i data-feather="star"></i>
|
|
<div class="info-txt"><b>occupation:</b> mech pilot, actress</div>
|
|
</div><!--info-row-->
|
|
<!--END ONE BULLET ROW-->
|
|
|
|
|
|
|
|
|
|
<!--BIOGRAPHY TEXT SECTION-->
|
|
<div class="rec-desc">
|
|
|
|
Text: <b>bold</b>, <i>italic</i>, <a href="/">link</a>
|
|
|
|
</div><!--rec-desc-->
|
|
|
|
</div><!--rec-right-->
|
|
</div><!--rectangle-->
|
|
</div><!--lucio-oh-->
|
|
|
|
<script>feather.replace()</script>
|
|
</body>
|
|
|
|
</html> |