API tools faq
paste
glenthemes

About Page [13]: Breeze

glenthemes
Apr 13th, 2019 (edited)
9,456
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.39 KB | None | 1 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. About Page [13]: Breeze
  3. Made by glenthemes
  4.  
  5. Initial release: 2019/04/13
  6. Last updated: 2022/09/14
  7.  
  8. TERMS OF USE:
  9. 1) Do not remove the page 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. Please read the guide!
  16. ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
  17. docs.google.com/document/d/12xWee3PwkoHk3z2n3Zf7VHCtFlagLjV90jInsyZIRWY/edit?usp=sharing
  18.  
  19. Credits:
  20. - Intro block feather header gif by @servphim
  21. servphim.tumblr.com/post/160491275855
  22. - Icon images by @emilylkinney
  23. emilylkinney.tumblr.com/icons
  24. - Percentage graphs by @suiomi
  25. suiomi.com/post/181320974554
  26. - Feather icon font by colebemis @ twitter
  27. feathericons.com
  28. - 'FontAwesome' icon font
  29. fontawesome.com/
  30. icon list: fontawesome.com/icons
  31. ------------------------------------------------------------------------>
  32.  
  33. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  34. <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  35.  
  36. <head>
  37.  
  38. <title>{Title}</title>
  39.  
  40. <link rel="shortcut icon" href="{Favicon}">
  41.  
  42. <!--------------------JAVASCRIPTS-------------------->
  43. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  44. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  45. <script>
  46. (function($){
  47. $(document).ready(function(){
  48. $("a[title]").style_my_tooltips({
  49. tip_follows_cursor:true,
  50. tip_delay_time:0,
  51. tip_fade_speed:250,
  52. attribute:"title"
  53. });
  54. });
  55. })(jQuery);
  56. </script>
  57.  
  58. <link href="//fonts.googleapis.com/css?family=Quicksand:500|Karla" rel="stylesheet">
  59.  
  60. <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  61.  
  62. <script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
  63.  
  64. <script src="//static.tumblr.com/2pnwama/csBppxn8i/breeze.js"></script>
  65.  
  66. <!-------------------------------------------------------------------->
  67.  
  68. <style type="text/css">
  69.  
  70. /*--------------------TOOLTIPS--------------------*/
  71. #s-m-t-tooltip {
  72. padding:5px 10px;
  73. margin:20px;
  74. background-color:var(--Tooltip-Background);
  75. border-radius:3px;
  76. font-family:karla;
  77. font-size:9px;
  78. letter-spacing:1px;
  79. text-transform:uppercase;
  80. color:var(--Tooltip-Text);
  81. z-index:99;
  82. max-width:40vw;
  83. }
  84.  
  85. /*--------------------TUMBLR CONTROLS--------------------*/
  86. #plus-s {
  87. position:fixed;
  88. top:0;margin-top:17px;
  89. right:0;margin-right:15px;
  90. z-index:10;
  91. }
  92.  
  93. #plus-s svg {
  94. width:15px;height:15px;
  95. color:var(--Top-Right-Plus-Icon);
  96. }
  97.  
  98. iframe#tumblr_controls, .iframe-controls--desktop {
  99. top:calc(1px + 5px)!important;
  100. right:calc(5px)!important;
  101. padding-right:40px;
  102. position:fixed!important;
  103.  
  104. /* delete these 2 lines if you want white tumblr controls */
  105. filter:invert(100%) hue-rotate(180deg);
  106. -webkit-filter:invert(100%) hue-rotate(180deg);
  107.  
  108. transform:scale(0.7,0.7);
  109. -webkit-transform:scale(0.7,0.7);
  110. -moz-transform:scale(0.7,0.7);
  111. -ms-transform:scale(0.7,0.7);
  112. -o-transform:scale(0.7,0.7);
  113.  
  114. transform-origin:100% 0;
  115. -webkit-transform-origin:100% 0;
  116. -moz-transform-origin:100% 0;
  117. -ms-transform-origin:100% 0;
  118. -o-transform-origin:100% 0;
  119. z-index:999999!important;
  120.  
  121. opacity:0; /* delete this line if you want visible tumblr controls */
  122.  
  123. -webkit-transition: all 0.4s ease-in-out;
  124. -moz-transition: all 0.4s ease-in-out;
  125. -o-transition: all 0.4s ease-in-out;
  126. }
  127.  
  128. iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
  129. opacity:1;
  130. }
  131.  
  132. /*--------------------SCROLLBAR--------------------*/
  133. ::-webkit-scrollbar {
  134. background-color:var(--Scrollbar-BG);
  135. height:13px;
  136. width:13px;
  137. }
  138.  
  139. ::-webkit-scrollbar-thumb {
  140. background-color:var(--Scrollbar);
  141. border:6px solid var(--Scrollbar-BG);
  142. }
  143.  
  144. ::-webkit-scrollbar-track {
  145. background-color:var(--Scrollbar-BG);
  146. }
  147.  
  148. /*-----------------COLORS & VALUES-----------------*/
  149. :root {
  150. /* column styling */
  151. --Column-1-Width:250px;
  152. --Column-2-Width:260px;
  153. --Column-3-Width:250px;
  154. --Column-Gap:25px;
  155. --Items-Background-Color:#fff;
  156. --Box-Shadow:#f7f7f7;
  157.  
  158. /* 1st column */
  159. --Intro-Box-Title:#333;
  160. --Intro-Box-Text:#888;
  161. --Intro-Nav-Links-Icon:#333;
  162. --Social-Media-Icons:#333;
  163. --Social-Media-Links:#333;
  164.  
  165. /* 2nd column */
  166. --Tags-Border:#eee;
  167. --Tags:#999;
  168. --Tags-Background-On-Hover:#37353A;
  169. --Tags-Border-On-Hover:#37353A;
  170. --Tags-On-Hover:#eee;
  171.  
  172. --graphsize:73px; /* Graph size. Do not go below 60px */
  173. --emptyprogress: #fafafa; /* Empty progress bar colour */
  174. --progress: #333; /* Progress bar colour */
  175. --fullprogress: #333; /* Progress bar colour when it's 100% */
  176. --Percentage-Graph-Label:#777;
  177.  
  178. --Color-Hex-Text:#333;
  179. --Color-RGB-Text:#999;
  180.  
  181. --Music-Controls:#222;
  182. --Music-Note:#222;
  183. --Song-Title:#222;
  184. --Song-Artist:#999;
  185.  
  186. /* 3rd column */
  187. --Info-Icons:#eee;
  188. --Info-Icons-BG:#333;
  189. --Info-Text:#888;
  190. --Info-Bold:#222;
  191.  
  192. --Video-Top-Text-1:#222;
  193. --Video-Top-Text-2:#999;
  194. --Video-Link-Right-Chevron:#999;
  195. --Video-Controls:#fff;
  196. --Video-Controls-Shadows:#333;
  197.  
  198. --Text-Box-Text:#888;
  199.  
  200. /* extras, misc */
  201. --Top-Right-Plus-Icon:#333;
  202. --Tooltip-Background:#222;
  203. --Tooltip-Text:#eee;
  204. --Highlighted-Text-BG:#fafafa;
  205. --Highlighted-Text:#222;
  206. --Scrollbar-BG:#fafafa;
  207. --Scrollbar:#666;
  208. --Links:#000;
  209. }
  210.  
  211. /*--------------------BASICS--------------------*/
  212. body {
  213. background:#fbfbfb url('');
  214. background-attachment:fixed;
  215. background-repeat:repeat;
  216. color:#888;
  217. cursor:normal;
  218. font-family:karla;
  219. line-height:1.6em;
  220. font-size:12px;
  221. text-align:left;
  222. }
  223.  
  224. a {
  225. color:var(--Links);
  226. text-decoration:none;
  227. }
  228.  
  229. a, svg {
  230. -webkit-transition: all 0.4s ease-in-out;
  231. -moz-transition: all 0.4s ease-in-out;
  232. -o-transition: all 0.4s ease-in-out;
  233. }
  234.  
  235. b, strong {font-weight:bold;}
  236.  
  237. pre, code {
  238. white-space:pre-wrap;
  239. display:block;
  240. }
  241.  
  242. ::selection {
  243. background:var(--Highlighted-Text-BG);
  244. color:var(--Highlighted-Text);
  245. }
  246.  
  247. ::-moz-selection {
  248. background:var(--Highlighted-Text-BG);
  249. color:var(--Highlighted-Text);
  250. }
  251.  
  252. /*------------CONTAINER------------*/
  253. #cont-h-1 {
  254. position:fixed;
  255. top:0;left:0;right:0;
  256. margin:0 auto;
  257. height:100vh;
  258. text-align:center;
  259. }
  260.  
  261. #cont-h-2 {display:inline-block;}
  262. #cont-v-1 {height:100vh;display:table;}
  263. #cont-v-2 {display:table-cell;vertical-align:middle;}
  264.  
  265. #columnwrap {
  266. display:flex;
  267. margin:calc(var(--Column-Gap) * -1) auto;
  268. white-space:nowrap;
  269. }
  270.  
  271. #columnwrap > * {white-space:normal;}
  272.  
  273. .column {
  274. margin:calc(var(--Column-Gap) / 2);
  275. }
  276.  
  277. .column:nth-child(1) {width:var(--Column-1-Width);}
  278. .column:nth-child(2) {width:var(--Column-2-Width);}
  279. .column:nth-child(3) {width:var(--Column-3-Width);}
  280.  
  281. .xyz {
  282. border-radius:3px;
  283. overflow:hidden;
  284. box-shadow:3px 3px 12px var(--Box-Shadow);
  285. }
  286.  
  287. /*------------1ST COLUMN------------*/
  288. .intro-block {width:inherit;}
  289.  
  290. .intro-header {
  291. position:relative;
  292. width:100%;
  293. }
  294.  
  295. .intro-avatar {
  296. position:relative;
  297. display:block;
  298. vertical-align:middle;
  299. margin:calc((-64px / 2) - 8px) auto;
  300. width:64px;height:64px;
  301. background:var(--Items-Background-Color);
  302. border-radius:100%;
  303. border:8px solid var(--Items-Background-Color);
  304. }
  305.  
  306. .intro-pad {
  307. padding:calc((64px / 2) + 8px + 8px) 14px 14px 14px;
  308. background:var(--Items-Background-Color);
  309. }
  310.  
  311. .intro-title {
  312. margin-bottom:8px;
  313. font-family:quicksand;
  314. font-size:13px;
  315. text-transform:uppercase;
  316. letter-spacing:2px;
  317. color:var(--Intro-Box-Title);
  318. }
  319.  
  320. .intro-desc {
  321. font-size:12px;
  322. line-height:1.8em;
  323. color:var(--Intro-Box-Text);
  324. }
  325.  
  326. .navlinks {
  327. margin-top:16px;
  328. text-align:center;
  329. }
  330.  
  331. .navlinks a {
  332. display:inline-block;
  333. padding:0 6px;
  334. }
  335.  
  336. .navlinks svg {
  337. width:12px;height:12px;
  338. color:var(--Intro-Nav-Links-Icon);
  339. stroke-width:2px;
  340. }
  341.  
  342. .social-media {
  343. margin-top:var(--Column-Gap);
  344. background:var(--Items-Background-Color);
  345. padding:16px;
  346. text-align:left;
  347. }
  348.  
  349. .social-media a {
  350. display:flex;
  351. padding:7px 0;
  352. width:100%;
  353. }
  354.  
  355. .social-media a > * {
  356. align-self:center;
  357. -webkit-align-self:center;
  358. }
  359.  
  360. .social-media a:first-child {padding-top:0px;}
  361. .social-media a:last-child {padding-bottom:0px;}
  362.  
  363. .social-media i {
  364. font-size:14px;
  365. color:var(--Social-Media-Icons);
  366. }
  367.  
  368. .social-media-links {
  369. margin-left:13px;
  370. font-family:quicksand;
  371. text-transform:uppercase;
  372. font-size:9px;
  373. letter-spacing:1px;
  374. color:var(--Social-Media-Links);
  375. }
  376.  
  377. /*------------2ND COLUMN------------*/
  378. .tagsbox {
  379. padding:16px;
  380. background:var(--Items-Background-Color);
  381. }
  382.  
  383. .tags {
  384. margin:-6px -4px;
  385. }
  386.  
  387. .tags a {
  388. display:inline-block;
  389. margin:6px 4px;
  390. padding:4px 9px;
  391. border:1px solid var(--Tags-Border);
  392. border-radius:3px;
  393. text-transform:uppercase;
  394. font-size:9px;
  395. letter-spacing:1px;
  396. color:var(--Tags);
  397. }
  398.  
  399. .tags a:hover {
  400. background:var(--Tags-Background-On-Hover);
  401. border:1px solid var(--Tags-Border-On-Hover);
  402. color:var(--Tags-On-Hover);
  403. }
  404.  
  405. .percentage-box {
  406. margin-top:var(--Column-Gap);
  407. padding:16px;
  408. background:var(--Items-Background-Color);
  409. }
  410.  
  411. .wheel-block {
  412. display:flex;
  413. justify-content:space-around;
  414. -webkit-justify-content:space-around;
  415. -moz-justify-content:space-around;
  416. }
  417.  
  418. .one-wheel {}
  419.  
  420. .wheel-text {
  421. margin-top:16px;
  422. font-family:quicksand;
  423. text-transform:uppercase;
  424. font-size:9px;
  425. letter-spacing:1px;
  426. color:var(--Percentage-Graph-Label);
  427. }
  428.  
  429. .s-pgraph:after{box-shadow:0 0 0 transparent!important;}
  430. .s-pgraph:after{background:var(--Items-Background-Color)!important;}
  431.  
  432. .colorbox {
  433. margin-top:var(--Column-Gap);
  434. padding:16px;
  435. background:var(--Items-Background-Color);
  436. }
  437.  
  438. .one-color-row {
  439. margin-bottom:10px;
  440. display:flex;
  441. }
  442.  
  443. .one-color-row:last-child {margin-bottom:0px;}
  444.  
  445. .one-color-row > * {
  446. align-self:center;
  447. -webkit-align-self:center;
  448. }
  449.  
  450. .color {
  451. width:36px;
  452. height:15px;
  453. border-radius:3px;
  454. }
  455.  
  456. .color-hex, .color-rgb {
  457. margin-left:12px;
  458. font-family:quicksand;
  459. text-transform:uppercase;
  460. font-size:9px;
  461. letter-spacing:1px;
  462. }
  463.  
  464. .color-hex {color:var(--Color-Hex-Text);}
  465. .color-rgb {color:var(--Color-RGB-Text);}
  466.  
  467. .musicbox {
  468. margin-top:var(--Column-Gap);
  469. padding:16px;
  470. background:var(--Items-Background-Color);
  471. text-align:left;
  472. display:flex;
  473. }
  474.  
  475. .musicbox > * {
  476. align-self:center;
  477. -webkit-align-self:center;
  478. }
  479.  
  480. .music-controls {
  481. user-select:none;
  482. -webkit-user-select:none;
  483. width:12px;
  484. font-size:12px;
  485. cursor:pointer;
  486. }
  487.  
  488. .playy, .pausee {color:var(--Music-Controls);}
  489. .pausee {display:none;}
  490.  
  491. .sonata {
  492. margin-left:10px;
  493. color:var(--Music-Note);
  494. }
  495.  
  496. .labeltext {margin-left:13px;}
  497.  
  498. .song-title {
  499. font-size:12px;
  500. color:var(--Song-Title);
  501. }
  502.  
  503. .song-artist {
  504. margin-top:-2px;
  505. font-size:10px;
  506. letter-spacing:0.5px;
  507. text-transform:uppercase;
  508. color:var(--Song-Artist);
  509. }
  510.  
  511. /*------------3RD COLUMN------------*/
  512. .info {
  513. padding:16px;
  514. background:var(--Items-Background-Color);
  515. text-align:left;
  516. }
  517.  
  518. .info-row {
  519. display:flex;
  520. margin-bottom:10px;
  521. }
  522.  
  523. .info-row:last-child {margin-bottom:0px;}
  524.  
  525. .info-row > * {
  526. align-self:center;
  527. -webkit-align-self:center;
  528. }
  529.  
  530. .info-row svg {
  531. padding:8px;
  532. background:var(--Info-Icons-BG);
  533. border-radius:3px;
  534. width:12px;
  535. height:12px;
  536. color:var(--Info-Icons);
  537. }
  538.  
  539. .info-label {
  540. margin-left:12px;
  541. font-size:10px;
  542. text-transform:uppercase;
  543. letter-spacing:0.5px;
  544. font-weight:bold;
  545. color:var(--Info-Bold);
  546. }
  547.  
  548. .info-txt {
  549. margin-top:-0.3px;
  550. margin-left:5px;
  551. font-size:12px;
  552. color:var(--Info-Text);
  553. }
  554.  
  555. .video {
  556. position:relative;
  557. margin-top:var(--Column-Gap);
  558. padding:16px;
  559. background:var(--Items-Background-Color);
  560. }
  561.  
  562. .vid-source {
  563. display:flex;
  564. margin-bottom:16px;
  565. justify-content:space-between;
  566. -webkit-justify-content:space-between;
  567. -moz-justify-content:space-between;
  568. }
  569.  
  570. .vid-source > * {
  571. align-self:center;
  572. -webkit-align-self:center;
  573. }
  574.  
  575. .vid-i-left {
  576. display:flex;
  577. }
  578. .vid-i-left > * {
  579. align-self:center;
  580. -webkit-align-self:center;
  581. }
  582.  
  583. .vid-avatar {
  584. width:30px;height:30px;
  585. border-radius:100%;
  586. }
  587.  
  588. .vid-text {
  589. margin-left:13px;
  590. text-align:left;
  591. }
  592.  
  593. .vid-txt-top {
  594. font-size:12px;
  595. color:var(--Video-Top-Text-1);
  596. }
  597.  
  598. .vid-txt-bot {
  599. margin-top:-2px;
  600. font-size:10px;
  601. letter-spacing:0.5px;
  602. text-transform:uppercase;
  603. color:var(--Video-Top-Text-2);
  604. }
  605.  
  606. .vid-i-right svg {
  607. width:13px;height:13px;
  608. padding:5px 0 5px 5px;
  609. color:var(--Video-Link-Right-Chevron);
  610. }
  611.  
  612. .video iframe, .video embed, .video video {
  613. width:100%;
  614. height:auto;
  615. border-radius:3px;
  616. }
  617.  
  618. .v-ha {
  619. position:absolute;
  620. width:calc(var(--Column-3-Width) - (16px * 2));
  621. display:table;
  622. }
  623.  
  624. .v-hb {
  625. display:table-cell;
  626. vertical-align:middle;
  627. }
  628.  
  629. .v-hc {
  630. margin-top:-2px;
  631. user-select:none;
  632. -webkit-user-select:none;
  633. display:inline-block;
  634. z-index:10;
  635. text-align:center;
  636. }
  637.  
  638. .v-play, .v-pause {
  639. margin-top:-5px;
  640. padding:10px;
  641. color:var(--Video-Controls);
  642. text-shadow:1px 1px 1px var(--Video-Controls-Shadow);
  643. font-size:17px;
  644. cursor:pointer;
  645. }
  646.  
  647. .v-pause {display:none;}
  648.  
  649. .v-p {
  650. opacity:0;
  651. -webkit-transition: opacity 200ms ease-in-out;
  652. -moz-transition: opacity 200ms ease-in-out;
  653. -o-transition: opacity 200ms ease-in-out;
  654. }
  655.  
  656. .v-ha:hover .v-p {opacity:1;}
  657.  
  658. .textbox {
  659. margin-top:var(--Column-Gap);
  660. padding:18px 20px;
  661. background:var(--Items-Background-Color);
  662. font-size:12px;
  663. color:var(--Text-Box-Text);
  664. line-height:1.8em;
  665. text-align:justify;
  666. }
  667.  
  668. </style>
  669.  
  670. </head>
  671.  
  672. <body>
  673.  
  674. <!----TUMBLR CONTROLS---->
  675. <div id="plus-s"><i data-feather="plus"></i></div>
  676.  
  677. <!----CONTAINER---->
  678. <div id="cont-h-1">
  679. <div id="cont-h-2">
  680. <div id="cont-v-1">
  681. <div id="cont-v-2">
  682. <div id="columnwrap">
  683.  
  684. <!---------------------------------------------->
  685. <!----1ST COLUMN---->
  686. <div class="column">
  687. <div class="intro-block xyz">
  688.  
  689. <!----HEADER IMAGE---->
  690. <img class="intro-header" src="//66.media.tumblr.com/20d6e8dcd2a3c13f7404c1e602915f5d/tumblr_opicvbjC5B1taarzno2_r3_400.gif">
  691.  
  692. <!----HEADER AVATAR ICON IMAGE---->
  693. <img class="intro-avatar" src="//66.media.tumblr.com/841f4189deb551db9be0855c1f7f34b2/tumblr_podadz4U161qg2f5co5_100.png">
  694.  
  695. <div class="intro-pad">
  696.  
  697. <!----DESCRIPTION TITLE--->
  698. <div class="intro-title">Breeze</div>
  699.  
  700. <!----DESCRIPTION---->
  701. <div class="intro-desc">
  702. hello i'm the description
  703. <br>looks best with
  704. <br>3 lines.
  705. </div><!--end desc-->
  706.  
  707. <!----DESCRIPTION NAV LINKS---->
  708. <!--you can choose one from this list:-->
  709. <!--//feathericons.com-->
  710. <!--put the name between the quotation marks of feather=""-->
  711. <div class="navlinks">
  712. <a href="/" title="home"><i data-feather="home"></i></a>
  713. <a href="/ask" title="ask"><i data-feather="mail"></i></a>
  714. <a href="/archive" title="archive"><i data-feather="grid"></i></a>
  715. <a href="/" title="a link"><i data-feather="gift"></i></a>
  716.  
  717. <!--please do not remove the credit! thank you *o*-->
  718. <a href="//glenthemes.tumblr.com" title="page by glenthemes"><i data-feather="code"></i></a>
  719. </div><!--navlinks end-->
  720.  
  721. </div><!--intro-pad--><!--do not delete this line-->
  722. </div><!--intro-block--><!--do not delete this line-->
  723.  
  724.  
  725.  
  726. <!----SOCIAL MEDIA LINKS---->
  727. <!--icon list:-->
  728. <!--//fontawesome.com/icons-->
  729. <div class="social-media xyz">
  730. <a href="/"><i class="fab fa-steam-symbol"></i>
  731. <span class="social-media-links">steam profile</span></a>
  732.  
  733. <a href="/"><i class="fab fa-twitter"></i>
  734. <span class="social-media-links">twitter</span></a>
  735.  
  736. <a href="/"><i class="fab fa-twitch"></i>
  737. <span class="social-media-links">twitch channel</span></a>
  738.  
  739. <a href="/"><i class="fab fa-instagram"></i>
  740. <span class="social-media-links">instagram</span></a>
  741. </div><!--end social media-->
  742. </div><!--end 1st column-->
  743.  
  744.  
  745.  
  746. <!---------------------------------------------->
  747. <!----2ND COLUMN---->
  748. <div class="column">
  749.  
  750. <!----TAGS BOX---->
  751. <div class="tagsbox xyz">
  752. <div class="tags">
  753. <a href="/tagged/">tag</a>
  754. <a href="/tagged/">tag</a>
  755. <a href="/tagged/">tag</a>
  756. <a href="/tagged/">tag</a>
  757. <a href="/tagged/">tag</a>
  758. <a href="/tagged/">tag</a>
  759. <a href="/tagged/">tag</a>
  760. </div><!--tags--><!--do not delete this line-->
  761. </div><!--tagsbox--><!--do not delete this line-->
  762.  
  763.  
  764. <!----PERCENTAGE GRAPHS---->
  765. <div class="percentage-box xyz">
  766. <div class="wheel-block">
  767.  
  768. <!----PERCENTAGE GRAPH 1---->
  769. <div class="one-wheel">
  770. <div class="wheel">
  771. <link rel="stylesheet" type="text/css" href="//solrainha.github.io/portfolio/pgraph/spg.css"/><a href="//suiomi.com" class="spc">
  772.  
  773. <!--% IN TENS ONLY-->
  774. <!--e.g. p10, p20, p30-->
  775. <div class="s-pgraph p60">
  776.  
  777. <div class="s-pgraph-container">
  778. <div class="s-pgraph-empty"></div>
  779. <div class="s-pgraph-progress"></div></div></div></a>
  780. </div><!--wheel-->
  781.  
  782. <!--PERCENTAGE GRAPH 1 LABEL TEXT-->
  783. <div class="wheel-text">HP Levels</div>
  784. </div><!--end one % graph-->
  785.  
  786.  
  787.  
  788. <!----PERCENTAGE GRAPH 2---->
  789. <div class="one-wheel">
  790. <div class="wheel">
  791. <a href="//suiomi.com" class="spc">
  792.  
  793. <!--% IN TENS ONLY-->
  794. <!--e.g. p10, p20, p30-->
  795. <div class="s-pgraph p80">
  796.  
  797. <div class="s-pgraph-container">
  798. <div class="s-pgraph-empty"></div>
  799. <div class="s-pgraph-progress"></div></div></div></a>
  800. </div><!--wheel-->
  801.  
  802. <!--PERCENTAGE GRAPH 2 LABEL TEXT-->
  803. <div class="wheel-text">EXP Stat</div>
  804. </div><!--end one % graph-->
  805.  
  806. </div><!--wheel-block--><!--do not delete this line-->
  807. </div><!--percentage-box--><!--do not delete this line-->
  808.  
  809.  
  810.  
  811. <!----'FAVORITE COLORS' BOX---->
  812. <div class="colorbox xyz">
  813.  
  814. <!----START A COLOR ROW---->
  815. <div class="one-color-row">
  816. <div class="color" style="background:#333"></div>
  817. <div class="color-hex">#333333</div>
  818. <div class="color-rgb">51, 51, 51</div>
  819. </div><!--end color row-->
  820.  
  821. <!----START A COLOR ROW---->
  822. <div class="one-color-row">
  823. <div class="color" style="background:#F2F2F2"></div>
  824. <div class="color-hex">#F7F7F7</div>
  825. <div class="color-rgb">242, 242, 242</div>
  826. </div><!--end color row-->
  827.  
  828. <!----START A COLOR ROW---->
  829. <div class="one-color-row">
  830. <div class="color" style="background:#FAFAFA"></div>
  831. <div class="color-hex">#FAFAFA</div>
  832. <div class="color-rgb">250, 250, 250</div>
  833. </div><!--end color row-->
  834. </div><!--colorbox--><!--do not delete this line-->
  835.  
  836.  
  837.  
  838. <!----MUSIC BOX---->
  839. <div class="musicbox xyz">
  840. <div class="music-controls">
  841. <div class="playy">▶</div>
  842. <div class="pausee">❚❚</div>
  843. </div>
  844. <div class="sonata">♫</div>
  845. <div class="labeltext">
  846. <!----SONG TITLE & SONG ARTIST---->
  847. <div class="song-title">OWL 2019 - Hanamura [23]</div>
  848. <div class="song-artist">Derek Duke</div>
  849. </div><!--label--text-->
  850.  
  851. <!--music url goes between quotation marks of src=""-->
  852. <!--you can refer to this tutorial:-->
  853. <!-- linktr.ee/direct_file_links -->
  854. <audio id="tune" src="https://rhizo.gitlab.io/m/Overwatch_League_2019_-_Hanamura.mp3" type="audio"></audio>
  855. </div><!--end music player-->
  856. </div><!--end 2nd column-->
  857.  
  858.  
  859.  
  860.  
  861.  
  862. <!---------------------------------------------->
  863. <!----3RD COLUMN---->
  864. <div class="column">
  865. <div class="info xyz">
  866. <!--START ONE BULLET ROW-->
  867. <div class="info-row">
  868. <!--bullet point icon-->
  869. <!--you can choose one from this list:-->
  870. <!--//feathericons.com-->
  871. <!--put the name between the quotation marks of feather=""-->
  872. <i data-feather="user"></i>
  873. <!--bullet point text-->
  874. <div class="info-label">Name:</div>
  875. <div class="info-txt">gorgeous</div>
  876. </div><!--info-row-->
  877. <!--END ONE BULLET ROW-->
  878.  
  879. <!--START ONE BULLET ROW-->
  880. <div class="info-row">
  881. <i data-feather="edit-2"></i>
  882. <div class="info-label">Pronouns:</div>
  883. <div class="info-txt">your pronouns here</div>
  884. </div><!--info-row-->
  885. <!--END ONE BULLET ROW-->
  886.  
  887. <!--START ONE BULLET ROW-->
  888. <div class="info-row">
  889. <i data-feather="database"></i>
  890. <div class="info-label">Hobbies:</div>
  891. <div class="info-txt">your hobbies here</div>
  892. </div><!--info-row-->
  893. <!--END ONE BULLET ROW-->
  894. </div><!--info--><!--do not delete this line-->
  895.  
  896.  
  897.  
  898.  
  899. <!----VIDEO---->
  900. <div class="video xyz">
  901. <div class="vid-source">
  902. <div class="vid-i-left">
  903.  
  904. <!----VIDEO AVATAR ICON IMAGE---->
  905. <img class="vid-avatar" src="//66.media.tumblr.com/7b427f0dfaca3259b1327a770e060365/tumblr_podadz4U161qg2f5co2_100.png">
  906. <div class="vid-text">
  907.  
  908. <!----VIDEO TITLE & SUBTITLE---->
  909. <div class="vid-txt-top">Shunrai MV</div>
  910. <div class="vid-txt-bot">Yonezu Kenshi</div>
  911. </div>
  912. </div><!--vid-i-left-->
  913.  
  914.  
  915. <div class="vid-i-right">
  916. <!----VIDEO RIGHT ARROW LINK---->
  917. <a href="//www.youtube.com/watch?v=zkNzxsaCunU" title="go to youtube page" target="_blank"><i data-feather="chevron-right"></i></a>
  918. </div><!--do not delete this line-->
  919. </div><!--vid-source-->
  920.  
  921.  
  922. <!----YOUR VIDEO GOES HERE---->
  923. <!--if the video is from YouTube / embed source, erase from <video to </video> and insert your embed link.-->
  924. <!--if the video is still HTML5, just put the link between quotation marks of src=""-->
  925. <video id="v" src="https://rhizo.gitlab.io/v/Shunrai.mp4"></video>
  926.  
  927.  
  928. <!--do not delete below-->
  929. <div class="v-h">
  930. <div class="v-ha">
  931. <div class="v-hb">
  932. <div class="v-hc">
  933. <div class="v-play">▶</div>
  934. <div class="v-p"><div class="v-pause">❚❚</div></div>
  935. </div>
  936. </div><!--v-hb-->
  937. </div><!--v-ha-->
  938. </div><!--v-h-->
  939. </div><!--video-->
  940.  
  941.  
  942. <!----TEXTBOX---->
  943. <div class="textbox xyz">
  944. hello i'm the textbox.
  945. <br>looks best with
  946. <br>3 lines.
  947. </div><!--textbox--><!--do not delete below-->
  948.  
  949. </div><!--end column-->
  950. </div><!--columnwrap-->
  951. </div><!--cont-v-2-->
  952. </div><!--cont-v-1-->
  953. </div><!--cont-h-2-->
  954. </div><!--cont-h-1-->
  955.  
  956. <script>feather.replace()</script>
  957. </body>
  958.  
  959. </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!