API tools faq
paste
nicolas-sage

page 03: cotton candy about

nicolas-sage
Jan 25th, 2022 (edited)
1,102
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.65 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. cotton candy about by SAGE / https://demontimes.tumblr.com
  12.  
  13. - 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. <script src="https://unpkg.com/phosphor-icons@1.4.1"></script>
  31.  
  32. <!---- TOOLTIPS ---->
  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: #eee;
  45. --content-background: #f4f4f4;
  46. --text: #7b7b7b;
  47. --link: #df7cb7;
  48. --accent: #c67ca8;
  49. --title: #e2a3c9;
  50. --borders: #dadada;
  51.  
  52. /*--- FONTS ---*/
  53. --body-font: 'Karla';
  54. --font-size: 15px
  55. }
  56.  
  57. /*----- TOOLTIPS -----*/
  58.  
  59. .tippy-tooltip.custom-theme {
  60. background-color: var(--title);
  61. color: var(--background);
  62. font-weight: bold;
  63. text-align: center;
  64. text-transform: uppercase;
  65. letter-spacing:.2em;
  66. font-size: 0.8em;
  67. border-radius:5px;
  68. border:1px solid var(--borders);
  69. margin: 5px 0;
  70. }
  71.  
  72. /*---- SCROLLBAR ----- */
  73. ::-webkit-scrollbar {
  74. width: 10px;
  75. height: 10px;
  76. background-color: var(--content-background);
  77. }
  78.  
  79. ::-webkit-scrollbar-track {
  80. background-color: var(--content-background);
  81. border-radius: 5px;}
  82.  
  83. ::-webkit-scrollbar-thumb {
  84. background-color: var(--accent);
  85. min-height: 35px;
  86. min-width: 35px;
  87. border-radius: 5px;
  88. }
  89.  
  90. body {
  91. font-family: var(--body-font), sans-serif;
  92. font-size: var(--font-size);
  93. color: var(--text);
  94. background-color: var(--background);
  95. line-height: 160%;
  96. letter-spacing: 0.2px;
  97. word-wrap: break-word;
  98. }
  99.  
  100. a {
  101. color: var(--link);
  102. text-decoration:none;
  103. -webkit-transition: all 0.4s;
  104. -moz-transition: all 0.4s;
  105. -ms-transition: all 0.4s;
  106. -o-transition: all 0.4s;
  107. transition: all 0.4s;
  108. }
  109.  
  110. a:hover {
  111. color: var(--accent);
  112. -webkit-transition: all 0.4s;
  113. -moz-transition: all 0.4s;
  114. -ms-transition: all 0.4s;
  115. -o-transition: all 0.4s;
  116. transition: all 0.4s;
  117. }
  118.  
  119. p {margin-top: 1.2em;}
  120.  
  121. h2 {font-size:1.1em;letter-spacing:1px;color:var(--title);}
  122.  
  123. small {font-size: 0.9em;}
  124. big {font-size: 1.1em;}
  125. b, bold, strong {color: var(--title);}
  126.  
  127. blockquote {
  128. padding: 0 0 0 1em;
  129. border-left: 1px solid var(--borders);
  130. margin: 1em 0 1em 1em;
  131. }
  132.  
  133. li {list-style-type:circle;}
  134. li::marker {color:var(--accent);}
  135.  
  136. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  137. z-index: 999999999!important;
  138. opacity:0;
  139. -webkit-transition: all 0.5s;
  140. -moz-transition: all 0.5s;
  141. -ms-transition: all 0.5s;
  142. -o-transition: all 0.5s;
  143. transition: all 0.5s;
  144. }
  145.  
  146. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  147. opacity:1;
  148. -webkit-transition: all 0.5s;
  149. -moz-transition: all 0.5s;
  150. -ms-transition: all 0.5s;
  151. -o-transition: all 0.5s;
  152. transition: all 0.5s;
  153. }
  154.  
  155. /*---- SIDE LINKS ----*/
  156.  
  157. #side-links {
  158. position:fixed;
  159. height:100vh;
  160. width:60px;
  161. background:var(--background);
  162. border-right:1px solid var(--borders);
  163. left: 0;
  164. right: 0;
  165. top: 0;
  166. z-index:10000000000000000000001;
  167. }
  168.  
  169. #side-links img {
  170. position:fixed;
  171. top:20px;
  172. left:9px;
  173. border-radius:100%;
  174. width:35px;
  175. height:35px;
  176. padding:2px;
  177. background:var(--title);
  178. border:1px solid var(--borders);
  179. }
  180.  
  181. #side-links nav {
  182. transform:translateY(-50%);
  183. margin-top:50vh;
  184. }
  185.  
  186. #side-links nav i {
  187. font-size:1.2em;
  188. color:var(--background);
  189. background:var(--accent);
  190. padding:8px;
  191. border-radius:30px;
  192. margin:10px;
  193. border:1px solid var(--borders);
  194. -webkit-transition: all 0.4s;
  195. -moz-transition: all 0.4s;
  196. -ms-transition: all 0.4s;
  197. -o-transition: all 0.4s;
  198. transition: all 0.4s;
  199. }
  200.  
  201. #side-links nav i:hover {
  202. color:var(--accent);
  203. background:var(--background);
  204. -webkit-transition: all 0.4s;
  205. -moz-transition: all 0.4s;
  206. -ms-transition: all 0.4s;
  207. -o-transition: all 0.4s;
  208. transition: all 0.4s;
  209. }
  210.  
  211. #side-links .nav-cr {
  212. position:fixed;
  213. bottom:10px;
  214. }
  215.  
  216. .nav-cr i {
  217. font-size:1.2em;
  218. color:var(--background);
  219. background:var(--title);
  220. padding:8px;
  221. border-radius:30px;
  222. margin:10px;
  223. border:1px solid var(--borders);
  224. -webkit-transition: all 0.4s;
  225. -moz-transition: all 0.4s;
  226. -ms-transition: all 0.4s;
  227. -o-transition: all 0.4s;
  228. transition: all 0.4s;
  229. }
  230.  
  231. .nav-cr i:hover {
  232. color:var(--title);
  233. background:var(--background);
  234. -webkit-transition: all 0.4s;
  235. -moz-transition: all 0.4s;
  236. -ms-transition: all 0.4s;
  237. -o-transition: all 0.4s;
  238. transition: all 0.4s;
  239. }
  240.  
  241. /*----- CONTENT -----*/
  242.  
  243. #content {
  244. position:relative;
  245. margin-left:75px;
  246. margin-bottom:50px;
  247. margin-top:50px;
  248. padding-bottom:20px;
  249. display:flex;
  250. justify-content:center;
  251. flex-wrap:wrap;
  252. align-items:center
  253. }
  254.  
  255. #info-wrap {
  256. width:900px;
  257. display:flex;
  258. flex-wrap:wrap;
  259. justify-content:center;
  260. border-radius:5px;
  261. background:var(--content-background);
  262. border:1px solid var(--borders);
  263. }
  264.  
  265. #info {
  266. width:550px;
  267. padding:20px;
  268. }
  269.  
  270. #info-short {
  271. width:250px;
  272. padding:20px;
  273. }
  274.  
  275. #info-med {
  276. width:450px;
  277. padding:20px;
  278. }
  279.  
  280. #info-long {
  281. width:100%;
  282. padding:20px;
  283. }
  284.  
  285. .top-wrap {
  286. width:100%;
  287. display:flex;
  288. justify-content:space-evenly;
  289. border-bottom:1px solid var(--borders);
  290. }
  291.  
  292. .bottom-wrap {
  293. width:100%;
  294. display:flex;
  295. justify-content:space-evenly;
  296. border-bottom:1px solid var(--borders);
  297. }
  298.  
  299. /*---- STATS ---*/
  300.  
  301. .stats {
  302. display:flex;
  303. justify-content:space-evenly;
  304. flex-wrap:wrap;
  305. align-items:center;
  306. }
  307.  
  308. .stats li {
  309. width:45%;
  310. list-style-type:none;
  311. text-align:center;
  312. padding:10px;
  313. }
  314.  
  315. .stats i {
  316. color:var(--title);
  317. background:var(--background);
  318. border:1px solid var(--borders);
  319. padding:5px;
  320. border-radius:100%;
  321. font-size:1.2em;
  322. }
  323.  
  324. .stats .features {
  325. padding-top:5px;
  326. color:var(--text);
  327. font-weight:normal;
  328. letter-spacing:.05em;
  329. }
  330.  
  331. /*---- IMAGE ---*/
  332.  
  333. #aboutimg {
  334. width:250px;
  335. height:250px;
  336. }
  337.  
  338. #aboutimg img {
  339. border-radius:5px;
  340. width:250px;
  341. height:250px;
  342. object-fit:cover;
  343. }
  344.  
  345. /*--- DESCRIPTION ---*/
  346.  
  347. #abt-text {
  348. text-align:left;
  349. margin:1em;
  350. }
  351.  
  352. #abt-text a {
  353. border-bottom:2px solid var(--borders);
  354. -webkit-transition: all 0.4s;
  355. -moz-transition: all 0.4s;
  356. -ms-transition: all 0.4s;
  357. -o-transition: all 0.4s;
  358. transition: all 0.4s;
  359. }
  360.  
  361. #abt-text a:hover {
  362. border-bottom:2px solid var(--link);
  363. -webkit-transition: all 0.4s;
  364. -moz-transition: all 0.4s;
  365. -ms-transition: all 0.4s;
  366. -o-transition: all 0.4s;
  367. transition: all 0.4s;
  368. }
  369.  
  370. /*---- ELSEWHERE ----*/
  371.  
  372. #blogs {
  373. display:flex;
  374. justify-content:space-evenly;
  375. align-items:center;
  376. flex-wrap:wrap;
  377. padding:1em 1em 0 1em;
  378. }
  379.  
  380. .blog-wrap {
  381. margin:.5em;
  382. }
  383.  
  384. #blogs img {
  385. border-radius:100%;
  386. width:45px;
  387. height:45px;
  388. padding:3px;
  389. margin:0 .3em 1em .3em;
  390. background:var(--accent);
  391. }
  392.  
  393. .blog-info {
  394. display:inline-block;
  395. vertical-align:top;
  396. }
  397.  
  398. #blogs .blogtitle {
  399. font-size:1.1em;
  400. font-weight:bold;
  401. }
  402.  
  403. #blogs .blogtitle a {
  404. color:var(--title);
  405. }
  406.  
  407. #blogs .blogtitle a:hover {
  408. color:var(--accent);
  409. }
  410.  
  411. #blogs .blogsub {
  412. font-size:.9em;
  413. margin-left:5px;
  414. }
  415.  
  416. .socials {
  417. display:flex;
  418. justify-content:space-evenly;
  419. align-items:center;
  420. flex-wrap:wrap;
  421. width:100%;
  422. }
  423.  
  424. .socials i {
  425. font-size:1.2em;
  426. padding:8px;
  427. margin:.5em;
  428. border-radius:100%;
  429. background:var(--link);
  430. color:var(--content-background);
  431. border:1px solid var(--borders);
  432. -webkit-transition: all 0.4s;
  433. -moz-transition: all 0.4s;
  434. -ms-transition: all 0.4s;
  435. -o-transition: all 0.4s;
  436. transition: all 0.4s;
  437. }
  438.  
  439. .socials i:hover {
  440. background:var(--content-background);
  441. color:var(--accent);
  442. -webkit-transition: all 0.4s;
  443. -moz-transition: all 0.4s;
  444. -ms-transition: all 0.4s;
  445. -o-transition: all 0.4s;
  446. transition: all 0.4s;
  447. }
  448.  
  449. /*---- LIKES / DISLIKES ----*/
  450.  
  451. #favs {
  452. display:flex;
  453. justify-content:flex-start;
  454. }
  455.  
  456. .likes, .dislikes {
  457. width:50%;
  458. }
  459.  
  460. .likes li, .dislikes li {
  461. list-style-type:none;
  462. margin-bottom:.5em;
  463. }
  464.  
  465. .likes i, .dislikes i {
  466. color:var(--title);
  467. padding:6px;
  468. border-radius:100%;
  469. font-size:1.3em;
  470. }
  471.  
  472. .likes b, .dislikes b {
  473. font-weight:normal;
  474. display:inline-block;
  475. vertical-align:top;
  476. color:var(--text);
  477. letter-spacing:1px;
  478. margin-top:4px;
  479. }
  480.  
  481. .like-text, .dislike-text {
  482. padding:10px;
  483. }
  484.  
  485. /*---- RESPONSIVENESS ----*/
  486.  
  487. @media only screen and (max-width: 900px) {
  488.  
  489. .tmblr-iframe-compact .tmblr-iframe--unified-controls {display:none;}
  490.  
  491. #content {margin:1em 1em 1em 75px;}
  492.  
  493. #info, #info-short, #info-med, #info-long {width:100%;}
  494.  
  495. .like-text, .dislike-text {text-align:center;}
  496.  
  497. .top-wrap, .bottom-wrap {flex-wrap:wrap;justify-content:center;}
  498.  
  499. #aboutimg {display:none;}
  500.  
  501. #abt-text {text-align:center;}
  502. }
  503.  
  504. @media only screen and (max-width: 450px) {
  505.  
  506. #content {margin:auto;}
  507. #side-links {display:none;}
  508.  
  509. tumblr_controls, .tmblr-iframe{display:none!important;}
  510. }
  511.  
  512. </style>
  513. </head>
  514. <body>
  515.  
  516. <!---- EDIT HERE --->
  517.  
  518. <!--- SIDEBAR --->
  519.  
  520. <div id="side-links">
  521. <img src="{portraiturl-64}">
  522. <nav>
  523. <a title="home" href="/"><i class="ph-house"></i></a>
  524. <a title="message" href="/ask"><i class="ph-chat-circle"></i></a>
  525. <a title="link 1" href="/"><i class="ph-flower"></i></a>
  526. <a title="link 2" href="/"><i class="ph-flower-lotus"></i></a>
  527. <a title="link 3" href="/"><i class="ph-sparkle"></i></a>
  528. <a title="link 4" href="/"><i class="ph-butterfly"></i></a>
  529. </nav>
  530. <!-- CREDIT: DON'T TOUCH -->
  531. <div class="nav-cr">
  532. <a title="page by sage" href="https://demontimes.tumblr.com"><i class="ph-ghost"></i></a>
  533. </div>
  534. </div>
  535.  
  536. <!--- main content --->
  537. <div id="content">
  538. <div id="info-wrap">
  539.  
  540. <div class="top-wrap">
  541.  
  542. <!--- edit info stats ---->
  543.  
  544. <div id="info">
  545. <div class="stats">
  546. <li><i class="ph-user"></i>
  547. <div class="features">name</div>
  548. </li>
  549. <li><i class="ph-cake"></i>
  550. <div class="features">age</div>
  551. </li>
  552. <li><i class="ph-leaf"></i>
  553. <div class="features">pronouns</div>
  554. </li>
  555. <li><i class="ph-rainbow"></i>
  556. <div class="features">sexuality</div>
  557. </li>
  558. <li><i class="ph-flower-lotus"></i>
  559. <div class="features">ethnicity</div>
  560. </li>
  561. <li><i class="ph-map-pin"></i>
  562. <div class="features">location</div>
  563. </li>
  564. </div>
  565. </div>
  566.  
  567. <!--- put your image link below --->
  568.  
  569. <div id="info-short">
  570. <div id="aboutimg">
  571. <img src="https://64.media.tumblr.com/cf1546738f41e67c4ba40d9837cb20ef/fbacb4b633580cf6-bc/s500x750/6b51e50f6fd70e25390a0c93b7658aa7db8e29c5.png">
  572. </div>
  573. </div>
  574.  
  575. </div>
  576.  
  577. <div class="bottom-wrap">
  578.  
  579. <!---- edit description --->
  580.  
  581. <div id="info">
  582. <div id="abt-text">
  583. description/bio goes here. <a href="/">link</a>. <b>bold text</b>. <b><a href="/">bold link</a></b>.
  584. </div>
  585. </div>
  586.  
  587. <div id="info-short">
  588. <div id="favs">
  589. <div class="likes">
  590.  
  591. <!---- edit likes / dislikes below
  592. - make sure they're wrapped in <b></b>
  593. - keep these short!
  594. ---->
  595.  
  596. <div class="like-text">
  597. <li><i class="ph-check-circle"></i> <b>like</b></li>
  598. <li><i class="ph-check-circle"></i> <b>like</b></li>
  599. <li><i class="ph-check-circle"></i> <b>like</b></li>
  600. </div>
  601. </div>
  602. <div class="dislikes">
  603. <div class="dislike-text">
  604. <li><i class="ph-x-circle"></i> <b>dislike</b></li>
  605. <li><i class="ph-x-circle"></i> <b>dislike</b></li>
  606. <li><i class="ph-x-circle"></i> <b>dislike</b></li>
  607. </div>
  608. </div>
  609. </div>
  610. </div>
  611.  
  612. </div>
  613.  
  614. <div id="info-long">
  615. <div id="blogs">
  616.  
  617. <!--- BLOGS FORMAT:
  618.  
  619. <div class="blog-wrap">
  620. <img src="https://api.tumblr.com/v2/blog/{blogurl}.tumblr.com/avatar">
  621. <div class="blog-info">
  622. <div class="blogtitle"><a href="https://{blogurl}.tumblr.com">@{blogurl}</a></div>
  623. <div class="blogsub">{blog description}</div>
  624. </div>
  625. </div>
  626.  
  627. - change all the info in {brackets}
  628. - in the examples below i'm using my blog icon as a placeholder, change it to your blogs' url!
  629. ---->
  630.  
  631. <div class="blog-wrap">
  632. <img src="https://api.tumblr.com/v2/blog/demontimes.tumblr.com/avatar">
  633. <div class="blog-info">
  634. <div class="blogtitle"><a href="https://blogurl.tumblr.com">@blogurl</a></div>
  635. <div class="blogsub">blog description</div>
  636. </div>
  637. </div>
  638.  
  639. <div class="blog-wrap">
  640. <img src="https://api.tumblr.com/v2/blog/demontimes.tumblr.com/avatar">
  641. <div class="blog-info">
  642. <div class="blogtitle"><a href="https://blogurl.tumblr.com">@blogurl</a></div>
  643. <div class="blogsub">blog description</div>
  644. </div>
  645. </div>
  646.  
  647. <div class="blog-wrap">
  648. <img src="https://api.tumblr.com/v2/blog/demontimes.tumblr.com/avatar">
  649. <div class="blog-info">
  650. <div class="blogtitle"><a href="https://blogurl.tumblr.com">@blogurl</a></div>
  651. <div class="blogsub">blog description</div>
  652. </div>
  653. </div>
  654.  
  655. <!---- edit socials --->
  656.  
  657. <div class="socials">
  658. <a title="twitter" href="/"><i class="ph-twitter-logo"></i></a>
  659. <a title="discord" href="/"><i class="ph-discord-logo"></i></a>
  660. <a title="instagram" href="/"><i class="ph-instagram-logo"></i></a>
  661. <a title="snapchat" href="/"><i class="ph-snapchat-logo"></i></a>
  662. <a title="pinterest" href="/"><i class="ph-pinterest-logo"></i></a>
  663. </div>
  664.  
  665. </div>
  666. </div>
  667.  
  668. </div>
  669. </div>
  670.  
  671.  
  672. <script>
  673.  
  674. // tooltips
  675.  
  676. tippy('[title]', {
  677. theme: 'custom',
  678. arrow: false,
  679. followCursor: true,
  680. delay: 100,
  681. placement: 'top',
  682. zIndex: 9999999999,
  683. maxWidth: 400,
  684.  
  685. content(reference) {
  686. const title = reference.getAttribute('title');
  687. reference.removeAttribute('title');
  688. return title;
  689. },
  690. });
  691.  
  692. </script>
  693.  
  694.  
  695. </body>
  696. </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!