API tools faq
paste
glenthemes

Character Page [03]: Lionheart

glenthemes
Feb 8th, 2018 (edited)
5,280
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.25 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. Character Page [03]: Lionheart
  3. Made by glenthemes
  4.  
  5. Initial release: 2018/02/09
  6. Last updated: 2019/02/02
  7.  
  8. TERMS OF USE:
  9. 1) Do not remove the theme credit.
  10. 2) Do not repost/redistribute my themes.
  11. 3) Do not take parts of the code and use it as your own.
  12. 4) Do not use my themes as a base code.
  13. 5) Do not mix my themes together.
  14.  
  15. For customization help, please visit:
  16. glenthemes.tumblr.com/lionheart
  17.  
  18. Please respect theme makers and stick to my Terms. Enjoy.
  19. ------------------------------------------------------------------------>
  20.  
  21. <!DOCTYPE html>
  22. <html lang="en">
  23.  
  24. <head>
  25.  
  26. <title>{Title}</title>
  27.  
  28. <link rel="shortcut icon" href="{Favicon}">
  29.  
  30. <!--------------------JAVASCRIPTS-------------------->
  31. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  32. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  33. <script>
  34. (function($){
  35. $(document).ready(function(){
  36. $("a[title]").style_my_tooltips({
  37. tip_follows_cursor:true,
  38. tip_delay_time:120,
  39. tip_fade_speed:120,
  40. attribute:"title"
  41. });
  42. });
  43. })(jQuery);
  44. </script>
  45.  
  46. <link href="//fonts.googleapis.com/css?family=Karla|Quicksand|Playfair+Display|Nunito|Rajdhani:400,500|Montserrat:300,400,500" rel="stylesheet">
  47.  
  48. <link href="//saturnicons.gitlab.io/backup/icons.css" rel="stylesheet" crossorigin>
  49.  
  50. <link href="//static.tumblr.com/gtjt4bo/JMXp40ccf/smoke.min.css" rel="stylesheet">
  51.  
  52. <link href="//static.tumblr.com/gtjt4bo/WBJp40bor/library.css" rel="stylesheet">
  53.  
  54. <script src="//static.tumblr.com/gtjt4bo/VfIp3v58k/winter.js"></script>
  55.  
  56. <script src="//static.tumblr.com/2pnwama/KGQp3tjff/fire.js"></script>
  57.  
  58. <!-------------------------------------------------------------------->
  59.  
  60. <style type="text/css">
  61.  
  62. /*--------------------TOOLTIPS--------------------*/
  63.  
  64. #s-m-t-tooltip {
  65. padding:5px 10px;
  66. margin:26px 9px 0px 15px;
  67. background-color:#222; /* tooltip background color */
  68. border-radius:5px; /* rounded tooltip */
  69. font-family:Quicksand;font-weight:bold;
  70. font-size:9px;
  71. letter-spacing:1.3px;
  72. text-transform:uppercase;
  73. color:#ddd; /* tooltip text color */
  74. z-index:99999999999999999999999999998!important;
  75. max-width:40vw;
  76. -webkit-transition: all 0.3s ease-in-out;
  77. -moz-transition: all 0.3s ease-in-out;
  78. -o-transition: all 0.3s ease-in-out;
  79. }
  80.  
  81. /*--------------------TUMBLR CONTROLS--------------------*/
  82.  
  83. iframe#tumblr_controls, .iframe-controls--desktop {
  84. top:3px!important;
  85. right:3px!important;
  86. position:fixed!important;
  87. opacity:0.6;
  88. z-index:999999!important;
  89. transition:0.3s ease-in-out;
  90. }
  91.  
  92. iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
  93. opacity:0.8;
  94. }
  95.  
  96. /*--------------------DEFAULT SCROLLBAR--------------------*/
  97.  
  98. ::-webkit-scrollbar {
  99. width: 4px;
  100. height: 4px;
  101. }
  102.  
  103. ::-webkit-scrollbar-thumb {
  104. background-color: #ccc;
  105. }
  106.  
  107. ::-webkit-scrollbar-track {
  108. background-color: #333;
  109. }
  110.  
  111. /*-----------------TEXT ON HIGHLIGHT-----------------*/
  112.  
  113. ::selection {
  114. background:#333; /* text highlight background color */
  115. color:#ddd; /* text highlight color */
  116. }
  117.  
  118. ::-moz-selection {
  119. background:#333; /* text highlight background color */
  120. color:#ddd; /* text highlight color */
  121. }
  122.  
  123. /*--------------------BASICS--------------------*/
  124.  
  125. body {
  126. background-color:#fdfdfd; /* background color */
  127. background-image:url('//static.tumblr.com/c0a4e7cc4f5c2882a7779a37b63132bf/2pnwama/qAaoy90vm/tumblr_static_c7ybwm57sv4k0s0kswccgoss0.png');
  128. /* background image of your screen */
  129. background-attachment:fixed;
  130. background-repeat:repeat;
  131. color:#999;
  132. font-family:karla;
  133. line-height:1.6em;
  134. font-size:12px;
  135. }
  136.  
  137. a {
  138. text-decoration:none;
  139. -webkit-transition: all 0.4s ease-in-out;
  140. -moz-transition: all 0.4s ease-in-out;
  141. -o-transition: all 0.4s ease-in-out;
  142. }
  143.  
  144. /*--------------------CONTAINER--------------------*/
  145. #main {
  146. position:fixed;
  147. display:flex;
  148. top:50%;
  149. left:50%;
  150. transform:translate(-50%,-50%);
  151. width:calc((440px * 16 / 9) + 50px);
  152. height:440px;
  153. border:1px solid #f3f3f3; /* main container border */
  154. box-shadow: 0px 0px 45px 0px rgba(0,0,0,0.045); /* main container shadow */
  155. }
  156.  
  157. /*--------------------LEFT BAR--------------------*/
  158.  
  159. #strip {
  160. width:calc(64px + 20px + 20px);
  161. height:inherit;
  162. overflow-y:auto;
  163. overflow-x:hidden;
  164. z-index:4;
  165. }
  166.  
  167. #strip, .poop {
  168. background-color:#f9f9f9; /* left bar background color */
  169. }
  170.  
  171. #strip::-webkit-scrollbar {
  172. width:9px;
  173. height:9px;
  174. }
  175.  
  176. #strip::-webkit-scrollbar-thumb {
  177. background-color:#999; /* left bar scrollbar */
  178. border:4px solid #f9f9f9; /* left bar scrollbar background */
  179. }
  180.  
  181. #strip::-webkit-scrollbar-track {
  182. background:#f9f9f9; /* left bar scrollbar background */
  183. }
  184.  
  185. #sect {
  186. margin-top:95px;
  187. margin-bottom:9px;
  188. }
  189.  
  190. .adj {margin-left:20px;}
  191.  
  192. .face {
  193. margin:10px 0px;
  194. width:64px;height:64px;
  195. border-radius:100%;
  196. -moz-transition: all 0.3s;
  197. -webkit-transition: all 0.3s;
  198. transition: all 0.3s;
  199. -webkit-transition-timing-function: cubic-bezier(0.18, -0.25, 0.025, 1.85);
  200. transition-timing-function: cubic-bezier(0.18, -0.25, 0.025, 1.85);
  201. cursor:pointer;
  202. }
  203.  
  204. .face:hover, .carrot:hover {transform:scale(1.1,1.1);}
  205.  
  206. .carrot {
  207. position:fixed;
  208. margin-top:-55px;
  209. -moz-transition: all 0.3s;
  210. -webkit-transition: all 0.3s;
  211. transition: all 0.3s;
  212. -webkit-transition-timing-function: cubic-bezier(0.18, -0.25, 0.025, 1.85);
  213. transition-timing-function: cubic-bezier(0.18, -0.25, 0.025, 1.85);
  214. cursor:pointer;
  215. z-index:5;
  216. }
  217.  
  218. .poop {
  219. position:absolute;
  220. bottom:100%;margin-bottom:-52px;
  221. right:100%;margin-right:calc((-64px * 1.1) - 16.5px);
  222. width:calc(64px * 1.1);height:52px;
  223. z-index:4;
  224. }
  225.  
  226. /* navigation button styling */
  227. .carrot .sf {
  228. font-size:25px;
  229. padding:21px 19px 14px 20px;
  230. background-color:#222; /* button background color */
  231. color:#ddd; /* button color */
  232. border-radius:100%;
  233. }
  234.  
  235. /*-----------------CHARACTER SECTION BASICS-----------------*/
  236.  
  237. #silhouette {
  238. width:470px;
  239. height:inherit;
  240. background-color:#f7f7f7; /* character section background color */
  241. background-image:url('//38.media.tumblr.com/tumblr_lsdjv9k5E21r2gm7fo4_400.jpg'); /* character section background image */
  242. background-repeat:repeat;
  243. overflow:hidden;
  244. position:relative;
  245. }
  246.  
  247. /*--------------------HEIGHT CHART--------------------*/
  248.  
  249. /* height chart vertical line */
  250. .pillar {
  251. width:2px;
  252. height:410px;
  253. margin-top:18px;
  254. margin-left:calc((35px / 2) - 1px);
  255. }
  256.  
  257. /* height chart lines positioning */
  258. /* I recommend not to touch this but you can if you want */
  259. .six0 {margin-top:14px;}
  260. .five11 {margin-top:28px;}
  261. .five10 {margin-top:40px;}
  262. .five9 {margin-top:54px;}
  263. .five8 {margin-top:66px;}
  264. .five7 {margin-top:80px;}
  265. .five6 {margin-top:92px;}
  266. .five5 {margin-top:106px;}
  267. .five4 {margin-top:118px;}
  268. .five3 {margin-top:132px;}
  269. .five2 {margin-top:144px;}
  270. .five1 {margin-top:158px;}
  271. .five0 {margin-top:170px;}
  272. .four11 {margin-top:184px;}
  273. .four10 {margin-top:196px;}
  274. .four9 {margin-top:210px;}
  275. .four8 {margin-top:222px;}
  276. .four7 {margin-top:236px;}
  277. .four6 {margin-top:248px;}
  278. .four5 {margin-top:262px;}
  279. .four4 {margin-top:274px;}
  280. .four3 {margin-top:288px;}
  281. .four2 {margin-top:300px;}
  282. .four1 {margin-top:314px;}
  283. .four0 {margin-top:326px;}
  284. .three11 {margin-top:340px;}
  285. .three10 {margin-top:352px;}
  286. .three9 {margin-top:366px;}
  287. .three8 {margin-top:378px;}
  288. .three7 {margin-top:392px;}
  289. .three6 {margin-top:404px;}
  290. .three5 {margin-top:418px;}
  291.  
  292. .mug, .pillar {
  293. position:absolute;
  294. background-color:#111; /* height chart bar color */
  295. }
  296.  
  297. .mug:nth-of-type(odd) {
  298. width:35px;
  299. height:1px;
  300. }
  301.  
  302. .mug:nth-of-type(even) {
  303. width:50px;
  304. height:2px;
  305. }
  306.  
  307. /* 'even' height indicator text styling */
  308. .mug:nth-of-type(even)::after {
  309. position:absolute;
  310. left:100%;
  311. margin-left:5px;
  312. margin-top:-5px;
  313. line-height:1em;
  314. font-family:Rajdhani;
  315. font-weight:500;letter-spacing:0.5px;
  316. font-size:13px;
  317. color:#555; /* even height text color */
  318. }
  319.  
  320. /* height indicator text */
  321. /* NOTE: when typing inches, use 2 single apostrophes instead of 1 double */
  322. /* your text goes inside the double apostrophes " " */
  323. .five10::after {content:"5'10''";}
  324. .five8::after {content:"5'8''";}
  325. .five6::after {content:"5'6''";}
  326. .five4::after {content:"5'4''";}
  327. .five2::after {content:"5'2''";}
  328. .five0::after {content:"5'0''";}
  329. .four10::after {content:"4'10''";}
  330. .four8::after {content:"4'8''";}
  331. .four6::after {content:"4'6''";}
  332. .four4::after {content:"4'4''";}
  333. .four2::after {content:"4'2''";}
  334. .four0::after {content:"4'0''";}
  335. .three10::after {content:"3'10''";}
  336. .three8::after {content:"3'8''";}
  337. .three6::after {content:"3'6''";}
  338.  
  339. /*--------------------CENTRAL CHARACTER IMAGES--------------------*/
  340.  
  341. /* individual character image adjustments */
  342. /* this part is especially important if you're using the height chart too */
  343. /* I recommend NOT adding a width, bc the width is auto */
  344. /* follow the pattern to edit the height for character 5, for example */
  345. /* so you would start with .chara5 for that */
  346. .chara1 {
  347. display:block; /* this line applies to .chara1 ONLY */
  348. height:366px;
  349. }
  350.  
  351. .chara2 {
  352. height:378px;
  353. }
  354.  
  355. .chara3 {
  356. height:390px;
  357. }
  358.  
  359. .chara4 {
  360. height:382px;
  361. }
  362.  
  363. /*--------------------CHARACTER LABELS--------------------*/
  364.  
  365. /* label positioning */
  366. /* follow the pattern to edit the positioning for character 5, for example */
  367. /* so you would start with .label5 for that */
  368. .label1 {
  369. display:block; /* this line applies to .label1 ONLY */
  370. margin-left:327px;
  371. margin-top:95px;
  372. }
  373.  
  374. .label2 {
  375. margin-left:317px;
  376. margin-top:82px;
  377. }
  378.  
  379. .label3 {
  380. margin-left:320px;
  381. margin-top:72px;
  382. }
  383.  
  384. .label4 {
  385. margin-left:325px;
  386. margin-top:90px;
  387. }
  388.  
  389. /* indicator line styling */
  390. .name-line {
  391. position:absolute;
  392. right:100%;
  393. margin-right:-3px; /* repositioning from the right */
  394. margin-top:40px; /* repositioning from the top */
  395. transform-origin:0% 100%;
  396. transform:rotate(-20deg); /* indicator line angle */
  397. width:45px; /* indicator line width */
  398. height:1px; /* indicator line height */
  399. background-color:#222; /* indicator line color */
  400. }
  401.  
  402. /* indicator circle (at the end of the line) */
  403. .name-line::before {
  404. content:"";
  405. position:absolute;
  406. right:100%;
  407. margin-right:-2px;
  408. margin-top:-2px;
  409. width:5px; /* indicator dot width */
  410. height:5px; /* indicator dot height */
  411. background-color:#222; /* indicator dot color */
  412. border-radius:100%;
  413. }
  414.  
  415. /* label's top text styling */
  416. .top-text {
  417. padding:5px 10px;
  418. background-color:#222; /* top label text background */
  419. border-radius:5px 5px 0px 0px;
  420. font-family:Rajdhani;
  421. font-weight:500;letter-spacing:1px;
  422. text-transform:uppercase;line-height:1.2em;
  423. font-size:13px;
  424. color:#ddd; /* top label text */
  425. }
  426.  
  427. /* label's bottom text styling */
  428. .bot-text {
  429. margin-top:0px;
  430. padding:4px 10px;
  431. background-color:#fff; /* bottom label text background */
  432. border-radius:0px 0px 5px 5px;
  433. font-family:Rajdhani;
  434. border-right:2px solid #221; /* bottom label right border */
  435. border-bottom:2px solid #221; /* bottom label bottom border */
  436. border-left:2px solid #221; /* bottom label left border */
  437. font-weight:500;letter-spacing:0.5px;
  438. text-transform:uppercase;line-height:1.2em;
  439. font-size:9px;
  440. color:#444; /* bottom label text color */
  441. }
  442.  
  443. /*--------------------STATISTICS TABLES--------------------*/
  444.  
  445. /* table positioning */
  446. /* follow the pattern and edit the positioning for character 5, for example */
  447. /* so you would start with .stats5 for that */
  448. .stats1 {
  449. display:block; /* this line applies to .stats1 ONLY */
  450. margin-left:290px;
  451. margin-top:200px;
  452. }
  453.  
  454. .stats2 {
  455. margin-left:295px;
  456. margin-top:195px;
  457. }
  458.  
  459. .stats3 {
  460. margin-left:293px;
  461. margin-top:180px;
  462. }
  463.  
  464. .stats4 {
  465. margin-left:298px;
  466. margin-top:200px;
  467. }
  468.  
  469. #allstat table {
  470. border-collapse:separate;
  471. border-spacing:10px 0;
  472. }
  473.  
  474. /* statistics table text styling */
  475. #allstat tbody {
  476. font-family:Quicksand;
  477. font-weight:bold;text-transform:uppercase;
  478. letter-spacing:1px;
  479. font-size:9px;
  480. }
  481.  
  482. /* first column styling */
  483. #allstat td:first-of-type {
  484. text-align:right;
  485. color:#bbb;
  486. }
  487.  
  488. /* second column styling */
  489. #allstat td:last-of-type {
  490. text-align:left;
  491. color:#666;
  492. }
  493.  
  494. /* green text styling */
  495. /* you don't HAVE to use this */
  496. /* you can also add your own color spans if you want */
  497. /* in the HTML, you apply the green text like this: <green>...</green> */
  498. #allstat green {
  499. color:#27c08d;
  500. }
  501.  
  502. /*--------------------METER BARS--------------------*/
  503.  
  504. /* meter bars' positioning */
  505. /* follow the pattern to change character 5's bar placements, for example */
  506. /* so you would start with .barstuff5 for that */
  507. .barstuff1 {
  508. display:block; /* this line applies to .barstuff1 ONLY */
  509. margin-left:355px;
  510. margin-top:330px;
  511. }
  512.  
  513. .barstuff2 {
  514. margin-left:355px;
  515. margin-top:330px;
  516. }
  517.  
  518. .barstuff3 {
  519. margin-left:355px;
  520. margin-top:330px;
  521. }
  522.  
  523. .barstuff4 {
  524. margin-left:355px;
  525. margin-top:330px;
  526. }
  527.  
  528. .barstat {
  529. margin-bottom:10px;
  530. min-width:85px; /* maximum width of bar elements */
  531. }
  532.  
  533. .barstat:last-child {margin-bottom:0px;}
  534.  
  535. /* meter bar title */
  536. .bartit {
  537. margin-right:-5px;
  538. text-align:right;
  539. font-family:Quicksand;
  540. font-weight:bold;text-transform:uppercase;
  541. line-height:1.7em;letter-spacing:1px;
  542. font-size:8px;
  543. color:#666;
  544. }
  545.  
  546. .barholder {
  547. margin-top:3px;
  548. text-align:right;
  549. }
  550.  
  551. /* meter bar styling */
  552. .bar-fill, .bar-empty {
  553. display:inline-block;
  554. margin:0px 3px;
  555. width:10px;
  556. height:20px;
  557. background-color:#22a092; /* DEFAULT color of all characters' filled bars */
  558. transform-origin:0% 100%;
  559. transform:skew(-20deg);
  560. }
  561.  
  562. /* the following lines are individual characters' meter bars' styling */
  563. /* format: " .barstuff(number) .bar-fill " */
  564. .barstuff1 .bar-fill {
  565. background-color:#22a092; /* color of filled bars for 1st character */
  566. }
  567.  
  568. .barstuff2 .bar-fill {
  569. background-color:#e8c8a8; /* color of filled bars for 2nd character */
  570. }
  571.  
  572. .barstuff3 .bar-fill {
  573. background-color:#9ad8e7; /* color of filled bars for 3rd character */
  574. }
  575.  
  576. .barstuff4 .bar-fill {
  577. background-color:#dd4445; /* color of filled bars for 4th character */
  578. }
  579.  
  580. /* color of ALL CHARACTERS' empty bars */
  581. /* you can tailor empty bar colors to different characters if you want */
  582. /* like in the example above */
  583. .bar-empty {
  584. background-color:#151515; /* color of all empty bars */
  585. }
  586.  
  587. /*--------------------VERTICAL/SIDEWAYS TEXT-------------------*/
  588.  
  589. /* vertical text positioning */
  590. #torch {
  591. position:fixed;
  592. top:50%;
  593. transform:translateY(-50%);
  594. margin-left:-308px;
  595. width:100%;
  596. }
  597.  
  598. /* vertical text styling */
  599. #vertical {
  600. transform:rotate(-90deg);
  601. font-family:Rajdhani;
  602. font-size:14px;
  603. text-transform:uppercase;
  604. letter-spacing:1.5px;
  605. text-align:center;
  606. color:#666; /* vertical text color */
  607. }
  608.  
  609. /* vertical text: bold */
  610. #vertical b {
  611. font-family:montserrat;
  612. font-weight:400;
  613. font-size:11.5px;
  614. letter-spacing:1px;
  615. color:#444; /* vertical text bold color */
  616. }
  617.  
  618. .line1 {display:block;}
  619.  
  620. /*--------------------BIOGRAPHY SECTION--------------------*/
  621.  
  622. #boba {
  623. width:calc(100% - 104px - 470px);
  624. height:inherit;
  625. background-color:#fcfcfc; /* biography section background color */
  626. }
  627.  
  628. #flavoring {padding:20px;}
  629.  
  630. /* character title */
  631. #seaweed {
  632. font-family:playfair display;
  633. text-transform:uppercase;
  634. line-height:1.15em;
  635. font-size:25px;
  636. color:#444; /* character title color */
  637. border-left:1px solid black; /* character title left border */
  638. padding-left:11px;
  639. padding-bottom:3px;
  640. }
  641.  
  642. .title1 {display:block;}
  643.  
  644. /* main biography text */
  645. #fruit {
  646. margin-top:15px;
  647. max-height:273px;
  648. padding-right:10px;
  649. overflow:auto;
  650. text-align:justify;
  651. font-family:Nunito;
  652. font-size:12px;
  653. line-height:1.6em;
  654. }
  655.  
  656. /* styling the FIRST LETTER of your biography text */
  657. #fruit:first-letter {
  658. float:left;
  659. margin-right:10px;
  660. padding:9px 12px 12px 12px;
  661. border:6px double #222;
  662. font-family:playfair display;
  663. text-transform:uppercase;
  664. font-size:25px;
  665. color:#222;
  666. }
  667.  
  668. /* since the FIRST LETTER padding may not be the same for every letter, */
  669. /* you can create more styling for it */
  670. /* e.g.: if your character no. x bio starts with an I, it may be too thin */
  671. /* so style it beginning with ".tapiocax" like this: */
  672. /* replace x with the character no. */
  673. .tapiocax:first-letter {
  674. float:left;
  675. margin-right:10px;
  676. padding:9px 8.5px 12px 9px; /* only this line (padding) changes */
  677. /* to learn more about padding, go to this site: */
  678. /* w3schools.com/css/tryit.asp?filename=trycss_padding_shorthand_4val */
  679. border:6px double #222;
  680. font-family:playfair display;
  681. text-transform:uppercase;
  682. font-size:25px;
  683. color:#222;
  684. }
  685.  
  686. #fruit p:last-child {margin-bottom:0px;}
  687.  
  688. #fruit::-webkit-scrollbar {
  689. width:9px;
  690. height:9px;
  691. }
  692.  
  693. #fruit::-webkit-scrollbar-thumb {
  694. background-color:#888; /* biography section scrollbar itself */
  695. border:4px solid #fcfcfc; /* biography section scrollbar background */
  696. }
  697.  
  698. #fruit::-webkit-scrollbar-track {
  699. background:#ddd; /* biography section scrollbar track */
  700. border:4px solid #fcfcfc; /* biography section scrollbar background */
  701. }
  702.  
  703. /* biography text link */
  704. #fruit a {
  705. color:#222; /* biography link color */
  706. border-bottom:0.5px solid #222; /* biography link border */
  707. }
  708.  
  709. /* biography text link hover */
  710. #fruit a:hover {
  711. color:#000; /* biography link color hover */
  712. border-bottom:0.5px solid #000; /* biography link border hover */
  713. }
  714.  
  715. .tapioca1 {display:block;}
  716.  
  717. /* big link under bio text styling */
  718. #nav a {
  719. margin-top:15px;
  720. display:inline-block;
  721. width:180px;
  722. padding:12px 18px;
  723. background-color:transparent; /* link under bio text: background color */
  724. border:0.5px solid #888; /* link under bio text: border */
  725. text-align: center;
  726. font-family:montserrat;
  727. font-weight:400;text-transform:uppercase;
  728. letter-spacing:1.3px;line-height:1.6em;
  729. font-size:9px;
  730. color:#151515; /* link under bio text: link color */
  731. }
  732.  
  733. #nav a:hover {
  734. background-color:#151515; /* link under bio text: hover background color */
  735. border:0.5px solid #151515; /* link under bio text: border hover */
  736. color:#eee; /* link under bio text: link hover color */
  737. }
  738.  
  739. .biglink1 {display:block;}
  740.  
  741. /*--------------------POPUP NAVIGATION BOX--------------------*/
  742.  
  743. #screen, #backing, #poppy {
  744. display:none;
  745. position:fixed;
  746. top:50%;
  747. left:50%;
  748. transform:translate(-50%,-50%);
  749. }
  750.  
  751. /* navigation box background panel overlay */
  752. #screen {
  753. width:calc((440px * 16 / 9) + 50px);
  754. height:440px;
  755. background-color:#fff; /* overlay color */
  756. opacity:0.825; /* overlay transparency */
  757. z-index:9;
  758. }
  759.  
  760. #backing {width:100vw;height:100vh;z-index:10;}
  761.  
  762. /* navigation box */
  763. #poppy {
  764. width:450px;
  765. padding:20px;
  766. background-color:#fdfdfd; /* navigation box background */
  767. border:1px solid #eee; /* navigation box border */
  768. z-index:11;
  769. }
  770.  
  771. /* navigation box custom links */
  772. .clinks {margin-left:5px;}
  773.  
  774. .clinks a {
  775. display:inline-block;
  776. margin:5px;
  777. width:80px;
  778. padding:6px 9px;
  779. background-color:#fefefe; /* custom links background */
  780. border:0.5px solid #ddd; /* custom links border */
  781. text-align:center;
  782. font-family:Quicksand;font-weight:bold;
  783. text-transform:uppercase;letter-spacing:2px;
  784. font-size:10px;
  785. color:#444; /* custom links color */
  786. }
  787.  
  788. .clinks a:hover {
  789. background-color:#222; /* custom links background hover */
  790. border:0.5px solid #222; /* custom links border hover */
  791. color:#ddd; /* custom links color hover */
  792. }
  793.  
  794. /* navigation box "close" button */
  795. .close {
  796. margin-left:50%;
  797. transform:translateX(-50%);
  798. display:inline-block;
  799. margin-top:10px;
  800. padding:6px 20px;
  801. background-color:transparent; /* close button background */
  802. border:0.5px solid #888; /* close button border */
  803. text-align:center;
  804. font-family:montserrat;
  805. font-weight:400;text-transform:uppercase;
  806. letter-spacing:1.3px;line-height:1.6em;
  807. font-size:9px;
  808. color:#222; /* close button text color */
  809. cursor:pointer;
  810. }
  811.  
  812. /*--------------------PAGE CREDIT--------------------*/
  813.  
  814. /* do not remove */
  815. /* you MAY edit the colors and stuff but do not make it any smaller */
  816. #please-respect-theme-makers a {
  817. position:fixed;
  818. z-index:999999;
  819. padding:7px 9px;
  820. background-color:#fdfdfd;
  821. border:1px solid #f7f7f7;
  822. bottom:0;margin-bottom:15px;
  823. right:0;margin-right:15px;
  824. font-family:karla;
  825. text-transform:uppercase;
  826. line-height:1em;
  827. text-align:center;
  828. font-size:9px;
  829. letter-spacing:1.3px;
  830. color:#888;
  831. }
  832.  
  833. </style>
  834.  
  835. </head>
  836.  
  837. <body>
  838. <!----PLEASE DO NOT REMOVE THE THEME CREDIT---->
  839. <div id="please-respect-theme-makers"><a href="//glenthemes.tumblr.com" title="page by glenthemes">glenthemes</a></div>
  840.  
  841. <!---------------------------------------------------------->
  842.  
  843. <a class="out"><div id="backing"></div></a>
  844. <div id="screen"></div>
  845. <div id="poppy">
  846. <div class="clinks">
  847.  
  848. <!----YOUR CUSTOM LINKS GO HERE---->
  849. <!----PLEASE DO NOT REMOVE THE THEME CREDIT LINK---->
  850. <a href="/">index</a>
  851. <a href="/ask">message</a>
  852. <a href="/archive">archive</a>
  853. <a href="//glenthemes.tumblr.com" title="page by glenthemes">credit</a>
  854. <a href="/">link 1</a>
  855. <a href="/">link 2</a>
  856. <a href="/">link 3</a>
  857. <a href="/">link 4</a>
  858. <a href="/">link 5</a>
  859. <a href="/">link 6</a>
  860. <a href="/">link 7</a>
  861. <a href="/">etc</a>
  862.  
  863. </div><!--do not delete this line-->
  864.  
  865. <!----CLOSE NAVIGATION BOX BUTTON---->
  866. <a class="close">return</a>
  867.  
  868. </div><!--do not delete this line-->
  869.  
  870. <!---------------------------------------------------------->
  871.  
  872. <div id="lettuce">
  873. <div id="main">
  874. <div id="strip">
  875. <div class="adj">
  876.  
  877. <!----NAVIGATION BUTTON TOOLTIP---->
  878. <a class="open" title="navigate">
  879.  
  880. <div class="carrot">
  881.  
  882. <!----NAVIGATION BUTTON ICON---->
  883. <!--to change the icon, go to this website:-->
  884. <!--saturnthms.com/font-->
  885. <!--and scroll down to "Filters"-->
  886. <span class="sf sf-deck-o"></span>
  887.  
  888. </div><div class="poop"></div></a><!--do not delete this line-->
  889.  
  890. <div id="sect">
  891.  
  892. <!----SIDEBAR CHARACTER ICONS---->
  893. <!--icon size is 64px-->
  894. <!--change the number in "round1" to the corresponding character number-->
  895. <!--e.g.: change "round1" to "round5" if you are on your 5th character-->
  896. <!--to add a new character, copy the following:-->
  897. <!-- START COPY -->
  898. <a class="round1" title="character 1 icon tooltip">
  899. <img class="face" src="//68.media.tumblr.com/383e6a11bfb8f593ee2cb49f3bf86568/tumblr_oonpt6jtgz1utyy72o3_r2_250.png"></a>
  900. <!-- END COPY -->
  901.  
  902. <a class="round2" title="character 2 icon tooltip">
  903. <img class="face" src="//68.media.tumblr.com/d55e4c4635f36fea1d5758ce3875549a/tumblr_oontrn6ozG1utyy72o3_r1_250.png"></a>
  904.  
  905. <a class="round3" title="character 3 icon tooltip">
  906. <img class="face" src="//68.media.tumblr.com/5ad068cc34e78550ec6dc7c64aa8288c/tumblr_ooo34tPzv61s4s960o1_r1_250.png"></a>
  907.  
  908. <a class="round4" title="character 4 icon tooltip">
  909. <img class="face" src="//68.media.tumblr.com/2929948940d94f1747f13b6bbb31eb13/tumblr_oonpt6jtgz1utyy72o6_250.png"></a>
  910.  
  911. </div><!--sect--><!--do not delete this line-->
  912. </div><!--adj--><!--do not delete this line-->
  913. </div><!--strip--><!--do not delete this line-->
  914.  
  915. <!---------------------------------------------------------->
  916.  
  917. <div id="silhouette">
  918.  
  919. <!----HEIGHT CHART---->
  920. <!--you can delete all this if you don't want the height chart-->
  921. <div class="mug five11"></div>
  922. <div class="mug five10"></div>
  923. <div class="mug five9"></div>
  924. <div class="mug five8"></div>
  925. <div class="mug five7"></div>
  926. <div class="mug five6"></div>
  927. <div class="mug five5"></div>
  928. <div class="mug five4"></div>
  929. <div class="mug five3"></div>
  930. <div class="mug five2"></div>
  931. <div class="mug five1"></div>
  932. <div class="mug five0"></div>
  933. <div class="mug four11"></div>
  934. <div class="mug four10"></div>
  935. <div class="mug four9"></div>
  936. <div class="mug four8"></div>
  937. <div class="mug four7"></div>
  938. <div class="mug four6"></div>
  939. <div class="mug four5"></div>
  940. <div class="mug four4"></div>
  941. <div class="mug four3"></div>
  942. <div class="mug four2"></div>
  943. <div class="mug four1"></div>
  944. <div class="mug four0"></div>
  945. <div class="mug three11"></div>
  946. <div class="mug three10"></div>
  947. <div class="mug three9"></div>
  948. <div class="mug three8"></div>
  949. <div class="mug three7"></div>
  950. <div class="mug three6"></div>
  951. <div class="mug three5"></div>
  952.  
  953. <div class="pillar"></div><!--height chart end-->
  954.  
  955. <!---------------------------------------------------------->
  956.  
  957. <div id="torch">
  958. <div id="vertical">
  959.  
  960. <!----VERTICAL/SIDEWAYS TEXT---->
  961. <!--change the number in "line1" to the corresponding character no.-->
  962. <!--e.g.: change "line1" to "line5" if on your 5th character-->
  963. <!-- START COPY -->
  964. <div class="line1">
  965. <b>some bolded text:</b> some normal text for 1
  966. </div>
  967. <!--END COPY-->
  968.  
  969. <div class="line2">
  970. <b>some bolded text:</b> some normal text for 2
  971. </div>
  972.  
  973. <div class="line3">
  974. <b>some bolded text:</b> some normal text for 3
  975. </div>
  976.  
  977. <div class="line4">
  978. <b>some bolded text:</b> some normal text for 4
  979. </div>
  980.  
  981. </div><!--vertical--><!--do not delete this line-->
  982. </div><!--torch--><!--do not delete this line-->
  983.  
  984. <!---------------------------------------------------------->
  985.  
  986. <div id="pics">
  987.  
  988. <!----CENTRAL CHARACTER IMAGES---->
  989. <!--change the number in "chara1" to the corresponding character number-->
  990. <!--e.g.: change "chara1" to "chara5" if you are on your 5th character-->
  991. <!-- START COPY -->
  992. <img class="chara1" src="//78.media.tumblr.com/08e320e53552364eb34df1d907b2052a/tumblr_p3rfmrWWj51qg2f5co2_r2_1280.png">
  993. <!-- END COPY -->
  994.  
  995. <img class="chara2" src="//78.media.tumblr.com/b31f1123b3be54a25357667c22e5b317/tumblr_p3rfmrWWj51qg2f5co4_r1_1280.png">
  996.  
  997. <img class="chara3" src="//78.media.tumblr.com/32b6a9467050356dd924ba8a0b0a9ca7/tumblr_p3rfmrWWj51qg2f5co1_r1_1280.png">
  998.  
  999. <img class="chara4" src="//78.media.tumblr.com/3d82f90bf5b000c6c03d6af566b079f5/tumblr_p3rfmrWWj51qg2f5co3_r2_1280.png">
  1000.  
  1001. </div><!--pics--><!--do not delete this line-->
  1002.  
  1003. <!---------------------------------------------------------->
  1004.  
  1005. <div id="beam">
  1006.  
  1007. <!----CHARACTER NAME LABELS---->
  1008. <!--change the number in "label1" to the corresponding character number-->
  1009. <!--e.g.: change "label1" to "label5" if you are on your 5th character-->
  1010. <!-- START COPY -->
  1011. <div class="label1">
  1012. <div class="name-line"></div>
  1013. <div class="top-text">a name</div>
  1014. <div class="bot-text">a subtitle</div>
  1015. </div>
  1016. <!-- END COPY -->
  1017.  
  1018. <div class="label2">
  1019. <div class="name-line"></div>
  1020. <div class="top-text">a name</div>
  1021. <div class="bot-text">a subtitle</div>
  1022. </div>
  1023.  
  1024. <div class="label3">
  1025. <div class="name-line"></div>
  1026. <div class="top-text">a name</div>
  1027. <div class="bot-text">a subtitle</div>
  1028. </div>
  1029.  
  1030. <div class="label4">
  1031. <div class="name-line"></div>
  1032. <div class="top-text">a name</div>
  1033. <div class="bot-text">a subtitle</div>
  1034. </div>
  1035.  
  1036. </div><!--beam--><!--do not delete this line-->
  1037.  
  1038. <!---------------------------------------------------------->
  1039.  
  1040. <div id="allstat">
  1041.  
  1042. <!----CHARACTER STATISTICS TABLES---->
  1043. <!--change the number in "stats1" to the corresponding character number-->
  1044. <!--e.g.: change "stats1" to "stats5" if you are on your 5th character-->
  1045. <!--everything between <tr> and </tr> is ONE ROW-->
  1046. <!-- START COPY -->
  1047. <div class="stats1"><table><tbody><!--table starts here-->
  1048. <tr>
  1049. <td>left text</td>
  1050. <td>right text</td>
  1051. </tr>
  1052.  
  1053. <tr>
  1054. <td>left text</td>
  1055. <td>right text</td>
  1056. </tr>
  1057.  
  1058. <tr>
  1059. <td>left text</td>
  1060. <td>right text</td>
  1061. </tr>
  1062.  
  1063. <tr>
  1064. <td>left text</td>
  1065. <td><green>I'm green!</green></td>
  1066. </tr>
  1067. </tbody></table></div><!--table ends here-->
  1068. <!-- END COPY -->
  1069.  
  1070.  
  1071. <div class="stats2"><table><tbody><!--table starts here-->
  1072. <tr>
  1073. <td>left text</td>
  1074. <td>right text</td>
  1075. </tr>
  1076.  
  1077. <tr>
  1078. <td>left text</td>
  1079. <td>right text</td>
  1080. </tr>
  1081.  
  1082. <tr>
  1083. <td>left text</td>
  1084. <td>right text</td>
  1085. </tr>
  1086.  
  1087. <tr>
  1088. <td>left text</td>
  1089. <td><green>I'm green!</green></td>
  1090. </tr>
  1091. </tbody></table></div><!--table ends here-->
  1092.  
  1093.  
  1094. <div class="stats3"><table><tbody><!--table starts here-->
  1095. <tr>
  1096. <td>left text</td>
  1097. <td>right text</td>
  1098. </tr>
  1099.  
  1100. <tr>
  1101. <td>left text</td>
  1102. <td>right text</td>
  1103. </tr>
  1104.  
  1105. <tr>
  1106. <td>left text</td>
  1107. <td>right text</td>
  1108. </tr>
  1109.  
  1110. <tr>
  1111. <td>left text</td>
  1112. <td><green>I'm green!</green></td>
  1113. </tr>
  1114. </tbody></table></div><!--table ends here-->
  1115.  
  1116.  
  1117. <div class="stats4"><table><tbody><!--table starts here-->
  1118. <tr>
  1119. <td>left text</td>
  1120. <td>right text</td>
  1121. </tr>
  1122.  
  1123. <tr>
  1124. <td>left text</td>
  1125. <td>right text</td>
  1126. </tr>
  1127.  
  1128. <tr>
  1129. <td>left text</td>
  1130. <td>right text</td>
  1131. </tr>
  1132.  
  1133. <tr>
  1134. <td>left text</td>
  1135. <td><green>I'm green!</green></td>
  1136. </tr>
  1137. </tbody></table></div><!--table ends here-->
  1138.  
  1139. </div><!--allstat--><!--do not delete this line-->
  1140.  
  1141. <!---------------------------------------------------------->
  1142.  
  1143. <div id="berry">
  1144.  
  1145. <!----CHARACTER METAR BARS---->
  1146. <!--change the number in "barstuff1" to the corresponding character no.-->
  1147. <!--e.g.: change "barstuff1" to "barstuff5" if on your 5th character-->
  1148. <!-- START COPY -->
  1149. <div class="barstuff1"><!--START METER BARS-->
  1150. <div class="barstat"><!--start one row-->
  1151. <div class="bartit">meter label</div>
  1152. <div class="barholder">
  1153. <div class="bar-fill"></div>
  1154. <div class="bar-empty"></div>
  1155. <div class="bar-empty"></div>
  1156. <div class="bar-empty"></div>
  1157. <div class="bar-empty"></div>
  1158. </div>
  1159. </div><!--end one row-->
  1160.  
  1161. <div class="barstat"><!--start another row-->
  1162. <div class="bartit">meter label</div>
  1163. <div class="barholder">
  1164. <div class="bar-fill"></div>
  1165. <div class="bar-fill"></div>
  1166. <div class="bar-fill"></div>
  1167. <div class="bar-fill"></div>
  1168. <div class="bar-fill"></div>
  1169. </div>
  1170. </div><!--end another row-->
  1171. </div><!--END METER BARS-->
  1172. <!-- END COPY -->
  1173.  
  1174.  
  1175.  
  1176. <div class="barstuff2"><!--START METER BARS-->
  1177. <div class="barstat"><!--start one row-->
  1178. <div class="bartit">meter label</div>
  1179. <div class="barholder">
  1180. <div class="bar-fill"></div>
  1181. <div class="bar-fill"></div>
  1182. <div class="bar-fill"></div>
  1183. <div class="bar-fill"></div>
  1184. <div class="bar-fill"></div>
  1185. </div>
  1186. </div><!--end one row-->
  1187.  
  1188. <div class="barstat"><!--start another row-->
  1189. <div class="bartit">meter label</div>
  1190. <div class="barholder">
  1191. <div class="bar-fill"></div>
  1192. <div class="bar-empty"></div>
  1193. <div class="bar-empty"></div>
  1194. <div class="bar-empty"></div>
  1195. <div class="bar-empty"></div>
  1196. </div>
  1197. </div><!--end another row-->
  1198. </div><!--END METER BARS-->
  1199.  
  1200.  
  1201.  
  1202. <div class="barstuff3"><!--START METER BARS-->
  1203. <div class="barstat"><!--start one row-->
  1204. <div class="bartit">meter label</div>
  1205. <div class="barholder">
  1206. <div class="bar-fill"></div>
  1207. <div class="bar-fill"></div>
  1208. <div class="bar-fill"></div>
  1209. <div class="bar-fill"></div>
  1210. <div class="bar-fill"></div>
  1211. </div>
  1212. </div><!--end one row-->
  1213.  
  1214. <div class="barstat"><!--start another row-->
  1215. <div class="bartit">meter label</div>
  1216. <div class="barholder">
  1217. <div class="bar-fill"></div>
  1218. <div class="bar-fill"></div>
  1219. <div class="bar-fill"></div>
  1220. <div class="bar-empty"></div>
  1221. <div class="bar-empty"></div>
  1222. </div>
  1223. </div><!--end another row-->
  1224. </div><!--END METER BARS-->
  1225.  
  1226.  
  1227.  
  1228. <div class="barstuff4"><!--START METER BARS-->
  1229. <div class="barstat"><!--start one row-->
  1230. <div class="bartit">meter label</div>
  1231. <div class="barholder">
  1232. <div class="bar-fill"></div>
  1233. <div class="bar-fill"></div>
  1234. <div class="bar-fill"></div>
  1235. <div class="bar-fill"></div>
  1236. <div class="bar-empty"></div>
  1237. </div>
  1238. </div><!--end one row-->
  1239.  
  1240. <div class="barstat"><!--start another row-->
  1241. <div class="bartit">meter label</div>
  1242. <div class="barholder">
  1243. <div class="bar-fill"></div>
  1244. <div class="bar-fill"></div>
  1245. <div class="bar-fill"></div>
  1246. <div class="bar-fill"></div>
  1247. <div class="bar-empty"></div>
  1248. </div>
  1249. </div><!--end another row-->
  1250. </div><!--END METER BARS-->
  1251.  
  1252.  
  1253. </div><!--berry--><!--do not delete this line-->
  1254.  
  1255. </div><!--silhouette--><!--do not delete this line-->
  1256.  
  1257. <!---------------------------------------------------------->
  1258.  
  1259. <div id="boba">
  1260. <div id="flavoring">
  1261. <div id="seaweed">
  1262.  
  1263. <!----CHARACTER TITLES (RIGHT HAND SIDE)---->
  1264. <!--change the number in "title1" to the corresponding character no.-->
  1265. <!--e.g.: change "title1" to "title5" if on your 5th character-->
  1266. <!--you can use <br> for a line break-->
  1267. <!--I recommend only having TWO lines-->
  1268.  
  1269. <div class="title1">character<br>one</div>
  1270.  
  1271. <div class="title2">character<br>two</div>
  1272.  
  1273. <div class="title3">character<br>three</div>
  1274.  
  1275. <div class="title4">character<br>four</div>
  1276.  
  1277. </div><!--seaweed--><!--do not delete this line-->
  1278.  
  1279. <!---------------------------------------------------------->
  1280.  
  1281. <div id="fruit">
  1282.  
  1283. <!----SIDEBAR CHARACTER ICONS---->
  1284. <!--change the no. in "tapioca1" to the corresponding character no.-->
  1285. <!--e.g.: change "tapioca1" to "tapioca5" if on your 5th character-->
  1286.  
  1287. <div class="tapioca1">
  1288. Some text about how awesome character 1 is!
  1289. </div><!--end of the text area-->
  1290.  
  1291. <div class="tapioca2">
  1292. Some text about how awesome character 2 is!
  1293. </div><!--end of the text area-->
  1294.  
  1295. <div class="tapioca3">
  1296. Some text about how awesome character 3 is!
  1297. </div><!--end of the text area-->
  1298.  
  1299. <div class="tapioca4">
  1300. Some text about how awesome character 4 is!
  1301. </div><!--end of the text area-->
  1302.  
  1303. </div><!--fruit--><!--do not delete this line-->
  1304.  
  1305. <!---------------------------------------------------------->
  1306.  
  1307. <div id="nav">
  1308.  
  1309. <!----BIG LINK UNDER BIOGRAPHY---->
  1310. <!--change the no. in "biglink1" to the corresponding character no.-->
  1311. <!--e.g.: change "biglink1" to "biglink5" if on your 5th character-->
  1312.  
  1313. <div class="biglink1">
  1314. <a href="/">character 1 link name »</a></div>
  1315.  
  1316. <div class="biglink2">
  1317. <a href="/">character 2 link name »</a></div>
  1318.  
  1319. <div class="biglink3">
  1320. <a href="/">character 3 link name »</a></div>
  1321.  
  1322. <div class="biglink4">
  1323. <a href="/">character 4 link name »</a></div>
  1324.  
  1325. </div><!--nav--><!--do not delete this line-->
  1326. </div><!--flavoring--><!--do not delete this line-->
  1327. </div><!--boba--><!--do not delete this line-->
  1328.  
  1329. </div><!--main--><!--do not delete this line-->
  1330. </div><!--lettuce--><!--do not delete this line-->
  1331.  
  1332.  
  1333. </body>
  1334.  
  1335. </html>
Advertisement
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!