glenthemes

About Page [11]: Crimson Lily

Feb 19th, 2019 (edited)
3,278
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.63 KB | None | 0 0
  1. <!-----------------------------------------------------------------------
  2. About Page [11]: Crimson Lily
  3. Made by glenthemes
  4.  
  5. Initial release: 2019/02/20
  6. Last updated: 2021/10/21
  7.  
  8. TERMS OF USE:
  9. 1) Do not remove the credit.
  10. 2) Do not remove parts of the code without my permission.
  11. 3) Do not claim my codes as your own.
  12. 4) Do not use my works as base codes.
  13. 5) You may add widgets to my themes and pages.
  14.  
  15. Guide:
  16. docs.google.com/document/d/1RQwqJQBh_6OTuZifg_cGNociuyshLMm3Yny-5BoyGeo/edit?usp=sharing
  17.  
  18. --- Credits:
  19.  
  20. Layout & design insp:
  21. - Persona 5 UI, Bandori UI
  22.  
  23. Side image:
  24. - "Can I Make Tea?" card: trained ver.
  25. bandori.party/card/969/Tsugumi-Hazawa-Happy-Barista/
  26. publishers: Bushiroad, Craft Egg
  27.  
  28. Fonts:
  29. - Google Fonts
  30. - Persona 5 'p5hatty' compiled by HattyMikune & ToxicDevil93 [YouTube]
  31. www.youtube.com/watch?time_continue=5&v=6B90DMr-OBY
  32. - 'Eri ji' font
  33. www.freejapanesefont.com/eri-ji-えり字/
  34. v7.mine.nu/pysco/
  35.  
  36. Background:
  37. - 'Pinstripe' @ subtlepatterns
  38. www.toptal.com/designers/subtlepatterns/pinstripe/
  39. ------------------------------------------------------------------------>
  40.  
  41. <!DOCTYPE html lang="en">
  42.  
  43. <head>
  44.  
  45. <title>{Title}</title>
  46.  
  47. <link rel="shortcut icon" href="{Favicon}">
  48.  
  49. <!--------------------JAVASCRIPTS-------------------->
  50. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  51. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  52. <script>
  53. (function($){
  54. $(document).ready(function(){
  55. $("a[title]").style_my_tooltips({
  56. tip_follows_cursor:true,
  57. tip_delay_time:0,
  58. tip_fade_speed:100,
  59. attribute:"title"
  60. });
  61. });
  62. })(jQuery);
  63. </script>
  64.  
  65. <link href="//fonts.googleapis.com/css?family=Quicksand:500|Lato|Exo" rel="stylesheet">
  66.  
  67. <!-------------------------------------------------------------------->
  68.  
  69. <style type="text/css">
  70.  
  71. @font-face { font-family: "p5"; src: url('//glen-assets.github.io/fonts/p5hatty.ttf'); }
  72.  
  73. @font-face { font-family: "eri ji"; src: url('//glen-assets.github.io/fonts/Eri Ji.otf'); }
  74.  
  75. /*--------------------TOOLTIPS--------------------*/
  76. #s-m-t-tooltip {
  77. padding:4px 9px;
  78. margin:20px;
  79. box-shadow:4px 4px var(--Tooltip-Shadow);
  80. border:1px solid var(--Tooltip-Border);
  81. background:var(--Tooltip-Background);
  82. max-width:40vw;
  83. font-family:lato;
  84. font-size:13px;
  85. color:var(--Tooltip-Text);
  86. }
  87.  
  88. /*--------------------TUMBLR CONTROLS--------------------*/
  89. iframe#tumblr_controls, .iframe-controls--desktop {
  90. top:5px!important;
  91. right:5px!important;
  92. position:fixed!important;
  93.  
  94. transform:scale(0.8,0.8);
  95. -webkit-transform:scale(0.8,0.8);
  96. -moz-transform:scale(0.8,0.8);
  97. -ms-transform:scale(0.8,0.8);
  98.  
  99. /* delete the next 4 lines if you want white tumblr controls */
  100. filter:invert(100%) hue-rotate(180deg);
  101. -webkit-filter:invert(100%) hue-rotate(180deg);
  102. -moz-filter:invert(100%) hue-rotate(180deg);
  103. -ms-filter:invert(100%) hue-rotate(180deg);
  104.  
  105. transform-origin:100% 0;
  106. z-index:999999!important;
  107. }
  108.  
  109. /*--------------------TEXT HIGHLIGHT--------------------*/
  110. ::selection {
  111. background:var(--Highlighted-Background);
  112. color:var(--Highlighted-Text);
  113. }
  114.  
  115. ::-moz-selection {
  116. background:var(--Highlighted-Background);
  117. color:var(--Highlighted-Text);
  118. }
  119.  
  120. /*--------------------BASICS--------------------*/
  121. /* general styling */
  122. body {
  123. background:var(--Background);
  124. background-image:url('//66.media.tumblr.com/1363b3c61583a1f7b7cd901f7ab7ee13/tumblr_pn6oktMhE31qg2f5co1_400.png');
  125. background-attachment:fixed;
  126. background-repeat:repeat;
  127. font-family:lato;
  128. line-height:1.6em;
  129. font-size:12px;
  130. text-align:left;
  131. }
  132.  
  133. a, .ccc-ii, .ccc-iii {
  134. color:var(--Link);
  135. text-decoration:none;
  136. -webkit-transition: all 0.1s ease-in-out;
  137. -moz-transition: all 0.1s ease-in-out;
  138. -o-transition: all 0.1s ease-in-out;
  139. }
  140.  
  141. b, strong {font-weight:bold;color:var(--Bold);}
  142.  
  143. i, em {font-style:italic;color:var(--Italic);}
  144.  
  145. pre, code {
  146. white-space:pre-wrap;
  147. display:block;
  148. }
  149.  
  150. /*--------------------COLORS--------------------*/
  151. :root {
  152. /* background */
  153. --Background:#fefefe;
  154.  
  155. /* basics */
  156. --Bold: ;
  157. --Italic: ;
  158.  
  159. /* speech box */
  160. --Speech-Label-Shadow:#222;
  161. --Speech-Label-Border:#222;
  162. --Speech-Label-Background:#fcfcfc;
  163. --Speech-Label-Text:#222;
  164. --Main-Speech-Box-Shadow:#222;
  165. --Main-Speech-Box-Outer-Border:#222;
  166. --Main-Speech-Box-Inner-Border:#fcfcfc;
  167. --Main-Speech-Box-Background:#222;
  168. --Main-Speech-Box-Text:#fcfcfc;
  169.  
  170. /* label 1 */
  171. --Label-1-Arrow:#222;
  172. --Label-1-Arrow-Shadow:#222;
  173. --Label-1-Shadow:#222;
  174. --Label-1-Outer-Border:#222;
  175. --Label-1-Inner-Border:#fcfcfc;
  176. --Label-1-Background:#222;
  177. --Label-1-Text:#eee;
  178.  
  179. /* label 2 */
  180. --Label-2-Arrow:#222;
  181. --Label-2-Arrow-Shadow:#222;
  182. --Label-2-Shadow:#222;
  183. --Label-2-Outer-Border:#222;
  184. --Label-2-Inner-Border:#fcfcfc;
  185. --Label-2-Background:#222;
  186. --Label-2-Text:#eee;
  187.  
  188. /* name header */
  189. --Name-Header-Shadow:#222;
  190. --Name-Header-Border:#222;
  191. --Name-Header-Label-Background:#222;
  192. --Name-Header-Label-Text:#eee;
  193. --Name-Header-Background:#fcfcfc;
  194. --Name-Header-Text:#222;
  195.  
  196. /* main boxes */
  197. --About-Box-Label-Shadow:#222;
  198. --About-Box-Label-Outer-Border:#222;
  199. --About-Box-Label-Inner-Border:#fcfcfc;
  200. --About-Box-Label-Background:#222;
  201. --About-Box-Label-Text:#eee;
  202. --About-Box-Shadow:#222;
  203. --About-Box-Border:#222;
  204. --About-Box-Background:#fcfcfc;
  205. --About-Box-Text:#222;
  206.  
  207. /* links */
  208. --Link:#222;
  209. --Link-Bottom-Border:#eee;
  210.  
  211. /* meter bars */
  212. --Meter-Bar-Border:#222;
  213. --Meter-Bar-Fill:#222;
  214.  
  215. /* custom links */
  216. --Custom-Links-Shadow:#222;
  217. --Custom-Links-Outer-Border:#222;
  218. --Custom-Links-Inner-Border:#fcfcfc;
  219. --Custom-Links-Background:#222;
  220. --Custom-Links:#eee;
  221. --Custom-Links-Background-On-Hover:#fcfcfc;
  222. --Custom-Links-On-Hover:#222;
  223.  
  224. /* tooltips */
  225. --Tooltip-Shadow:#222;
  226. --Tooltip-Border:#222;
  227. --Tooltip-Background:#fcfcfc;
  228. --Tooltip-Text:#222;
  229.  
  230. /* other */
  231. --Credit-Text:#222; /* pls don't be an asshole! */
  232. --Highlighted-Text:#fff;
  233. --Highlighted-Background:#f3726f;
  234. }
  235.  
  236. /*--------------------CONTAINER--------------------*/
  237. #sesame {
  238. position:fixed;
  239. margin:0 auto;
  240. top:0;left:0;right:0;
  241. width:1000px; /* width of everything */
  242. height:100vh;
  243. display:table;
  244. }
  245.  
  246. #bun {
  247. display:table-cell;
  248. vertical-align:middle;
  249. }
  250.  
  251. #flexwrap {display:flex;}
  252.  
  253. /*-----------------CHARACTER LEFT-----------------*/
  254. #chara-cont {
  255. width:430px; /* left sidebar width */
  256. }
  257.  
  258. .chara {
  259. /* position from the bottom */
  260. /* as this is designed for the speech box to overlap the image, */
  261. /* a negative value is recommended */
  262. margin-bottom:-105px;
  263. width:inherit;
  264. }
  265.  
  266. /*--------------------SPEECH BOX--------------------*/
  267. .speech-a {
  268. margin-left:-35px;
  269. width:inherit;
  270. z-index:2;
  271. }
  272.  
  273. /* speech (top left) label */
  274. .speech-name-1 {
  275. position:relative;
  276. margin-bottom:-16px;
  277. margin-left:32px;
  278. display:inline-block;
  279. border:4px solid var(--Speech-Label-Border);
  280. padding:8px 12px;
  281. background:var(--Speech-Label-Background);
  282. transform:skew(-10deg);
  283. -webkit-transform:skew(-10deg);
  284. -moz-transform:skew(-10deg);
  285. -ms-transform:skew(-10deg);
  286. -o-transform:skew(-10deg);
  287. z-index:3;
  288. }
  289.  
  290. /* speech label shadow */
  291. .speech-name-1:after {
  292. content:"";
  293. position:absolute;
  294. top:4px;
  295. left:calc(100% + 4px);
  296. width:4px;
  297. height:18px;
  298. background:var(--Speech-Label-Shadow);
  299. }
  300.  
  301. /* speech label text */
  302. .speech-name-2 {
  303. font-family:p5;
  304. font-size:18px;
  305. line-height:1em;
  306. color:var(--Speech-Label-Text);
  307. letter-spacing:0.5px;
  308. }
  309.  
  310. /* main speech box */
  311. .speech-b {
  312. display:block;
  313. margin:auto;
  314. width:320px; /* width of speech box */
  315. }
  316.  
  317. .speech-c {
  318. box-shadow:8px 8px var(--Main-Speech-Box-Shadow);
  319. border:4px solid var(--Main-Speech-Box-Outer-Border);
  320. transform:skew(-10deg);
  321. -webkit-transform:skew(-10deg);
  322. -moz-transform:skew(-10deg);
  323. -ms-transform:skew(-10deg);
  324. -o-transform:skew(-10deg);
  325. }
  326.  
  327. .speech-d {
  328. border:8px solid var(--Main-Speech-Box-Inner-Border);
  329. padding:12px 20px;
  330. background:var(--Main-Speech-Box-Background);
  331. }
  332.  
  333. /* main speech box text */
  334. .speech-e {
  335. font-family:p5;
  336. font-size:17px;
  337. letter-spacing:0.3px;
  338. color:var(--Main-Speech-Box-Text);
  339. line-height:1.6em;
  340. }
  341.  
  342. /*--------------------LABELS--------------------*/
  343. #labelwrap {
  344. margin-left:-80px;
  345. }
  346.  
  347. /*-------------------LABEL 1-------------------*/
  348. .label-1 {
  349. margin-top:50px;
  350. margin-left:-30px;
  351. }
  352.  
  353. .label-1-arrow, .label-1-arrow-shadow, .label-1-a {
  354. transform:skew(-8deg) rotate(-18deg);
  355. -webkit-transform:skew(-8deg) rotate(-18deg);
  356. -moz-transform:skew(-8deg) rotate(-18deg);
  357. -ms-transform:skew(-8deg) rotate(-18deg);
  358. -o-transform:skew(-8deg) rotate(-18deg);
  359. }
  360.  
  361. .label-1-arrow {
  362. position:absolute;
  363. margin-top:28px;
  364. width:0;height:0;
  365. border-bottom:20px solid var(--Label-1-Arrow);
  366. border-left:50px solid transparent;
  367. }
  368.  
  369. .label-1-arrow-shadow {
  370. position:absolute;
  371. margin-top:calc(28px + 3px);
  372. margin-left:9px;
  373. width:0;height:0;
  374. border-bottom:20px solid var(--Label-1-Arrow-Shadow);
  375. border-left:calc(50px - 8px) solid transparent;
  376. z-index:-1;
  377. }
  378.  
  379. /* label 1 box */
  380. .label-1-a {
  381. margin-left:49px;
  382. display:inline-block;
  383. box-shadow:6px 6px var(--Label-1-Shadow);
  384. border:3px solid var(--Label-1-Outer-Border);
  385. transform-origin:left;
  386. -webkit-transform-origin:left;
  387. -moz-transform-origin:left;
  388. -ms-transform-origin:left;
  389. }
  390.  
  391. .label-1-b {
  392. border:6px solid var(--Label-1-Inner-Border);
  393. padding:12px 16px;
  394. background:var(--Label-1-Background);
  395. }
  396.  
  397. /* label 1 text */
  398. .label-1-c {
  399. font-family:eri ji;
  400. font-size:20px;
  401. color:var(--Label-1-Text);
  402. font-weight:bold;
  403. line-height:1em;
  404. }
  405.  
  406. /* Japanese character styling */
  407. jp {
  408. letter-spacing:-3px;
  409. }
  410.  
  411. /*-------------------LABEL 2-------------------*/
  412. .label-2 {
  413. margin-top:35px;
  414. }
  415.  
  416. .label-2-arrow, .label-2-arrow-shadow, .label-2-a {
  417. transform:skew(4deg) rotate(20deg);
  418. -webkit-transform:skew(4deg) rotate(20deg);
  419. -moz-transform:skew(4deg) rotate(20deg);
  420. -ms-transform:skew(4deg) rotate(20deg);
  421. -o-transform:skew(4deg) rotate(20deg);
  422. }
  423.  
  424. .label-2-arrow {
  425. position:absolute;
  426. margin-top:10px;
  427. width:0;height:0;
  428. border-bottom:20px solid var(--Label-2-Arrow);
  429. border-left:50px solid transparent;
  430. }
  431.  
  432. .label-2-arrow-shadow {
  433. position:absolute;
  434. margin-top:calc(10px + 6px);
  435. margin-left:10px;
  436. width:0;height:0;
  437. border-bottom:20px solid var(--Label-2-Arrow-Shadow);
  438. border-left:calc(50px - 12px) solid transparent;
  439. z-index:-1;
  440. }
  441.  
  442. /* label 2 box */
  443. .label-2-a {
  444. margin-left:48px;
  445. display:inline-block;
  446. box-shadow:6px 6px var(--Label-2-Shadow);
  447. border:3px solid var(--Label-2-Outer-Border);
  448. transform-origin:left;
  449. -webkit-transform-origin:left;
  450. -moz-transform-origin:left;
  451. -ms-transform-origin:left;
  452. }
  453.  
  454. .label-2-b {
  455. border:6px solid var(--Label-2-Inner-Border);
  456. padding:12px 16px;
  457. background:var(--Label-2-Background);
  458. }
  459.  
  460. /* label 2 text */
  461. .label-2-c {
  462. font-family:p5;
  463. font-size:18px;
  464. letter-spacing:0.5px;
  465. color:var(--Label-2-Text);
  466. line-height:1em;
  467. }
  468.  
  469. /*------------------MAIN (RIGHT) ABOUT------------------*/
  470. #mainbox-a {
  471. margin-left:calc(12px + 40px);
  472. margin-right:20px;
  473. -webkit-flex:1;
  474. -ms-flex:1;
  475. -moz-flex:1;
  476. flex:1;
  477. align-self:center;
  478. -webkit-align-self:center;
  479. transform:skew(-10deg);
  480. -webkit-transform:skew(-10deg);
  481. -moz-transform:skew(-10deg);
  482. -ms-transform:skew(-10deg);
  483. -o-transform:skew(-10deg);
  484. }
  485.  
  486. .unskew {
  487. transform:skew(10deg);
  488. -webkit-transform:skew(10deg);
  489. -moz-transform:skew(10deg);
  490. -ms-transform:skew(10deg);
  491. -o-transform:skew(10deg);
  492. }
  493.  
  494. /* first row - name label */
  495. .mainbox-header {
  496. margin-bottom:calc(8px + 20px);
  497. box-shadow:8px 8px var(--Name-Header-Shadow);
  498. border:4px solid var(--Name-Header-Border);
  499. background:var(--Name-Header-Background);
  500. display:flex;
  501. }
  502.  
  503. .about-name-label {
  504. padding:9px 12px;
  505. background:var(--Name-Header-Label-Background);
  506. font-family:p5;
  507. font-size:17px;
  508. text-transform:uppercase;
  509. letter-spacing:1px;
  510. color:var(--Name-Header-Label-Text);
  511. }
  512.  
  513. .about-name-text {
  514. align-self:center;
  515. -webkit-align-self:center;
  516. margin-left:14px;
  517. font-family:p5;
  518. font-size:18px;
  519. letter-spacing:0.5px;
  520. color:var(--Name-Header-Text);
  521. }
  522.  
  523. /* about boxes */
  524. .mainbox-item {
  525. margin-bottom:calc(8px + 20px);
  526. box-shadow:8px 8px var(--About-Box-Shadow);
  527. border:4px solid var(--About-Box-Border);
  528. background:var(--About-Box-Background);
  529. padding:30px 30px 18px 30px;
  530. font-family:lato;
  531. font-size:13px;
  532. color:var(--About-Box-Text);
  533. }
  534.  
  535. /* about boxes - title labels */
  536. .box-label-a {
  537. position:relative;
  538. margin-bottom:-24px;
  539. margin-left:32px;
  540. display:inline-block;
  541. border:4px solid var(--About-Box-Label-Outer-Border);
  542. padding:4px;
  543. background:var(--About-Box-Label-Inner-Border);
  544. z-index:3;
  545. }
  546.  
  547. .box-label-b {
  548. padding:8px 12px;
  549. background:var(--About-Box-Label-Background);
  550. }
  551.  
  552. /* about boxes - title labels: shadow */
  553. .box-label-a:after {
  554. content:"";
  555. position:absolute;
  556. top:4px;
  557. left:calc(100% + 4px);
  558. width:4px;
  559. height:18px;
  560. background:var(--About-Box-Label-Shadow);
  561. }
  562.  
  563. /* about boxes - title labels: text */
  564. .box-label-c {
  565. font-family:p5;
  566. font-size:18px;
  567. line-height:1em;
  568. color:var(--About-Box-Label-Text);
  569. letter-spacing:0.5px;
  570. }
  571.  
  572. .bio {
  573. line-height:1.7em;
  574. }
  575.  
  576. /* general links */
  577. #mainbox-a a {
  578. color:var(--Link);
  579. padding-bottom:1px;
  580. border-bottom:1px solid var(--Link-Bottom-Border);
  581. }
  582.  
  583. /*------------------STATISTICS BOX------------------*/
  584. .stat-row {
  585. display:flex;
  586. margin-bottom:10px;
  587. }
  588.  
  589. .stat-row:last-child {margin-bottom:0px;}
  590.  
  591. .stat-row > * {
  592. align-self:center;
  593. -webkit-align-self:center;
  594. }
  595.  
  596. /* 1st stat column */
  597. .stat-a {
  598. margin-right:20px;
  599. width:80px;
  600. }
  601.  
  602. /* 2nd stat column */
  603. .stat-b {
  604. margin-right:20px;
  605. width:40px;
  606. font-family:exo;
  607. font-size:12px;
  608. letter-spacing:0.5px;
  609. text-align:center;
  610. }
  611.  
  612. /* percentage bar */
  613. .statbar {
  614. -webkit-flex:1;
  615. -ms-flex:1;
  616. -moz-flex:1;
  617. flex:1;
  618. height:5px;
  619. border:1px solid var(--Meter-Bar-Border);
  620. }
  621.  
  622. .statfill {
  623. height:inherit;
  624. background:var(--Meter-Bar-Fill);
  625. }
  626.  
  627. /*--------------------CUSTOM LINKS--------------------*/
  628. #customlinks {
  629. margin:calc((6px + 3px) * -1);
  630. }
  631.  
  632. #customlinks a {
  633. display:inline-block;
  634. margin:calc(6px + 3px);
  635. }
  636.  
  637. .ccc-i {
  638. box-shadow:6px 6px var(--Custom-Links-Shadow);
  639. border:4px solid var(--Custom-Links-Outer-Border);
  640. padding:4px;
  641. background:var(--Custom-Links-Inner-Border);
  642. }
  643.  
  644. .ccc-ii {
  645. padding:8px 12px;
  646. background:var(--Custom-Links-Background);
  647. }
  648.  
  649. /* custom links - text */
  650. .ccc-iii {
  651. font-family:p5;
  652. font-size:14px;
  653. text-transform:uppercase;
  654. letter-spacing:1px;
  655. color:var(--Custom-Links);
  656. }
  657.  
  658. #customlinks a:hover .ccc-ii {
  659. background:var(--Custom-Links-Background-On-Hover);
  660. }
  661.  
  662. #customlinks a:hover .ccc-iii {
  663. color:var(--Custom-Links-On-Hover);
  664. }
  665.  
  666. /*---------------CREDIT---------------*/
  667. /* pls do not cover or remove! thank you! */
  668. #please-respect-theme-makers {
  669. position:fixed;
  670. bottom:0;margin-bottom:22px;
  671. right:0;margin-right:22px;
  672. font-family:Quicksand;font-weight:500;
  673. font-size:9px;
  674. letter-spacing:1.7px;
  675. text-transform:uppercase;
  676. color:var(--Credit-Text);
  677. line-height:1em;
  678. z-index:99;
  679. }
  680.  
  681.  
  682. </style>
  683.  
  684. </head>
  685.  
  686. <body>
  687.  
  688. <!----PAGE CREDIT---->
  689. <!--pls do not remove! tysm!-->
  690. <a id="please-respect-theme-makers" href="//glenthemes.tumblr.com" title="Page by glenthemes">credit</a>
  691.  
  692. <div id="sesame">
  693. <div id="bun">
  694.  
  695. <div id="flexwrap">
  696. <div id="chara-cont">
  697.  
  698. <!----LEFT IMAGE---->
  699. <img class="chara" src="//66.media.tumblr.com/b171970c43c301a54c93ca6df837d8a5/tumblr_pn6p30Ze8l1qg2f5co3_r1_1280.png">
  700.  
  701.  
  702. <div class="speech-a">
  703. <div class="speech-b">
  704.  
  705. <div class="speech-name-1">
  706. <div class="speech-name-2 unskew">Tsugumi</div> <!--SPEECH BOX LABEL-->
  707. </div><!--speech-name end-->
  708.  
  709.  
  710. <div class="speech-c">
  711. <div class="speech-d">
  712. <div class="speech-e unskew">I don't seem to be getting any better at playing keyboard, but I'll keep trying!</div> <!--SPEECH BOX TEXT-->
  713.  
  714. </div><!--speech-d-->
  715. </div><!--speech-c-->
  716. </div><!--speech-b-->
  717. </div><!--speech-a-->
  718. </div><!--chara-cont-->
  719.  
  720.  
  721.  
  722. <div id="labelwrap">
  723.  
  724. <div class="label-1">
  725. <div class="label-1-arrow"></div>
  726. <div class="label-1-arrow-shadow"></div>
  727. <div class="label-1-a">
  728. <div class="label-1-b">
  729.  
  730. <!--LABEL 1 TEXT-->
  731. <!--use <jp>...</jp> for Japanese characters-->
  732. <div class="label-1-c">羽沢 <jp>つぐみ</jp></div>
  733.  
  734. </div></div><!--end label 1 a/b-->
  735. </div><!--end label-1-->
  736.  
  737.  
  738.  
  739. <div class="label-2">
  740. <div class="label-2-arrow"></div>
  741. <div class="label-2-arrow-shadow"></div>
  742. <div class="label-2-a">
  743. <div class="label-2-b">
  744.  
  745. <!--LABEL 2 TEXT-->
  746. <div class="label-2-c">Pianist</div>
  747.  
  748. </div></div><!--end label 2 a/b-->
  749. </div><!--end label-2-->
  750. </div><!--labelwrap-->
  751.  
  752.  
  753.  
  754.  
  755. <!----MAIN ABOUT---->
  756. <!----FIRST ROW---->
  757. <div id="mainbox-a">
  758. <div class="mainbox-header">
  759. <div class="about-name-label">
  760. <div class="unskew">Name:</div> <!--FIRST ROW: NAME LABEL-->
  761. </div>
  762.  
  763. <div class="about-name-text">
  764. <div class="unskew">Hazawa Tsugumi</div> <!--FIRST ROW: NAME TEXT-->
  765. </div>
  766. </div><!--mainbox-header-->
  767.  
  768.  
  769. <!-----FIRST ABOUT BOX----->
  770. <div class="box-label-a">
  771. <div class="box-label-b">
  772. <div class="box-label-c unskew">Information</div> <!--1ST ABOUT BOX TITLE-->
  773. </div><!--box-label-b-->
  774. </div><!--box-label-a-->
  775.  
  776. <div class="mainbox-item">
  777. <!--1ST ABOUT BOX CONTENT-->
  778. <div class="bio unskew">
  779. Your about text here :)
  780. </div><!--end bio-->
  781. </div><!--end one box-->
  782.  
  783.  
  784. <!-----STATS (2ND) BOX----->
  785. <div class="box-label-a">
  786. <div class="box-label-b">
  787. <div class="box-label-c unskew">Card Stats</div> <!--STATS BOX TITLE-->
  788. </div><!--box-label-b-->
  789. </div><!--box-label-a-->
  790.  
  791. <div class="mainbox-item">
  792. <div class="stats unskew">
  793.  
  794.  
  795. <!--START ONE ROW-->
  796. <div class="stat-row">
  797. <div class="stat-a">Performance:</div> <!--STAT ROW COLUMN 1 TEXT-->
  798. <div class="stat-b">8748</div> <!--STAT ROW COLUMN 2 TEXT-->
  799.  
  800. <!--PERCENTAGE BAR WIDTH %-->
  801. <div class="statbar"><div class="statfill" style="width:61%">
  802. </div></div>
  803. </div><!--stat-row-->
  804. <!--END ONE ROW-->
  805.  
  806.  
  807.  
  808. <!--START ONE ROW-->
  809. <div class="stat-row">
  810. <div class="stat-a">Technique:</div> <!--STAT ROW COLUMN 1 TEXT-->
  811. <div class="stat-b">8990</div> <!--STAT ROW COLUMN 2 TEXT-->
  812.  
  813. <!--PERCENTAGE BAR WIDTH %-->
  814. <div class="statbar"><div class="statfill" style="width:63%">
  815. </div></div>
  816. </div><!--stat-row-->
  817. <!--END ONE ROW-->
  818.  
  819.  
  820.  
  821. <!--START ONE ROW-->
  822. <div class="stat-row">
  823. <div class="stat-a">Visual:</div> <!--STAT ROW COLUMN 1 TEXT-->
  824. <div class="stat-b">10250</div> <!--STAT ROW COLUMN 2 TEXT-->
  825.  
  826. <!--PERCENTAGE BAR WIDTH %-->
  827. <div class="statbar"><div class="statfill" style="width:71%">
  828. </div></div>
  829. </div><!--stat-row-->
  830. <!--END ONE ROW-->
  831.  
  832.  
  833.  
  834. <!--START ONE ROW-->
  835. <div class="stat-row">
  836. <div class="stat-a">Overall:</div> <!--STAT ROW COLUMN 1 TEXT-->
  837. <div class="stat-b">27988</div> <!--STAT ROW COLUMN 2 TEXT-->
  838.  
  839. <!--PERCENTAGE BAR WIDTH %-->
  840. <div class="statbar"><div class="statfill" style="width:88%">
  841. </div></div>
  842. </div><!--stat-row-->
  843. <!--END ONE ROW-->
  844.  
  845. </div><!--end stats-->
  846. </div><!--end one box-->
  847.  
  848.  
  849.  
  850.  
  851.  
  852. <!-----CUSTOM LINKS----->
  853. <div id="customlinks">
  854. <!--START ONE LINK-->
  855. <a href="/"> <!--LINK URL-->
  856. <div class="ccc-i">
  857. <div class="ccc-ii">
  858. <div class="ccc-iii unskew">home</div> <!--LINK TEXT-->
  859. </div></div></a>
  860. <!--END ONE LINK-->
  861.  
  862. <!--START ONE LINK-->
  863. <a href="/ask"> <!--LINK URL-->
  864. <div class="ccc-i">
  865. <div class="ccc-ii">
  866. <div class="ccc-iii unskew">mail</div> <!--LINK TEXT-->
  867. </div></div></a>
  868. <!--END ONE LINK-->
  869.  
  870. <!--START ONE LINK-->
  871. <a href="/archive"> <!--LINK URL-->
  872. <div class="ccc-i">
  873. <div class="ccc-ii">
  874. <div class="ccc-iii unskew">archive</div> <!--LINK TEXT-->
  875. </div></div></a>
  876. <!--END ONE LINK-->
  877.  
  878. <!--START ONE LINK-->
  879. <a href="/"> <!--LINK URL-->
  880. <div class="ccc-i">
  881. <div class="ccc-ii">
  882. <div class="ccc-iii unskew">navigate</div> <!--LINK TEXT-->
  883. </div></div></a>
  884. <!--END ONE LINK-->
  885.  
  886. </div><!--end customlinks-->
  887. </div><!--mainbox-a-->
  888. </div><!--flexwrap-->
  889. </div><!--bun-->
  890. </div><!--sesame-->
  891.  
  892.  
  893. </body>
  894.  
  895. </html>
Advertisement
Add Comment
Please, Sign In to add comment