API tools faq
paste
glenthemes

About Page [10]: Statice

glenthemes
Feb 16th, 2019 (edited)
3,129
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.16 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. About Page [10]: Statice
  3. Made by glenthemes
  4.  
  5. Initial release: 2019/02/16
  6. Last updated: 2023/10/05
  7.  
  8. What's new:
  9. ✱ fixed squashed play/pause buttons
  10. ✱ rehosted some images
  11.  
  12. TERMS OF USE:
  13. 1) Do not remove the page credit.
  14. 2) Do not repost/redistribute my themes.
  15. 3) Do not take parts of the code and use it as your own.
  16. 4) Do not use my themes as a base code.
  17. 5) Do not mix my themes together.
  18.  
  19. Please stick to the Terms! Thank you ^-^
  20. Here is the help guide!
  21. ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
  22. docs.google.com/document/d/10qXOhdwPVxS15snK7ExmN-mDPqga_GnLpeLynkLojLs/edit?usp=sharing
  23.  
  24. Credits at: glenthemes.tumblr.com/leo-crd
  25. ------------------------------------------------------------------------>
  26.  
  27. <!DOCTYPE html lang="en">
  28.  
  29. <head>
  30.  
  31. <title>{Title}</title>
  32.  
  33. <link rel="shortcut icon" href="{Favicon}">
  34.  
  35. <!--------------------SCRIPTS-------------------->
  36. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  37. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  38. <script>
  39. (function($){
  40. $(document).ready(function(){
  41. $("a[title]").style_my_tooltips({
  42. tip_follows_cursor:true,
  43. tip_delay_time:50,
  44. tip_fade_speed:0,
  45. attribute:"title"
  46. });
  47. });
  48. })(jQuery);
  49. </script>
  50.  
  51. <script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
  52.  
  53. <script src="//static.tumblr.com/gtjt4bo/ZGYpn0axc/statice.js"></script>
  54.  
  55. <link rel="stylesheet" href="//static.tumblr.com/2pnwama/8HIpn1bpf/statice.css">
  56.  
  57. <!-------------------------------------------------------------------->
  58.  
  59. <style type="text/css">
  60.  
  61. @font-face { font-family: "pixeloperator8"; src: url('//glen-assets.github.io/fonts/PixelOperator8.ttf'); }
  62.  
  63. @font-face { font-family: "silkscreen"; src: url('//glen-assets.github.io/fonts/silkscreen.ttf'); }
  64.  
  65. @font-face { font-family: "consolas-alt"; src: url('//glen-assets.github.io/fonts/consolas.TTF'); }
  66.  
  67. /*--------------------TOOLTIPS--------------------*/
  68. #s-m-t-tooltip {
  69. margin:20px;
  70. max-width:400px;
  71. padding:4px 9px;
  72. background-color:#fefefe; /* tooltip background color */
  73. border:1px solid #DCDBE6; /* tooltip border color */
  74. box-shadow:4px 4px #EBEAF0; /* tooltip box shadow */
  75. font-family:silkscreen;
  76. font-size:9px;
  77. letter-spacing:-1px;
  78. color:#999; /* tooltip text color */
  79. }
  80.  
  81. /*--------------------TUMBLR CONTROLS--------------------*/
  82. #control-ico {
  83. position:fixed;
  84. bottom:0;margin-bottom:16px;
  85. right:0;margin-right:16px;
  86. }
  87.  
  88. /* bottom right 'plus' icon */
  89. #control-ico svg {
  90. width:16px;
  91. height:16px;
  92. color:#a39fbb; /* 'plus' icon color */
  93. }
  94.  
  95. iframe#tumblr_controls, .iframe-controls--desktop {
  96. top:auto!important;
  97. bottom:-10px!important;
  98. right:5px!important;
  99. position:fixed!important;
  100. padding-right:43px!important;
  101.  
  102. transform:scale(0.7,0.7);
  103. -webkit-transform:scale(0.7,0.7);
  104.  
  105. opacity:0;
  106. transform-origin:100% 0;
  107. z-index:999999!important;
  108. -webkit-transition: all 0.3s ease-in-out;
  109. -moz-transition: all 0.3s ease-in-out;
  110. -o-transition: all 0.3s ease-in-out;
  111. }
  112.  
  113. #iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {opacity:1;}
  114.  
  115. /*--------------------TEXT HIGHLIGHT--------------------*/
  116. ::selection {
  117. background:#fafafa;
  118. color:#555;
  119. }
  120.  
  121. ::-moz-selection {
  122. background:#fafafa;
  123. color:#555;
  124. }
  125.  
  126. /*--------------------BASICS--------------------*/
  127. body {
  128. background:#fcfcfc; /* background color */
  129. background-image:url('//66.media.tumblr.com/e9eccce5b5cd2c1eb27592f6ce3bd933/tumblr_pkn7h6rARh1qg2f5co2_r1_400.png'); /* background image */
  130. background-attachment:fixed;
  131. background-repeat:repeat;
  132. color:#888; /* general text color */
  133. cursor:normal;
  134. font-family:consolas-alt;
  135. line-height:1.6em;
  136. font-size:12px;
  137. text-align:left;
  138. }
  139.  
  140. blockquote {
  141. padding-left:10px;
  142. margin-left:5px;
  143. border-left:1px solid;
  144. border-color:#aaa;
  145. margin:10px;
  146. }
  147.  
  148. a {
  149. color:#BDB3E1;
  150. text-decoration:none;
  151. -webkit-transition: all 0.05s ease-in-out;
  152. -moz-transition: all 0.05s ease-in-out;
  153. -o-transition: all 0.05s ease-in-out;
  154. }
  155.  
  156. b, strong {
  157. filter:brightness(80%);
  158. -webkit-filter:brightness(80%);
  159. -ms-filter:brightness(80%);
  160. -moz-:brightness(80%);
  161. -o-filter:brightness(80%);
  162. }
  163.  
  164. pre, code {
  165. white-space:pre-wrap;
  166. display:block;
  167. }
  168.  
  169. hr {
  170. width:70%;
  171. border-width:0px;
  172. height:1px;
  173. background-color:#bbb;
  174. }
  175.  
  176. /*--------------------HEART / HEALTH STATS UI--------------------*/
  177. #health-widget {
  178. position:fixed;
  179. top:0;margin-top:20px;
  180. left:0;margin-left:20px;
  181. z-index:2;
  182. }
  183.  
  184. /* heart container */
  185. #heart-cont {
  186. padding:12px;
  187. background:#fefefe; /* heart container background color */
  188. border-radius:100%;
  189. border:1px solid #dcdbe6; /* heart container border */
  190. box-shadow:4px 4px #ebeaf0; /* heart container box shadow */
  191. }
  192.  
  193. /* actual heart */
  194. .gt-fill {background:#BDB3E1;} /* heart color */
  195.  
  196. /* health percentage bar */
  197. .health-bar {
  198. margin-left:17px;
  199. width:250px;
  200. height:14px;
  201. background:#fefefe; /* EMPTY color */
  202. border:1px solid #dcdbe6; /* bar border */
  203. border-radius:3px;
  204. box-shadow:4px 4px #ebeaf0; /* bar box shadow */
  205. overflow:hidden;
  206. cursor:crosshair;
  207. }
  208.  
  209. .health-fill {
  210. height:inherit;
  211. background:#dcdbe6; /* FILL color */
  212. /* fill width/amount is done in the html */
  213. }
  214.  
  215. /*----------------LEVEL / SECONDARY STAT----------------*/
  216. #secondary-stat {margin-top:15px;}
  217.  
  218. /* level icon image */
  219. .quoi {
  220. margin-left:10px;
  221. width:25px;
  222. }
  223.  
  224. /* level text */
  225. .quoi-txt {
  226. margin-left:25px;
  227. padding:10px 12px;
  228. background:#fefefe; /* level background color */
  229. border:1px solid #DCDBE6; /* level border */
  230. box-shadow:6px 6px #EBEAF0; /* level box shadow */
  231. font-family:silkscreen;
  232. font-size:9px;
  233. letter-spacing:-1px;
  234. line-height:1em;
  235. color:#a39fbb; /* level text color */
  236. }
  237.  
  238. /*-----------------TOP RIGHT BUTTONS UI-----------------*/
  239. #milkshake {
  240. position:fixed;
  241. top:0;margin-top:20px;
  242. right:0;margin-right:20px;
  243. z-index:2;
  244. }
  245.  
  246. /* biggest icon */
  247. #brioche, .bun {
  248. width:25px;
  249. height:25px;
  250. }
  251.  
  252. #brioche {
  253. width:25px;
  254. height:25px;
  255. padding:15px;
  256. background:#fefefe; /* biggest icon background color */
  257. border:1px solid #DCDBE6; /* biggest icon border */
  258. border-radius:100%;
  259. box-shadow:6px 6px #EBEAF0; /* biggest icon box-shadow */
  260. }
  261.  
  262. /* home button */
  263. #straw, .berry {
  264. width:15px;
  265. height:15px;
  266. }
  267.  
  268. #straw {
  269. position:absolute;
  270. margin-top:-35px;
  271. margin-left:-48px;
  272. padding:10px;
  273. background:#fefefe; /* home button background color */
  274. border:1px solid #DCDBE6; /* home button border */
  275. border-radius:100%;
  276. box-shadow:3px 3px #EBEAF0; /* home button box shadow */
  277. }
  278.  
  279. /* home button tooltip */
  280. .home-tt, .home-tt:after {
  281. position:absolute;
  282. background:#fefefe; /* home button tooltip background color */
  283. }
  284.  
  285. .home-tt {
  286. display:none;
  287. margin-top:-30px;
  288. right:calc(100% + 65px);
  289. padding:10px 12px;
  290. border:1px solid #DCDBE6; /* home button tooltip border */
  291. box-shadow:3px 3px #EBEAF0; /* home button tooltip box shadow */
  292. font-family:silkscreen;
  293. font-size:9px;
  294. letter-spacing:-1px;
  295. line-height:1em;
  296. color:#a39fbb; /* home button tooltip text color */
  297. }
  298.  
  299. .home-tt:after {
  300. content:"";
  301. margin-top:-1px;
  302. left:calc(100% - 5px);
  303. width:10px;
  304. height:10px;
  305. border-right:1px solid #DCDBE6; /* home button tooltip arrow border */
  306. border-bottom:1px solid #DCDBE6; /* home button tooltip arrow border */
  307. box-shadow:0px 3px #EBEAF0; /* home button tooltip arrow box shadow */
  308. transform:rotate(-45deg);
  309. -webkit-transform:rotate(-45deg);
  310. -ms-transform:rotate(-45deg);
  311. -moz-transform:rotate(-45deg);
  312. -o-transform:rotate(-45deg);
  313. }
  314.  
  315. /* ask button */
  316. #marsh, .mallow {
  317. width:15px;
  318. height:15px;
  319. }
  320.  
  321. #marsh {
  322. position:absolute;
  323. margin-top:7px;
  324. margin-left:-13px;
  325. padding:10px;
  326. background:#fefefe; /* ask button background color */
  327. border:1px solid #DCDBE6; /* ask button border */
  328. border-radius:100%;
  329. box-shadow:3px 3px #EBEAF0; /* ask button box shadow */
  330. }
  331.  
  332. /* ask button tooltip */
  333. .ask-tt, .ask-tt:before {
  334. position:absolute;
  335. background:#fefefe; /* ask button tooltip background color */
  336. }
  337.  
  338. .ask-tt {
  339. display:none;
  340. margin-top:65px;
  341. margin-left:calc(-50% - 1px);
  342. padding:10px 12px;
  343. border:1px solid #DCDBE6; /* ask button tooltip border */
  344. box-shadow:3px 3px #EBEAF0; /* ask button tooltip box shadow */
  345. font-family:silkscreen;
  346. font-size:9px;
  347. letter-spacing:-1px;
  348. line-height:1em;
  349. color:#a39fbb; /* ask button text color */
  350. }
  351.  
  352. .ask-tt:before {
  353. content:"";
  354. bottom:calc(100% - 5px);
  355. left:calc(50% - 5px);
  356. width:10px;
  357. height:10px;
  358. border-top:1px solid #DCDBE6; /* ask button tooltip border */
  359. border-right:1px solid #DCDBE6; /* ask button tooltip border */
  360. transform:rotate(-45deg);
  361. -webkit-transform:rotate(-45deg);
  362. -ms-transform:rotate(-45deg);
  363. -moz-transform:rotate(-45deg);
  364. -o-transform:rotate(-45deg);
  365. }
  366.  
  367. /*--------------------MAIN CONTAINER--------------------*/
  368. #beef {
  369. position:fixed;
  370. top:0;left:0;right:0;
  371. margin:0 auto;
  372. width:650px;
  373. height:100vh;
  374. display:table;
  375. }
  376.  
  377. #salmon {
  378. display:table-cell;
  379. vertical-align:middle;
  380. }
  381.  
  382. #boxie {
  383. margin-top:30px;
  384. height:350px;
  385. padding:24px;
  386. background:#fefefe; /* main about background color */
  387. border:1px solid #dcdbe6; /* main about border */
  388. border-radius:3px 3px 0 3px;
  389. box-shadow:17px 17px #ebeaf0; /* main about box shadow */
  390. }
  391.  
  392. #verdiv {
  393. margin:-24px 24px 0 24px;
  394. width:1px;
  395. height:calc(100% + 48px);
  396. background:#dcdbe6; /* main about border */
  397. }
  398.  
  399. /*--------------------ABOUT : LEFT--------------------*/
  400. #leftbread {
  401. position:relative;
  402. width:calc(50% - 24px);
  403. }
  404.  
  405. /*--------------------LEFT TITLE--------------------*/
  406. .left-title {
  407. padding:7px 12px;
  408. background:#fcfcfc; /* left title background color */
  409. border:1px solid #f2f2f2; /* left title border */
  410. border-radius:3px;
  411. font-family:silkscreen;
  412. font-size:9px;
  413. color:#777; /* left title text color */
  414. text-align:center;
  415. }
  416.  
  417. .left-mid-cont {
  418. margin-top:16px;
  419. width:100%;
  420. height:198px;
  421. display:table;
  422. }
  423.  
  424. .left-mid-m {display:table-cell;vertical-align:middle;}
  425.  
  426. /*--------------------LEFT INFO STATS--------------------*/
  427. .left-stats {
  428. font-family:silkscreen;
  429. font-size:9px;
  430. letter-spacing:-1px;
  431. }
  432.  
  433. .left-stats table {
  434. margin:0 8px 0 -10px;
  435. border-collapse:separate;
  436. border-spacing:10px 4px;
  437. }
  438.  
  439. /* first column styling */
  440. .left-stats td:first-of-type {
  441. color:#b1aec6;
  442. }
  443.  
  444. .left-stats td:first-of-type:before {
  445. content:"»"; /* arrow that appears before each stat */
  446. margin-right:11px;
  447. }
  448.  
  449. /* second column styling */
  450. .left-stats td:last-of-type {
  451. color:#888;
  452. }
  453.  
  454. /*------------------LEFT MAIN IMAGE------------------*/
  455. .left-image {
  456. display:block;
  457. margin:auto;
  458. }
  459.  
  460. /*---------------BOTTOM LEFT PERCENTAGE BARS---------------*/
  461. .bot-left-bars {
  462. position:absolute;
  463. bottom:2px;
  464. width:100%;
  465. }
  466.  
  467. .one-row {margin-bottom:15px;}
  468.  
  469. /* percentage bar display icon image */
  470. .stat-icon {
  471. width:25px;
  472. cursor:crosshair;
  473. }
  474.  
  475. /* percentage bar */
  476. .stat-bar {
  477. margin-left:20px;
  478. width:calc(100% - 2px);
  479. height:5px;
  480. background:transparent; /* EMPTY color */
  481. border:1px solid #DCDBE6; /* percentage bar border */
  482. border-radius:5px;
  483. overflow:hidden;
  484. }
  485.  
  486. .stat-fill {
  487. height:inherit;
  488. background-color:#DCDBE6; /* FILL color */
  489. }
  490.  
  491. /* percentage bar display text */
  492. .percentage {
  493. margin-left:20px;
  494. min-width:5ch;
  495. font-family:pixeloperator8;
  496. text-transform:uppercase;
  497. font-size:7px;
  498. letter-spacing:0.3px;
  499. text-align:center;
  500. color:#888; /* percentage bar display text color */
  501. }
  502.  
  503. /*--------------------ABOUT : RIGHT--------------------*/
  504. #rightbread {
  505. position:relative;
  506. width:calc(50% - 24px);
  507. }
  508.  
  509. /*------------------TOP RIGHT TITLE------------------*/
  510. .right-title {margin-top:8px;}
  511.  
  512. /* first part */
  513. .right-title-a {
  514. font-family:pixeloperator8;
  515. text-transform:uppercase;
  516. font-size:8px;
  517. letter-spacing:0.5px;
  518. color:#a39fbb;
  519. }
  520.  
  521. /* second part */
  522. .right-title-b {
  523. font-family:pixeloperator8;
  524. text-transform:uppercase;
  525. font-size:8px;
  526. letter-spacing:0.5px;
  527. color:#a39fbb;
  528. }
  529.  
  530. .right-tit-div {
  531. margin:0 24px;
  532. -webkit-flex:1;
  533. -ms-flex:1;
  534. -moz-flex:1;
  535. flex:1;
  536. height:1px;
  537. background:#dcdbe6; /* title horizontal divider color */
  538. }
  539.  
  540. /*------------------INFO TABS------------------*/
  541. .right-mid {margin-top:20px;}
  542.  
  543. .image-icons {
  544. width:calc(20px + (10px * 2) + 2px);
  545. }
  546.  
  547. .image-icons a {
  548. display:inline-block;
  549. margin:5px auto;
  550. cursor:pointer;
  551. }
  552.  
  553. .image-icons img {
  554. width:20px;
  555. padding:10px;
  556. border:1px solid #f2f2f2; /* image icons border */
  557. border-radius:3px;
  558. }
  559.  
  560. /* image icons styling on-click (when selected) */
  561. .click-d {
  562. padding:11px!important;
  563. background-color:#ebeaf0!important;
  564. border:0px solid transparent!important;
  565. }
  566.  
  567. .right-info {
  568. margin-left:18px;
  569. width:100%;
  570. }
  571.  
  572. .b2, .b3, .b4 {display:none;}
  573.  
  574. /* info tabs title */
  575. .box-title {
  576. padding:5px 10px;
  577. background:#fcfcfc; /* info tab title background color */
  578. border:1px solid #f2f2f2; /* info tab title border */
  579. border-radius:3px;
  580. font-family:silkscreen;
  581. font-size:9px;
  582. color:#777; /* info tab title color */
  583. text-align:center;
  584. }
  585.  
  586. /* info tab content text */
  587. .box-content {
  588. margin-top:8px;
  589. height:138px;
  590. padding:10px;
  591. border:1px solid #f2f2f2; /* info tab text border */
  592. border-radius:3px;
  593. }
  594.  
  595. .box-content-text {
  596. height:100%;
  597. font-family:consolas-alt;
  598. font-size:10px;
  599. line-height:1.8em;
  600. color:#999; /* info tab text color */
  601. text-align:justify;
  602. overflow:auto;
  603. }
  604.  
  605. /* info tab context links styling */
  606. .box-content-text a {
  607. color:#BDB3E1;
  608. padding-bottom:1px;
  609. border-bottom:1px solid #eee;
  610. }
  611.  
  612. .box-content-text a:hover {color:#333;}
  613.  
  614. .box-content-text p:last-child {margin-bottom:0px;}
  615.  
  616. .box-content-text::-webkit-scrollbar {
  617. background-color:#fefefe; /* scrollbar background color */
  618. height:13px;
  619. width:13px;
  620. }
  621.  
  622. .box-content-text::-webkit-scrollbar-thumb {
  623. background-color:#dcdbe6; /* actual scrollbar color */
  624. border-left:10px solid #fefefe; /* scrollbar background color */
  625. border-right:2px solid #fefefe; /* scrollbar background color */
  626. }
  627.  
  628. .box-content-text::-webkit-scrollbar-track {
  629. background-color:#fefefe; /* scrollbar background color */
  630. }
  631.  
  632. /* quote / short description */
  633. .quote {
  634. position:absolute;
  635. bottom:0;
  636. width:calc(100% - 24px - 2px);
  637. border:1px solid #f2f2f2; /* quote box border */
  638. padding:10px 12px;
  639. background:#fcfcfc; /* quote box background color */
  640. border-radius:3px;
  641. font-family:consolas-alt;
  642. font-size:10px;
  643. line-height:1.8em;
  644. color:#777; /* quote text color */
  645. }
  646.  
  647. /* quote links styling */
  648. .quote a {
  649. color:#BDB3E1;
  650. padding-bottom:1px;
  651. border-bottom:1px solid #eee;
  652. }
  653.  
  654. .quote a:hover {color:#333;}
  655.  
  656. /*--------------------CUSTOM LINKS--------------------*/
  657. #customlinks {
  658. margin-top:calc(17px + 20px);
  659. width:inherit;
  660. text-align:center;
  661. }
  662.  
  663. #customlinks a {
  664. display:inline-block;
  665. margin:0 calc(3px + 6px);
  666. min-width:60px;
  667. padding:10px 12px;
  668. background:#fefefe; /* custom links background color */
  669. border:1px solid #DCDBE6; /* custom links border */
  670. box-shadow:6px 6px #EBEAF0; /* custom links box shadow */
  671. font-family:silkscreen;
  672. font-size:9px;
  673. letter-spacing:-1px;
  674. line-height:1em;
  675. color:#a39fbb; /* custom links color */
  676. }
  677.  
  678. #customlinks a:hover {
  679. background:#DCDBE6;
  680. color:#fff;
  681. }
  682.  
  683. /*--------------------MUSIC PLAYER--------------------*/
  684. .aloe {
  685. position:fixed;
  686. bottom:0;margin-bottom:20px;
  687. left:0;margin-left:20px;
  688. }
  689.  
  690. .on-cont {
  691. width:22px;
  692. height:22px;
  693. background:#fefefe; /* music button background color */
  694. border:1px solid #DCDBE6; /* music button border */
  695. box-shadow:4px 4px #EBEAF0; /* music button box shadow */
  696. cursor:pointer;
  697. }
  698.  
  699. .playy, .pausee {
  700. color:#BDB3E1; /* music button color */
  701. display:flex;
  702. align-items:center;
  703. justify-content:center;
  704. margin-top:-1px;
  705. }
  706.  
  707. .on-cont svg {
  708. display:block;
  709. width:11px;
  710. fill:currentColor;
  711. transform-origin:center;
  712. transform:scale(1.15,1);
  713. }
  714.  
  715. .playy {
  716. margin-left:1px;
  717. }
  718.  
  719. .pausee {
  720. display:none;
  721. }
  722.  
  723. .playy[style*="display: block"],
  724. .pausee[style*="display: block"]{
  725. display:flex!important;
  726. }
  727.  
  728. /* music text label */
  729. .ensou {
  730. margin-left:12px;
  731. padding:6px 8px;
  732. background:#fefefe; /* music text background color */
  733. border:1px solid #DCDBE6; /* music text border */
  734. box-shadow:4px 4px #EBEAF0; /* music text box shadow */
  735. font-family:silkscreen;
  736. font-size:9px;
  737. color:#a39fbb; /* music text color */
  738. line-height:1em;
  739. max-height:1em;
  740. }
  741.  
  742. .ensou a {
  743. color:#a39fbb;
  744. padding-bottom:1px;
  745. border-bottom:1px solid #eee;
  746. }
  747.  
  748. </style>
  749.  
  750. </head>
  751.  
  752. <body>
  753.  
  754. <div id="control-ico">
  755. <i data-feather="plus"></i>
  756. </div>
  757.  
  758. <!----TOP LEFT: HEART / HEALTH WIDGET---->
  759. <div id="health-widget">
  760. <div id="health">
  761. <div id="heart-cont">
  762. <div class="kokoro">
  763. <div class="raw">
  764. <div class="gt-fill f2" style="margin-left:2px"></div>
  765. <div class="gt-fill f2" style="margin-left:8px"></div></div>
  766. <div class="raw">
  767. <div class="gt-fill f5" style="margin-left:1px"></div>
  768. <div class="gt-fill f5" style="margin-left:4px"></div></div>
  769. <div class="raw">
  770. <div class="gt-fill f7 gtwo"></div>
  771. <div class="gt-fill f7 gtwo" style="margin-left:2px"></div></div>
  772. <div class="gt-fill f16" style="top:4px;"></div>
  773. <div class="gt-fill f12 gtwo" style="margin-left:2px"></div>
  774. <div class="gt-fill f8 gtwo" style="margin-left:4px"></div>
  775. <div class="gt-fill f4 gtwo" style="margin-left:6px"></div>
  776. </div><!--kokoro-->
  777. </div><!--heart-cont-->
  778.  
  779. <!--HEALTH PERCENTAGE BAR-->
  780. <a title="72/100"> <!--health percentage tooltip text-->
  781. <div class="health-bar">
  782. <div class="health-fill" style="width:72%"> <!--set fill width %-->
  783. </div></div></a><!--do not delete this line-->
  784. </div><!--health--><!--do not delete this line-->
  785.  
  786.  
  787. <!----TOP LEFT: LEVEL WIDGET---->
  788. <div id="secondary-stat">
  789. <img class="quoi" src="https://glen-themes.gitlab.io/abt-pages/10/imgs/S_Bow08.png"> <!--level image icon-->
  790. <div class="quoi-txt">Level 104</div> <!--level display text-->
  791. </div><!--level-->
  792. </div><!--health-widget--><!--do not delete this line-->
  793.  
  794.  
  795.  
  796.  
  797. <!----TOP RIGHT: HOME & ASK BUTTONS---->
  798. <div id="milkshake">
  799. <div id="brioche">
  800. <!--BIGGEST ICON IMAGE-->
  801. <img class="bun" src="https://glen-themes.gitlab.io/abt-pages/10/imgs/I_Feather01.png">
  802. </div></a><!--do not delete this line-->
  803.  
  804. <!--HOME BUTTON-->
  805. <a href="/"><div id="straw">
  806. <img class="berry" src="//66.media.tumblr.com/1bcb749aaba9067c9a5499a338cfcdf7/tumblr_pmzhslPXEP1qg2f5co6_r1_75sq.png"> <!--home button image-->
  807. </div></a>
  808. <div class="home-tt">home</div>
  809.  
  810. <!--ASK BUTTON-->
  811. <a href="/ask"><div id="marsh">
  812. <img class="mallow" src="//66.media.tumblr.com/3ed987a245007771944526fa837151bf/tumblr_pmzhslPXEP1qg2f5co5_r1_75sq.png"> <!--ask button image-->
  813. </div></a>
  814. <div class="ask-tt">message</div>
  815. </div><!--milkshake--><!--do not delete this line-->
  816.  
  817.  
  818.  
  819.  
  820. <!----MAIN CONTAINER---->
  821. <div id="beef">
  822. <div id="salmon">
  823.  
  824. <div id="boxie">
  825.  
  826. <!--ABOUT : LEFT-->
  827. <div id="leftbread">
  828. <div class="left-title">about the user</div> <!--top left title-->
  829.  
  830. <div class="left-mid-cont">
  831. <div class="left-mid-m">
  832. <div class="left-holder">
  833. <div class="left-stats">
  834.  
  835. <!--LEFT INFO STATS-->
  836. <!--everything between <tr> and </tr> is ONE ROW-->
  837. <table><tbody><!--table starts here-->
  838. <tr>
  839. <td>Stat 1:</td>
  840. <td>Stat 1 info</td>
  841. </tr>
  842.  
  843. <tr>
  844. <td>Stat 2:</td>
  845. <td>Stat 2 info</td>
  846. </tr>
  847.  
  848. <tr>
  849. <td>Stat 3:</td>
  850. <td>Stat 3 info</td>
  851. </tr>
  852. </tbody></table><!--table ends here-->
  853. </div><!--left-stats--><!--do not delete this line-->
  854.  
  855. <!--LEFT MAIN IMAGE-->
  856. <!--max. height: 198px-->
  857. <img class="left-image" src="//orig00.deviantart.net/21bd/f/2012/104/f/5/leo_animation_by_wavewhisper-d4w4ybv.gif">
  858.  
  859. </div><!--left-holder--->
  860. </div><!--left-mid-m-->
  861. </div><!--left-mid-cont-->
  862.  
  863.  
  864.  
  865.  
  866.  
  867. <!--BOTTOM LEFT PERCENTAGE BARS-->
  868. <div class="bot-left-bars">
  869.  
  870. <div class="one-row">
  871. <!--display icon tooltip text-->
  872. <a title="sample text">
  873.  
  874. <!--display icon image-->
  875. <img class="stat-icon" src="https://glen-themes.gitlab.io/abt-pages/10/imgs/P_White01.png"></a>
  876.  
  877. <div class="stat-bar">
  878. <div class="stat-fill" style="width:30%"> <!--set fill width %-->
  879. </div></div><!--do not delete this line-->
  880.  
  881. <!--bar display text-->
  882. <div class="percentage">30%</div>
  883. </div><!--end one-row-->
  884.  
  885.  
  886. <div class="one-row">
  887. <!--display icon tooltip text-->
  888. <a title="sample text">
  889.  
  890. <!--display icon image-->
  891. <img class="stat-icon" src="https://glen-themes.gitlab.io/abt-pages/10/imgs/I_Amethist.png"></a>
  892.  
  893. <div class="stat-bar">
  894. <div class="stat-fill" style="width:52%"> <!--set fill width %-->
  895. </div></div><!--do not delete this line-->
  896.  
  897. <!--bar display text-->
  898. <div class="percentage">52%</div>
  899. </div><!--end one-row-->
  900.  
  901.  
  902. </div><!--bot-left--bars--><!--do not delete this line-->
  903. </div><!--left-bread--><!--do not delete this line-->
  904.  
  905.  
  906.  
  907.  
  908.  
  909. <!----ABOUT : RIGHT---->
  910. <div id="verdiv"></div>
  911. <div id="rightbread">
  912. <div class="right-title">
  913. <div class="right-title-a">name 1</div> <!--top right title part 1-->
  914. <div class="right-tit-div"></div>
  915. <div class="right-title-b">name 2</div> <!--top right title part 2-->
  916. </div><!--right-title-->
  917.  
  918. <div class="right-mid">
  919. <div class="image-icons">
  920. <!--INFO TAB IMAGE ICONS-->
  921. <!--put image url between the quotation marks of src=""-->
  922. <a class="clickbox1"><img class="boximg1" src="https://glen-themes.gitlab.io/abt-pages/10/imgs/W_Gun002.png"></a>
  923.  
  924. <a class="clickbox2"><img class="boximg2" src="https://glen-themes.gitlab.io/abt-pages/10/imgs/I_Book.png"></a>
  925.  
  926. <a class="clickbox3"><img class="boximg3" src="https://glen-themes.gitlab.io/abt-pages/10/imgs/S_Holy07.png"></a>
  927.  
  928. <a class="clickbox4"><img class="boximg4" src="https://glen-themes.gitlab.io/abt-pages/10/imgs/I_Key02.png"></a>
  929. </div><!--image-icons-->
  930.  
  931.  
  932. <!----INFO TABS----> <!--maximum of 4. please do not add more-->
  933. <!--info tab 1-->
  934. <div class="right-info b1">
  935. <div class="box-title">info tab #01</div>
  936. <div class="box-content">
  937. <div class="box-content-text">info tab 1 text</div>
  938. </div><!--box-content-->
  939. </div><!--right-info-->
  940.  
  941. <!--info tab 2-->
  942. <div class="right-info b2">
  943. <div class="box-title">info tab #02</div>
  944. <div class="box-content">
  945. <div class="box-content-text">info tab 2 text</div>
  946. </div><!--box-content-->
  947. </div><!--right-info-->
  948.  
  949. <!--info tab 3-->
  950. <div class="right-info b3">
  951. <div class="box-title">info tab #03</div>
  952. <div class="box-content">
  953. <div class="box-content-text">info tab 3 text</div>
  954. </div><!--box-content-->
  955. </div><!--right-info-->
  956.  
  957. <!--info tab 4-->
  958. <div class="right-info b4">
  959. <div class="box-title">info tab #04</div>
  960. <div class="box-content">
  961. <div class="box-content-text">info tab 4 text</div>
  962. </div><!--box-content-->
  963. </div><!--right-info-->
  964.  
  965. </div><!--right-mid--><!--do not delete this line-->
  966.  
  967.  
  968.  
  969. <!----QUOTE / SHORT DESCRIPTION---->
  970. <div class="quote">Looks best<br>with<br>3 lines</div>
  971.  
  972.  
  973. </div><!--rightbread--><!--do not delete this line-->
  974. </div><!--boxie--><!--do not delete this line-->
  975.  
  976.  
  977.  
  978.  
  979.  
  980. <!----CUSTOM LINKS---->
  981. <div id="customlinks">
  982. <a href="/">a custom link</a>
  983. <a href="/">a custom link</a>
  984. <a href="/">a custom link</a>
  985. <a href="//tumblr.com/dashboard">dashboard</a>
  986. <!--PLEASE DO NOT REMOVE THE CREDIT! THANK YOU X-->
  987. <a href="//glenthemes.tumblr.com" title="page by glenthemes">credit</a>
  988. </div><!--customlinks-->
  989. </div><!--salmon-->
  990. </div><!--beef-->
  991.  
  992.  
  993.  
  994.  
  995. <!----MUSIC PLAYER---->
  996. <div class="aloe">
  997. <div class="on-cont m-o">
  998. <div class="playy">
  999. <i data-feather="play"></i>
  1000. </div>
  1001.  
  1002. <div class="pausee">
  1003. <i data-feather="pause"></i>
  1004. </div>
  1005. </div><!--on-cont-->
  1006.  
  1007. <!--music text-->
  1008. <div class="ensou">Sound of the End [<a href="//www.youtube.com/watch?v=IR9EMpitzHg" target="_blank" title="chiptune cover by emily music">+</a>]</div><!--ensou-->
  1009.  
  1010. <!-- audio file URL -->
  1011. <!-- tutorial: -->
  1012. <!-- linktr.ee/direct_file_links -->
  1013. <audio id="tune" src="https://rhizo.gitlab.io/nier/Sound_of_the_End__Chiptune_cover_.mp3" type="audio"></audio>
  1014. </div><!--aloe-->
  1015.  
  1016. <script>feather.replace()</script>
  1017. </body>
  1018.  
  1019. </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!