API tools faq
paste
seiche

page seven: azalea

seiche
Jun 15th, 2021 (edited)
7,183
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.06 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>{Title} / About</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. <meta charset="utf-8">
  9. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.  
  11. <!---
  12.  
  13. AZALEA PAGE BY SEYCHE.TUMBLR.COM
  14.  
  15. CREDITS:
  16. -feathericons by Cole Bemis
  17. -icons by fontawesome
  18. -customizing audio player tutorial by johnny shi
  19. -tippy.js tooltips by atomiks
  20.  
  21. --->
  22.  
  23. <link rel="preconnect" href="https://fonts.gstatic.com">
  24. <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  25.  
  26. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  27.  
  28. <script src="https://unpkg.com/feather-icons"></script>
  29.  
  30. <script src="https://kit.fontawesome.com/6ac5c36b23.js"></script>
  31.  
  32. <style type="text/css">
  33.  
  34. /*----- VARIABLES: EDIT THIS SECTION!!!! -----*/
  35.  
  36. :root {
  37.  
  38. /*----- colours -----*/
  39.  
  40. --background: #191414;
  41. --content-background: #282828;
  42. --text: #c9c9c9;
  43. --links: #a0a0a0;
  44. --title: #fff;
  45. --borders: #4b4b4b;
  46. --accent-1: #f1a5c0;
  47. --accent-2: #f09769;
  48. --gradient-1: #facade;
  49. --gradient-2: #e8a989;
  50. --drop-shadow: #111;
  51.  
  52. --sidebar-text: #c9c9c9;
  53. --sidebar-icons: #fff;
  54. --sidebar-title: #fff;
  55.  
  56. --nav-links-text: #fff;
  57.  
  58. --footer-background: #212121;
  59. --footer-title: #fff;
  60. --footer-text: #c9c9c9;
  61. --footer-links: #a0a0a0;
  62. --search-background: #333;
  63.  
  64. /*----- font styling -----*/
  65.  
  66. --body-font: 'Nunito Sans', sans-serif;
  67. --font-size: 15px;
  68.  
  69. /*----- music player: change "block" to "none" to hide it -----*/
  70.  
  71. --music-player-visibility: block;
  72.  
  73. }
  74.  
  75. @keyframes lazyload {
  76. 0% {opacity: 0;}
  77. 100% {opacity: 1;}
  78. }
  79.  
  80. @-webkit-keyframes lazyload {
  81. 0% {opacity: 0;}
  82. 100% {opacity: 1;}
  83. }
  84.  
  85. @-moz-keyframes lazyload {
  86. 0% {opacity: 0;}
  87. 100% {opacity: 1;}
  88. }
  89.  
  90. @-o-keyframes lazyload {
  91. 0% {opacity: 0;}
  92. 100% {opacity: 1;}
  93. }
  94.  
  95. body {
  96. font-family: var(--body-font);
  97. font-size: var(--font-size);
  98. color: var(--text);
  99. background-color: var(--background);
  100. text-align: left;
  101. line-height: 160%;
  102. word-wrap: break-word;
  103. letter-spacing: 0.04em;
  104. margin: 0;
  105. padding: 0;
  106. overflow-x: hidden;
  107. -webkit-animation: lazyload 2s;
  108. -moz-animation: lazyload 2s;
  109. -o-animation: lazyload 2s;
  110. animation: lazyload 2s;
  111. }
  112.  
  113. </style>
  114.  
  115. <link rel="stylesheet" href="https://seyche.github.io/external-files-hosting/pages/azaleacss.css">
  116.  
  117. </head>
  118. <body>
  119.  
  120. <a href="/" title="return home" class="return"><svg xmlns="https://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></a>
  121.  
  122. <!----- CONTAINER ----->
  123.  
  124. <main>
  125.  
  126. <!----- ================================
  127.  
  128. USER STATS
  129.  
  130. ================================= ----->
  131.  
  132. <aside id="left-content">
  133. <div class="sidebar-section">
  134.  
  135. <!-----
  136.  
  137. START EDITING LEFT CONTENT HERE:
  138.  
  139. every stat looks like this:
  140.  
  141. <li>
  142. <i data-feather="user"></i>
  143. content
  144. </li>
  145.  
  146. copy and paste it as many times as you want and fill in the content. all icons (not just in this section, but throughout this page) are from https://feathericons.com/. if you want to change the icons, go to the site, find the name of the new icon you want, and put the name of the icon where it says data-feater="NAMEGOESHERE".
  147.  
  148. ----->
  149.  
  150. <div class="title">Info</div>
  151.  
  152. <li>
  153. <i data-feather="user"></i>
  154. name
  155. </li>
  156.  
  157. <li>
  158. <i data-feather="calendar"></i>
  159. age
  160. </li>
  161.  
  162. <li>
  163. <i data-feather="map-pin"></i>
  164. location
  165. </li>
  166.  
  167. <li>
  168. <i data-feather="user-check"></i>
  169. pronouns
  170. </li>
  171.  
  172. <!-- end of stats. any new stats must go above this line. -->
  173.  
  174. </div>
  175.  
  176. <!----- ================================
  177.  
  178. FAVOURITES
  179.  
  180. ================================= ----->
  181.  
  182. <div id="faves" class="sidebar-section">
  183.  
  184. <!-- START EDITING FAVES HERE. fill in the content just as you did with the content above -->
  185.  
  186. <div class="title">Favourites</div>
  187.  
  188. <li>
  189. <i data-feather="heart"></i>
  190. like
  191. </li>
  192.  
  193. <!-- end faves. any new faves must go above this line -->
  194.  
  195. </div>
  196.  
  197. </aside>
  198.  
  199. <!----- END LEFT CONTENT ----->
  200.  
  201. <!----- ================================
  202.  
  203. MAIN CONTENT
  204.  
  205. ================================= ----->
  206.  
  207. <section>
  208.  
  209. <article id="about">
  210.  
  211. <!----- ABOUT TITLE ----->
  212.  
  213. <div class="top-wrap">
  214.  
  215. <!--
  216. this is your blog icon. to replace it with a different image, replace {PortraitURL-128} with the image url of your new image
  217. -->
  218.  
  219. <img src="{PortraitURL-128}" alt="icon image">
  220.  
  221. <div class="align-flex">
  222. <div class="title-wrap">
  223. <div class="title">About</div>
  224. @{Name}
  225. </div>
  226. <i data-feather="heart"></i>
  227. </div>
  228.  
  229. </div>
  230.  
  231. <div class="padding">
  232.  
  233. <!-----
  234.  
  235. PUT YOUR MAIN CONTENT ABOUT YOURSELF HERE. don't forget to separate paragraphs with <p></p>, use <b></b> for bold, <i></i> for italics, and <u></u> for underlines.
  236.  
  237. ----->
  238.  
  239. <p>
  240. This is where you write stuff about yourself.
  241. </p>
  242.  
  243. <!-- all of your main about content needs to go above this line -->
  244.  
  245. </div>
  246.  
  247. </article>
  248.  
  249. <!----- END ABOUT SECTION ----->
  250.  
  251. <!----- ================================
  252.  
  253. NAVIGATION SECTION
  254.  
  255. ================================= ----->
  256.  
  257. <article class="links">
  258.  
  259. <!-- navigation title -->
  260.  
  261. <div class="title-wrap align-flex">
  262. <div class="title">Navigation</div>
  263. <i data-feather="list"></i>
  264. </div>
  265.  
  266. <!-----
  267.  
  268. ADDING LINKS:
  269. all new link sections MUST be wrapped with <nav></nav>. see below for exambples. use <div class="title"></div> for titles, and <div class="subtitle"></div> for subtitles.
  270. ----->
  271.  
  272. <!----- LINKS SECTION ONE ----->
  273.  
  274. <nav>
  275. <div class="title">Heading</div>
  276. <a href="URL-HERE">link</a>
  277. <a href="/">link</a>
  278. <div class="subtitle">Sub-heading</div>
  279. <a href="/">link</a>
  280. </nav>
  281.  
  282. <!----- LINKS SECTION TWO ----->
  283.  
  284. <nav>
  285. <div class="title">Heading</div>
  286. <a href="/">link</a>
  287. </nav>
  288.  
  289. <!-- all new link blocks must go above this line -->
  290.  
  291. </article>
  292.  
  293. <!----- END NAVIGATION SECTION ----->
  294.  
  295. </section>
  296.  
  297. <!----- END MAIN CONTENT ----->
  298.  
  299. <!----- ================================
  300.  
  301. RIGHT CONTENT
  302.  
  303. ================================= ----->
  304.  
  305. <aside id="right-content">
  306.  
  307. <!----- SOCIAL MEDIA ----->
  308.  
  309. <div id="social-links" class="sidebar-section">
  310.  
  311. <!--
  312. add new social media links here. you can use icons from feathericons OR the free version of https://fontawesome.com/icons?d=gallery&p=2. if you add font awesome icons, go to the site, click the icon you want, copy the icon HTML, and put it in the spots below. a social link looks like:
  313.  
  314. <li>
  315. <a href="/">
  316. <i data-feather="twitter"></i>
  317. @username
  318. </a>
  319. </li>
  320.  
  321. copy and paste that as many times as you need.
  322. -->
  323.  
  324. <div class="title">Social</div>
  325.  
  326. <li>
  327. <a href="https://url.com">
  328. <i data-feather="twitter"></i>
  329. @twitter
  330. </a>
  331. </li>
  332.  
  333. <li>
  334. <a href="/">
  335. <i data-feather="instagram"></i>
  336. @instagram
  337. </a>
  338. </li>
  339.  
  340. <li>
  341. <a href="/">
  342. <i class="fab fa-spotify"></i>
  343. @spotify
  344. </a>
  345. </li>
  346.  
  347. <!-- end social; any new social links must go above this line -->
  348.  
  349. </div>
  350.  
  351. <!----- SIDEBLOGS ----->
  352.  
  353. <div id="sideblogs" class="sidebar-section">
  354.  
  355. <div class="title">Sideblogs</div>
  356.  
  357. <!-- put as many sideblogs as you want below. if you don't want the image, delete it in the html below. -->
  358.  
  359. <li>
  360. <img src="https://via.placeholder.com/45x45.png">
  361. <a href="https://username.tumblr.com">
  362. <div class="subtitle">@username</div>
  363. description
  364. </a>
  365. </li>
  366.  
  367. <!-- any new sideblogs must go above this line -->
  368.  
  369. </div>
  370.  
  371. </aside>
  372.  
  373. <!----- END RIGHT CONTENT ----->
  374.  
  375. </main>
  376.  
  377. <!----- END MAIN CONTAINER ----->
  378.  
  379. <a href="https://seyche.tumblr.com" id="m" class="upper">azalea page by seyche</a>
  380.  
  381. <!----- ================================
  382.  
  383. FOOTER
  384.  
  385. ================================= ----->
  386.  
  387. <footer>
  388. <div id="footer-padding" class="align-flex">
  389.  
  390. <!----- SONG INFO ----->
  391.  
  392. <div class="player-wrap">
  393. <div class="song">
  394.  
  395. <!-- put your song art, title, and artist below: -->
  396.  
  397. <div class="song-art"><img src="https://via.placeholder.com/50x50.png" alt="album cover"></div>
  398. <div class="song-info">
  399. <div class="subtitle">Song Title</div>
  400. Artist
  401. </div>
  402.  
  403. </div>
  404. </div>
  405.  
  406. <!-- end of song info -->
  407.  
  408. <!----- AUDIO PLAYER AND HOME LINKS: you don't need to edit the links, just the player below ----->
  409.  
  410. <div id="pg">
  411. <a href="/" title="return home"><svg xmlns="https://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-repeat"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg></a>
  412.  
  413. <!----- ================================
  414.  
  415. AUDIO PLAYER: FOLLOW THE INSTRUCTIONS AT https://seyche.tumblr.com/addmusic. you need to add the audio URL on the audio element below in the src="URL-GOES-HERE" part.
  416.  
  417. ================================= ----->
  418.  
  419. <audio src="URL-GOES-HERE" controls="controls"></audio>
  420.  
  421. <!-- do not touch ANYTHING after here. STOP EDITING -->
  422.  
  423. <div class="player-controls">
  424. <div class="play-icon play-pause icon-play"></div>
  425. </div>
  426.  
  427. <a href="/random" title="random post"><svg xmlns="https://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shuffle"><polyline points="16 3 21 3 21 8"></polyline><line x1="4" y1="20" x2="21" y2="3"></line><polyline points="21 16 21 21 16 21"></polyline><line x1="15" y1="15" x2="21" y2="21"></line><line x1="4" y1="4" x2="9" y2="9"></line></svg></a>
  428. </div>
  429.  
  430. <!-- search bar -->
  431.  
  432. <div id="search-wrap" class="align-flex">
  433. <form action="/search" method="get" class="find" name="sform">
  434. <svg xmlns="https://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
  435. <input type="text" name="q" placeholder="Search" value="{SearchQuery}" value autocomplete="off"/>
  436. </form>
  437. <div id="hold"></div>
  438. </div>
  439.  
  440. </div>
  441. </footer>
  442.  
  443. <a href="https://seyche.tumblr.com" title="azalea page by seyche" id="k">&.</a>
  444.  
  445. <!----- END FOOTER ----->
  446.  
  447. <!----- TOOLTIPS ----->
  448.  
  449. <script src="https://unpkg.com/popper.js@1"></script>
  450. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  451.  
  452.  
  453. <!----- JQUERY ----->
  454.  
  455. <script>
  456. feather.replace()
  457.  
  458. $(document).ready(function(){
  459. var music = $('audio')[0];
  460.  
  461. $('.play-pause').click(function(){
  462. if (music.paused) {
  463. music.play();
  464. $('.play-pause').removeClass('icon-play');
  465. $('.play-pause').addClass('icon-pause');
  466. } else {
  467. music.pause();
  468. $('.play-pause').removeClass('icon-pause');
  469. $('.play-pause').addClass('icon-play');
  470. }
  471. });
  472.  
  473. music.onended = function(){
  474. $('.play-pause').removeClass('icon-pause');
  475. $('.play-pause').addClass('icon-play');
  476. };
  477. });
  478.  
  479. /// TOOLTIPS
  480.  
  481. tippy('[title]', {
  482. theme: 'custom',
  483. arrow: false,
  484. followCursor: true,
  485. delay: 100,
  486. placement: 'bottom-start',
  487. zIndex: 9999999999,
  488. maxWidth: 400,
  489.  
  490. content(reference) {
  491. const title = reference.getAttribute('title');
  492. reference.removeAttribute('title');
  493. return title;
  494. },
  495. });
  496.  
  497. </script>
  498.  
  499. </body>
  500. </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!