API tools faq
paste
silbrigthemes

Wolke (Page #20)

silbrigthemes
Oct 4th, 2019
758
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.67 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. WOLKE
  7. Page #20 by silbrigthemes
  8.  
  9. This responsive FAQ page matches with Leben | Chai (Theme #18).
  10.  
  11. ----------
  12.  
  13. Rules:
  14.  
  15. 1) Do not use as base code.
  16. 2) Do not customize beyond recognition.
  17. 3) Do not steal (parts of) the code.
  18. 4) Do not claim as your own.
  19. 5) Do not delete or alter the credit.
  20.  
  21. ----------
  22.  
  23. Useful comments to this code have been made.
  24.  
  25. If you need any help, feel free to send me a message via silbrigthemes.tumblr.com/ask or send a message to my official support blog, silbrigsupport.tumblr.com.
  26.  
  27. Have fun!
  28.  
  29. Love,
  30. Julia <3
  31.  
  32. ----------
  33.  
  34. Note:
  35.  
  36. This work is protected by a creative commons
  37. Attribution-NonCommercial-NoDerivatives 4.0 International
  38. (CC BY-NC-ND 4.0)
  39. license.
  40.  
  41. -->
  42.  
  43. <head>
  44.  
  45. <meta charset="utf-16">
  46. <title>{Title} | FAQ</title>
  47. {block:Description}
  48. <meta name="description" content="{MetaDescription}" />
  49. {/block:Description}
  50. <link rel="shortcut icon" href="{Favicon}"/>
  51. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  52. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  53.  
  54. <!-- Necessary for the theme to be responsive. -->
  55. <meta name="viewport" content="width=device-width, initial-scale=1">
  56.  
  57. <!-- Necessary for the scripts to work. -->
  58. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  59.  
  60. <!-- Icon font, by fontawesome -->
  61. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  62.  
  63. <!-- Changes the toolbar color on mobile. -->
  64. <meta name="theme-color" content="#6791db"/>
  65.  
  66. <!-- Tooltip Script -->
  67. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  68. <script>
  69. (function($){
  70. $(document).ready(function(){
  71. $("[title]").style_my_tooltips({
  72. tip_follows_cursor:true,
  73. tip_delay_time:200,
  74. tip_fade_speed:300
  75. }
  76. );
  77. });
  78. })(jQuery);
  79. </script>
  80.  
  81. <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700&display=swap&subset=cyrillic,hebrew,latin-ext" rel="stylesheet">
  82.  
  83. <style>
  84.  
  85. body{
  86. margin:0;
  87. top:0;
  88. left:0;
  89. font-size:18px; /* font size */
  90. font-family:"Rubik", Verdana; /* font family */
  91. color:#333; /* text color */
  92. background-color:#e0edf9; /* background color */
  93. overflow-x:hidden;
  94. text-align:justify; /* alt.: left */
  95. /*
  96. background-image:url("IMAGE URL HERE");
  97. background-attachment:fixed;
  98. background-size:cover;
  99. background-position:center center;
  100. */
  101. }
  102.  
  103. /* CUTSOM SCROLLBAR */
  104. ::-webkit-scrollbar{
  105. width:10px;
  106. background-color:#e0edf9; /* background color */
  107. }
  108.  
  109. ::-webkit-scrollbar-thumb{
  110. width:10px;
  111. background-color:#6791db; /* background color */
  112. border-radius:5px; /* round corners */
  113. }
  114.  
  115. /* CUSTOM TEXT SELECTION */
  116. /* Text Selection */
  117. ::selection{
  118. background-color:#6791db; /* background color */
  119. color:#fff; /* text color */
  120. }
  121.  
  122. /* Mozilla Firefox */
  123. ::-moz-selection{
  124. background-color:#6791db; /* background color */
  125. color:#fff; /* text color */
  126. }
  127.  
  128. /* Opera */
  129. ::-o-selection{
  130. background-color:#6791db; /* background color */
  131. color:#fff; /* text color */
  132. }
  133.  
  134. /* Chrome */
  135. ::-webkit-selection{
  136. background-color:#6791db; /* background color */
  137. color:#fff; /* text color */
  138. }
  139.  
  140. /* Custom Tooltips */
  141. #s-m-t-tooltip{
  142. max-width:300px;
  143. margin:15px;
  144. padding:0.5em;
  145. background-color:#e0edf9; /* background color */
  146. color:#306bac; /* text color */
  147. z-index:9999999999999;
  148. font-size:12px; /* font size */
  149. text-transform:uppercase; /* alt.: normal, lowercase */
  150. font-weight:300; /* alt.: 400 (normal), 700 (bold) */
  151. font-family:"Rubik", Verdana; /* font family, fallback */
  152. border-radius:1em; /* rounded corners */
  153. }
  154.  
  155. /* TEXT STYLES */
  156. /* Bold Text */
  157. b, strong{
  158. font-weight:bold;
  159. color:#555; /* text color */
  160. }
  161.  
  162. /* Italic Text */
  163. i, em{
  164. font-weight:300; /* alt.: 400 (normal), 700 (bold) */
  165. font-style:italic;
  166. color:#111; /* text color */
  167. }
  168.  
  169. /* Marked Text */
  170. mark{
  171. color:#333; /* text color */
  172. background-color:#e0edf9; /* background color */
  173. padding:0 0.25em;
  174. border-radius:1em; /* rounded corners */
  175. }
  176.  
  177. /* Underlined Text */
  178. u{
  179. text-decoration:none;
  180. border-bottom:2px solid #333; /* height type color */
  181. }
  182.  
  183. /* Small Text */
  184. small{
  185. font-size:calc(1em - 4px); /* font-size */
  186. }
  187.  
  188. /* Preformatted Text */
  189. pre{
  190. word-wrap:break-all;
  191. white-space:pre-wrap;
  192. background-color:#e0edf9; /* background color */
  193. padding:0.75em 1em;
  194. margin-left:-1em;
  195. margin-right:-1em;
  196. border-top:1px solid #c8dff7; /* height type color */
  197. border-bottom:1px solid #c8dff7; /* height type color */
  198. }
  199.  
  200. /* Blockquote */
  201. blockquote{
  202. border-left:4px solid #306bac; /* height type color */
  203. background-color:#c8dff7; /* background color */
  204. padding:0.5em 1em;
  205. border-radius:0 0.5em 0.5em 0; /* rounded corners */
  206. }
  207.  
  208. /* Text Line */
  209. hr{
  210. width:80%;
  211. height:4px;
  212. background-color:#e0edf9; /* background color */
  213. border:none;
  214. border-radius:4px; /* rounded corners */
  215. box-shadow:0 8px #c8dff7; /* to left, to top, color */
  216. }
  217.  
  218. /* Empty Paragraphs */
  219. p:empty{
  220. display:none;
  221. }
  222.  
  223. /* LISTS */
  224. /* Ordered List */
  225. ol{
  226. list-style-type:decimal;
  227. /* alt.: lower roman, lower alpha, etc. pp. */
  228. }
  229.  
  230. /* Unordered List */
  231. ul{
  232. list-style-type:none;
  233. }
  234.  
  235. /* List Element */
  236. ul li{
  237. margin-left:-1.25em;
  238. }
  239.  
  240. /* Icon Before List Elements */
  241. ul li:before{
  242. font-family:"Font Awesome\ 5 Free";
  243. content:"\f0c2"; /* add unicode to change icon */
  244. font-weight:700;
  245. font-size:calc(1em - 4px);
  246. position:relative;
  247. margin-right:6px;
  248. color:#306bac; /* text color */
  249. }
  250.  
  251. /* Even list elements */
  252. li:nth-child(even){
  253. color:#999; /* text color */
  254. }
  255.  
  256. /* Odd List Elements */
  257. li:nth-child(odd){
  258. color:#333; /* text color */
  259. }
  260.  
  261. /* LINKS */
  262. /* Link */
  263. a{
  264. text-decoration:none;
  265. border-bottom:2px solid #6791db; /* height type color */
  266. color:#6791db; /* text color */
  267. }
  268.  
  269. /* Link on Hover */
  270. a:hover{
  271. text-decoration:none;
  272. border-bottom:2px solid #306bac; /* height type color */
  273. color:#306bac; /* text color */
  274. }
  275.  
  276. /* Transitions */
  277. a, a:hover{
  278. transition:0.5s;
  279. -moz-transition:0.5s;
  280. -o-transition:0.5s;
  281. -webkit-transition:0.5s;
  282. }
  283.  
  284. /* HEADINGS */
  285. /* First Heading */
  286. h1{
  287. font-size:1.75em; /* font-size */
  288. border-bottom:2px solid #6791db; /* height type color */
  289. color:#6791db; /* text color */
  290. font-weight:400; /* alt.: 300 (thin), 700 (bold) */
  291. }
  292.  
  293. /* Second Heading */
  294. h2{
  295. font-size:1.5em; /* font-size */
  296. border-bottom:2px solid #306bac; /* height type color */
  297. color:#306bac; /* text color */
  298. font-weight:300; /* alt.: 400 (normal), 700 (bold) */
  299. }
  300.  
  301. /* Third Heading */
  302. h3{
  303. font-size:1.25em; /* font-size */
  304. border-bottom:2px dashed #6791db; /* height type color */
  305. color:#6791db; /* text color */
  306. }
  307.  
  308. h1 b, h1 strong, h3 b, h3 strong{
  309. color:#82a5e1; /* text color */
  310. }
  311.  
  312. h1 i, h1 em, h3 i, h3 em{
  313. color:#5577b4; /* text color */
  314. }
  315.  
  316. /* Fourth Heading */
  317. h4{
  318. font-size:1em; /* font-size */
  319. border-bottom:2px dashed #306bac; /* height type color */
  320. color:#306bac; /* text color */
  321. }
  322.  
  323. h2 b, h2 strong, h4 b, h4 strong{
  324. color:#5585bb; /* text color */
  325. }
  326.  
  327. h2 i, h2 em, h4 i, h4 em{
  328. color:#28588d; /* text color */
  329. }
  330.  
  331. /* Fifth Heading */
  332. h5{
  333. font-size:calc(1em - 2px); /* font-size */
  334. background-color:#6791db; /* background color */
  335. }
  336.  
  337. /* Sixth Heading */
  338. h6{
  339. font-size:calc(1em - 4px); /* font-size */
  340. background-color:#306bac; /* background color */
  341. }
  342.  
  343. h5, h6{
  344. padding:0.25em 0.5em;
  345. color:#f9fcff; /* text color */
  346. }
  347.  
  348. h5 b, h5 strong, h6 b, h6 strong{
  349. color:#e5f2ff; /* text color */
  350. }
  351.  
  352. h5 i, h5 em, h6 i, h6 em{
  353. color:#fbfdff; /* text color */
  354. }
  355.  
  356. /* COLORED TEXT */
  357. /* Red Text */
  358. .npf_color_joey {
  359. color:#f15156!important; /* text color */
  360. }
  361.  
  362. /* Orange Text */
  363. .npf_color_monica {
  364. color:#f19c51!important; /* text color */
  365. }
  366.  
  367. /* Yellow Text */
  368. .npf_color_phoebe {
  369. color:#f1d251!important; /* text color */
  370. }
  371.  
  372. /* Green Text */
  373. .npf_color_ross {
  374. color:#19e312!important; /* text color */
  375. }
  376.  
  377. /* Blue Text */
  378. .npf_color_rachel {
  379. color:#518bf1!important; /* text color */
  380. }
  381.  
  382. /* Purple Text */
  383. .npf_color_chandler {
  384. color:#9c51f1!important; /* text color */
  385. }
  386.  
  387. /* Pink Text */
  388. .npf_color_niles {
  389. color:#f151a6!important; /* text color */
  390. }
  391.  
  392. /* –– END TEXT STYLES || START LAYOUT –– */
  393.  
  394. /* BUBBLES */
  395. #bubble1, #bubble2, #bubble3, #bubble4{
  396. position:fixed;
  397. border-radius:50%; /* rounded corners */
  398. z-index:-100!important;
  399. }
  400.  
  401. /* Large Bubble, Top Left */
  402. #bubble1{
  403. top:-200px;
  404. left:-100px;
  405. width:400px;
  406. height:400px;
  407. background-color:#f9fcff; /* background color */
  408. background-image:url("https://66.media.tumblr.com/45aed361cf13da925c613966fed4ae29/tumblr_pqoxykOdiM1qa6y0bo1_1280.jpg");
  409. background-size:cover;
  410. }
  411.  
  412. /* Large Bubble, Bottom Right */
  413. #bubble2{
  414. width:300px;
  415. height:300px;
  416. background-color:#c8dff7; /* background color */
  417. bottom:-150px;
  418. right:-50px;
  419. background-image:url("https://66.media.tumblr.com/45aed361cf13da925c613966fed4ae29/tumblr_pqoxykOdiM1qa6y0bo1_1280.jpg");
  420. background-size:cover;
  421. }
  422.  
  423. /* Small Bubble, Top Left */
  424. #bubble3{
  425. width:200px;
  426. height:200px;
  427. left:-100px;
  428. top:100px;
  429. background-color:#c8dff7; /* background color */
  430. /*
  431. background-image:url("IMAGE URL GOES HERE");
  432. background-size:cover;
  433. */
  434. }
  435.  
  436. /* Small Bubble, Bottom Right */
  437. #bubble4{
  438. width:150px;
  439. height:150px;
  440. right:200px;
  441. bottom:-100px;
  442. background-color:#f9fcff; /* background color */
  443. /*
  444. background-image:url("IMAGE URL GOES HERE");
  445. background-size:cover;
  446. */
  447. }
  448.  
  449. /* HEADER */
  450. header{
  451. width:calc(40vw - 2em);
  452. margin-left:30vw;
  453. margin-top:2em;
  454. margin-bottom:2em;
  455. padding:1em;
  456. border-radius:1em; /* rounded corners */
  457. background-color:#f9fcff; /* background color */
  458. border:1px solid #d3e4ff; /* height type color */
  459. }
  460.  
  461. /* Header Title */
  462. #h-title{
  463. font-size:2.5em; /* font-size */
  464. color:#6791db; /* text color */
  465. margin-bottom:8px;
  466. }
  467.  
  468. /* QUESTIONS + ANSWERS */
  469. .question, .answer{
  470. width:30vw;
  471. height:auto;
  472. padding:0 1em;
  473. border-radius:1em; /* rounded corners */
  474. }
  475.  
  476. /* Questions */
  477. .question{
  478. margin-left:30vw;
  479. background-color:#c8dff7; /* background color */
  480. float:left;
  481. margin-bottom:0.5em;
  482. border:1px solid #a6cbf2; /* height type color */
  483. }
  484.  
  485. /* Answers */
  486. .answer{
  487. margin-right:30vw;
  488. margin-bottom:2em;
  489. background-color:#f9fcff; /* background color */
  490. border:1px solid #d3e4ff; /* height type color */
  491. float:right;
  492. }
  493.  
  494. /* FOOTER */
  495. footer{
  496. background-color:#c8dff7; /* background color */
  497. border:1px solid #a6cbf2; /* height type color */
  498. width:calc(40vw - 2em);
  499. margin-left:30vw;
  500. margin-top:2em;
  501. margin-bottom:2em;
  502. padding:1em;
  503. border-radius:1em; /* rounded corners */
  504. clear:both;
  505. display:flex;
  506. align-items:center;
  507. justify-content:space-between;
  508. flex-wrap:wrap;
  509. }
  510.  
  511. /* Navigation | Footer */
  512. .f-nav{
  513. width:48px;
  514. height:48px;
  515. border-radius:50%; /* rounded corners */
  516. background-color:#e0edf9; /* background color */
  517. color:#6791db; /* text color */
  518. border:1px solid #a6cbf2; /* height type color */
  519. display:flex;
  520. align-items:center;
  521. justify-content:center;
  522. }
  523.  
  524. /* Navigation on Hover | Footer */
  525. .f-nav:hover{
  526. background-color:#6791db; /* background color */
  527. color:#e0edf9; /* text color */
  528. }
  529.  
  530. /* Transitions */
  531. .f-nav, .f-nav:hover{
  532. transition:0.5s;
  533. -moz-transition:0.5s;
  534. -o-transition:0.5s;
  535. -webkit-transition:0.5s;
  536. }
  537.  
  538. /* Footer Link */
  539. a.f-link{
  540. border-bottom:none;
  541. }
  542.  
  543. /* CREDIT */
  544. /* Don't touch! */
  545. #credit{
  546. position:fixed;
  547. bottom:18px;
  548. left:18px;
  549. }
  550.  
  551. /* Control Element */
  552. .s-nav{
  553. width:36px;
  554. height:36px;
  555. border-radius:50%; /* rounded corners */
  556. background-color:#f9fcff; /* background color */
  557. color:#6791db; /* text color */
  558. font-size:calc(1em - 4px); /* font-size */
  559. display:flex;
  560. align-items:center;
  561. justify-content:center;
  562. }
  563.  
  564. /* Control Element on Hover */
  565. .s-nav:hover{
  566. transform:scale(1.05); /* increase size */
  567. cursor:pointer;
  568. color:#306bac; /* text color */
  569. }
  570.  
  571. /* Transitions */
  572. .s-nav, .s-nav:hover{
  573. transition:0.5s;
  574. -moz-transition:0.5s;
  575. -o-transition:0.5s;
  576. -webkit-transition:0.5s;
  577. }
  578.  
  579. /* Control Link */
  580. a.s-link{
  581. border-bottom:none;
  582. }
  583.  
  584. /* CUSTOM CONTROLS */
  585. /* Hides standard tumblr controls */
  586. body > iframe:first-child {
  587. display: none !important;
  588. }
  589.  
  590. /* Container */
  591. #custom-controls{
  592. width:calc(36px * 5 + 8px * 4);
  593. position:fixed;
  594. right:18px;
  595. top:18px;
  596. z-index:1000!important;
  597. display:flex;
  598. align-items:center;
  599. justify-content:space-between;
  600. }
  601.  
  602. @media only screen and (min-width:800px){
  603. /* Mobile Footer */
  604. #mb-footer{
  605. display:none;
  606. }
  607. }
  608.  
  609. /* RESPONSIVE LAYOUT | TABLETS */
  610. @media only screen and (max-width:800px){
  611. /* Header, Footer */
  612. header, footer{
  613. width:calc(70vw - 2em);
  614. margin-left:15vw;
  615. }
  616.  
  617. /* Question + Answer */
  618. .question, .answer{
  619. width:60vw;
  620. }
  621.  
  622. /* Question */
  623. .question{
  624. margin-left:15vw;
  625. }
  626.  
  627. /* Answer */
  628. .answer{
  629. margin-right:15vw;
  630. }
  631.  
  632. /* Custom Controls */
  633. #custom-controls{
  634. width:36px;
  635. height:calc(36px * 5 + 8px * 4);
  636. flex-direction:column;
  637. }
  638. }
  639.  
  640. @media only screen and (min-width:450px){
  641. /* Mobile Footer */
  642. #mb-footer{
  643. display:none;
  644. }
  645. }
  646.  
  647. /* RESPONSIVE LAYOUT | PHONES */
  648. @media only screen and (max-width:450px){
  649. header, .question, .answer{
  650. width:calc(80vw - 2em - 2px);
  651. margin-left:10vw;
  652. }
  653.  
  654. .answer{
  655. margin-right:7.5vw;
  656. }
  657.  
  658. #askbox{
  659. margin-bottom:calc(10vh + 18px);
  660. }
  661.  
  662. /* MOBILE FOOTER */
  663. #mb-footer{
  664. position:fixed;
  665. width:100vw;
  666. height:10vh;
  667. margin-left:0;
  668. margin-bottom:0;
  669. left:0;
  670. bottom:0;
  671. border-radius:0;
  672. border:none;
  673. background-color:#c8dff7; /* background color */
  674. display:flex;
  675. align-items:center;
  676. justify-content:space-between;
  677. }
  678.  
  679. /* Mobile Footer Navigation */
  680. .mbf-nav{
  681. height:10vh;
  682. width:20vw;
  683. background-color:inherit; /* background color */
  684. color:#6791db; /* text color */
  685. display:flex;
  686. align-items:center;
  687. justify-content:center;
  688. }
  689.  
  690. .mbfn2{
  691. background-color:#6791db; /* background color */
  692. color:#c8dff7; /* text color */
  693. }
  694.  
  695. /* Mobile Footer Navigation Icon */
  696. .mbf-nav span{
  697. font-size:1em; /* font size */
  698. }
  699.  
  700. /* Mobile Footer Navigation on Hover */
  701. .mbf-nav:hover{
  702. color:#3264ba; /* text color */
  703. cursor:pointer;
  704. }
  705.  
  706. .mbfn2:hover{
  707. background-color:#3264ba; /* background color */
  708. color:#c8dff7; /* text color */
  709. }
  710.  
  711. /* Transitions */
  712. .mbf-nav, .mbf-nav:hover{
  713. transition:0.5s;
  714. -moz-transition:0.5s;
  715. -o-transition:0.5s;
  716. -webkit-transition:0.5s;
  717. }
  718.  
  719. /* Mobile Footer Navigation Link */
  720. a.mbf-link{
  721. border-bottom:none;
  722. }
  723.  
  724. #credit, #custom-controls, footer{
  725. display:none;
  726. }
  727. }
  728.  
  729. </style>
  730. </head>
  731.  
  732. <body>
  733.  
  734. <!-- HEADER -->
  735. <header>
  736. <!-- Header Title -->
  737. <div id="h-title">Title</div>
  738. <!-- Header Description -->
  739. <div id="h-desc">
  740. Description.
  741. </div>
  742. </header> <!-- // end header -->
  743.  
  744. <!-- QUESTIONS + ANSWERS -->
  745. <!-- 1st SET -->
  746. <!-- Question -->
  747. <div class="question">
  748. <p>Question?</p>
  749. </div>
  750. <!-- Answer -->
  751. <div class="answer">
  752. <p>Answer.</p>
  753. </div>
  754.  
  755. <!-- 2nd SET -->
  756. <!-- Question -->
  757. <div class="question">
  758. <p>Question?</p>
  759. </div>
  760. <!-- Answer -->
  761. <div class="answer">
  762. <p> Answer.</p>
  763. </div>
  764.  
  765. <!-- LAST SET -->
  766. <!-- Pseudo-Question -->
  767. <div class="question">
  768. <p>Have a question that has not yet been answered here?</p>
  769. </div>
  770. <!-- Ask Box -->
  771. <div class="answer" id="askbox">
  772. <p>
  773. <iframe frameborder="0" height="200" id="ask_form"
  774. scrolling="no" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com"
  775. width="100%"></iframe>
  776. <!--[if IE]><script type="text/javascript">document.getElementById('ask_form').
  777. allowTransparency=true;</script>
  778. <![endif]-->
  779. </p>
  780. </div>
  781. <!-- // end questions + answers -->
  782.  
  783. <!-- FOOTER -->
  784. <footer>
  785. <!-- Index Link -->
  786. <a href="/" title="index" class="f-link">
  787. <div class="f-nav">
  788. <span class="fas fa-home"></span>
  789. </div>
  790. </a>
  791.  
  792. <!-- Ask Link -->
  793. {block:AskEnabled}
  794. <a href="/ask" title="{AskLabel}" class="f-link">
  795. <div class="f-nav">
  796. <span class="fas fa-envelope"></span>
  797. </div>
  798. </a>
  799. {/block:AskEnabled}
  800.  
  801. <!-- Submissions Link -->
  802. {block:SubmissionsEnabled}
  803. <a href="/submit" title="{SubmitLabel}" class="f-link">
  804. <div class="f-nav">
  805. <span class="fas fa-paper-plane"></span>
  806. </div>
  807. </a>
  808. {/block:SubmissionsEnabled}
  809.  
  810. <!-- Archive Link -->
  811. <a href="/archive" title="browse archive" class="f-link">
  812. <div class="f-nav">
  813. <span class="fas fa-archive"></span>
  814. </div>
  815. </a>
  816.  
  817. <!-- 1st Custom Link -->
  818. <a href="/" title="custom link 1" class="f-link">
  819. <div class="f-nav">
  820. <span class="fas fa-link"></span>
  821. </div>
  822. </a>
  823.  
  824. <!-- 2nd Custom Link -->
  825. <a href="/" title="custom link 2" class="f-link">
  826. <div class="f-nav">
  827. <span class="fas fa-link"></span>
  828. </div>
  829. </a>
  830.  
  831. <!-- 3rd Custom Link -->
  832. <a href="/" title="custom link 3" class="f-link">
  833. <div class="f-nav">
  834. <span class="fas fa-link"></span>
  835. </div>
  836. </a>
  837. </footer> <!-- // end footer -->
  838.  
  839. <!-- MOBILE FOOTER -->
  840. <div id="mb-footer">
  841. <!-- Archive Link -->
  842. <a href="/archive" title="browse archive" class="mbf-link">
  843. <div class="mbf-nav mbfn1">
  844. <span class="fas fa-archive"></span>
  845. </div>
  846. </a>
  847.  
  848. <!-- Ask Link -->
  849. <a href="/ask" title="{AskLabel}" class="mbf-link">
  850. <div class="mbf-nav mbfn2">
  851. <span class="fas fa-envelope"></span>
  852. </div>
  853. </a>
  854.  
  855. <!-- Index -->
  856. <a href="/" title="index" class="mbf-link">
  857. <div class="mbf-nav mbfn1">
  858. <span class="fas fa-home"></span>
  859. </div>
  860. </a>
  861.  
  862. <!-- Tumblr Dashboard -->
  863. <a href="https://www.tumblr.com/dashboard" title="tumblr dashboard" class="mbf-link">
  864. <div class="mbf-nav mbfn2">
  865. <span class="fab fa-tumblr"></span>
  866. </div>
  867. </a>
  868.  
  869. <!-- Theme Credit -->
  870. <!-- Don't touch! -->
  871. <a href="https://silbrigthemes.tumblr.com/" title="theme credit" class="mbf-link">
  872. <div class="mbf-nav mbfn1">
  873. <span class="fas fa-code"></span>
  874. </div>
  875. </a>
  876. </div> <!-- // end mobile footer -->
  877.  
  878. <!-- BUBBLES -->
  879. <div id="bubble1"></div>
  880. <div id="bubble2"></div>
  881. <div id="bubble3"></div>
  882. <div id="bubble4"></div>
  883.  
  884. <!-- CUSTOM CONTROLS -->
  885. <div id="custom-controls">
  886. <!-- Dashboard Link -->
  887. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="s-link">
  888. <div class="s-nav">
  889. <span class="fab fa-tumblr" aria-hidden="true"></span>
  890. </div>
  891. </a>
  892.  
  893. <!-- Message -->
  894. <!-- Takes people to dashboard to send you a message. -->
  895. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="s-link">
  896. <div class="s-nav">
  897. <span class="fas fa-comment-dots" aria-hidden="true"></span>
  898. </div>
  899. </a>
  900.  
  901. <!-- Customize -->
  902. <!-- Takes you, the blog owner, to the customization. -->
  903. <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize theme" class="s-link">
  904. <div class="s-nav">
  905. <span class="fas fa-palette" aria-hidden="true"></span>
  906. </div>
  907. </a>
  908.  
  909. <!-- Settings -->
  910. <!-- Takes you to your blog's settings. -->
  911. <a href="https://www.tumblr.com/settings/blog/{Name}" title="change settings" class="s-link">
  912. <div class="s-nav">
  913. <span class="fas fa-cog" aria-hidden="true"></span>
  914. </div>
  915. </a>
  916.  
  917. <!-- Follow -->
  918. <!-- Takes people to a page so that they can follow you. -->
  919. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="s-link">
  920. <div class="s-nav">
  921. <span class="fas fa-plus" aria-hidden="true"></span>
  922. </div>
  923. </a>
  924. </div> <!-- // end custom controls -->
  925.  
  926. <!-- CREDIT -->
  927. <!-- Don't touch! -->
  928. <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="s-link">
  929. <div class="s-nav" id="credit">
  930. <span class="fas fa-code"></span>
  931. </div>
  932. </a>
  933.  
  934. </body>
  935. </html>
Advertisement
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!