API tools faq
paste
Advertisement
glenthemes

Character Page [01]: Fortitude

glenthemes
Apr 5th, 2017 (edited)
11,700
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.85 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. Character Page [01]: Fortitude
  3. Made by glenthemes
  4.  
  5. ❯❯ this version contains 2 base characters!
  6. ❯❯ for 6 characters: https://pastebin.com/raw/vRyA9fDP
  7.  
  8. Initial release: 2017/04/06
  9. Major update: 2021/12/12
  10. Last updated: 2023/05/10
  11.  
  12. ------------------------------------------------------
  13.  
  14. πŸ“– PLEASE READ THE GUIDE: πŸ“–
  15.  
  16. https://docs.google.com/presentation/d/14EJlSGPCq-xH6YlT1JcOFzk_SEl_z7fl9ozhdKCP31o/edit?usp=sharing
  17.  
  18. ------------------------------------------------------
  19.  
  20. TERMS OF USE:
  21. 1) Do not remove the theme credit.
  22. 2) Do not repost/redistribute my themes.
  23. 3) Do not take parts of the code and use it as your own.
  24. 4) Do not use my themes as a base code.
  25. 5) Do not mix my themes together.
  26.  
  27. CREDITS:
  28. (✿ˢ´>Ο‰<) ~ glencredits.tumblr.com/fortitude
  29. ------------------------------------------------------------------------>
  30. <!DOCTYPE html>
  31. <html>
  32.  
  33. <head>
  34.  
  35. <title>{Title}</title>
  36.  
  37. <link rel="shortcut icon" href="{Favicon}">
  38.  
  39. <!------ JQUERY ------>
  40. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  41.  
  42. <!------ GOOGLE FONTS ------>
  43. <link href="https://fonts.googleapis.com/css?family=Quicksand:600|Reggae+One|Public+Sans:500|Nunito:700|Karla|Montserrat:500" rel="stylesheet">
  44.  
  45. <!------ PRELOAD CUSTOM FONTS ------>
  46. <link rel="preload" href="//glen-assets.github.io/fonts/LT Emphasis.ttf" as="font" type="font/ttf" crossorigin>
  47.  
  48. <link rel="preload" href="//glen-assets.github.io/fonts/KaoriGel.ttf" as="font" type="font/ttf" crossorigin>
  49.  
  50. <!------ ICON FONTS ------>
  51. <link rel="stylesheet" href="https://glen-assets.github.io/flaticon-uicons/uicons-regular-rounded.css">
  52.  
  53. <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
  54.  
  55. <!------ PAGE SCRIPTS ------>
  56. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  57.  
  58. <link href="//glen-themes.gitlab.io/chara-pages/01/uzlnn.css" rel="stylesheet">
  59.  
  60. <script src="//glen-themes.gitlab.io/chara-pages/01/ysypl.js"></script>
  61.  
  62. <!--------------------------------------------------------->
  63.  
  64. <style type="text/css">
  65.  
  66. /*----- CUSTOM FONTS -----*/
  67. @font-face { font-family: "LT emphasis"; src: url('//glen-assets.github.io/fonts/LT Emphasis.ttf'); }
  68.  
  69. @font-face { font-family: "kaori gel"; src: url('//glen-assets.github.io/fonts/KaoriGel.ttf'); }
  70.  
  71. /*----- TOOLTIPS -----*/
  72. #s-m-t-tooltip {
  73. padding:5px 10px;
  74. margin:20px;
  75. background-color:var(--Tooltips-BG);
  76. border-radius:2px;
  77. font-family:public sans;
  78. font-size:8px;
  79. letter-spacing:0.5px;
  80. text-transform:uppercase;
  81. color:var(--Tooltips-Text);
  82. line-height:1.7em;
  83. z-index:99;
  84. max-width:40vw;
  85. }
  86.  
  87. /*----- TUMBLR CONTROLS -----*/
  88. iframe#tumblr_controls, .iframe-controls--desktop {
  89. top:5px!important;
  90. right:5px!important;
  91. position:fixed!important;
  92.  
  93. transform:scale(0.7,0.7);
  94.  
  95. transform-origin:100% 0;
  96. z-index:999999!important;
  97. user-select:none;
  98. opacity:0;
  99. }
  100.  
  101. .tc-inv {
  102. filter:invert(100%) hue-rotate(180deg)!important;
  103. -webkit-filter:invert(100%) hue-rotate(180deg)!important;
  104. }
  105.  
  106. .abeer {
  107. opacity:1!important;
  108. }
  109.  
  110. .tmblr-iframe--follow-teaser, .follow-teaser, .iframe-controls--phone-mobile, .tmblr-iframe--app-cta-button {
  111. display:none!important;
  112. }
  113.  
  114. /*----- BASICS -----*/
  115. body {
  116. background-image:url();
  117. background-attachment:fixed;
  118. background-repeat:repeat;
  119. font-family:karla;
  120. font-size:var(--Main-Font-Size);
  121. color:var(--Main-Text-Color);
  122. line-height:var(--Main-Text-Line-Height);
  123. text-align:left;
  124. }
  125.  
  126. .popup-box a:not([class]){
  127. color:var(--Links-Color);
  128. padding-bottom:.5px;
  129. border-bottom:1px solid var(--Links-Underline);
  130. text-decoration:none;
  131. }
  132.  
  133. a {
  134. text-decoration:none;
  135. }
  136.  
  137. b, strong {
  138. color:var(--Bold);
  139. }
  140.  
  141. i:not([class]), em {
  142. color:var(--Italic);
  143. }
  144.  
  145. .note-to-user {
  146. /* change VISIBLE to HIDDEN to dismiss the "get started" message */
  147. visibility:visible;
  148. }
  149.  
  150. /*----- TEXT HIGHLIGHT -----*/
  151. ::selection {
  152. color:var(--Text-On-Highlight);
  153. background:var(--Text-BG-On-Highlight);
  154. }
  155.  
  156. ::-moz-selection {
  157. color:var(--Text-On-Highlight);
  158. background:var(--Text-BG-On-Highlight);
  159. }
  160.  
  161. /*----- SCROLLBAR -----*/
  162. ::-webkit-scrollbar {
  163. width:var(--Scrollbar-Width);
  164. height:0;
  165. background-color:var(--Popup-Background);
  166. }
  167.  
  168. ::-webkit-scrollbar-thumb {
  169. background-color:var(--Scrollbar-Color);
  170. border-radius:var(--Scrollbar-Width);
  171. }
  172.  
  173. ::-webkit-scrollbar-track {
  174. background-color:var(--Popup-Background);
  175. border-radius:var(--Scrollbar-Width);
  176. }
  177.  
  178. ::-webkit-scrollbar-corner {
  179. background:var(--Popup-Background);
  180. }
  181.  
  182. /*----- MAIN SETTINGS -----*/
  183. body {
  184. background-color:#eeecec;
  185. }
  186.  
  187. :root {
  188. /*----- GENERAL -----*/
  189. --Main-Font-Size:12px;
  190. --Main-Text-Color:#999;
  191. --Main-Text-Line-Height:1.6em;
  192.  
  193. --Links-Color:#f38989;
  194. --Links-Underline:#fbdbdb;
  195.  
  196. --Bold:#999;
  197. --Italic:#999;
  198.  
  199. /*----- TOP FLOATING TITLE -----*/
  200. --Large-Floating-Title-Bottom-Gap:32px;
  201. --Large-Floating-Title-Size:18px;
  202. --Large-Floating-Title-Color:#343846;
  203. --Large-Floating-Title-Line-Height:175%;
  204.  
  205. /*----- CHARACTER LIST -----*/
  206. --Character-Image-Blur-Amount:8px;
  207. --Character-Image-Hover-Speed:400ms;
  208. --Character-Image-Spacing:46px;
  209.  
  210. /*----- POPUP SETTINGS -----*/
  211. --Popup-Fade-Speed:400ms;
  212. --Popup-Fade-Speed-RAW:400;
  213.  
  214. --Overlay-Color:#ffffff;
  215. --Overlay-Transparency:45%;
  216.  
  217. --Popup-Width:510px;
  218. --Popup-Image-Height:420px;
  219.  
  220. --Popup-Background:#fff;
  221. --Popup-Padding:20px;
  222.  
  223. /*----- MAIN POPUP TITLE (TOP LEFT) -----*/
  224. --Popup-Title-Size:13px;
  225. --Popup-Title-Color:#908a88;
  226. --Popup-Title-Padding:10px;
  227. --Popup-Title-Underline:#f3f3f3;
  228.  
  229. /*----- POPUP CLOSE BUTTON -----*/
  230. --Popup-Close-Width:30px;
  231. --Popup-Close-Height:18px;
  232. --Popup-Close-Icon-Size:6px;
  233. --Popup-Close-Icon-Color:#5f5e5c;
  234. --Popup-Close-Background:#f6f5f5;
  235.  
  236. /*----- POPUP IMAGE (LONG, LEFT) -----*/
  237. --Popup-Image-Width:215px;
  238. --Popup-Image-Right-Gap:15px;
  239.  
  240. /*----- POPUP SUBHEADINGS (e.g. basic info, about) -----*/
  241. --Popup-Subheading-Top-Gap:20px;
  242. --Popup-Subheading-Size:12px;
  243. --Popup-Subheading-Color:#999;
  244. --Popup-Subheading-Accent:#b8ab93;
  245. --Popup-Subheading-Bottom-Gap:14px;
  246.  
  247. /*----- POPUP ICON ROW STATS (e.g. name, age, birthday) -----*/
  248. --Popup-Stats-Icon-Size:13px;
  249. --Popup-Stats-Icon-Color:#fff;
  250. --Popup-Stats-Icon-Padding:6px;
  251. --Popup-Stats-Icon-Background:#d6d1d1;
  252.  
  253. --Popup-Stats-Label-Font-Size:10px;
  254. --Popup-Stats-Label-Font-Color:#b8afa4;
  255.  
  256. --Popup-Stats-Text-Size:12px;
  257. --Popup-Stats-Text-Color:#999;
  258.  
  259. --Popup-Stats-Row-Spacing:6px;
  260.  
  261. /*----- POPUP METER BAR STATS -----*/
  262. --Meter-Bar-Label-Size:10px;
  263. --Meter-Bar-Label-Color:#b8afa4;
  264. --Meter-Bar-Label-Gap:16px;
  265.  
  266. --Meter-Bar-Height:8px;
  267. --Meter-Bar-Fill:#d6d1d1;
  268. --Meter-Bar-Empty:#f4f4f4;
  269. --Meter-Bar-Roundness:5px;
  270. --Meter-Bar-Row-Spacing:5px;
  271.  
  272. /*----- POPUP PARAGRAPH TEXT -----*/
  273. --Paragraph-Text-Align:justify;
  274.  
  275. /*----- NAVLINKS / CUSTOM LINKS -----*/
  276. --Navlinks-Edge-Offset:9px;
  277. --Navlinks-Icon-Size:11px;
  278. --Navlinks-Icon-Color:#b4adb8;
  279. --Navlinks-Background:#1f182a;
  280. --Navlinks-Padding:10px;
  281. --Navlinks-Spacing:5px;
  282.  
  283. --Navlinks-HOVER-Background:#dcd4cf;
  284. --Navlinks-HOVER-Icon-Color:#424446;
  285. --Navlinks-Hover-Speed:420ms;
  286.  
  287. /*----- BOTTOM TITLE -----*/
  288. --Bottom-Floor-Title-Size:20px;
  289. --Bottom-Floor-Title-Color:#b4adb8;
  290. --Bottom-Floor-Title-Padding:30px;
  291. --Bottom-Floor-Title-Background:#130f1a;
  292.  
  293. /*----- OTHER -----*/
  294. --Scrollbar-Width:0px;
  295. --Scrollbar-Color:#f0f0f0;
  296. --Scrollbar-Gap:0px;
  297.  
  298. --Tooltips-BG:#dcd4cf;
  299. --Tooltips-Text:#424446;
  300.  
  301. --Text-On-Highlight:#777;
  302. --Text-BG-On-Highlight:#f6f6f6;
  303.  
  304. --TumblrControls-Color:black;
  305. }
  306.  
  307. /*----- LARGE TOP TITLE -----*/
  308. .large-floating-title {
  309. position:absolute;
  310. top:0;
  311. width:80vw;
  312. display:inline-block;
  313. font-family:"LT emphasis";
  314. font-size:var(--Large-Floating-Title-Size);
  315. text-transform:uppercase;
  316. letter-spacing:2px;
  317. color:var(--Large-Floating-Title-Color);
  318. line-height:var(--Large-Floating-Title-Line-Height);
  319. text-align:center;
  320. opacity:0;
  321. transition:opacity 0.4s ease-in-out;
  322. }
  323.  
  324. .large-floating-title div {
  325. white-space:pre-line;
  326. }
  327.  
  328. /*----- NAVLINKS / CUSTOM LINKS -----*/
  329. .navlinks {
  330. display:inline-block;
  331. margin-left:var(--Navlinks-Edge-Offset);
  332. margin-bottom:var(--Navlinks-Edge-Offset);
  333. line-height:0;
  334. }
  335.  
  336. .navlinks a {
  337. width:calc(var(--Navlinks-Icon-Size) + (var(--Navlinks-Padding) * 2));
  338. height:calc(var(--Navlinks-Icon-Size) + (var(--Navlinks-Padding) * 2));
  339. background:var(--Navlinks-Background);
  340. border-radius:100%;
  341. line-height:0;
  342. transition:background var(--Navlinks-Hover-Speed) ease-in-out;
  343. }
  344.  
  345. .navlinks a:hover {
  346. background:var(--Navlinks-HOVER-Background);
  347. }
  348.  
  349. .navlinks a:hover .fi {
  350. color:var(--Navlinks-HOVER-Icon-Color);
  351. }
  352.  
  353. .navlinks a + a {
  354. margin-top:var(--Navlinks-Spacing);
  355. }
  356.  
  357. .navlinks .fi {
  358. font-size:var(--Navlinks-Icon-Size);
  359. color:var(--Navlinks-Icon-Color);
  360. transition:color var(--Navlinks-Hover-Speed) ease-in-out;
  361. }
  362.  
  363. .navlinks .fi-rr-apps {
  364. margin-top:1px;
  365. }
  366.  
  367. /*----- BOTTOM TITLE -----*/
  368. .bottom-floor-title {
  369. width:100%;
  370. padding:var(--Bottom-Floor-Title-Padding);
  371. background:var(--Bottom-Floor-Title-Background);
  372. box-sizing:border-box;
  373. font-family:"reggae one";
  374. font-size:var(--Bottom-Floor-Title-Size);
  375. text-transform:uppercase;
  376. letter-spacing:.5px;
  377. color:var(--Bottom-Floor-Title-Color);
  378. text-align:center;
  379. line-height:1em;
  380. white-space:nowrap;
  381. }
  382.  
  383. /*----- CHARACTER LIST -----*/
  384. .character-list {
  385. position:fixed;
  386. bottom:0;left:0;right:0;
  387. margin:0 auto;
  388. margin-bottom:calc(var(--Bottom-Floor-Title-Size) + (var(--Bottom-Floor-Title-Padding) * 2));
  389. align-items:flex-end;
  390. flex-wrap:nowrap;
  391. width:calc(100% - (var(--Navlinks-Edge-Offset) * 2) - (var(--Navlinks-Icon-Size) * 2) - (var(--Navlinks-Padding) * 4));
  392. z-index:9;
  393. }
  394.  
  395. [menu-character]{
  396. margin:0 calc(var(--Character-Image-Spacing) / 2);
  397. cursor:pointer;
  398. position:relative;
  399. overflow:hidden;
  400. transition:all var(--Character-Image-Hover-Speed) ease-in-out,margin 0s;
  401. }
  402.  
  403. .character-list:hover [menu-character]{
  404. opacity:0.8;
  405. -webkit-filter:blur(var(--Character-Image-Blur-Amount));
  406. -moz-filter:blur(var(--Character-Image-Blur-Amount));
  407. -o-filter:blur(var(--Character-Image-Blur-Amount));
  408. filter:blur(var(--Character-Image-Blur-Amount));
  409. }
  410.  
  411. .character-list:hover [menu-character]:hover {
  412. opacity:1;
  413. -webkit-filter:blur(0px);
  414. -moz-filter:blur(0px);
  415. -o-filter:blur(0px);
  416. filter:blur(0px);
  417. }
  418.  
  419. /*----- POPUP BOXES -----*/
  420. .popup-box {
  421. position:relative;
  422. padding:var(--Popup-Padding);
  423. background:var(--Popup-Background);
  424. width:var(--Popup-Width);
  425. }
  426.  
  427. /*----- CLOSE POPUP BUTTON -----*/
  428. .dis-close {
  429. position:absolute;
  430. top:0;right:0;
  431. width:var(--Popup-Close-Width);
  432. height:var(--Popup-Close-Height);
  433. background:var(--Popup-Close-Background);
  434. cursor:pointer;
  435. }
  436.  
  437. .dis-close .fi {
  438. font-size:var(--Popup-Close-Icon-Size);
  439. color:var(--Popup-Close-Icon-Color);
  440. line-height:1em;
  441. }
  442.  
  443. [popup-title]{
  444. display:block;
  445. font-family:kaori gel;
  446. font-size:var(--Popup-Title-Size);
  447. text-transform:uppercase;
  448. letter-spacing:1px;
  449. color:var(--Popup-Title-Color);
  450. padding-bottom:var(--Popup-Title-Padding);
  451. border-bottom:1px solid var(--Popup-Title-Underline);
  452. line-height:1em;
  453. }
  454.  
  455. [popup-title] + .maain {
  456. margin-top:calc(var(--Popup-Title-Padding) * 1.25);
  457. }
  458.  
  459. [popup-img-cont]{
  460. align-self:center;
  461. width:var(--Popup-Image-Width);
  462. height:var(--Popup-Image-Height);
  463. overflow:hidden;
  464. }
  465.  
  466. [sub-heading]{
  467. display:block;
  468. font-family:montserrat;
  469. font-size:var(--Popup-Subheading-Size);
  470. text-transform:uppercase;
  471. letter-spacing:1px;
  472. color:var(--Popup-Subheading-Color);
  473. line-height:1.5em;
  474. text-align:center;
  475. }
  476.  
  477. [sub-heading]::first-letter {
  478. color:var(--Popup-Subheading-Accent);
  479. }
  480.  
  481. * + [sub-heading]{
  482. margin-top:var(--Popup-Subheading-Top-Gap);
  483. }
  484.  
  485. [sub-heading] + * {
  486. margin-top:var(--Popup-Subheading-Bottom-Gap);
  487. }
  488.  
  489. /*----- ICON ROW STATS -----*/
  490. [icon-row] + [icon-row]{
  491. margin-top:var(--Popup-Stats-Row-Spacing);
  492. }
  493.  
  494. [icon-row] .las + [label] {
  495. margin-left:6px;
  496. }
  497.  
  498. [icon-row] .las {
  499. padding:var(--Popup-Stats-Icon-Padding);
  500. background:var(--Popup-Stats-Icon-Background);
  501. border-radius:2px;
  502. font-size:var(--Popup-Stats-Icon-Size);
  503. color:var(--Popup-Stats-Icon-Color);
  504. line-height:1em;
  505. }
  506.  
  507. [icon-row] [label]{
  508. display:inline-block;
  509. padding-left:1px;
  510. font-family:quicksand;
  511. font-size:var(--Popup-Stats-Label-Font-Size);
  512. text-transform:uppercase;
  513. letter-spacing:.5px;
  514. color:var(--Popup-Stats-Label-Font-Color);
  515. }
  516.  
  517. [icon-row] [label] + [text] {
  518. margin-left:4px;
  519. }
  520.  
  521. [icon-row] [text]{
  522. font-family:karla;
  523. font-size:var(--Popup-Stats-Text-Size);
  524. color:var(--Popup-Stats-Text-Color);
  525. line-height:1.69em;
  526. }
  527.  
  528. /*----- METER BAR STATS -----*/
  529. .bar-label {
  530. display:table-cell;
  531. font-family:quicksand;
  532. font-size:var(--Meter-Bar-Label-Size);
  533. text-transform:uppercase;
  534. letter-spacing:1px;
  535. color:var(--Meter-Bar-Label-Color);
  536. line-height:1.5em;
  537. }
  538.  
  539. .bar-cont {
  540. position:relative;
  541. width:100%;
  542. height:var(--Meter-Bar-Height);
  543. background:var(--Meter-Bar-Empty);
  544. border-radius:var(--Meter-Bar-Roundness);
  545. overflow:hidden;
  546. }
  547.  
  548. .bar-fill {
  549. position:absolute;
  550. top:0;left:0;
  551. height:100%;
  552. background:var(--Meter-Bar-Fill);
  553. border-radius:0 var(--Meter-Bar-Roundness) var(--Meter-Bar-Roundness) 0;
  554. }
  555.  
  556. /*----- PARAGRAPH TEXT -----*/
  557. [paragraph-text]{
  558. text-align:var(--Paragraph-Text-Align);
  559. }
  560.  
  561. </style>
  562.  
  563. </head>
  564.  
  565. <body>
  566.  
  567. <!--==============================
  568. ╔══ ❀‒°❀°‒❀ ══╗
  569.  
  570. LARGE TITLE AT THE TOP
  571.  
  572. β•šβ•β• ❀‒°❀°‒❀ ══╝
  573. ================================-->
  574.  
  575. <div large-floating-title>
  576. Keep walking forward
  577. no matter how tattered
  578. you become
  579. </div>
  580.  
  581.  
  582. <!--==============================
  583. ╔══ ❀‒°❀°‒❀ ══╗
  584.  
  585. CHARACTER LIST
  586.  
  587. β•šβ•β• ❀‒°❀°‒❀ ══╝
  588. ================================-->
  589.  
  590. <div class="character-list">
  591.  
  592. <div menu-character chara-id="midoriya" width="121px">
  593. <img image-url="https://glen-themes.gitlab.io/chara-pages/01/imgs/BPKYoEl.png">
  594. <span hover-text>midoriya izuku</span>
  595. </div>
  596.  
  597. <!--===========================================-->
  598. <!--===========================================-->
  599. <!--===========================================-->
  600.  
  601. <div menu-character chara-id="bakugou" width="152px">
  602. <img image-url="https://glen-themes.gitlab.io/chara-pages/01/imgs/jFlfdgd.png" move-down="4px" move-left="6px">
  603. <span hover-text>bakugou katsuki</span>
  604. </div>
  605.  
  606. <!--===========================================-->
  607. <!--===========================================-->
  608. <!--===========================================-->
  609.  
  610. </div><!--don't remove this </div> line-->
  611.  
  612.  
  613.  
  614. <!--==============================
  615. ╔══ ❀‒°❀°‒❀ ══╗
  616.  
  617. CHARACTER POPUP BOXES
  618.  
  619. β•šβ•β• ❀‒°❀°‒❀ ══╝
  620. ================================-->
  621.  
  622. <div character-box chara-id="midoriya">
  623. <div popup-title>midoriya izuku</div>
  624.  
  625. <img image-url="https://glen-themes.gitlab.io/chara-pages/01/imgs/ZJpQ228.png" width="96%" move-left="5px" move-down="5px">
  626.  
  627. <div sub-heading>basic info</div>
  628.  
  629. <div icon-row>
  630. <i class="las la-pen-alt"></i>
  631. <span label>Name:</span>
  632. <span text>η·‘θ°·ε‡ΊδΉ…</span>
  633. </div>
  634.  
  635. <div icon-row>
  636. <i class="las la-user"></i>
  637. <span label>Age:</span>
  638. <span text>17</span>
  639. </div>
  640.  
  641. <div icon-row>
  642. <i class="las la-birthday-cake"></i>
  643. <span label>Birthday:</span>
  644. <span text>July 15th</span>
  645. </div>
  646.  
  647. <div sub-heading>statistics</div>
  648.  
  649. <div meter-bars>
  650. <div bar-name="power" fill="20%"></div>
  651. <div bar-name="speed" fill="20%"></div>
  652. <div bar-name="technique" fill="80%"></div>
  653. <div bar-name="intelligence" fill="80%"></div>
  654. <div bar-name="copperativeness" fill="100%"></div>
  655. </div>
  656.  
  657. <div sub-heading>about</div>
  658.  
  659. <div paragraph-text>
  660. 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.
  661. </div><!--end paragraph-text-->
  662. </div><!--don't remove this </div> line-->
  663.  
  664. <!--===========================================-->
  665. <!--===========================================-->
  666. <!--===========================================-->
  667.  
  668. <div character-box chara-id="bakugou">
  669. <div popup-title>bakugou katsuki</div>
  670.  
  671. <img image-url="https://glen-themes.gitlab.io/chara-pages/01/imgs/m3mW1CP.png" width="96%" move-down="5px">
  672.  
  673. <div sub-heading>basic info</div>
  674.  
  675. <div icon-row>
  676. <i class="las la-pen-alt"></i>
  677. <span label>Name:</span>
  678. <span text>ηˆ†θ±ͺ勝己</span>
  679. </div>
  680.  
  681. <div icon-row>
  682. <i class="las la-user"></i>
  683. <span label>Age:</span>
  684. <span text>17</span>
  685. </div>
  686.  
  687. <div icon-row>
  688. <i class="las la-birthday-cake"></i>
  689. <span label>Birthday:</span>
  690. <span text>April 20th</span>
  691. </div>
  692.  
  693. <div sub-heading>statistics</div>
  694.  
  695. <div meter-bars>
  696. <div bar-name="power" fill="100%"></div>
  697. <div bar-name="speed" fill="80%"></div>
  698. <div bar-name="technique" fill="100%"></div>
  699. <div bar-name="intelligence" fill="80%"></div>
  700. <div bar-name="copperativeness" fill="20%"></div>
  701. </div>
  702.  
  703. <div sub-heading>about</div>
  704.  
  705. <div paragraph-text>
  706. 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!
  707. </div><!--end paragraph-text-->
  708. </div><!--don't remove this </div> line-->
  709.  
  710. <!--===========================================-->
  711. <!--===========================================-->
  712. <!--===========================================-->
  713.  
  714.  
  715.  
  716. <!--==============================
  717. ╔══ ❀‒°❀°‒❀ ══╗
  718.  
  719. NAVLINKS / CUSTOM LINKS
  720.  
  721. β•šβ•β• ❀‒°❀°‒❀ ══╝
  722. ================================-->
  723.  
  724. <div class="booba">
  725. <div class="navlinks">
  726.  
  727. <!--
  728. β€’ add or remove any links as you need
  729.  
  730. HOW TO CHANGE THE ICON FOR THAT LINK:
  731. β€’ go to flaticon.com/uicons
  732. β€’ DO NOT change the "regular" and "rounded" presets
  733. β€’ search for an icon you like, click on it
  734. β€’ click the copy icon on the code snippet above the green boxes
  735. β€’ below, replace the fi-rr line with what you copied
  736. -->
  737.  
  738. <a href="/" title="home">
  739. <i class="fi fi-rr-Home"></i>
  740. </a>
  741.  
  742. <a href="/ask" title="askbox">
  743. <i class="fi fi-rr-Envelope"></i>
  744. </a>
  745.  
  746. <a href="/archive" title="archive">
  747. <i class="fi fi-rr-Apps"></i>
  748. </a>
  749.  
  750. <a href="https://youtu.be/ZkNMZlkrzaU" title="sample link">
  751. <i class="fi fi-rr-Link"></i>
  752. </a>
  753.  
  754. <a href="https://youtu.be/ZkNMZlkrzaU" title="sample link">
  755. <i class="fi fi-rr-Star"></i>
  756. </a>
  757.  
  758. <a href="https://youtu.be/ZkNMZlkrzaU" title="sample link">
  759. <i class="fi fi-rr-Thumbs-Up"></i>
  760. </a>
  761.  
  762. </div><!--don't remove this </div> line-->
  763. <!--end navlinks-->
  764.  
  765. <!---- CREDIT ---->
  766. <!-- please do not remove (βŠƒΠ΄βŠ‚) -->
  767. <a class="cows-ring-endlessly-in-tandem" href="//glenthemes.tumblr.com" title="&#10094;&#10094; Fortitude &#10095;&#10095;&#8194;by glenthemes">credit</a>
  768.  
  769. <!--==============================
  770. ╔══ ❀‒°❀°‒❀ ══╗
  771.  
  772. BOTTOM TITLE
  773.  
  774. β•šβ•β• ❀‒°❀°‒❀ ══╝
  775. ================================-->
  776.  
  777. <div class="bottom-floor-title">
  778. ζ­©γΏηΆšγ‘γ‚γ€‚γƒœγƒ­γƒœγƒ­γ«γͺっても。
  779. </div><!--don't remove this </div> line-->
  780.  
  781.  
  782. </div><!--booba-->
  783.  
  784. </body>
  785.  
  786. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!