API tools faq
paste
glenthemes

About Page [09]: Siderea

glenthemes
Jan 20th, 2019 (edited)
2,376
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.62 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. About Page [09]: Siderea
  3. Made by glenthemes
  4.  
  5. Initial release: 2019/01/20
  6. Last updated: 2023/06/20
  7.  
  8. Latest update: fixed broken sticky sidebar feature
  9.  
  10. TERMS OF USE:
  11. 1) Do not remove the theme credit.
  12. 2) Do not repost/redistribute my themes.
  13. 3) Do not take parts of the code and use it as your own.
  14. 4) Do not use my themes as a base code.
  15. 5) Do not mix my themes together.
  16.  
  17. Please stick to the Terms! Make D.Va proud :)
  18.  
  19. Editing guide notes are found in GRAY! Please look out for them!
  20.  
  21. Credits:
  22. - all image icons by @zaryamei
  23. - "Big Noodle Titling Oblique" font by Sentinel Type @ dafont
  24. www.dafont.com/bignoodletitling.font
  25. - "Silkscreen" font by Jason Aleksandr Kottke @ dafont
  26. www.dafont.com/silkscreen.font
  27. - Bottom border hover transition by web-tiki @ stackoverflow:
  28. stackoverflow.com/questions/28623446#28623513
  29. - D.Va 'call mech' ability icon: Overwatch
  30. - Feather icon font by colebemis @ twitter
  31. feathericons.com/
  32. - 'Leafo' sticky kit by Leaf Cocoran
  33. leafo.net/sticky-kit/
  34. - layout inspired by Overwatch's career profile page
  35. ------------------------------------------------------------------------>
  36.  
  37. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  38. <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  39.  
  40. <head>
  41.  
  42. <title>{Title}</title>
  43.  
  44. <link rel="shortcut icon" href="{Favicon}">
  45.  
  46. <!--------------------JAVASCRIPTS-------------------->
  47. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  48. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  49. <script>
  50. (function($){
  51. $(document).ready(function(){
  52. $("a[title]").style_my_tooltips({
  53. tip_follows_cursor:true,
  54. tip_delay_time:0,
  55. tip_fade_speed:0,
  56. attribute:"title"
  57. });
  58. });
  59. })(jQuery);
  60. </script>
  61.  
  62. <link href="//fonts.googleapis.com/css?family=Karla|Inconsolata|Source+Code+Pro" rel="stylesheet">
  63.  
  64. <script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
  65.  
  66. <script src="//cdn.jsdelivr.net/gh/leafo/sticky-kit@master/dist/sticky-kit.min.js"></script>
  67.  
  68. <script>
  69. $(document).ready(function(){
  70. var tote = Math.floor(47 + 45 + 40);
  71. $("#rec-left").stick_in_parent({
  72. offset_top:tote,
  73. bottoming:false
  74. });
  75. $("#rec-right").stick_in_parent({
  76. offset_top:tote,
  77. });
  78. });
  79. </script>
  80. <!-------------------------------------------------------------------->
  81.  
  82. <style type="text/css">
  83.  
  84. @font-face { font-family: "big noodle titling"; src: url('//glen-assets.github.io/fonts/big_noodle_titling_oblique.ttf'); }
  85.  
  86. @font-face { font-family: "silkscreen"; src: url('//glen-assets.github.io/fonts/silkscreen.ttf'); }
  87.  
  88.  
  89. /*--------------------TOOLTIPS--------------------*/
  90. #s-m-t-tooltip {
  91. padding: 4px 9px;
  92. margin: 26px 9px 0px 15px;
  93. background-color: #333; /* tooltip background color */
  94. border-radius:3px;
  95. font-family: source code pro;
  96. font-size: 9px;
  97. letter-spacing: 1px;
  98. text-transform: uppercase;
  99. color: #ddd; /* tooltip text color */
  100. z-index:99999999999999999999999999998!important;
  101. max-width:40vw;
  102. }
  103.  
  104. /*--------------------TUMBLR CONTROLS--------------------*/
  105. #plus-s {
  106. position:fixed;
  107. top:0;margin-top:17px;
  108. right:0;margin-right:15px;
  109. z-index:10;
  110. }
  111.  
  112. #plus-s svg {
  113. width:15px;height:15px;
  114. color:#555; /* tumblr controls 'plus' symbol color */
  115. }
  116.  
  117. iframe#tumblr_controls, .iframe-controls--desktop {
  118. top:calc(1px + 5px)!important;
  119. right:calc(5px)!important;
  120. padding-right:40px;
  121. position:fixed!important;
  122.  
  123. transform:scale(0.7,0.7);
  124. -webkit-transform:scale(0.7,0.7);
  125.  
  126. transform-origin:100% 0;
  127. z-index:999999!important;
  128. opacity:0;
  129. -webkit-transition: all 0.4s ease-in-out;
  130. -moz-transition: all 0.4s ease-in-out;
  131. -o-transition: all 0.4s ease-in-out;
  132. }
  133.  
  134. iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
  135. opacity:1;
  136. }
  137.  
  138. /*--------------------SCROLLBAR--------------------*/
  139. ::-webkit-scrollbar {
  140. background-color:#fbfbfb; /* scrollbar background color */
  141. height:13px;
  142. width:13px;
  143. }
  144.  
  145. ::-webkit-scrollbar-thumb {
  146. background-color:#aaa; /* scrollbar color */
  147. border:6px solid #fbfbfb; /* scrollbar background color */
  148. }
  149.  
  150. ::-webkit-scrollbar-track {
  151. background-color:#fbfbfb; /* scrollbar background color */
  152. }
  153.  
  154. /*--------------------SMALL CURSOR--------------------*/
  155. /* feel free to not use this */
  156. * {
  157. cursor:url(//78.media.tumblr.com/66991e3a24432876aa22db906d5071de/tumblr_pe9t1ipv6S1qg2f5co6_r1_75sq.png), auto;
  158. }
  159.  
  160. /*--------------------TEXT HIGHLIGHT--------------------*/
  161. ::selection {
  162. background:transparent;
  163. color:#F9878F; /* text highlight color */
  164. }
  165.  
  166. ::-moz-selection {
  167. background:transparent;
  168. color:#F9878F; /* text highlight color */
  169. }
  170.  
  171. /*--------------------BACKGROUND IMAGE--------------------*/
  172. body, #top-bg {
  173. background:#fcfcfc url('//66.media.tumblr.com/e9eccce5b5cd2c1eb27592f6ce3bd933/tumblr_pllid0huwL1qg2f5co1_400.png'); /* background image url */
  174. background-attachment:fixed;
  175. background-repeat:repeat;
  176. }
  177.  
  178. #top-bg {
  179. position:fixed;
  180. top:0;left:0;right:0;
  181. margin:0 auto;
  182. width:820px;
  183. height:50px;
  184. z-index:4;
  185. }
  186.  
  187. /*--------------------BASICS--------------------*/
  188. body {
  189. color:#888;
  190. cursor:normal;
  191. font-family:inconsolata;
  192. line-height:1.6em;
  193. font-size:12px;
  194. text-align:left;
  195. }
  196.  
  197. blockquote {
  198. padding-left:10px;
  199. margin-left:5px;
  200. border-left:1px solid;
  201. border-color:#aaa;
  202. margin:10px;
  203. }
  204.  
  205. a, svg {
  206. text-decoration:none;
  207. -webkit-transition: all 0.4s ease-in-out;
  208. -moz-transition: all 0.4s ease-in-out;
  209. -o-transition: all 0.4s ease-in-out;
  210. }
  211.  
  212. a {color:#d88989;}
  213.  
  214. b, b {
  215. font-weight:bold;
  216. }
  217.  
  218. pre, code {
  219. white-space:pre-wrap;
  220. display:block;
  221. }
  222.  
  223. hr {
  224. width:70%;
  225. border-width:0px;
  226. height:1px;
  227. background-color:#bbb;
  228. }
  229.  
  230. /*--------------------MAIN CONTAINER--------------------*/
  231. #lucio-oh {
  232. position:absolute;
  233. top:0;left:0;right:0;
  234. margin:45px auto;
  235. width:820px;
  236. }
  237.  
  238. /*--------------------TOP BAR--------------------*/
  239. #topbar {
  240. position:fixed;
  241. width:inherit;
  242. height:47px;
  243. background-color:#37353A; /* top bar background */
  244. border-radius:3px;
  245. overflow:hidden;
  246. z-index:4;
  247. }
  248.  
  249. /*--------------------TOP BAR - LEFT--------------------*/
  250. #topnav {float:left;}
  251.  
  252. /* TOP BAR NAV LINKS */
  253. #topnav a {
  254. display:inline-block;
  255. margin:0px -3px;
  256. padding:20px 15px 15px 15px;
  257. border-bottom:3px solid transparent;
  258. font-family:silkscreen;
  259. text-transform:uppercase;
  260. font-size:9px;
  261. color:#e5e5e5; /* top bar links color */
  262. line-height:1em;
  263. }
  264.  
  265. #topnav a:not(.left-mini-title):after {
  266. display:block;
  267. content:'';
  268. width:calc(100% + (15px * 2));
  269. margin-left:-15px;
  270. padding-bottom:15px;
  271. margin-bottom:-18px;
  272. border-bottom:solid 3px #feaeba; /* top bar links hover border color */
  273. transform:scaleX(0);
  274. -webkit-transform:scaleX(0);
  275. -moz-transform:scaleX(0);
  276. -o-transform:scaleX(0);
  277. -ms-transform:scaleX(0);
  278. }
  279.  
  280. #topnav a:not(.left-mini-title):hover:after {
  281. transform:scaleX(1);
  282. -webkit-transform:scaleX(1);
  283. -moz-transform:scaleX(1);
  284. -o-transform:scaleX(1);
  285. -ms-transform:scaleX(1);
  286. transition:all 0.3s ease-in-out;
  287. -webkit-transition:all 0.3s ease-in-out;
  288. -moz-transition:all 0.3s ease-in-out;
  289. -o-transition:all 0.3s ease-in-out;
  290. -ms-transition:all 0.3s ease-in-out;
  291. }
  292.  
  293. /* TOP BAR - LEFT - MINI TITLE */
  294. .left-mini-title, .left-mini-title:hover {
  295. background-color:#F9878F; /* left mini title background color */
  296. border-bottom:3px solid #feaeba!important; /* left mini title border */
  297. color:#fff!important; /* left mini title text color */
  298. }
  299.  
  300. #topnav a:first-child {margin-left:0px;}
  301. #topnav a:last-child {margin-right:0px;}
  302.  
  303. /*--------------------TOP BAR - RIGHT--------------------*/
  304. #user-deco-nav {
  305. float:right;
  306. display:flex;
  307. height:100%;
  308. }
  309.  
  310. #user-deco-nav > * {
  311. align-self:center;
  312. -webkit-align-self:center;
  313. }
  314.  
  315. /* FOLLOW BUTTON */
  316. #user-deco-nav svg {
  317. width:18px;height:18px;
  318. padding:15px 13px;
  319. border-bottom:0px solid transparent;
  320. color:#e5e5e5; /* follow button color */
  321. }
  322.  
  323. #user-deco-nav a:hover svg {
  324. padding-bottom:12px;
  325. border-bottom:3px solid #feaeba; /* follow button border on hover */
  326. }
  327.  
  328. /* ACTIVE STATUS INDICATOR BAR */
  329. .green-active-border {
  330. width:6px;
  331. height:inherit;
  332. background:#a5eb81; /* green active status bar color */
  333. }
  334.  
  335. .small-avi-img {
  336. width:48px;
  337. height:48px;
  338. }
  339.  
  340. /* TOP BAR - RIGHT - MINI TITLE */
  341. .nametag {
  342. padding:0 15px;
  343. font-family:silkscreen;
  344. font-size:9px;
  345. color:#e5e5e5; /* right mini title text color */
  346. }
  347.  
  348. /*--------------------INTRO SECTION--------------------*/
  349. #beef {
  350. position:absolute;
  351. top:0;margin-top:calc(47px + 40px);
  352. width:inherit;
  353. max-height:124px;
  354. overflow:hidden;
  355. z-index:3;
  356. }
  357.  
  358. /*--------------------INTRO - LEFT--------------------*/
  359. #beef-left {
  360. float:left;
  361. display:flex;
  362. }
  363.  
  364. #beef-left > * {
  365. align-self:center;
  366. -webkit-align-self:center;
  367. }
  368.  
  369. /* MAIN 100PX ICON IMAGE */
  370. .square-pic {
  371. width:100px;
  372. height:100px;
  373. background-color:#444147; /* 100px icon background color */
  374. border:12px solid #444147; /* 100px icon border color */
  375. border-radius:3px;
  376. }
  377.  
  378. .diamond {
  379. margin-left:-11px;
  380. width:22px;
  381. height:22px;
  382. background:#444147; /* 100px icon arrow color */
  383. transform:rotate(45deg);
  384. -webkit-transform:rotate(45deg);
  385. -moz-transform:rotate(45deg);
  386. -o-transform:rotate(45deg);
  387. -ms-transform:rotate(45deg);
  388. z-index:-1;
  389. }
  390.  
  391. .sq-txt {margin-left:calc(11px + 17px);}
  392.  
  393. /* LARGE TITLE */
  394. .sq-name {
  395. font-family:big noodle titling;
  396. font-size:30px;
  397. letter-spacing:2px;
  398. color:#3d3a40; /* large title text color */
  399. }
  400.  
  401. /* MAIN EXP BAR */
  402. .sq-bar {
  403. margin-top:17px;
  404. width:250px;
  405. height:5px;
  406. background:#eee; /* main EXP bar color (empty) */
  407. border-radius:3px;
  408. overflow:hidden;
  409. }
  410.  
  411. .sq-fill {
  412. height:inherit;
  413. background:#fa9fa6; /* main EXP bar color (filled) */
  414. border-radius:3px;
  415. }
  416.  
  417. /* define the main EXP bar (filled) width in the 2nd width property */
  418. /* same value in all of these rows pls! */
  419. @-webkit-keyframes barfill { from { width:0%; } to { width:48%; } }
  420. @-moz-keyframes barfill { from { width:0%; } to { width:48%; } }
  421. @keyframes barfill { from { width:0%; } to { width:48%; } }
  422.  
  423. .bar-fill {
  424. width:0%;
  425. -webkit-animation:barfill ease-out 1;
  426. -moz-animation:barfill ease-out 1;
  427. animation:barfill ease-out 1;
  428. -webkit-animation-fill-mode:forwards;
  429. -moz-animation-fill-mode:forwards;
  430. animation-fill-mode:forwards;
  431. -webkit-animation-duration:1s;
  432. -moz-animation-duration:1s; animation-duration:1s;
  433. }
  434.  
  435. /* MAIN EXP BAR - NUMBER STATS */
  436. .sq-numbers {
  437. margin-top:16px;
  438. font-family:big noodle titling;
  439. font-size:16px;
  440. letter-spacing:1.5px;
  441. color:#424045; /* main number stats color */
  442. }
  443.  
  444. /*--------------------INTRO - RIGHT--------------------*/
  445. #beef-right {
  446. float:right;
  447. display:flex;
  448. max-width:413px;
  449. height:124px;
  450. }
  451.  
  452. #beef-right > * {
  453. align-self:center;
  454. -webkit-align-self:center;
  455. }
  456.  
  457. /* D.VA MECH ICON */
  458. .right-img {
  459. width:auto;
  460. height:50px; /* d.va mech icon image height */
  461. }
  462.  
  463. .right-quote {
  464. margin-left:20px;
  465. width:250px;
  466. font-family:silkscreen;
  467. text-transform:uppercase;
  468. font-size:9px;
  469. color:#333; /* right quote text color */
  470. text-align:justify;
  471. line-height:2em;
  472. }
  473.  
  474. /*--------------------CONTAINER--------------------*/
  475. #rectangle {
  476. position:absolute;
  477. top:0;margin-top:calc(47px + 40px + 124px + 55px);
  478. margin-bottom:40px;
  479. width:inherit;
  480. z-index:2;
  481. }
  482.  
  483. /*--------------------CHARACTER STATS--------------------*/
  484. #rec-left {float:left;}
  485.  
  486. .one-row {
  487. display:flex;
  488. margin-bottom:12px;
  489. }
  490.  
  491. .one-row > * {
  492. align-self:center;
  493. -webkit-align-self:center;
  494. }
  495.  
  496. .one-row:last-of-type {margin-bottom:0px;}
  497.  
  498. /* CHARACTER/PLAYER STATS ROW */
  499. /* CHARACTER NAME */
  500. .row-nametag {
  501. width:80px;
  502. padding:10px 8px;
  503. background-color:#444147; /* character name background color */
  504. border-radius:3px;
  505. font-family:silkscreen;
  506. font-size:9px;
  507. color:#e5e5e5; /* character name text color */
  508. line-height:1em;
  509. text-align:right;
  510. }
  511.  
  512. .row-namearrow {
  513. margin-left:-4px;
  514. width:8px;
  515. height:8px;
  516. background:#444147; /* character name arrow color */
  517. transform:rotate(45deg);
  518. -webkit-transform:rotate(45deg);
  519. -moz-transform:rotate(45deg);
  520. -o-transform:rotate(45deg);
  521. -ms-transform:rotate(45deg);
  522. z-index:-1;
  523. }
  524.  
  525. /* CHARACTER ICON */
  526. .row-avi {
  527. margin-left:10px;
  528. width:40px;
  529. height:40px;
  530. border-radius:3px;
  531. }
  532.  
  533. /* CHARACTER NUMERIC STATS TEXT */
  534. .row-txt {
  535. margin-left:10px;
  536. width:52px;
  537. padding:9px 7px;
  538. background-color:#f8f8f8; /* character stat background color */
  539. border:1px solid #eee; /* character stat border */
  540. border-radius:3px;
  541. font-family:silkscreen;
  542. font-size:9px;
  543. color:#666; /* character stat text color */
  544. line-height:1em;
  545. text-align:center;
  546. }
  547.  
  548. /* CHARACTER EXP BARS */
  549. .row-bar {
  550. margin-left:10px;
  551. width:225px;
  552. height:7px;
  553. border-radius:3px;
  554. background-color:#f7f7f7; /* character EXP bar color (empty) */
  555. overflow:hidden;
  556. }
  557.  
  558. .row-barfill {
  559. height:inherit;
  560. border-radius:3px;
  561. /* individual character EXP bar colors (filled) are done in HTML */
  562. /* but you can also assign 1 color to all bars if you want to */
  563. }
  564.  
  565. /*--------------------BIOGRAPHY SECTION--------------------*/
  566. #rec-right {
  567. float:right;
  568. margin-left:40px;
  569. width:calc(100% - 463px - 40px);
  570. }
  571.  
  572. /* BIOGRAPHY TITLE */
  573. .rec-title {
  574. display:inline-block;
  575. margin-bottom:8px;
  576. font-family:big noodle titling;
  577. font-size:22px;
  578. letter-spacing:2px;
  579. color:#424045; /* biography title text color */
  580. }
  581.  
  582. .info-row {
  583. margin-top:12px;
  584. display:flex;
  585. }
  586.  
  587. .info-row > * {
  588. align-self:center;
  589. -webkit-align-self:center;
  590. }
  591.  
  592. /* BULLET POINT STATS - ICONS */
  593. .info-row svg {
  594. padding:8px;
  595. background-color:#F9878F; /* bullet point stat icon background color */
  596. border-radius:3px;
  597. width:14px;
  598. height:14px;
  599. color:#fff;
  600. }
  601.  
  602. /* BULLET POINT STATS - TEXT */
  603. .info-txt {
  604. margin-left:12px;
  605. font-family:silkscreen;
  606. font-size:9px;
  607. color:#555; /* bullet point stat - text color */
  608. }
  609.  
  610. /* MAIN BIOGRAPHY TEXT SECTION */
  611. .rec-desc {
  612. margin-top:20px;
  613. font-family:inconsolata;
  614. font-size:12px;
  615. line-height:2.1em;
  616. color:#555; /* main biography text color */
  617. text-align:justify;
  618. }
  619.  
  620. /* bolded text styling */
  621. .rec-desc b, .rec-desc strong {
  622. padding:3px 5px;
  623. background-color:#f9f9f9;
  624. border:1px solid #eee;
  625. border-radius:3px;
  626. color:#666;
  627. }
  628.  
  629. /* italicized text styling */
  630. .rec-desc i, .rec-desc em {color:#9badb7;}
  631.  
  632. /* links styling */
  633. .rec-desc a {
  634. color:#d88989;
  635. padding-bottom:2px;
  636. border-bottom:1px solid #ddd;
  637. }
  638.  
  639. .rec-desc a:hover {
  640. color:#444;
  641. }
  642.  
  643. .rec-desc p:last-child {margin-bottom:0px;}
  644.  
  645. </style>
  646.  
  647. </head>
  648.  
  649. <body>
  650.  
  651. <!----TUMBLR CONTROLS---->
  652. <div id="plus-s"><i data-feather="plus"></i></div>
  653.  
  654. <div id="top-bg"></div>
  655.  
  656. <div id="lucio-oh">
  657. <div id="topbar">
  658. <div id="topnav">
  659.  
  660. <!----TOP BAR - LEFT---->
  661. <!--top bar - left - mini title-->
  662. <a class="left-mini-title">about me</a>
  663.  
  664. <!--top bar - nav links-->
  665. <!--please do not remove the credit! thanks!-->
  666. <a href="/">return</a>
  667. <a href="/ask">mailbox</a>
  668. <a href="/archive">archives</a>
  669. <a href="//glenthemes.tumblr.com" title="page by glenthemes">credit</a>
  670. </div><!--topnav-->
  671.  
  672.  
  673.  
  674. <!----TOP BAR - RIGHT---->
  675. <div id="user-deco-nav">
  676.  
  677. <!--follow button - replace 'your-username' with your blog username-->
  678. <a href="//tumblr.com/follow/your-username" title="follow?"><i data-feather="user-plus"></i></a>
  679.  
  680. <div class="green-active-border"></div>
  681.  
  682. <!--top right icon image-->
  683. <img class="small-avi-img" src="//78.media.tumblr.com/07dc615cd376b70fcc87996026ff89ea/tumblr_oqxkyjUdBK1taarzno5_r3_400.jpg">
  684.  
  685. <!--top right mini title-->
  686. <div class="nametag">Siderea</div>
  687. </div><!--user-deco-nav-->
  688. </div><!--topbar-->
  689.  
  690.  
  691.  
  692. <!----INTRO SECTION - LEFT---->
  693. <div id="beef">
  694. <div id="beef-left">
  695.  
  696. <!--100px icon image-->
  697. <img class="square-pic" src="//66.media.tumblr.com/62a881181c9c6802f425c8398d05c3ed/tumblr_pllkes1gTi1qg2f5co7_r1_400.png">
  698.  
  699. <div class="diamond"></div>
  700.  
  701. <div class="sq-txt">
  702.  
  703. <!--main big title-->
  704. <div class="sq-name">ready, player one!</div>
  705.  
  706. <div class="sq-bar">
  707. <div class="sq-fill bar-fill"></div>
  708. </div><!--sq-bar-->
  709.  
  710. <!--number stats-->
  711. <div class="sq-numbers">9638 / 20000</div>
  712. </div><!--sq-txt-->
  713. </div><!--beef-left-->
  714.  
  715.  
  716.  
  717. <!----INTRO SECTION - RIGHT---->
  718. <div id="beef-right">
  719.  
  720. <!--d.va mech image-->
  721. <img class="right-img" src="//66.media.tumblr.com/6eeb05f683e22edeb5a10914a944b48a/tumblr_plnbit7kiu1qg2f5co3_r1_250.png">
  722.  
  723. <!--right quote-->
  724. <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>
  725.  
  726. </div><!--beef-right-->
  727. </div><!--beef-->
  728.  
  729.  
  730.  
  731.  
  732. <!----CHARACTER/PLAYER STATS---->
  733. <div id="rectangle">
  734.  
  735. <div id="rec-left">
  736.  
  737. <!--I've given 2 rows as examples that you can copy-->
  738. <!--START ONE ROW-->
  739. <div class="one-row">
  740. <div class="row-nametag">name</div>
  741. <div class="row-namearrow"></div>
  742.  
  743. <!--character avatar-->
  744. <img class="row-avi" src="//78.media.tumblr.com/53dc024e5599df92b67f9633fb7996a2/tumblr_inline_ox6a8nkSrl1sf4s4l_400.png">
  745.  
  746. <div class="row-txt">100 hrs</div>
  747.  
  748. <!--define filled bar width and color as follows:-->
  749. <div class="row-bar">
  750. <div class="row-barfill" style="width:100%; background-color:#f6d3d5"></div></div>
  751. </div><!--one-row-->
  752. <!--END ONE ROW-->
  753.  
  754.  
  755.  
  756. <div class="one-row">
  757. <div class="row-nametag">name</div>
  758. <div class="row-namearrow"></div>
  759.  
  760. <!--character avatar-->
  761. <img class="row-avi" src="//78.media.tumblr.com/0e64759da8bdb927b18a158406865e44/tumblr_ov65j6yjKr1taarzno3_r1_400.png">
  762.  
  763. <div class="row-txt">70 hrs</div>
  764.  
  765. <!--define filled bar width and color as follows:-->
  766. <div class="row-bar">
  767. <div class="row-barfill" style="width:70%; background-color:#ece6e6"></div></div>
  768. </div><!--one-row-->
  769. <!--END ONE ROW-->
  770.  
  771. </div><!--rec-left-->
  772.  
  773.  
  774.  
  775.  
  776.  
  777.  
  778. <!----RIGHT BIOGRAPHY SECTION---->
  779. <div id="rec-right">
  780. <div class="rec-title">career profile — D.Va</div>
  781.  
  782. <!--here I've given 3 bullet rows as examples you can copy-->
  783. <!--START ONE BULLET ROW-->
  784. <div class="info-row">
  785. <!--bullet point icon-->
  786. <!--you can choose one from this list:-->
  787. <!--//feathericons.com-->
  788. <!--put the name between the quotation marks of feather=""-->
  789. <i data-feather="user"></i>
  790.  
  791. <!--bullet point text-->
  792. <div class="info-txt"><b>real name:</b> Hana Song</div>
  793. </div><!--info-row-->
  794. <!--END ONE BULLET ROW-->
  795.  
  796.  
  797. <!--START ONE BULLET ROW-->
  798. <div class="info-row">
  799. <i data-feather="globe"></i>
  800. <div class="info-txt"><b>nationality:</b> Korean</div>
  801. </div><!--info-row-->
  802. <!--END ONE BULLET ROW-->
  803.  
  804.  
  805. <!--START ONE BULLET ROW-->
  806. <div class="info-row">
  807. <i data-feather="star"></i>
  808. <div class="info-txt"><b>occupation:</b> mech pilot, actress</div>
  809. </div><!--info-row-->
  810. <!--END ONE BULLET ROW-->
  811.  
  812.  
  813.  
  814.  
  815. <!--BIOGRAPHY TEXT SECTION-->
  816. <div class="rec-desc">
  817.  
  818. Text: <b>bold</b>, <i>italic</i>, <a href="/">link</a>
  819.  
  820. </div><!--rec-desc-->
  821.  
  822. </div><!--rec-right-->
  823. </div><!--rectangle-->
  824. </div><!--lucio-oh-->
  825.  
  826. <script>feather.replace()</script>
  827. </body>
  828.  
  829. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!