API tools faq
paste
Advertisement
glenthemes

About Page [16]: Ephemeral

glenthemes
Mar 30th, 2020 (edited)
5,795
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.54 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. About Page [16]: Ephemeral
  3. Made by glenthemes
  4.  
  5. Initial release: 2020/03/30
  6. Last updated: 2022/09/13
  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. Customization pointers:
  16. 🥡🥡🥡🥡🥡🥡🥡 = places to edit
  17. 🐙🐙🐙🐙🐙🐙🐙 = start of a section || start copy
  18. 🛑🛑🛑🛑🛑🛑🛑 = end of a section || end copy
  19. ------------------------------------------------------------------------>
  20.  
  21. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  22. <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" 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:50,
  39. tip_fade_speed:0,
  40. attribute:"title"
  41. });
  42. });
  43. })(jQuery);
  44. </script>
  45.  
  46. <link href="//fonts.googleapis.com/css?family=Sen|Gotu|Libre+Franklin:300|Josefin+Sans:100|ABeeZee|Material+Icons" rel="stylesheet">
  47.  
  48. <script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
  49.  
  50. <script src="//glenthemes.github.io/-music-/glenplayer07.js"></script>
  51.  
  52. <!-------------------------------------------------------------------->
  53.  
  54. <style type="text/css">
  55.  
  56. /*--------------------TOOLTIPS--------------------*/
  57. #s-m-t-tooltip {
  58. padding:5px 10px;
  59. margin:14px;
  60. background-color:var(--Tooltips-BG);
  61. border-radius:2px;
  62. font-family:sen;
  63. font-size:9px;
  64. text-transform:uppercase;
  65. letter-spacing:.5px;
  66. color:var(--Tooltips-Text);
  67. z-index:99;
  68. max-width:40vw;
  69. }
  70.  
  71. /*--------------------TUMBLR CONTROLS--------------------*/
  72. iframe#tumblr_controls, .iframe-controls--desktop {
  73. top:7px!important;
  74. right:7px!important;
  75. position:fixed!important;
  76.  
  77. transform:scale(0.7,0.7);
  78. -webkit-transform:scale(0.7,0.7);
  79. -moz-transform:scale(0.7,0.7);
  80. -o-transform:scale(0.7,0.7);
  81. -ms-transform:scale(0.7,0.7);
  82.  
  83. transform-origin:100% 0;
  84. -webkit-transform-origin:100% 0;
  85. -moz-transform-origin:100% 0;
  86. -o-transform-origin:100% 0;
  87. -ms-transform-origin:100% 0;
  88. z-index:999999!important;
  89. }
  90.  
  91. /*--------------------TEXT HIGHLIGHT--------------------*/
  92. ::selection {
  93. background:var(--BG-On-Highlight);
  94. color:var(--Text-On-Highlight);
  95. }
  96.  
  97. ::-moz-selection {
  98. background:var(--BG-On-Highlight);
  99. color:var(--Text-On-Highlight);
  100. }
  101.  
  102. /*--------------------BASICS--------------------*/
  103. body {
  104. line-height:1.6em;
  105. font-size:12px;
  106. text-align:left;
  107. }
  108.  
  109. blockquote {
  110. padding-left:10px;
  111. margin-left:5px;
  112. border-left:1px solid;
  113. border-color:#aaa;
  114. margin:10px;
  115. }
  116.  
  117. a, svg {
  118. text-decoration:none;
  119. -webkit-transition: all 0.4s ease-in-out;
  120. -moz-transition: all 0.4s ease-in-out;
  121. -o-transition: all 0.4s ease-in-out;
  122. }
  123.  
  124. a[title]:not([href]):hover {cursor:help;}
  125.  
  126. b, strong {
  127. font-weight:bold;
  128. }
  129.  
  130. pre, code {
  131. white-space:pre-wrap;
  132. display:block;
  133. }
  134.  
  135. img {vertical-align:middle;}
  136. audio {display:none;}
  137.  
  138. #horizontal-a {
  139. position:fixed;
  140. top:0;left:0;right:0;
  141. margin:0 auto;
  142. height:100vh;
  143. text-align:center;
  144. z-index:-1;
  145. }
  146.  
  147. #horizontal-b {
  148. display:inline-block;
  149. }
  150.  
  151. #vertical-a {
  152. height:100vh;
  153. display:table;
  154. }
  155.  
  156. #vertical-b {
  157. display:table-cell;
  158. vertical-align:middle;
  159. }
  160.  
  161. #thesearenotmymusclesbutiwillflexit {
  162. display:flex;
  163. align-items:center;
  164. }
  165.  
  166. /*--------------CUSTOMIZATION OPTIONS--------------*/
  167. :root {
  168. --Sidebar-Image:url(//66.media.tumblr.com/8b89bca23eb4dd95ceec83feb8627ccd/6b6c8d10fd033f1f-fd/s400x600/90c44930abedb723fc8ce4fd5c506009c4b18936.png);
  169. /* do not remove the brackets or semicolon */
  170. --Sidebar-Image-Width:100px;
  171. --Sidebar-Image-Height:110px;
  172. --Sidebar-Image-Background-Color:#8b8b8b;
  173. --Sidebar-Image-Border-Size:4px;
  174. --Sidebar-Image-Border-Color:#fffffd;
  175. --Sidebar-Image-Bottom-Gap:21px;
  176.  
  177. --SB-Links-Symbol-Size:9px;
  178. --SB-Links-Symbol-Background:#1d1d1d;
  179. --SB-Links-Symbol-Padding:6px;
  180. --SB-Links-Symbol:#ccc;
  181. --SB-Links-Symbol-Right-Gap:11px;
  182. --SB-Links-Font-Size:9px;
  183. --SB-Links-Text-Color:#ccc;
  184.  
  185. --SB-Links-Symbol-Background-On-Hover:#dec171;
  186. --SB-Links-Symbol-On-Hover:#000;
  187. --SB-Links-Text-On-Hover:#dec171;
  188. --SB-Links-Spacing:12px;
  189.  
  190. --Sidebar-Right-Margin:50px;
  191.  
  192. --Main-Title-Font-Size:18px;
  193. --Main-Title-Color:#bbb;
  194.  
  195. --Main-Text-Top-Gap:17px;
  196. --Main-Text-Width:300px;
  197. --Main-Text-Line-Height:1.8em;
  198. --Main-Text-Bottom-Gap:17px;
  199.  
  200. --Main-Text-Color:#a5a5a5;
  201. --Main-Text-Font-Size:12px;
  202. --Main-Text-Links:#dec171; /* if any */
  203.  
  204. --Info-Bullets-Size:4px;
  205. --Info-Bullets:#dec171;
  206. --Info-Bullets-Glow:#ffe6a2;
  207. --Info-Bullets-Spacing:10px;
  208. --Info-Bullets-Label:#dec171;
  209. --Info-Bullets-Label-Font-Size:9px;
  210. --Info-Bullets-Label-Right-Gap:4px;
  211.  
  212. --Brackets-Top-Gap:19px;
  213. --Brackets-Size:64px;
  214. --Brackets-Color:#636363;
  215. --Brackets-Text:#696969;
  216. --Brackets-Text-Margin:12px;
  217.  
  218. --BG-On-Highlight:#ffe6a2;
  219. --Text-On-Highlight:#fff;
  220.  
  221. --Tooltips-BG:#1d1d1d;
  222. --Tooltips-Text:#ccc;
  223.  
  224. --Credit-Color:#999;
  225. --Credit-Color-On-Hover:#dec171;
  226.  
  227. /*---- MUSIC PLAYER ----*/
  228. --Circle-Size:32px;
  229. --Progress-Border-Size:1.5px;
  230. --Progress-Empty:#090909;
  231. --Progress-Fill:#dec171;
  232. --Player-Background:#1d1d1d;
  233. --Play-Pause-Buttons-Size:12px;
  234. --Play-Pause-Buttons-Color:#dec171;
  235. --Player-Text-Margin:13px;
  236.  
  237. --Song-Name-Font-Size:8.5px;
  238. --Song-Name-Color:#dec171;
  239.  
  240. --Artist-Name-Font-Size:9.5px;
  241. --Artist-Name-Color:#bbb;
  242. }
  243.  
  244. body {
  245. background:#090909 url(''); /* background color & image, if u want one */
  246. background-attachment:fixed;
  247. background-repeat:repeat;
  248. }
  249.  
  250. .sb {
  251. width:calc(var(--Sidebar-Image-Width) + (var(--Sidebar-Image-Border-Size) * 2));
  252. }
  253.  
  254. .sb-frame {
  255. display:flex;
  256. align-items:center;
  257. justify-content:center;
  258. width:calc(var(--Sidebar-Image-Width) + (var(--Sidebar-Image-Border-Size) * 2));
  259. height:calc(var(--Sidebar-Image-Height) + (var(--Sidebar-Image-Border-Size) * 2));
  260. background:var(--Sidebar-Image-Border-Color);
  261. clip-path:polygon(7% 0, 0 89%, 37% 86%, 38% 100%, 52% 86%, 94% 82%, 100% 6%);
  262. }
  263.  
  264. .sb-ico {
  265. width:var(--Sidebar-Image-Width);
  266. height:var(--Sidebar-Image-Height);
  267. background-color:var(--Sidebar-Image-Background-Color);
  268. background-image:var(--Sidebar-Image);
  269. background-size:cover;
  270. background-position:center;
  271. clip-path:polygon(7% 0, 0 89%, 37% 86%, 38% 100%, 52% 86%, 94% 82%, 100% 6%);
  272. }
  273.  
  274. .sb-links {
  275. margin-top:var(--Sidebar-Image-Bottom-Gap);
  276. }
  277.  
  278. .one-link {
  279. display:flex;
  280. align-items:center;
  281. padding-bottom:var(--SB-Links-Spacing);
  282. }
  283.  
  284. .one-link:last-of-type {
  285. padding-bottom:0;
  286. }
  287.  
  288. .one-link svg {
  289. margin-right:var(--SB-Links-Symbol-Right-Gap);
  290. width:var(--SB-Links-Symbol-Size);
  291. height:var(--SB-Links-Symbol-Size);
  292. background:var(--SB-Links-Symbol-Background);
  293. padding:var(--SB-Links-Symbol-Padding);
  294. border-radius:3px;
  295. color:var(--SB-Links-Symbol);
  296. }
  297.  
  298. .one-link:hover svg {
  299. background:var(--SB-Links-Symbol-Background-On-Hover);
  300. color:var(--SB-Links-Symbol-On-Hover);
  301. }
  302.  
  303. .one-link span {
  304. font-family:sen;
  305. font-size:var(--SB-Links-Font-Size);
  306. text-transform:uppercase;
  307. letter-spacing:.5px;
  308. color:var(--SB-Links-Text-Color);
  309. }
  310.  
  311. .one-link:hover span {
  312. color:var(--SB-Links-Text-On-Hover);
  313. }
  314.  
  315. /*-------MAIN CONTENT [RIGHT]-------*/
  316. .maaain {
  317. margin-left:var(--Sidebar-Right-Margin);
  318. width:var(--Main-Text-Width);
  319. font-family:sen;
  320. font-size:var(--Main-Text-Font-Size);
  321. color:var(--Main-Text-Color);
  322. text-align:left;
  323. line-height:var(--Main-Text-Line-Height);
  324. }
  325.  
  326. .maaain a {
  327. color:var(--Main-Text-Links);
  328. }
  329.  
  330. .main-title {
  331. margin-bottom:var(--Main-Title-Bottom-Gap);
  332. font-family:gotu;
  333. font-size:var(--Main-Title-Font-Size);
  334. text-transform:uppercase;
  335. letter-spacing:.5px;
  336. color:var(--Main-Title-Color);
  337. }
  338.  
  339. .about-text {
  340. margin-top:var(--Main-Text-Top-Gap);
  341. }
  342.  
  343. .bullets {
  344. margin-top:var(--Main-Text-Bottom-Gap);
  345. margin-left:calc(var(--Info-Bullets-Size) + (var(--Info-Bullets-Spacing) * 2));
  346. }
  347.  
  348. .bullets li {
  349. position:relative;
  350. display:flex;
  351. align-items:center;
  352. list-style-type:none;
  353. }
  354.  
  355. .bullets li:before {
  356. content:"";
  357. position:absolute;
  358. display:flex;
  359. margin-left:calc((var(--Info-Bullets-Size) + var(--Info-Bullets-Spacing)) * -1);
  360. width:var(--Info-Bullets-Size);
  361. height:var(--Info-Bullets-Size);
  362. background:var(--Info-Bullets);
  363. box-shadow:0px 0px 3px var(--Info-Bullets-Glow);
  364. border-radius:100%;
  365. }
  366.  
  367. .bullets label {
  368. margin-right:var(--Info-Bullets-Label-Right-Gap);
  369. font-size:var(--Info-Bullets-Label-Font-Size);
  370. text-transform:uppercase;
  371. letter-spacing:.5px;
  372. color:var(--Info-Bullets-Label);
  373. }
  374.  
  375. .bullets span {
  376. margin-top:-1px;
  377. }
  378.  
  379. .in-brackets {
  380. display:flex;
  381. align-items:center;
  382. justify-content:space-between;
  383. margin-top:var(--Brackets-Top-Gap);
  384. }
  385.  
  386. .brck {
  387. margin-bottom:-8px;
  388. font-family:josefin sans;
  389. font-size:var(--Brackets-Size);
  390. color:var(--Brackets-Color);
  391. line-height:1em;
  392. user-select:none;
  393. }
  394.  
  395. .brackets-text {
  396. padding:0 var(--Brackets-Text-Margin);
  397. font-style:italic;
  398. color:var(--Brackets-Text);
  399. }
  400.  
  401. /*-------MUSIC PLAYER-------*/
  402. #glenplayer07 {
  403. position:fixed;
  404. bottom:0;margin-bottom:30px;
  405. left:0;margin-left:30px;
  406. z-index:99;
  407. }
  408.  
  409. .flamingo {
  410. display:flex;
  411. align-items:center;
  412. }
  413.  
  414. .circleofdeath {
  415. width:var(--Circle-Size);
  416. height:var(--Circle-Size);
  417. border-radius:100%;
  418. overflow:hidden;
  419. }
  420.  
  421. .tinfoil {
  422. width:var(--Circle-Size);
  423. height:var(--Circle-Size);
  424. background:var(--Progress-Empty);
  425. border-radius:100%;
  426. }
  427.  
  428. .oven {
  429. background:var(--Progress-Fill);
  430. }
  431.  
  432. .oliveoil {
  433. width:100%;
  434. height:100%;
  435. }
  436.  
  437. .crust {
  438. position:absolute;
  439. top:0;
  440. display:flex;
  441. align-items:center;
  442. justify-content:center;
  443. width:var(--Circle-Size);
  444. height:var(--Circle-Size);
  445. }
  446.  
  447. .cherry {
  448. display:flex;
  449. align-items:center;
  450. justify-content:center;
  451. width:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
  452. height:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
  453. background:var(--Player-Background);
  454. border-radius:100%;
  455. cursor:pointer;
  456. z-index:1;
  457. }
  458.  
  459. .music-controls {display:flex;align-items:center}
  460.  
  461. .music-controls .material-icons {
  462. font-size:var(--Play-Pause-Buttons-Size);
  463. color:var(--Play-Pause-Buttons-Color);
  464. }
  465.  
  466. .pausee {display:none;}
  467.  
  468. .beff {display:none;}
  469. .aff {display:block;}
  470.  
  471. .music-info {
  472. margin-left:var(--Player-Text-Margin);
  473. line-height:1em;
  474. }
  475.  
  476. .song-name {
  477. font-family:ABeeZee;
  478. font-size:var(--Song-Name-Font-Size);
  479. text-transform:uppercase;
  480. letter-spacing:1.5px;
  481. color:var(--Song-Name-Color);
  482. }
  483.  
  484. .artist-name {
  485. margin-top:3px;
  486. font-family:sen;
  487. font-size:var(--Artist-Name-Font-Size);
  488. letter-spacing:0.3px;
  489. color:var(--Artist-Name-Color);
  490. }
  491.  
  492. .glenjamin {
  493. position:fixed;
  494. bottom:0;padding-bottom:21px;
  495. right:0;padding-right:21px;
  496. }
  497.  
  498. .glenjamin svg {
  499. width:11px;
  500. height:11px;
  501. color:var(--Credit-Color);
  502. }
  503.  
  504. .glenjamin:hover svg {color:var(--Credit-Color-On-Hover);}
  505.  
  506. </style>
  507.  
  508. </head>
  509.  
  510. <body>
  511.  
  512. <a class="glenjamin" href="//glenthemes.tumblr.com" title="page by glenthemes"><i data-feather="code"></i></a>
  513.  
  514. <!-------MUSIC PLAYER------->
  515. <div id="glenplayer07">
  516. <div class="flamingo">
  517. <div class="circleofdeath">
  518. <div class="tinfoil">
  519. <div class="oliveoil"></div>
  520. </div>
  521. <div class="crust">
  522. <div class="cherry">
  523. <div class="music-controls">
  524. <i class="material-icons playy">play_arrow</i>
  525. <i class="material-icons pausee">pause</i>
  526. </div>
  527. </div><!--cherry-->
  528. </div><!--crust-->
  529. </div><!--circleofdeath-->
  530.  
  531. <div class="music-info">
  532.  
  533.  
  534.  
  535. <!------ MUSIC TITLE & ARTIST NAME ------->
  536. <!--🥡🥡🥡🥡🥡🥡🥡-->
  537.  
  538. <div class="song-name">Headspace</div>
  539. <div class="artist-name">Corentin Brasart</div>
  540.  
  541.  
  542.  
  543. </div><!--music-info-->
  544. </div><!--flamingo-->
  545. </div><!--glenplayer07-->
  546.  
  547.  
  548. <!------- MUSIC URL ------->
  549. <!-- to obtain a working audio, link:
  550. linktr.ee/direct_file_links
  551. -->
  552. <audio id="audio" src="https://rhizo.gitlab.io/m/Headspace.mp3" type="audio"></audio>
  553. <!----end music player---->
  554.  
  555. <div id="horizontal-a">
  556. <div id="horizontal-b">
  557. <div id="vertical-a">
  558. <div id="vertical-b">
  559. <div id="thesearenotmymusclesbutiwillflexit">
  560. <div class="sb">
  561. <div class="sb-frame">
  562. <!---- SIDEBAR ICON - not edited here ---->
  563. <!-- look for :root -->
  564. <div class="sb-ico"></div>
  565. </div>
  566.  
  567. <div class="sb-links">
  568.  
  569.  
  570. <!------- SIDEBAR LINKS ------->
  571. <!-- 🥡🥡🥡🥡🥡🥡🥡 -->
  572.  
  573. <!-- to change the symbol, go to this website:
  574.  
  575. //feathericons.com
  576.  
  577. COPY the symbol name, DO NOT click it
  578. (if you click it, it will download the svg)
  579.  
  580. type out the name between
  581. the quotation marks of data-feather=""
  582. -->
  583.  
  584. <!---------------------->
  585. <!-- 🐙🐙🐙🐙🐙🐙🐙-->
  586. <!---- ONE SIDEBAR LINK ---->
  587. <a class="one-link" href="/">
  588. <i data-feather="home"></i>
  589. <span>index</span>
  590. </a>
  591. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  592. <!---------------------->
  593.  
  594.  
  595.  
  596. <!---------------------->
  597. <!-- 🐙🐙🐙🐙🐙🐙🐙-->
  598. <!---- ONE SIDEBAR LINK ---->
  599. <a class="one-link" href="/">
  600. <i data-feather="send"></i>
  601. <span>message</span>
  602. </a>
  603. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  604. <!---------------------->
  605.  
  606.  
  607.  
  608. </div><!--end sb links-->
  609. </div><!--end sidebar-->
  610.  
  611. <div class="maaain">
  612.  
  613.  
  614. <!------- MAIN TITLE ------->
  615. <!-- 🥡🥡🥡🥡🥡🥡🥡 -->
  616.  
  617. <div class="main-title">your name here</div>
  618.  
  619.  
  620.  
  621.  
  622. <!------- A PARAGRAPH ------->
  623. <!-- 🥡🥡🥡🥡🥡🥡🥡 -->
  624.  
  625. <div class="about-text">
  626.  
  627. some stuff about you
  628.  
  629. </div><!--do not delete this line-->
  630.  
  631.  
  632.  
  633.  
  634. <!------- BULLET POINTS ------->
  635. <!-- 🥡🥡🥡🥡🥡🥡🥡 -->
  636.  
  637. <div class="bullets">
  638.  
  639. <!---------------------->
  640. <!-- 🐙🐙🐙🐙🐙🐙🐙 -->
  641. <!---- one bullet line ---->
  642. <li>
  643. <label>label:</label>
  644. <span>detail</span>
  645. </li>
  646. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  647. <!---------------------->
  648.  
  649.  
  650. <!---------------------->
  651. <!-- 🐙🐙🐙🐙🐙🐙🐙 -->
  652. <!---- one bullet line ---->
  653. <li>
  654. <label>label:</label>
  655. <span>detail</span>
  656. </li>
  657. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  658. <!---------------------->
  659.  
  660.  
  661. <!---------------------->
  662. <!-- 🐙🐙🐙🐙🐙🐙🐙 -->
  663. <!---- one bullet line ---->
  664. <li>
  665. <label>label:</label>
  666. <span>detail</span>
  667. </li>
  668. <!-- 🛑🛑🛑🛑🛑🛑🛑 -->
  669. <!---------------------->
  670.  
  671. </div><!--do not delete this line-->
  672.  
  673.  
  674.  
  675.  
  676. <div class="in-brackets">
  677. <div class="brck">(</div>
  678.  
  679.  
  680. <!------- SOME TEXT IN BRACKETS ------->
  681. <!-- 🥡🥡🥡🥡🥡🥡🥡 -->
  682.  
  683. <div class="brackets-text">She lets out a silvery laugh. It's very soothing in tone, the laugh of someone you can trust.</div>
  684.  
  685.  
  686.  
  687. <div class="brck">)</div>
  688. </div>
  689. </div><!--end main-->
  690. </div><!--end mainflex-->
  691. </div><!---->
  692. </div>
  693. </div>
  694. </div>
  695.  
  696. <script>feather.replace()</script>
  697. </body>
  698. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!