API tools faq
paste
Advertisement
mercurythms

betelgeuse (page)

mercurythms
Aug 10th, 2020 (edited)
550
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.51 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.  
  4. betelgeuse :: @mercurythms :: @freddie-mercurys
  5.  
  6. please don't remove credit or take parts of this code :)
  7.  
  8.  
  9. -->
  10.  
  11. <!DOCTYPE html>
  12. <head>
  13.  
  14. <title>{block:PostSummary}{PostSummary} : {/block:PostSummary}{Title}</title>
  15.  
  16. <link rel="shortcut icon" href="{favicon}">
  17.  
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19.  
  20. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  21.  
  22. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  23.  
  24. <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  25.  
  26. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i&display=swap" rel="stylesheet">
  27.  
  28. <style type="text/css">
  29.  
  30. /* change colors */
  31.  
  32. :root {
  33. --background: #fbfbfb;
  34. --text: #777777;
  35. --links: #bbbbbb;
  36. --links-hover: #cccccc;
  37. --container: #ffffff;
  38. --borders: #eeeeee;
  39. /* gradient accents */
  40. --accent: #BFB8CB;
  41. --accent-2: #8F87A8;
  42. --accent-text: #ffffff;
  43. }
  44.  
  45. /*tumblr controls*/
  46.  
  47. .iframe-controls--desktop {
  48. display:none;
  49. }
  50.  
  51. /*scrollbar*/
  52.  
  53. ::-webkit-scrollbar{
  54. height:11px;
  55. width:11px;
  56. background:inherit;
  57. }
  58.  
  59. ::-webkit-scrollbar-thumb {background: linear-gradient(to bottom right, var(--accent), var(--accent-2));}
  60.  
  61. ::-webkit-scrollbar-track {background:var(--borders);}
  62.  
  63. ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {border:4px solid var(--background); border-radius:5px;}
  64.  
  65. /*tooltips*/
  66.  
  67. .tippy-tooltip.custom-theme {
  68. background-color:var(--background);
  69. color:var(--accent);
  70. text-align: center;
  71. text-transform:lowercase;
  72. letter-spacing: 1px;
  73. border-radius: 0;
  74. padding: 0.25em;
  75. margin: 20px auto auto 10px;
  76. font-size: 1em;
  77. border: 1px solid var(--borders);
  78. }
  79.  
  80. /* main structure */
  81.  
  82. body {
  83. background:var(--background);
  84. color:var(--text);
  85. font:14px/1.5em Karla, sans-serif;
  86. letter-spacing:.5px;
  87. word-wrap:break-word;
  88. text-align:left;
  89. margin:0;
  90. opacity: 1;
  91. transition: 1s opacity;
  92. }
  93.  
  94. body.fade-out {
  95. opacity: 0;
  96. transition: none;
  97. }
  98.  
  99. a {
  100. color:var(--links);
  101. text-decoration:none;
  102. transition:all .3s linear;
  103. -webkit-transition:all .3s linear;
  104. -o-transition:all .3s linear;
  105. -moz-transition:all .3s linear;
  106. }
  107.  
  108. a:hover {
  109. color:var(--links-hover);
  110. text-decoration:none;
  111. }
  112.  
  113. blockquote {
  114. padding:.25em 0 .25em 15px;
  115. margin:.5em 0;
  116. border-left:1px solid var(--borders);
  117. }
  118.  
  119. /* container */
  120.  
  121. * {
  122. margin: 0;
  123. padding: 0;
  124. box-sizing: border-box;
  125. }
  126.  
  127. #container {
  128. display: flex;
  129. justify-content: center;
  130. align-items: center;
  131. min-height: 100vh;
  132. }
  133.  
  134. #carousel, #navigation {
  135. flex: initial;
  136. display: block;
  137. }
  138.  
  139. #carousel {
  140. overflow: hidden;
  141. width: 600px;
  142. height: 400px;
  143. border-radius: 0px;
  144. background-color: var(--container);
  145. }
  146.  
  147. .p-wrapper {
  148. position: relative;
  149. width: 100%;
  150. height: 100%;
  151. transition: transform 0.4s ease-in-out;
  152. }
  153.  
  154. #button_a:checked ~ #carousel .p-wrapper {
  155. -webkit-transform: translateY(0);
  156. transform: translateY(0);
  157. }
  158.  
  159. #button_b:checked ~ #carousel .p-wrapper {
  160. -webkit-transform: translateY(-100%);
  161. transform: translateY(-100%);
  162. }
  163.  
  164. #button_c:checked ~ #carousel .p-wrapper {
  165. -webkit-transform: translateY(-200%);
  166. transform: translateY(-200%);
  167. }
  168.  
  169. #button_d:checked ~ #carousel .p-wrapper {
  170. -webkit-transform: translateY(-300%);
  171. transform: translateY(-300%);
  172. }
  173.  
  174. [class^="panel_"] {
  175. overflow: auto;
  176. position: relative;
  177. width: inherit;
  178. height: inherit;
  179. padding:1em;
  180. }
  181.  
  182. #navigation {
  183. margin-right: 1em;
  184. }
  185.  
  186. [class^="label_a"],
  187. [class^="label_b"],
  188. [class^="label_c"],
  189. [class^="label_d"],
  190. #button_e a {
  191. display: block;
  192. cursor: pointer;
  193. margin: 10px 0;
  194. width: 40px;
  195. height: 40px;
  196. line-height: 40px;
  197. padding-top:8px;
  198. text-align: center;
  199. border-radius:10px;
  200. color: var(--accent);
  201. background-color: var(--container);
  202. transition: all 0.3s ease;
  203. }
  204.  
  205.  
  206. [class^="label_a"]:hover,
  207. [class^="label_b"]:hover,
  208. [class^="label_c"]:hover,
  209. [class^="label_d"]:hover,
  210. #button_e a:hover {
  211. color: var(--accent-text);
  212. background: linear-gradient(to bottom right, var(--accent), var(--accent-2));
  213. }
  214.  
  215. #button_a:checked ~ #navigation .label_a,
  216. #button_b:checked ~ #navigation .label_b,
  217. #button_c:checked ~ #navigation .label_c,
  218. #button_d:checked ~ #navigation .label_d {
  219. cursor: default;
  220. color: var(--accent-text);
  221. background: linear-gradient(to bottom right, var(--accent), var(--accent-2));
  222. }
  223.  
  224. /* titles */
  225.  
  226. .title {
  227. width:100%;
  228. background: linear-gradient(to bottom right, var(--accent), var(--accent-2));
  229. color:var(--accent-text);
  230. border-radius:10px;
  231. margin-bottom:1.5em;
  232. padding:1.5em;
  233. text-align:center;
  234. font-size:1.35em;
  235. text-transform:capitalize;
  236. letter-spacing:2.5px;
  237. }
  238.  
  239. .subtitle {
  240. color:var(--accent);
  241. margin-bottom:1em;
  242. font-weight:700;
  243. }
  244.  
  245. /* about section */
  246.  
  247. .user {
  248. position:relative;
  249. float:left;
  250. width:35%;
  251. padding-right:30px;
  252. display:block;
  253. text-align:right;
  254. }
  255.  
  256. .user img { /* icon */
  257. width:64px;
  258. height:64px;
  259. border-radius:50px;
  260. margin-bottom:1em;
  261. }
  262.  
  263. .userinfo {
  264. display:block;
  265. max-height:175px;
  266. overflow-y:auto;
  267. }
  268.  
  269. .userinfo span {
  270. display:inline-block;
  271. padding:3px 10px 3px 10px;
  272. margin:0 5px 10px 0;
  273. border-radius:50px;
  274. background:var(--background);
  275. }
  276.  
  277. .bio {
  278. line-height:2em;
  279. padding-right: 10px;
  280. text-align:justify;
  281. max-height:265px;
  282. overflow-y:auto;
  283. }
  284.  
  285. .row:after {
  286. content: "";
  287. display: table;
  288. clear: both;
  289. }
  290.  
  291. /* faq section */
  292.  
  293. .question {
  294. color:var(--accent);
  295. font-weight:700;
  296. }
  297.  
  298. .answer {
  299. color:var(--text);
  300. font-style:italic;
  301. }
  302.  
  303. .question, .answer {margin-bottom: 1em;}
  304.  
  305. /* tags and media sections */
  306.  
  307. .tags, .blogs, .blogroll, .links {
  308. margin-bottom: 1.5em;
  309. }
  310.  
  311. .tags a {
  312. margin-right:2em;
  313. }
  314.  
  315. .links span {
  316. display: inline-block;
  317. padding:5px 10px 5px 10px;
  318. font-weight:700;
  319. }
  320.  
  321. .links i { /* social media icons */
  322. width: 1em;
  323. height: 1em;
  324. vertical-align: middle;
  325. margin-right: 3px;
  326. top:-2px;
  327. color: var(--accent);
  328. }
  329.  
  330. .blogs img, .blogroll img {
  331. width: 64px;
  332. height: 64px;
  333. border-radius: 50px;
  334. }
  335.  
  336. .blogroll ul {list-style: none;}
  337.  
  338. .blogroll li {float: left;}
  339.  
  340. .blogs a, .blogroll li {
  341. margin-right:1em;
  342. }
  343.  
  344. /*responsive*/
  345.  
  346. @media only screen and (max-width: 1024px) {
  347.  
  348. #container {
  349. width:90vw;
  350. margin:auto;
  351. }
  352.  
  353. .user {
  354. width: 100%;
  355. text-align:center;
  356. padding:0;
  357. }
  358.  
  359. .userinfo {
  360. max-height:100%;
  361. overflow-y:none;
  362. }
  363.  
  364. .bio {
  365. max-height:100%;
  366. overflow-y:none;
  367. }}
  368.  
  369. /*theme credit*/
  370.  
  371. .credit {
  372. display:block;
  373. position:fixed;
  374. right:20px;
  375. bottom:20px;
  376. font-size:1.5em;
  377. }
  378.  
  379. </style>
  380. </head>
  381. <body>
  382.  
  383. <script>document.body.className += ' fade-out';</script>
  384.  
  385. <div id="container">
  386.  
  387. <!-- navigation buttons -->
  388.  
  389. <input hidden type="radio" name="carousel-control" id="button_a" checked/>
  390. <input hidden type="radio" name="carousel-control" id="button_b"/>
  391. <input hidden type="radio" name="carousel-control" id="button_c"/>
  392. <input hidden type="radio" name="carousel-control" id="button_d"/>
  393. <input hidden type="radio" name="carousel-control" id="button_e"/>
  394.  
  395. <div id="navigation">
  396. <label for="button_a" class="label_a"> <span> <i data-feather="info"></i> </span> </label>
  397. <label for="button_b" class="label_b"> <span> <i data-feather="message-circle"></i> </span> </label>
  398. <label for="button_c" class="label_c"> <span> <i data-feather="hash"></i> </span> </label>
  399. <label for="button_d" class="label_d"> <span> <i data-feather="heart"></i> </span> </label>
  400. <div id="button_e"> <label for="button_e" class="label_e"> <span> <a href ="/" title="return to blog"> <i data-feather="home"></i> </a> </span> </label> </div>
  401. </div> <!-- // end of navigation -->
  402.  
  403.  
  404. <div id="carousel">
  405. <div class="p-wrapper">
  406.  
  407. <!-- start about section -->
  408. <section class="panel_a">
  409.  
  410. <!-- about section title -->
  411. <div class="title">about me</div>
  412.  
  413. <div class="row">
  414.  
  415. <!-- icon -->
  416. <div class="user">
  417. <img src="{PortraitURL-128}"><!-- you can replace PortraitURL-128 with a link to your icon photo -->
  418.  
  419. <!-- user info column -->
  420. <div class="userinfo">
  421. <!-- WRITE YOUR STATS HERE -->
  422. <span><b>name:</b> whatever</span>
  423. <span><b>pronouns:</b> whatever</span>
  424. <span><b>birthday:</b> whatever</span>
  425. <span><b>age:</b> whatever</span>
  426. <span><b>star sign:</b> whatever</span>
  427. <span><b>subject:</b> whatever</span>
  428. <span><b>subject:</b> whatever</span>
  429. </div>
  430. </div>
  431.  
  432. <!-- bio column -->
  433. <div class="bio">
  434.  
  435. <!-- WRITE YOUR ABOUT TEXT HERE -->
  436. <p>This is where you will put your bio. <b>Bold.</b> <i>Italic.</i> <a href="/">A link.</a></p>
  437. <p><blockquote>A blockquote.</blockquote>
  438. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at. Curabitur vitae nunc sed velit dignissim sodales ut eu. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Vitae elementum curabitur vitae nunc sed velit dignissim. Ut pharetra sit amet aliquam id. Nisl tincidunt eget nullam non. Aliquam purus sit amet luctus. Phasellus vestibulum lorem sed risus ultricies. Nunc congue nisi vitae suscipit tellus mauris a diam. Sollicitudin aliquam ultrices sagittis orci a. Mattis aliquam faucibus purus in massa. Leo integer malesuada nunc vel risus commodo. Sit amet massa vitae tortor condimentum lacinia quis vel. Eu tincidunt tortor aliquam nulla facilisi cras fermentum.</p>
  439.  
  440. </div>
  441.  
  442. </div>
  443.  
  444. </section>
  445. <!-- end about section -->
  446.  
  447.  
  448. <!-- start faq section -->
  449. <section class="panel_b">
  450.  
  451. <!-- faq section title -->
  452. <div class="title">ask me anything, darling!</div>
  453.  
  454. <!-- WRITE YOUR QUESTIONS AND ANSWERS HERE. YOU CAN DELETE THIS IF YOU HAVE NO QUESTIONS -->
  455. <div class="question">
  456. <span>Is this a question?</span>
  457. </div>
  458. <div class="answer">
  459. Yes! And this is an answer.
  460. </div>
  461. <div class="question">
  462. <span>Is this another question?</span>
  463. </div>
  464. <div class="answer">
  465. Yes! And this is another answer. You can make as many as you want!
  466. </div><!-- copy and paste questions and answers as needed -->
  467.  
  468. <!-- ask box -->
  469. <p><iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
  470.  
  471. </section>
  472. <!-- end faq section -->
  473.  
  474.  
  475. <!-- start tags section -->
  476. <section class="panel_c">
  477.  
  478. <!-- tags section title-->
  479. <div class="title">tags list</div>
  480.  
  481. <!-- tag groups-->
  482. <div class="tags">
  483. <div class="subtitle"><span>category one</span></div>
  484. <a href="/">#tag</a>
  485. <a href="/">#tag</a>
  486. <a href="/">#tag</a>
  487. <a href="/">#tag</a>
  488. <a href="/">#tag</a>
  489. <a href="/">#tag</a>
  490. <a href="/">#tag</a>
  491. <a href="/">#tag</a>
  492. <a href="/">#tag</a>
  493. <a href="/">#tag</a>
  494. <a href="/">#tag</a>
  495. </div>
  496.  
  497. <div class="tags">
  498. <div class="subtitle"><span>category two</span></div>
  499. <a href="/">#tag</a>
  500. <a href="/">#tag</a>
  501. <a href="/">#tag</a>
  502. <a href="/">#tag</a>
  503. <a href="/">#tag</a>
  504. <a href="/">#tag</a>
  505. </div>
  506.  
  507. <div class="tags">
  508. <div class="subtitle"><span>category three</span></div>
  509. <a href="/">#tag</a>
  510. <a href="/">#tag</a>
  511. <a href="/">#tag</a>
  512. <a href="/">#tag</a>
  513. <a href="/">#tag</a>
  514. <a href="/">#tag</a>
  515. <a href="/">#tag</a>
  516. <a href="/">#tag</a>
  517. <a href="/">#tag</a>
  518. <a href="/">#tag</a>
  519. <a href="/">#tag</a>
  520. <a href="/">#tag</a>
  521. </div>
  522. <!-- copy and paste tag groups as needed -->
  523.  
  524. </section>
  525. <!-- end of tags section -->
  526.  
  527.  
  528. <!-- start social media section -->
  529. <section class="panel_d">
  530.  
  531. <!-- social media section title -->
  532. <div class="title">social media</div>
  533.  
  534. <!-- social media links (twitter, instagram, etc.) -->
  535. <div class="subtitle"><span>social media links</span></div>
  536. <div class="links">
  537. <!-- get more icons at fontawesome.com-->
  538. <span><i class="fa fa-twitter"></i><a href="">@username</a></span>
  539. <span><i class="fa fa-instagram"></i><a href="">@username</a></span>
  540. <span><i class="fa fa-pinterest"></i><a href="">username</a></span>
  541. <span><i class="fa fa-facebook"></i><a href="">username</a></span>
  542. </div>
  543.  
  544. <!-- tumblr sideblogs -->
  545. <div class="subtitle"><span>other blogs</span></div>
  546. <div class="blogs">
  547. <a href="/" title="blog name"><img src="https://via.placeholder.com/64"></a>
  548. <a href="/" title="blog name"><img src="https://via.placeholder.com/64"></a>
  549. <a href="/" title="blog name"><img src="https://via.placeholder.com/64"></a>
  550. </div>
  551.  
  552. <!-- blogroll (can delete if you don't want one) -->
  553. <div class="subtitle"><span>blogroll</span></div>
  554. <div class="blogroll">
  555. {block:Following}
  556. <ul>
  557. {block:Followed}
  558. <li>
  559. <a href="{FollowedURL}" title="@{FollowedName}"><img src="{FollowedPortraitURL-128}"/></a>
  560. </li>
  561. {/block:Followed}
  562. </ul>
  563. {/block:Following}
  564. </div>
  565.  
  566. </section>
  567. <!-- end of social media section -->
  568.  
  569. </div><!-- end of wrapper -->
  570. </div><!-- end of carousel -->
  571. </div><!-- end of container -->
  572.  
  573. <div class="credit"><a href="https://mercurythms.tumblr.com" title="mercurythms">m.</a></div>
  574.  
  575. <!--scripts-->
  576.  
  577. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  578.  
  579. <!--feather icons-->
  580. <script src="https://unpkg.com/feather-icons"></script>
  581. <script>
  582. //feather icon
  583. feather.replace()
  584. </script>
  585.  
  586. <!--tooltips-->
  587. <script src="https://unpkg.com/popper.js@1"></script>
  588. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  589. <script>tippy('[title]', {
  590. theme: 'custom',
  591. arrow: false,
  592. followCursor: true,
  593. delay: 100,
  594. placement: 'bottom-start',
  595. zIndex: 9999999999,
  596. maxWidth: 400,
  597.  
  598. content(reference) {
  599. const title = reference.getAttribute('title');
  600. reference.removeAttribute('title');
  601. return title;
  602. },
  603. });
  604. </script>
  605.  
  606. <script>
  607. // fade effect
  608. $(function() {
  609. $('body').removeClass('fade-out');
  610. });
  611. </script>
  612.  
  613. </body>
  614. </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!