API tools faq
paste
nicolas-sage

page 01: moongate about

nicolas-sage
Jan 15th, 2022 (edited)
3,184
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.59 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <title>about</title>
  4.  
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  
  9. <!---
  10.  
  11. moongate about page by SAGE / https://demontimes.tumblr.com
  12.  
  13. - the places where you can edit are marked / search "edit here"
  14. - feel free to send me an ask if you have any questions!
  15.  
  16. CREDITS:
  17. - phosphor icons / https://phosphoricons.com/
  18. - tippy.js tooltips / https://atomiks.github.io/tippyjs/
  19. - google fonts / https://fonts.google.com/
  20.  
  21. --->
  22.  
  23. <!----- GOOGLE FONTS ---->
  24. <link rel="preconnect" href="https://fonts.googleapis.com">
  25. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  26. <link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap" rel="stylesheet">
  27.  
  28. <!---- ICONS ---->
  29. <script src="https://unpkg.com/phosphor-icons"></script>
  30.  
  31. <!---- TOOLTIPS ---->
  32.  
  33. <script src="https://unpkg.com/popper.js@1"></script>
  34. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  35.  
  36. <!----- CSS ----->
  37.  
  38. <style type="text/css">
  39.  
  40. /*--- EDIT HERE ---*/
  41.  
  42. /*--- COLORS ---*/
  43. :root {
  44. --background: #f5f5f5;
  45. --content-background: #fff;
  46. --text: #7476a2;
  47. --link: #8175ff;
  48. --accent: #6251d1;
  49. --title: #9791ff;
  50. --borders: #d8d8d8;
  51. --shadow: #ddd;
  52. --gradient-one: #8e94ec;
  53. --gradient-two: #bfc3ff;
  54. --gradient-text: #fff;
  55.  
  56. /*--- OTHER ---*/
  57. --body-font: 'Karla'; /*-- lmk if you want help changing the font! --*/
  58. --font-size: 15px;
  59. --border-radius: 5px;
  60. --text-shadow: 0 0 10px; /*-- change to 0 if you don't want a glow --*/
  61. }
  62.  
  63. /*----- TOOLTIPS -----*/
  64.  
  65. .tippy-tooltip.custom-theme {
  66. background-color: var(--title);
  67. color: var(--content-background);
  68. font-weight: 700;
  69. text-align: center;
  70. text-transform: uppercase;
  71. letter-spacing: 0.2em;
  72. margin: 5px 0;
  73. font-size: 0.9em;
  74. border-radius:var(--border-radius);
  75. margin: 5px 0;
  76. }
  77.  
  78. /*---- SCROLLBAR ----- */
  79. ::-webkit-scrollbar {
  80. width: 10px;
  81. background-color: var(--background);
  82. }
  83.  
  84. ::-webkit-scrollbar-thumb {
  85. background: linear-gradient(to bottom, var(--gradient-one), var(--gradient-two));
  86. border-radius: 5px;
  87. }
  88.  
  89. body {
  90. font-family: var(--body-font), sans-serif;
  91. font-size: var(--font-size);
  92. color: var(--text);
  93. background: var(--background);
  94. line-height: 160%;
  95. letter-spacing: 0.2px;
  96. word-wrap: break-word;
  97. }
  98.  
  99. a {
  100. color: var(--link);
  101. text-decoration:none;
  102. -webkit-transition: all 0.4s;
  103. -moz-transition: all 0.4s;
  104. -ms-transition: all 0.4s;
  105. -o-transition: all 0.4s;
  106. transition: all 0.4s;
  107. }
  108.  
  109. a:hover {
  110. color: var(--accent);
  111. -webkit-transition: all 0.4s;
  112. -moz-transition: all 0.4s;
  113. -ms-transition: all 0.4s;
  114. -o-transition: all 0.4s;
  115. transition: all 0.4s;
  116. }
  117.  
  118. p {margin-top: 1.2em;}
  119.  
  120. h2 {font-size:1.1em;letter-spacing:1px;margin:10px 0 -10px 0;color:var(--title);}
  121.  
  122. small {font-size: 0.9em;}
  123. big {font-size: 1.1em;}
  124. b, bold, strong {color: var(--title);}
  125.  
  126. blockquote {
  127. padding: 0 0 0 1em;
  128. border-left: 1px solid var(--borders);
  129. margin: 1em 0 1em 1em;
  130. }
  131.  
  132. li {list-style-type:circle;}
  133. li::marker {color:var(--accent);}
  134.  
  135. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  136. z-index: 999999999!important;
  137. opacity:0;
  138. -webkit-transition: all 0.5s;
  139. -moz-transition: all 0.5s;
  140. -ms-transition: all 0.5s;
  141. -o-transition: all 0.5s;
  142. transition: all 0.5s;
  143. }
  144.  
  145. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  146. opacity:1;
  147. -webkit-transition: all 0.5s;
  148. -moz-transition: all 0.5s;
  149. -ms-transition: all 0.5s;
  150. -o-transition: all 0.5s;
  151. transition: all 0.5s;
  152. }
  153.  
  154. /*----- TOP NAVIGATION -----*/
  155.  
  156. header {
  157. position: fixed;
  158. text-align:center;
  159. background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  160. padding-top:1em;
  161. padding-bottom:.5em;
  162. width: 100%;
  163. height:40px;
  164. left: 0;
  165. right: 0;
  166. top: 0;
  167. z-index: 99999999;
  168. }
  169.  
  170. header nav {
  171. display:flex; justify-content:center;
  172. }
  173.  
  174. header nav a {margin:0 1em 0 1em;}
  175.  
  176. header nav i {
  177. color:var(--gradient-text);
  178. padding:5px;
  179. border-radius:100%;
  180. font-size:1.5em;
  181. text-shadow:var(--text-shadow);
  182. -webkit-transition: all 0.4s;
  183. -moz-transition: all 0.4s;
  184. -ms-transition: all 0.4s;
  185. -o-transition: all 0.4s;
  186. transition: all 0.4s;
  187. }
  188.  
  189. header nav i:hover {
  190. color:var(--accent);
  191. -webkit-transition: all 0.4s;
  192. -moz-transition: all 0.4s;
  193. -ms-transition: all 0.4s;
  194. -o-transition: all 0.4s;
  195. transition: all 0.4s;
  196. }
  197.  
  198. /*----- BASICS -----*/
  199.  
  200. .subtitle {
  201. text-align:center;
  202. margin-bottom:1em;
  203. font-size:1.3em;
  204. color:var(--title);
  205. font-weight:bold;
  206. }
  207.  
  208. /*----- CONTENT -----*/
  209.  
  210. #content {
  211. position:relative;
  212. width:800px;
  213. margin:auto;
  214. }
  215.  
  216. .about-wrap {margin:1em;}
  217. .about-wrap:first-of-type {margin-top:100px;}
  218. .about-wrap:last-of-type {margin-bottom:100px;}
  219.  
  220. .about {
  221. display:flex;
  222. justify-content:space-between;
  223. align-items:center;
  224. }
  225.  
  226. .about #text {
  227. width:60%;
  228. height:150px;
  229. padding:1em;
  230. display:flex;
  231. justify-content:space-between;
  232. flex-wrap:wrap;
  233. background:linear-gradient(to top right, var(--gradient-one), var(--gradient-two));
  234. border-radius:var(--border-radius);
  235. box-shadow:1px 1px 5px 1px var(--shadow);
  236. }
  237.  
  238. .about #text li {
  239. margin:.5em;
  240. list-style-type:none;
  241. width:36%;
  242. }
  243.  
  244. .about #text i {
  245. font-size:1.3em;
  246. padding:8px;
  247. text-shadow:var(--text-shadow);
  248. border-radius:var(--border-radius);
  249. background:rgba(255,255,255,.1);
  250. color:var(--accent);
  251. }
  252.  
  253. .about #text span {
  254. display:inline-block;
  255. vertical-align:top;
  256. margin-top:5px;
  257. margin-left:.5em;
  258. color:var(--gradient-text);
  259. }
  260.  
  261. .about #abt-img {
  262. width:40%;
  263. height:150px;
  264. margin-right:1em;
  265. padding:1em;
  266. background:var(--content-background);
  267. border-radius:var(--border-radius);
  268. display:flex;
  269. flex-wrap:nowrap;
  270. justify-content:flex-start;
  271. align-items:center;
  272. box-shadow:1px 1px 5px 1px var(--shadow);
  273. }
  274.  
  275. #abt-img img{
  276. width:100px;
  277. height:100px;
  278. object-fit:cover;
  279. border-radius:100%;
  280. padding:4px;
  281. background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  282. }
  283.  
  284. #abt-img .txt {
  285. margin-left:1em;
  286. }
  287.  
  288. #abt-img li {
  289. color:var(--accent);
  290. list-style-type:none;
  291. font-size:.9em;
  292. }
  293.  
  294. #abt-img li b {
  295. font-weight:bold;
  296. color:var(--title);
  297. font-size:1.3em;
  298. }
  299.  
  300. .bio {
  301. padding:1.5em;
  302. letter-spacing:.1em;
  303. color:var(--text);
  304. border-radius:var(--border-radius);
  305. background:var(--content-background);
  306. box-shadow:1px 1px 5px 1px var(--shadow);
  307. }
  308.  
  309. .bio p:last-of-type {margin-bottom:0;}
  310.  
  311. .bio a {
  312. display: inline-block;
  313. position: relative;
  314. border-bottom:2px solid var(--borders);
  315. }
  316.  
  317. .bio a:after {
  318. content: '';
  319. position: absolute;
  320. width: 100%;
  321. transform: scaleX(0);
  322. height: 2px;
  323. bottom: -2px;
  324. left: 0;
  325. background: linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  326. transform-origin: bottom right;
  327. transition: transform 0.25s ease-out;
  328. }
  329.  
  330. .bio a:hover:after {
  331. transform: scaleX(1);
  332. transform-origin: bottom left;
  333. }
  334.  
  335. .favs {
  336. display:flex;
  337. justify-content:space-between;
  338. padding:1em;
  339. color:var(--text);
  340. border-radius:var(--border-radius);
  341. background:var(--content-background);
  342. box-shadow:1px 1px 5px 1px var(--shadow);
  343. }
  344.  
  345. .favs .subtitle {
  346. padding:8px;
  347. color:var(--gradient-text);
  348. border-radius:var(--border-radius);
  349. background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  350. text-align:center;
  351. }
  352.  
  353. .favs .subtitle i {
  354. font-size:1.1em;
  355. padding:8px;
  356. text-shadow:var(--text-shadow);
  357. color:var(--accent);
  358. }
  359.  
  360. .favs .subtitle span {
  361. font-size:.9em;
  362. display:inline-block;
  363. vertical-align:top;
  364. margin-top:7px;
  365. font-weight:normal;
  366. }
  367.  
  368. .favs #ftext {padding:.5em;}
  369. .favs #ftext li {display:inline-block;}
  370. .favs #ftext li:not(:last-child):after {
  371. content:'•';
  372. color:var(--accent);
  373. padding:0 .5em 0 .5em;
  374. }
  375.  
  376. .likes, .dislikes {
  377. width:50%;
  378. padding:10px;
  379. }
  380.  
  381. .elsewhere {
  382. padding:1em;
  383. border-radius:var(--border-radius);
  384. background:var(--content-background);
  385. box-shadow:1px 1px 5px 1px var(--shadow);
  386. }
  387.  
  388. .blog-wrap {
  389. display:flex;
  390. justify-content:space-evenly;
  391. flex-wrap:wrap;
  392. }
  393.  
  394. .blog {
  395. margin:.5em;
  396. }
  397.  
  398. .blog img {
  399. width:50px;
  400. height:50px;
  401. border-radius:100%;
  402. padding:2px;
  403. background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  404. }
  405.  
  406. #blog-desc {
  407. display:inline-block;
  408. vertical-align:top;
  409. margin-left:.5em;
  410. margin-top:.3em;
  411. }
  412.  
  413. .blog a:hover #blog-desc b {
  414. color:var(--accent);
  415. -webkit-transition: all 0.4s;
  416. -moz-transition: all 0.4s;
  417. -ms-transition: all 0.4s;
  418. -o-transition: all 0.4s;
  419. transition: all 0.4s;
  420. }
  421.  
  422. .blog a:hover #blog-sub {
  423. color:var(--title);
  424. -webkit-transition: all 0.4s;
  425. -moz-transition: all 0.4s;
  426. -ms-transition: all 0.4s;
  427. -o-transition: all 0.4s;
  428. transition: all 0.4s;
  429. }
  430.  
  431. #blog-desc b {
  432. font-size:1.05em;
  433. -webkit-transition: all 0.4s;
  434. -moz-transition: all 0.4s;
  435. -ms-transition: all 0.4s;
  436. -o-transition: all 0.4s;
  437. transition: all 0.4s;
  438. }
  439.  
  440. #blog-sub {
  441. font-size:.9em;
  442. margin-left:.2em;
  443. color:var(--accent);
  444. -webkit-transition: all 0.4s;
  445. -moz-transition: all 0.4s;
  446. -ms-transition: all 0.4s;
  447. -o-transition: all 0.4s;
  448. transition: all 0.4s;
  449. }
  450.  
  451. .social-wrap {
  452. display:flex;
  453. justify-content:space-evenly;
  454. flex-wrap:wrap;
  455. margin-top:1em;
  456. }
  457.  
  458. .social {
  459. margin:.5em;
  460. }
  461.  
  462. .social i {
  463. font-size:1.4em;
  464. color:var(--gradient-text);
  465. text-shadow:var(--text-shadow);
  466. padding:8px;
  467. border-radius:var(--border-radius);
  468. background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  469. -webkit-transition: all 0.4s;
  470. -moz-transition: all 0.4s;
  471. -ms-transition: all 0.4s;
  472. -o-transition: all 0.4s;
  473. transition: all 0.4s;
  474. }
  475.  
  476. .social i:hover {color:var(--accent);
  477. -webkit-transition: all 0.4s;
  478. -moz-transition: all 0.4s;
  479. -ms-transition: all 0.4s;
  480. -o-transition: all 0.4s;
  481. transition: all 0.4s;}
  482.  
  483. /*--- RESPONSIVENESS ----*/
  484.  
  485. @media only screen and (max-width: 1100px) {
  486. .tmblr-iframe-compact .tmblr-iframe--unified-controls {display:none;}
  487. }
  488.  
  489. @media only screen and (max-width: 850px) {
  490.  
  491. #content {margin:100px auto; width:90%;}
  492.  
  493. .about {justify-content:space-evenly; flex-wrap:wrap;}
  494. .about #abt-img {width:100%; margin-bottom:1em; height:auto; margin-right:0;justify-content:center;}
  495. .about #text {width:100%; height:auto;}
  496.  
  497. .tmblr-iframe-compact .tmblr-iframe--unified-controls {display:none;}
  498.  
  499. }
  500.  
  501. @media only screen and (max-width:450px) {
  502.  
  503. #content {width:100%;}
  504.  
  505. .about #text li {width:100%;}
  506.  
  507. .favs .subtitle span {display:none;}
  508. .favs #ftext li {display:block;}
  509. .favs #ftext li:not(:last-child):after {display:none;}
  510. .favs #ftext li:before {
  511. content:'•';
  512. color:var(--accent);
  513. padding:0 .5em 0 .5em;
  514. }
  515.  
  516. .blog-wrap {justify-content:flex-start;}
  517.  
  518. }
  519.  
  520. </style>
  521. </head>
  522. <body>
  523.  
  524. <!---- EDIT HERE ---->
  525.  
  526. <!---- HEADER ---->
  527. <header>
  528. <nav>
  529. <a title="home" href="/"><i class="ph-house-fill"></i></a>
  530. <a title="contact" href="/ask"><i class="ph-chats-circle-fill"></i></a>
  531. <a title="link 1 title" href="/"><i class="ph-sparkle-fill"></i></a>
  532. <a title="link 2 title" href="/"><i class="ph-planet-fill"></i></a>
  533. <a title="link 3 title" href="/"><i class="ph-moon-stars-fill"></i></a>
  534. <!---- CREDIT: DO NOT TOUCH ---->
  535. <a title="page by sage" href="https://demontimes.tumblr.com/"><i class="ph-ghost-fill"></i></a>
  536. </nav>
  537. </header>
  538.  
  539. <!--- main content --->
  540. <div id="content">
  541.  
  542. <div class="about-wrap">
  543. <div class="about">
  544. <!--- by default this section will show your blog's avatar, title, and url --->
  545. <div id="abt-img">
  546. <img src="{portraiturl-128}">
  547. <div class="txt">
  548. <li><b>{title}</b></li>
  549. <li>@{name}</li>
  550. </div>
  551. </div>
  552.  
  553. <div id="text">
  554. <!--- feel free to change the icons! when you change the text make sure the <span> stays in place --->
  555. <li><i class="ph-user"></i><span>name</span></li>
  556. <li><i class="ph-heart"></i><span>sexuality</span></li>
  557. <li><i class="ph-leaf"></i><span>pronouns</span></li>
  558. <li><i class="ph-sun"></i><span>zodiac</span></li>
  559. <li><i class="ph-cake"></i><span>age</span></li>
  560. <li><i class="ph-map-pin"></i><span>location</span></li>
  561. </div>
  562. </div>
  563. </div>
  564.  
  565. <div class="about-wrap">
  566. <!--- put your bio/description below --->
  567. <div class="bio"><div class="subtitle">about me</div>
  568. description goes here! <b>bold text</b>. <a href="/">link</a>. <b><a href="/">bold link</a></b>.
  569. <p>paragraph break</p>
  570. <blockquote>blockquote</blockquote>
  571. <li>here</li>
  572. <li>is</li>
  573. <li>a list</li>
  574. </div>
  575. </div>
  576.  
  577. <div class="about-wrap">
  578. <div class="favs">
  579. <!--- likes and dislikes go below, format: <li>like text here</li> --->
  580. <div class="likes"><div class="subtitle"><i class="ph-thumbs-up"></i><span>likes</span></div>
  581. <div id="ftext">
  582. <li>like</li> <li>like</li> <li>like</li> <li>like</li> <li>like</li></div>
  583. </div>
  584. <div class="dislikes"><div class="subtitle"><i class="ph-thumbs-down"></i><span>dislikes</span></div>
  585. <div id="ftext">
  586. <li>dislike</li> <li>dislike</li> <li>dislike</li> <li>dislike</li>
  587. </div>
  588. </div>
  589. </div>
  590. </div>
  591.  
  592. <div class="about-wrap">
  593. <div class="elsewhere"><div class="subtitle">elsewhere</div>
  594. <!--- other blogs and social links go below
  595.  
  596. BLOG FORMAT:
  597. *change the content with brackets*
  598.  
  599. <div class="blog"><img src="https://api.tumblr.com/v2/blog/{blogurl}.tumblr.com/avatar">
  600. <a href="https://{blogurl}.tumblr.com">
  601. <div id="blog-desc"><b>@{blogurl}</b>
  602. <div id="blog-sub">{blog description}</div></div>
  603. </a>
  604. </div>
  605. --->
  606. <div class="blog-wrap">
  607.  
  608. <div class="blog"><img src="https://api.tumblr.com/v2/blog/demontimes.tumblr.com/avatar">
  609. <a href="https://blogurl.tumblr.com">
  610. <div id="blog-desc"><b>@blogname</b>
  611. <div id="blog-sub">blog description</div></div>
  612. </a>
  613. </div>
  614.  
  615. <div class="blog"><img src="https://api.tumblr.com/v2/blog/demontimes.tumblr.com/avatar">
  616. <a href="https://blogurl.tumblr.com">
  617. <div id="blog-desc"><b>@blogname</b>
  618. <div id="blog-sub">blog description</div></div>
  619. </a>
  620. </div>
  621.  
  622. <div class="blog"><img src="https://api.tumblr.com/v2/blog/demontimes.tumblr.com/avatar">
  623. <a href="https://blogurl.tumblr.com">
  624. <div id="blog-desc"><b>@blogname</b>
  625. <div id="blog-sub">blog description</div></div>
  626. </a>
  627. </div>
  628.  
  629. </div>
  630.  
  631. <div class="social-wrap">
  632.  
  633. <div class="social"><a title="ko-fi" href="https://ko-fi.com/"><i class="ph-coffee-fill"></i></a></div>
  634.  
  635. <div class="social"><a title="twitter" href="https://twitter.com/"><i class="ph-twitter-logo-fill"></i></a></div>
  636.  
  637. <div class="social"><a title="discord" href="/"><i class="ph-discord-logo-fill"></i></a></div>
  638.  
  639. <div class="social"><a title="instagram" href="https://instagram.com/"><i class="ph-instagram-logo-fill"></i></a></div>
  640.  
  641. <div class="social"><a title="snapchat" href="/"><i class="ph-snapchat-logo-fill"></i></a></div>
  642.  
  643. </div>
  644.  
  645. </div>
  646. </div>
  647.  
  648.  
  649. </div>
  650.  
  651.  
  652. <script>
  653.  
  654. // tooltips
  655.  
  656. tippy('[title]', {
  657. theme: 'custom',
  658. arrow: false,
  659. followCursor: true,
  660. delay: 100,
  661. placement: 'top',
  662. zIndex: 9999999999,
  663. maxWidth: 400,
  664.  
  665. content(reference) {
  666. const title = reference.getAttribute('title');
  667. reference.removeAttribute('title');
  668. return title;
  669. },
  670. });
  671.  
  672. </script>
  673.  
  674.  
  675. </body>
  676. </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!