786 lines
21 KiB
Plaintext
786 lines
21 KiB
Plaintext
<!-----------------------------------------------------------------------
|
||
Character Page [01]: Fortitude
|
||
Made by glenthemes
|
||
|
||
❯❯ this version contains 2 base characters!
|
||
❯❯ for 6 characters: https://pastebin.com/raw/vRyA9fDP
|
||
|
||
Initial release: 2017/04/06
|
||
Major update: 2021/12/12
|
||
Last updated: 2023/05/10
|
||
|
||
------------------------------------------------------
|
||
|
||
📖 PLEASE READ THE GUIDE: 📖
|
||
|
||
https://docs.google.com/presentation/d/14EJlSGPCq-xH6YlT1JcOFzk_SEl_z7fl9ozhdKCP31o/edit?usp=sharing
|
||
|
||
------------------------------------------------------
|
||
|
||
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.
|
||
|
||
CREDITS:
|
||
(✿˶´>ω<) ~ glencredits.tumblr.com/fortitude
|
||
------------------------------------------------------------------------>
|
||
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
|
||
<title>{Title}</title>
|
||
|
||
<link rel="shortcut icon" href="{Favicon}">
|
||
|
||
<!------ JQUERY ------>
|
||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||
|
||
<!------ GOOGLE FONTS ------>
|
||
<link href="https://fonts.googleapis.com/css?family=Quicksand:600|Reggae+One|Public+Sans:500|Nunito:700|Karla|Montserrat:500" rel="stylesheet">
|
||
|
||
<!------ PRELOAD CUSTOM FONTS ------>
|
||
<link rel="preload" href="//glen-assets.github.io/fonts/LT Emphasis.ttf" as="font" type="font/ttf" crossorigin>
|
||
|
||
<link rel="preload" href="//glen-assets.github.io/fonts/KaoriGel.ttf" as="font" type="font/ttf" crossorigin>
|
||
|
||
<!------ ICON FONTS ------>
|
||
<link rel="stylesheet" href="https://glen-assets.github.io/flaticon-uicons/uicons-regular-rounded.css">
|
||
|
||
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
|
||
|
||
<!------ PAGE SCRIPTS ------>
|
||
<script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
|
||
|
||
<link href="//glen-themes.gitlab.io/chara-pages/01/uzlnn.css" rel="stylesheet">
|
||
|
||
<script src="//glen-themes.gitlab.io/chara-pages/01/ysypl.js"></script>
|
||
|
||
<!--------------------------------------------------------->
|
||
|
||
<style type="text/css">
|
||
|
||
/*----- CUSTOM FONTS -----*/
|
||
@font-face { font-family: "LT emphasis"; src: url('//glen-assets.github.io/fonts/LT Emphasis.ttf'); }
|
||
|
||
@font-face { font-family: "kaori gel"; src: url('//glen-assets.github.io/fonts/KaoriGel.ttf'); }
|
||
|
||
/*----- TOOLTIPS -----*/
|
||
#s-m-t-tooltip {
|
||
padding:5px 10px;
|
||
margin:20px;
|
||
background-color:var(--Tooltips-BG);
|
||
border-radius:2px;
|
||
font-family:public sans;
|
||
font-size:8px;
|
||
letter-spacing:0.5px;
|
||
text-transform:uppercase;
|
||
color:var(--Tooltips-Text);
|
||
line-height:1.7em;
|
||
z-index:99;
|
||
max-width:40vw;
|
||
}
|
||
|
||
/*----- TUMBLR CONTROLS -----*/
|
||
iframe#tumblr_controls, .iframe-controls--desktop {
|
||
top:5px!important;
|
||
right:5px!important;
|
||
position:fixed!important;
|
||
|
||
transform:scale(0.7,0.7);
|
||
|
||
transform-origin:100% 0;
|
||
z-index:999999!important;
|
||
user-select:none;
|
||
opacity:0;
|
||
}
|
||
|
||
.tc-inv {
|
||
filter:invert(100%) hue-rotate(180deg)!important;
|
||
-webkit-filter:invert(100%) hue-rotate(180deg)!important;
|
||
}
|
||
|
||
.abeer {
|
||
opacity:1!important;
|
||
}
|
||
|
||
.tmblr-iframe--follow-teaser, .follow-teaser, .iframe-controls--phone-mobile, .tmblr-iframe--app-cta-button {
|
||
display:none!important;
|
||
}
|
||
|
||
/*----- BASICS -----*/
|
||
body {
|
||
background-image:url();
|
||
background-attachment:fixed;
|
||
background-repeat:repeat;
|
||
font-family:karla;
|
||
font-size:var(--Main-Font-Size);
|
||
color:var(--Main-Text-Color);
|
||
line-height:var(--Main-Text-Line-Height);
|
||
text-align:left;
|
||
}
|
||
|
||
.popup-box a:not([class]){
|
||
color:var(--Links-Color);
|
||
padding-bottom:.5px;
|
||
border-bottom:1px solid var(--Links-Underline);
|
||
text-decoration:none;
|
||
}
|
||
|
||
a {
|
||
text-decoration:none;
|
||
}
|
||
|
||
b, strong {
|
||
color:var(--Bold);
|
||
}
|
||
|
||
i:not([class]), em {
|
||
color:var(--Italic);
|
||
}
|
||
|
||
.note-to-user {
|
||
/* change VISIBLE to HIDDEN to dismiss the "get started" message */
|
||
visibility:visible;
|
||
}
|
||
|
||
/*----- TEXT HIGHLIGHT -----*/
|
||
::selection {
|
||
color:var(--Text-On-Highlight);
|
||
background:var(--Text-BG-On-Highlight);
|
||
}
|
||
|
||
::-moz-selection {
|
||
color:var(--Text-On-Highlight);
|
||
background:var(--Text-BG-On-Highlight);
|
||
}
|
||
|
||
/*----- SCROLLBAR -----*/
|
||
::-webkit-scrollbar {
|
||
width:var(--Scrollbar-Width);
|
||
height:0;
|
||
background-color:var(--Popup-Background);
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background-color:var(--Scrollbar-Color);
|
||
border-radius:var(--Scrollbar-Width);
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background-color:var(--Popup-Background);
|
||
border-radius:var(--Scrollbar-Width);
|
||
}
|
||
|
||
::-webkit-scrollbar-corner {
|
||
background:var(--Popup-Background);
|
||
}
|
||
|
||
/*----- MAIN SETTINGS -----*/
|
||
body {
|
||
background-color:#eeecec;
|
||
}
|
||
|
||
:root {
|
||
/*----- GENERAL -----*/
|
||
--Main-Font-Size:12px;
|
||
--Main-Text-Color:#999;
|
||
--Main-Text-Line-Height:1.6em;
|
||
|
||
--Links-Color:#f38989;
|
||
--Links-Underline:#fbdbdb;
|
||
|
||
--Bold:#999;
|
||
--Italic:#999;
|
||
|
||
/*----- TOP FLOATING TITLE -----*/
|
||
--Large-Floating-Title-Bottom-Gap:32px;
|
||
--Large-Floating-Title-Size:18px;
|
||
--Large-Floating-Title-Color:#343846;
|
||
--Large-Floating-Title-Line-Height:175%;
|
||
|
||
/*----- CHARACTER LIST -----*/
|
||
--Character-Image-Blur-Amount:8px;
|
||
--Character-Image-Hover-Speed:400ms;
|
||
--Character-Image-Spacing:46px;
|
||
|
||
/*----- POPUP SETTINGS -----*/
|
||
--Popup-Fade-Speed:400ms;
|
||
--Popup-Fade-Speed-RAW:400;
|
||
|
||
--Overlay-Color:#ffffff;
|
||
--Overlay-Transparency:45%;
|
||
|
||
--Popup-Width:510px;
|
||
--Popup-Image-Height:420px;
|
||
|
||
--Popup-Background:#fff;
|
||
--Popup-Padding:20px;
|
||
|
||
/*----- MAIN POPUP TITLE (TOP LEFT) -----*/
|
||
--Popup-Title-Size:13px;
|
||
--Popup-Title-Color:#908a88;
|
||
--Popup-Title-Padding:10px;
|
||
--Popup-Title-Underline:#f3f3f3;
|
||
|
||
/*----- POPUP CLOSE BUTTON -----*/
|
||
--Popup-Close-Width:30px;
|
||
--Popup-Close-Height:18px;
|
||
--Popup-Close-Icon-Size:6px;
|
||
--Popup-Close-Icon-Color:#5f5e5c;
|
||
--Popup-Close-Background:#f6f5f5;
|
||
|
||
/*----- POPUP IMAGE (LONG, LEFT) -----*/
|
||
--Popup-Image-Width:215px;
|
||
--Popup-Image-Right-Gap:15px;
|
||
|
||
/*----- POPUP SUBHEADINGS (e.g. basic info, about) -----*/
|
||
--Popup-Subheading-Top-Gap:20px;
|
||
--Popup-Subheading-Size:12px;
|
||
--Popup-Subheading-Color:#999;
|
||
--Popup-Subheading-Accent:#b8ab93;
|
||
--Popup-Subheading-Bottom-Gap:14px;
|
||
|
||
/*----- POPUP ICON ROW STATS (e.g. name, age, birthday) -----*/
|
||
--Popup-Stats-Icon-Size:13px;
|
||
--Popup-Stats-Icon-Color:#fff;
|
||
--Popup-Stats-Icon-Padding:6px;
|
||
--Popup-Stats-Icon-Background:#d6d1d1;
|
||
|
||
--Popup-Stats-Label-Font-Size:10px;
|
||
--Popup-Stats-Label-Font-Color:#b8afa4;
|
||
|
||
--Popup-Stats-Text-Size:12px;
|
||
--Popup-Stats-Text-Color:#999;
|
||
|
||
--Popup-Stats-Row-Spacing:6px;
|
||
|
||
/*----- POPUP METER BAR STATS -----*/
|
||
--Meter-Bar-Label-Size:10px;
|
||
--Meter-Bar-Label-Color:#b8afa4;
|
||
--Meter-Bar-Label-Gap:16px;
|
||
|
||
--Meter-Bar-Height:8px;
|
||
--Meter-Bar-Fill:#d6d1d1;
|
||
--Meter-Bar-Empty:#f4f4f4;
|
||
--Meter-Bar-Roundness:5px;
|
||
--Meter-Bar-Row-Spacing:5px;
|
||
|
||
/*----- POPUP PARAGRAPH TEXT -----*/
|
||
--Paragraph-Text-Align:justify;
|
||
|
||
/*----- NAVLINKS / CUSTOM LINKS -----*/
|
||
--Navlinks-Edge-Offset:9px;
|
||
--Navlinks-Icon-Size:11px;
|
||
--Navlinks-Icon-Color:#b4adb8;
|
||
--Navlinks-Background:#1f182a;
|
||
--Navlinks-Padding:10px;
|
||
--Navlinks-Spacing:5px;
|
||
|
||
--Navlinks-HOVER-Background:#dcd4cf;
|
||
--Navlinks-HOVER-Icon-Color:#424446;
|
||
--Navlinks-Hover-Speed:420ms;
|
||
|
||
/*----- BOTTOM TITLE -----*/
|
||
--Bottom-Floor-Title-Size:20px;
|
||
--Bottom-Floor-Title-Color:#b4adb8;
|
||
--Bottom-Floor-Title-Padding:30px;
|
||
--Bottom-Floor-Title-Background:#130f1a;
|
||
|
||
/*----- OTHER -----*/
|
||
--Scrollbar-Width:0px;
|
||
--Scrollbar-Color:#f0f0f0;
|
||
--Scrollbar-Gap:0px;
|
||
|
||
--Tooltips-BG:#dcd4cf;
|
||
--Tooltips-Text:#424446;
|
||
|
||
--Text-On-Highlight:#777;
|
||
--Text-BG-On-Highlight:#f6f6f6;
|
||
|
||
--TumblrControls-Color:black;
|
||
}
|
||
|
||
/*----- LARGE TOP TITLE -----*/
|
||
.large-floating-title {
|
||
position:absolute;
|
||
top:0;
|
||
width:80vw;
|
||
display:inline-block;
|
||
font-family:"LT emphasis";
|
||
font-size:var(--Large-Floating-Title-Size);
|
||
text-transform:uppercase;
|
||
letter-spacing:2px;
|
||
color:var(--Large-Floating-Title-Color);
|
||
line-height:var(--Large-Floating-Title-Line-Height);
|
||
text-align:center;
|
||
opacity:0;
|
||
transition:opacity 0.4s ease-in-out;
|
||
}
|
||
|
||
.large-floating-title div {
|
||
white-space:pre-line;
|
||
}
|
||
|
||
/*----- NAVLINKS / CUSTOM LINKS -----*/
|
||
.navlinks {
|
||
display:inline-block;
|
||
margin-left:var(--Navlinks-Edge-Offset);
|
||
margin-bottom:var(--Navlinks-Edge-Offset);
|
||
line-height:0;
|
||
}
|
||
|
||
.navlinks a {
|
||
width:calc(var(--Navlinks-Icon-Size) + (var(--Navlinks-Padding) * 2));
|
||
height:calc(var(--Navlinks-Icon-Size) + (var(--Navlinks-Padding) * 2));
|
||
background:var(--Navlinks-Background);
|
||
border-radius:100%;
|
||
line-height:0;
|
||
transition:background var(--Navlinks-Hover-Speed) ease-in-out;
|
||
}
|
||
|
||
.navlinks a:hover {
|
||
background:var(--Navlinks-HOVER-Background);
|
||
}
|
||
|
||
.navlinks a:hover .fi {
|
||
color:var(--Navlinks-HOVER-Icon-Color);
|
||
}
|
||
|
||
.navlinks a + a {
|
||
margin-top:var(--Navlinks-Spacing);
|
||
}
|
||
|
||
.navlinks .fi {
|
||
font-size:var(--Navlinks-Icon-Size);
|
||
color:var(--Navlinks-Icon-Color);
|
||
transition:color var(--Navlinks-Hover-Speed) ease-in-out;
|
||
}
|
||
|
||
.navlinks .fi-rr-apps {
|
||
margin-top:1px;
|
||
}
|
||
|
||
/*----- BOTTOM TITLE -----*/
|
||
.bottom-floor-title {
|
||
width:100%;
|
||
padding:var(--Bottom-Floor-Title-Padding);
|
||
background:var(--Bottom-Floor-Title-Background);
|
||
box-sizing:border-box;
|
||
font-family:"reggae one";
|
||
font-size:var(--Bottom-Floor-Title-Size);
|
||
text-transform:uppercase;
|
||
letter-spacing:.5px;
|
||
color:var(--Bottom-Floor-Title-Color);
|
||
text-align:center;
|
||
line-height:1em;
|
||
white-space:nowrap;
|
||
}
|
||
|
||
/*----- CHARACTER LIST -----*/
|
||
.character-list {
|
||
position:fixed;
|
||
bottom:0;left:0;right:0;
|
||
margin:0 auto;
|
||
margin-bottom:calc(var(--Bottom-Floor-Title-Size) + (var(--Bottom-Floor-Title-Padding) * 2));
|
||
align-items:flex-end;
|
||
flex-wrap:nowrap;
|
||
width:calc(100% - (var(--Navlinks-Edge-Offset) * 2) - (var(--Navlinks-Icon-Size) * 2) - (var(--Navlinks-Padding) * 4));
|
||
z-index:9;
|
||
}
|
||
|
||
[menu-character]{
|
||
margin:0 calc(var(--Character-Image-Spacing) / 2);
|
||
cursor:pointer;
|
||
position:relative;
|
||
overflow:hidden;
|
||
transition:all var(--Character-Image-Hover-Speed) ease-in-out,margin 0s;
|
||
}
|
||
|
||
.character-list:hover [menu-character]{
|
||
opacity:0.8;
|
||
-webkit-filter:blur(var(--Character-Image-Blur-Amount));
|
||
-moz-filter:blur(var(--Character-Image-Blur-Amount));
|
||
-o-filter:blur(var(--Character-Image-Blur-Amount));
|
||
filter:blur(var(--Character-Image-Blur-Amount));
|
||
}
|
||
|
||
.character-list:hover [menu-character]:hover {
|
||
opacity:1;
|
||
-webkit-filter:blur(0px);
|
||
-moz-filter:blur(0px);
|
||
-o-filter:blur(0px);
|
||
filter:blur(0px);
|
||
}
|
||
|
||
/*----- POPUP BOXES -----*/
|
||
.popup-box {
|
||
position:relative;
|
||
padding:var(--Popup-Padding);
|
||
background:var(--Popup-Background);
|
||
width:var(--Popup-Width);
|
||
}
|
||
|
||
/*----- CLOSE POPUP BUTTON -----*/
|
||
.dis-close {
|
||
position:absolute;
|
||
top:0;right:0;
|
||
width:var(--Popup-Close-Width);
|
||
height:var(--Popup-Close-Height);
|
||
background:var(--Popup-Close-Background);
|
||
cursor:pointer;
|
||
}
|
||
|
||
.dis-close .fi {
|
||
font-size:var(--Popup-Close-Icon-Size);
|
||
color:var(--Popup-Close-Icon-Color);
|
||
line-height:1em;
|
||
}
|
||
|
||
[popup-title]{
|
||
display:block;
|
||
font-family:kaori gel;
|
||
font-size:var(--Popup-Title-Size);
|
||
text-transform:uppercase;
|
||
letter-spacing:1px;
|
||
color:var(--Popup-Title-Color);
|
||
padding-bottom:var(--Popup-Title-Padding);
|
||
border-bottom:1px solid var(--Popup-Title-Underline);
|
||
line-height:1em;
|
||
}
|
||
|
||
[popup-title] + .maain {
|
||
margin-top:calc(var(--Popup-Title-Padding) * 1.25);
|
||
}
|
||
|
||
[popup-img-cont]{
|
||
align-self:center;
|
||
width:var(--Popup-Image-Width);
|
||
height:var(--Popup-Image-Height);
|
||
overflow:hidden;
|
||
}
|
||
|
||
[sub-heading]{
|
||
display:block;
|
||
font-family:montserrat;
|
||
font-size:var(--Popup-Subheading-Size);
|
||
text-transform:uppercase;
|
||
letter-spacing:1px;
|
||
color:var(--Popup-Subheading-Color);
|
||
line-height:1.5em;
|
||
text-align:center;
|
||
}
|
||
|
||
[sub-heading]::first-letter {
|
||
color:var(--Popup-Subheading-Accent);
|
||
}
|
||
|
||
* + [sub-heading]{
|
||
margin-top:var(--Popup-Subheading-Top-Gap);
|
||
}
|
||
|
||
[sub-heading] + * {
|
||
margin-top:var(--Popup-Subheading-Bottom-Gap);
|
||
}
|
||
|
||
/*----- ICON ROW STATS -----*/
|
||
[icon-row] + [icon-row]{
|
||
margin-top:var(--Popup-Stats-Row-Spacing);
|
||
}
|
||
|
||
[icon-row] .las + [label] {
|
||
margin-left:6px;
|
||
}
|
||
|
||
[icon-row] .las {
|
||
padding:var(--Popup-Stats-Icon-Padding);
|
||
background:var(--Popup-Stats-Icon-Background);
|
||
border-radius:2px;
|
||
font-size:var(--Popup-Stats-Icon-Size);
|
||
color:var(--Popup-Stats-Icon-Color);
|
||
line-height:1em;
|
||
}
|
||
|
||
[icon-row] [label]{
|
||
display:inline-block;
|
||
padding-left:1px;
|
||
font-family:quicksand;
|
||
font-size:var(--Popup-Stats-Label-Font-Size);
|
||
text-transform:uppercase;
|
||
letter-spacing:.5px;
|
||
color:var(--Popup-Stats-Label-Font-Color);
|
||
}
|
||
|
||
[icon-row] [label] + [text] {
|
||
margin-left:4px;
|
||
}
|
||
|
||
[icon-row] [text]{
|
||
font-family:karla;
|
||
font-size:var(--Popup-Stats-Text-Size);
|
||
color:var(--Popup-Stats-Text-Color);
|
||
line-height:1.69em;
|
||
}
|
||
|
||
/*----- METER BAR STATS -----*/
|
||
.bar-label {
|
||
display:table-cell;
|
||
font-family:quicksand;
|
||
font-size:var(--Meter-Bar-Label-Size);
|
||
text-transform:uppercase;
|
||
letter-spacing:1px;
|
||
color:var(--Meter-Bar-Label-Color);
|
||
line-height:1.5em;
|
||
}
|
||
|
||
.bar-cont {
|
||
position:relative;
|
||
width:100%;
|
||
height:var(--Meter-Bar-Height);
|
||
background:var(--Meter-Bar-Empty);
|
||
border-radius:var(--Meter-Bar-Roundness);
|
||
overflow:hidden;
|
||
}
|
||
|
||
.bar-fill {
|
||
position:absolute;
|
||
top:0;left:0;
|
||
height:100%;
|
||
background:var(--Meter-Bar-Fill);
|
||
border-radius:0 var(--Meter-Bar-Roundness) var(--Meter-Bar-Roundness) 0;
|
||
}
|
||
|
||
/*----- PARAGRAPH TEXT -----*/
|
||
[paragraph-text]{
|
||
text-align:var(--Paragraph-Text-Align);
|
||
}
|
||
|
||
</style>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!--==============================
|
||
╔══ ❀•°❀°•❀ ══╗
|
||
|
||
LARGE TITLE AT THE TOP
|
||
|
||
╚══ ❀•°❀°•❀ ══╝
|
||
================================-->
|
||
|
||
<div large-floating-title>
|
||
Keep walking forward
|
||
no matter how tattered
|
||
you become
|
||
</div>
|
||
|
||
|
||
<!--==============================
|
||
╔══ ❀•°❀°•❀ ══╗
|
||
|
||
CHARACTER LIST
|
||
|
||
╚══ ❀•°❀°•❀ ══╝
|
||
================================-->
|
||
|
||
<div class="character-list">
|
||
|
||
<div menu-character chara-id="midoriya" width="121px">
|
||
<img image-url="https://glen-themes.gitlab.io/chara-pages/01/imgs/BPKYoEl.png">
|
||
<span hover-text>midoriya izuku</span>
|
||
</div>
|
||
|
||
<!--===========================================-->
|
||
<!--===========================================-->
|
||
<!--===========================================-->
|
||
|
||
<div menu-character chara-id="bakugou" width="152px">
|
||
<img image-url="https://glen-themes.gitlab.io/chara-pages/01/imgs/jFlfdgd.png" move-down="4px" move-left="6px">
|
||
<span hover-text>bakugou katsuki</span>
|
||
</div>
|
||
|
||
<!--===========================================-->
|
||
<!--===========================================-->
|
||
<!--===========================================-->
|
||
|
||
</div><!--don't remove this </div> line-->
|
||
|
||
|
||
|
||
<!--==============================
|
||
╔══ ❀•°❀°•❀ ══╗
|
||
|
||
CHARACTER POPUP BOXES
|
||
|
||
╚══ ❀•°❀°•❀ ══╝
|
||
================================-->
|
||
|
||
<div character-box chara-id="midoriya">
|
||
<div popup-title>midoriya izuku</div>
|
||
|
||
<img image-url="https://glen-themes.gitlab.io/chara-pages/01/imgs/ZJpQ228.png" width="96%" move-left="5px" move-down="5px">
|
||
|
||
<div sub-heading>basic info</div>
|
||
|
||
<div icon-row>
|
||
<i class="las la-pen-alt"></i>
|
||
<span label>Name:</span>
|
||
<span text>緑谷出久</span>
|
||
</div>
|
||
|
||
<div icon-row>
|
||
<i class="las la-user"></i>
|
||
<span label>Age:</span>
|
||
<span text>17</span>
|
||
</div>
|
||
|
||
<div icon-row>
|
||
<i class="las la-birthday-cake"></i>
|
||
<span label>Birthday:</span>
|
||
<span text>July 15th</span>
|
||
</div>
|
||
|
||
<div sub-heading>statistics</div>
|
||
|
||
<div meter-bars>
|
||
<div bar-name="power" fill="20%"></div>
|
||
<div bar-name="speed" fill="20%"></div>
|
||
<div bar-name="technique" fill="80%"></div>
|
||
<div bar-name="intelligence" fill="80%"></div>
|
||
<div bar-name="copperativeness" fill="100%"></div>
|
||
</div>
|
||
|
||
<div sub-heading>about</div>
|
||
|
||
<div paragraph-text>
|
||
The accumulated and stockpiled strength of countless men, crystallized in its current user! In the twinkling of an eye, Midoriya can summon an absolutely stupid amount of power! However, the toll it takes on his body when he unleashes his strength at the full 100% is enough to break his bones, so his next challenge is learning to modulate it.
|
||
</div><!--end paragraph-text-->
|
||
</div><!--don't remove this </div> line-->
|
||
|
||
<!--===========================================-->
|
||
<!--===========================================-->
|
||
<!--===========================================-->
|
||
|
||
<div character-box chara-id="bakugou">
|
||
<div popup-title>bakugou katsuki</div>
|
||
|
||
<img image-url="https://glen-themes.gitlab.io/chara-pages/01/imgs/m3mW1CP.png" width="96%" move-down="5px">
|
||
|
||
<div sub-heading>basic info</div>
|
||
|
||
<div icon-row>
|
||
<i class="las la-pen-alt"></i>
|
||
<span label>Name:</span>
|
||
<span text>爆豪勝己</span>
|
||
</div>
|
||
|
||
<div icon-row>
|
||
<i class="las la-user"></i>
|
||
<span label>Age:</span>
|
||
<span text>17</span>
|
||
</div>
|
||
|
||
<div icon-row>
|
||
<i class="las la-birthday-cake"></i>
|
||
<span label>Birthday:</span>
|
||
<span text>April 20th</span>
|
||
</div>
|
||
|
||
<div sub-heading>statistics</div>
|
||
|
||
<div meter-bars>
|
||
<div bar-name="power" fill="100%"></div>
|
||
<div bar-name="speed" fill="80%"></div>
|
||
<div bar-name="technique" fill="100%"></div>
|
||
<div bar-name="intelligence" fill="80%"></div>
|
||
<div bar-name="copperativeness" fill="20%"></div>
|
||
</div>
|
||
|
||
<div sub-heading>about</div>
|
||
|
||
<div paragraph-text>
|
||
The sweat glands on Bakugou's palms are mutant! With sweat akin to nitroglycerin, he's able to cause explosions at will. He can spark off explosions unaided as well, but his ability is undoubtedly boosted by activities that conduce sweating - so he's a force to be reckoned with in summertime! However, he's a slow starter in winter! At any rate, the more sweat, the greater the power of his quirk. He has no big drawbacks and his strength leaves no heads unturned! He's a rare specimen - a delinquent with a promising future!
|
||
</div><!--end paragraph-text-->
|
||
</div><!--don't remove this </div> line-->
|
||
|
||
<!--===========================================-->
|
||
<!--===========================================-->
|
||
<!--===========================================-->
|
||
|
||
|
||
|
||
<!--==============================
|
||
╔══ ❀•°❀°•❀ ══╗
|
||
|
||
NAVLINKS / CUSTOM LINKS
|
||
|
||
╚══ ❀•°❀°•❀ ══╝
|
||
================================-->
|
||
|
||
<div class="booba">
|
||
<div class="navlinks">
|
||
|
||
<!--
|
||
• add or remove any links as you need
|
||
|
||
HOW TO CHANGE THE ICON FOR THAT LINK:
|
||
• go to flaticon.com/uicons
|
||
• DO NOT change the "regular" and "rounded" presets
|
||
• search for an icon you like, click on it
|
||
• click the copy icon on the code snippet above the green boxes
|
||
• below, replace the fi-rr line with what you copied
|
||
-->
|
||
|
||
<a href="/" title="home">
|
||
<i class="fi fi-rr-Home"></i>
|
||
</a>
|
||
|
||
<a href="/ask" title="askbox">
|
||
<i class="fi fi-rr-Envelope"></i>
|
||
</a>
|
||
|
||
<a href="/archive" title="archive">
|
||
<i class="fi fi-rr-Apps"></i>
|
||
</a>
|
||
|
||
<a href="https://youtu.be/ZkNMZlkrzaU" title="sample link">
|
||
<i class="fi fi-rr-Link"></i>
|
||
</a>
|
||
|
||
<a href="https://youtu.be/ZkNMZlkrzaU" title="sample link">
|
||
<i class="fi fi-rr-Star"></i>
|
||
</a>
|
||
|
||
<a href="https://youtu.be/ZkNMZlkrzaU" title="sample link">
|
||
<i class="fi fi-rr-Thumbs-Up"></i>
|
||
</a>
|
||
|
||
</div><!--don't remove this </div> line-->
|
||
<!--end navlinks-->
|
||
|
||
<!---- CREDIT ---->
|
||
<!-- please do not remove (⊃д⊂) -->
|
||
<a class="cows-ring-endlessly-in-tandem" href="//glenthemes.tumblr.com" title="❮❮ Fortitude ❯❯ by glenthemes">credit</a>
|
||
|
||
<!--==============================
|
||
╔══ ❀•°❀°•❀ ══╗
|
||
|
||
BOTTOM TITLE
|
||
|
||
╚══ ❀•°❀°•❀ ══╝
|
||
================================-->
|
||
|
||
<div class="bottom-floor-title">
|
||
歩み続けろ。ボロボロになっても。
|
||
</div><!--don't remove this </div> line-->
|
||
|
||
|
||
</div><!--booba-->
|
||
|
||
</body>
|
||
|
||
</html> |