API tools faq
paste
seiche

page one: rue

seiche
Aug 1st, 2019
7,223
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.77 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <title>{Title}</title>
  4.  
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7. <meta charset="utf-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.  
  10. <!---
  11.  
  12. THEME BY SEYCHE.TUMBLR.COM
  13.  
  14. CREDITS:
  15. -carousel tutorial by yeoli
  16. -icons from fontawesome
  17.  
  18. --->
  19.  
  20. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i&display=swap" rel="stylesheet">
  21.  
  22. <link href="https://fonts.googleapis.com/css?family=Bitter:400,400i,700&display=swap" rel="stylesheet">
  23.  
  24. <script src="https://kit.fontawesome.com/6ac5c36b23.js"></script>
  25.  
  26. <style type="text/css">
  27.  
  28. @keyframes lazyload {
  29. 0% {opacity: 0;}
  30. 100% {opacity: 1;}
  31. }
  32.  
  33. @-webkit-keyframes lazyload {
  34. 0% {opacity: 0;}
  35. 100% {opacity: 1;}
  36. }
  37.  
  38. @-moz-keyframes lazyload {
  39. 0% {opacity: 0;}
  40. 100% {opacity: 1;}
  41. }
  42.  
  43. @-o-keyframes lazyload {
  44. 0% {opacity: 0;}
  45. 100% {opacity: 1;}
  46. }
  47.  
  48. body {
  49. font-family: 'Source Sans Pro', sans-serif;
  50. font-size: 14px;
  51. color: #7c7c7c; /* font colour */
  52. background-color: #f7f7f7; /*background colour */
  53. line-height: 160%;
  54. letter-spacing: 0.2px;
  55. word-wrap: break-word;
  56. -webkit-animation: lazyload 2s;
  57. -moz-animation: lazyload 2s;
  58. -o-animation: lazyload 2s;
  59. animation: lazyload 2s;
  60. }
  61.  
  62. * {
  63. margin: 0;
  64. padding: 0;
  65. box-sizing: border-box;
  66. }
  67.  
  68. a {
  69. text-decoration: none;
  70. color: #555; /* link colour */
  71. -webkit-transition: all 0.3s;
  72. -moz-transition: all 0.3s;
  73. -ms-transition: all 0.3s;
  74. -o-transition: all 0.3s;
  75. transition: all 0.3s;
  76. }
  77.  
  78. a:hover {
  79. color: #bdccc4; /* link hover colour */
  80. -webkit-transition: all 0.3s;
  81. -moz-transition: all 0.3s;
  82. -ms-transition: all 0.3s;
  83. -o-transition: all 0.3s;
  84. transition: all 0.3s;
  85. }
  86.  
  87. p a {border-bottom: 2px solid #bdccc4;} /* link hover colour */
  88. p a:hover {border-bottom: 2px solid transparent;}
  89.  
  90. ul, ol {margin: 1em 0 1em 1.25em;}
  91. li {margin-left: 1.25em;}
  92. p {margin-top: 1.75em;}
  93.  
  94. small {font-size: 0.9em;}
  95. big {font-size: 1.1em;}
  96. b, bold, strong {color: #212121;} /* bold colour */
  97.  
  98. blockquote {
  99. padding: 0 0 0 1em;
  100. border-left: 1px solid #dcdcdc; /* blockquote border colour */
  101. margin: 1em 0 1em 1em;
  102. }
  103.  
  104. h1, h2, h3, h4 {
  105. font-family: 'Bitter', serif;
  106. color: #212121; /* title colour */
  107. text-transform: uppercase;
  108. letter-spacing: 1px;
  109. }
  110.  
  111. h1 {margin-bottom: 0.75em; font-size: 1.2em;}
  112. h2 {font-size: 1.1em; margin-bottom: 0.75em;}
  113. h3 {font-size: 1em; margin-bottom: 0.75em;}
  114.  
  115. h4 {
  116. display: inline;
  117. margin-right: 1em;
  118. border-bottom: 4px solid #bdccc4; /* accent colour */
  119. font-size: 0.9em;
  120. }
  121.  
  122. ::-webkit-scrollbar {
  123. width: 17px;
  124. height: 17px;
  125. background-color: #fff; /* scrollbar background colour */
  126. }
  127.  
  128. ::-webkit-scrollbar-track {
  129. border: 8px solid #fff; /* scrollbar background colour */
  130. background-color: #dcdcdc; /* scrollbar track colour */
  131. }
  132.  
  133. ::-webkit-scrollbar-thumb {
  134. border: 6px solid #fff; /* scrollbar background colour */
  135. background-color: #dcdcdc; /* scrollbar colour */
  136. min-height: 24px;
  137. min-width: 24px;
  138. }
  139.  
  140. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  141. z-index: 999999999!important;
  142. opacity: 0.6;
  143. position: absolute;
  144. -webkit-transition: all 0.4s;
  145. -moz-transition: all 0.4s;
  146. -ms-transition: all 0.4s;
  147. -o-transition: all 0.4s;
  148. transition: all 0.4s;
  149. }
  150.  
  151. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  152. opacity: 1.0;
  153. -webkit-transition: all 0.4s;
  154. -moz-transition: all 0.4s;
  155. -ms-transition: all 0.4s;
  156. -o-transition: all 0.4s;
  157. transition: all 0.4s;
  158. }
  159.  
  160. /*----- TOP NAVIGATION -----*/
  161.  
  162. header {
  163. position: fixed;
  164. background-color: #fff; /* container background colour */
  165. border-bottom: 1px solid #dcdcdc; /* border colour */
  166. width: 100%;
  167. left: 0;
  168. right: 0;
  169. top: 0;
  170. z-index: 99999999;
  171. }
  172.  
  173. .topnav {
  174. text-align: center;
  175. padding: 15px 0;
  176. margin: 0 auto;
  177. }
  178.  
  179. .topnav a {
  180. border-bottom: 4px solid transparent;
  181. padding: 15px 3px;
  182. margin: 0 8px;
  183. }
  184.  
  185. .topnav a:hover {border-bottom: 4px solid #bdccc4;} /* top nav hover colour */
  186.  
  187. .icon {
  188. border-radius: 50%;
  189. position: absolute;
  190. margin: 0 auto 0 -30px;
  191. background-color: #fff; /* container background colour */
  192. padding: 5px;
  193. border: 1px solid #dcdcdc; /* border colour */
  194. width: 60px;
  195. height: 60px;
  196. }
  197.  
  198. .left {margin-right: 45px;}
  199. .right {margin-left: 45px;}
  200.  
  201. /*----- CAROUSEL -----*/
  202.  
  203. #container {
  204. display: flex;
  205. justify-content: center;
  206. align-items: center;
  207. min-height: 100vh;
  208. flex-direction: column;
  209. }
  210.  
  211. #carousel, #navigation {
  212. flex: initial;
  213. display: block;
  214. background-color: #fff; /* container background colour */
  215. margin-top: calc(1em + 30px);
  216. }
  217.  
  218. #carousel {
  219. overflow: hidden;
  220. width: 700px;
  221. height: 530px;
  222. border: 1px solid #dcdcdc; /* border colour */
  223. order: 1;
  224. }
  225.  
  226. #navigation {
  227. margin-top: 0;
  228. border-right: 1px solid #dcdcdc; /* border colour */
  229. border-left: 1px solid #dcdcdc; /* border colour */
  230. border-bottom: 1px solid #dcdcdc; /* border colour */
  231. order: 2;
  232. width: 700px;
  233. padding: 0 45px;
  234. text-align: center;
  235. }
  236.  
  237. .carouselwrapper {
  238. position: relative;
  239. width: 100%;
  240. height: 100%;
  241. -webkit-transition: transform 0.4s ease-in-out;
  242. -moz-transition: transform 0.4s ease-in-out;
  243. -ms-transition: transform 0.4s ease-in-out;
  244. -o-transition: transform 0.4s ease-in-out;
  245. transition: transform 0.4s ease-in-out;
  246. }
  247.  
  248. #button_about:checked ~ #carousel .carouselwrapper {
  249. -webkit-transform: translateY(0);
  250. transform: translateY(0);
  251. }
  252.  
  253. #button_update:checked ~ #carousel .carouselwrapper {
  254. -webkit-transform: translateY(-100%);
  255. transform: translateY(-100%);
  256. }
  257.  
  258. #button_ask:checked ~ #carousel .carouselwrapper {
  259. -webkit-transform: translateY(-200%);
  260. transform: translateY(-200%);
  261. }
  262.  
  263. #button_nav:checked ~ #carousel .carouselwrapper {
  264. -webkit-transform: translateY(-300%);
  265. transform: translateY(-300%);
  266. }
  267.  
  268. #button_broll:checked ~ #carousel .carouselwrapper {
  269. -webkit-transform: translateY(-400%);
  270. transform: translateY(-400%);
  271. }
  272.  
  273. [class^="panel_"] {
  274. overflow: auto;
  275. position: relative;
  276. width: inherit;
  277. height: inherit;
  278. padding: 45px;
  279. }
  280.  
  281. [class^="label_"] {
  282. display: inline-block;
  283. cursor: pointer;
  284. text-align: center;
  285. color: #555; /* bottom nav link colour */
  286. border-bottom: 4px solid transparent;
  287. padding: 15px 3px;
  288. margin: 0 8px;
  289. -webkit-transition: all 0.3s ease;
  290. -moz-transition: all 0.3s ease;
  291. -ms-transition: all 0.3s ease;
  292. -o-transition: all 0.3s ease;
  293. transition: all 0.3s ease;
  294. }
  295.  
  296. [class^="label_"]:hover {
  297. border-bottom: 4px solid #bdccc4; /* bottom nav hover colour */
  298. color: #bdccc4; /* bottom nav hover colour */
  299. }
  300.  
  301. #button_about:checked ~ #navigation .label_about,
  302. #button_update:checked ~ #navigation .label_update,
  303. #button_ask:checked ~ #navigation .label_ask,
  304. #button_nav:checked ~ #navigation .label_nav,
  305. #button_broll:checked ~ #navigation .label_broll {
  306. cursor: default;
  307. border-bottom: 4px solid #bdccc4; /* nav hover border colour */
  308. color: #bdccc4; /* nav hover colour */
  309. }
  310.  
  311. /*----- COMMON STYLES -----*/
  312.  
  313. .upper {
  314. text-transform: uppercase;
  315. letter-spacing: 1px;
  316. font-size: 0.9em;
  317. }
  318.  
  319. .title {
  320. color: #212121; /* title colour */
  321. font-family: 'Bitter', serif;
  322. text-transform: uppercase;
  323. letter-spacing: 1.5px;
  324. font-weight: bold;
  325. font-size: 1.3em;
  326. padding-bottom: 1.75em;
  327. border-bottom: 1px solid #dcdcdc; /* border colour */
  328. }
  329.  
  330. .numbers {
  331. float: right;
  332. background-color: #bdccc4; /* number background colour */
  333. color: #212121; /* number colour */
  334. padding: 6px;
  335. border-radius: 4px;
  336. }
  337.  
  338. .content {
  339. margin-top: 1.75em;
  340. border-bottom: 1px solid #dcdcdc; /* border colour */
  341. padding-bottom: 1.75em;
  342. }
  343.  
  344. .content:last-of-type {border-bottom: transparent; padding-bottom: 0;}
  345. .stats {display: inline-block; width: 49%;}
  346.  
  347. /*----- ABOUT -----*/
  348.  
  349. #abtinfo {
  350. border-bottom: 1px solid #dcdcdc; /* border colour */
  351. margin-top: 1.75em;
  352. padding-bottom: 1.75em;
  353. }
  354.  
  355. /*----- UPDATES -----*/
  356.  
  357. .date {
  358. font-weight: bold;
  359. color: #212121; /* title colour */
  360. width: 80px;
  361. float: left;
  362. padding-top: 0.5em;
  363. }
  364.  
  365. .updates {display: inline-block; margin-top: -0.5em;}
  366.  
  367. .updatetxt {
  368. border-left: 1px solid #dcdcdc; /* timeline border colour */
  369. padding: 0.5em 0 0.5em 30px;
  370. width: 490px;
  371. float: right;
  372. }
  373.  
  374. .updatetxt::before {
  375. content: '';
  376. position: absolute;
  377. width: 8px;
  378. height: 8px;
  379. background: #bdccc4; /* timeline marker colour */
  380. margin-left: -34px;
  381. border-radius: 2px;
  382. vertical-align: middle;
  383. margin-top: 0.5em;
  384. z-index: 5;
  385. }
  386.  
  387. .stats2 {
  388. display: inline-block;
  389. width: 32%;
  390. }
  391.  
  392. .stats2 .fab {
  393. color: #bdccc4; /* social media icon colour */
  394. vertical-align: middle;
  395. font-size: 1.2em;
  396. margin-right: 1em;
  397. }
  398.  
  399. .social::before {
  400. content: '@';
  401. color: #bdccc4; /* @ sign colour */
  402. }
  403.  
  404. /*----- CONTACT AND FAQ -----*/
  405.  
  406. .q {
  407. color: #212121; /* question colour */
  408. font-weight: bold;
  409. }
  410.  
  411. .a {font-style: italic;}
  412.  
  413. .letter {
  414. font-weight: bold;
  415. font-family: 'Bitter', serif;
  416. color: #bdccc4; /* faq letter colour */
  417. text-transform: uppercase;
  418. font-size: 1.1em;
  419. float: left;
  420. width: 20px;
  421. }
  422.  
  423. .q, .a {margin-left: calc(20px + 1em);}
  424.  
  425. /*----- NAVIGATION -----*/
  426.  
  427. .find {
  428. display: inline-block;
  429. bordeR: 1px solid #dcdcdc; /* searck box border colour */
  430. background-color: #f7f7f7; /* srach box background colour */
  431. margin-top: 1.75em;
  432. padding: 10px;
  433. }
  434.  
  435. .find input {
  436. border: 0;
  437. outline: none;
  438. display: inline;
  439. background: inherit;
  440. margin: 0;
  441. padding: 0;
  442. color: #7c7c7c; /* search text colour */
  443. width: 555px;
  444. font-family: inherit;
  445. font-size: inherit;
  446. }
  447.  
  448. .find input[type=text] {color: #7c7c7c;} /* search text colour */
  449. input::-webkit-input-placeholder {color: #7c7c7c;} /* search text colour */
  450. input::-moz-placeholder {color: #7c7c7c;} /* search text colour */
  451. input:-moz-placeholder {color: #7c7c7c;} /* search text colour */
  452. input:-ms-input-placeholder {color: #7c7c7c;} /* search text colour */
  453.  
  454. .find .fas {
  455. color: #212121; /* search icon colour */
  456. float: right;
  457. margin-top: 0.25em;
  458. }
  459.  
  460. .links a::after {
  461. content: '';
  462. margin: 0 0.75em;
  463. display: inline-block;
  464. width: 5px;
  465. height: 5px;
  466. border-radius: 1.5px;
  467. background-color: #bdccc4; /* link square divider colour */
  468. vertical-align: middle;
  469. margin-bottom: 2px;
  470. }
  471.  
  472. .links a:last-of-type::after {display: none;}
  473.  
  474. /*----- BLOGROLL -----*/
  475.  
  476. .blog {
  477. display: inline-block;
  478. width: 49.5%;
  479. border-bottom: 1px solid #dcdcdc; /* blogroll border colour */
  480. padding: 1em 0;
  481. -webkit-transition: all 0.3s;
  482. -moz-transition: all 0.3s;
  483. -ms-transition: all 0.3s;
  484. -o-transition: all 0.3s;
  485. transition: all 0.3s;
  486. }
  487.  
  488. .blog:hover {
  489. border-bottom: 1px solid #bdccc4; /* blogroll hover colour */
  490. -webkit-transition: all 0.3s;
  491. -moz-transition: all 0.3s;
  492. -ms-transition: all 0.3s;
  493. -o-transition: all 0.3s;
  494. transition: all 0.3s;
  495. }
  496.  
  497. .blogicon {
  498. border-radius: 50%;
  499. vertical-align: top;
  500. float: left;
  501. width: 35px;
  502. height: 35px;
  503. }
  504.  
  505. .blogtext {
  506. overflow: hidden;
  507. text-overflow: ellipsis;
  508. width: calc(100% - 60px);
  509. margin-left: 10px;
  510. white-space: nowrap;
  511. line-height: 130%;
  512. }
  513.  
  514. #blogname {
  515. display: inline;
  516. font-weight: bold;
  517. color: #212121; /* blogname colour */
  518. }
  519.  
  520. #blogname, #blogtitle {margin-left: 10px;}
  521. #blogtitle {display: block; font-size: 0.8em;}
  522.  
  523. /*----- RESPONSIVE -----*/
  524.  
  525. @media only screen and (max-height: 600px) {
  526. #carousel {height: 380px;}
  527. }
  528.  
  529. @media only screen and (max-height: 768px) and (min-height: 601px) {
  530. #carousel {height: 430px;}
  531. }
  532.  
  533. @media only screen and (max-width: 768px) and (min-width: 501px) {
  534. #carousel, #navigation {width: 450px;}
  535. .updatetxt {width: 250px;}
  536. .panel_ask iframe {width: 360px;}
  537. .find input {width: 300px;}
  538. .stats2 {display: inline-block; width: 49%;}
  539. }
  540.  
  541. @media only screen and (max-width: 500px) {
  542. #carousel, #navigation {width: 80vw;}
  543. .stats, .stats2 {display: inline-block; width: 100%;}
  544. .updatetxt {width: calc(80vw - 200px);}
  545. .panel_ask iframe {width: calc(80vw - 90px);}
  546. .find input {width: calc(80vw - 150px);}
  547. .blog {width: 100%;}
  548. }
  549.  
  550. </style>
  551. </head>
  552. <body>
  553.  
  554. <!----- HEADER NAVIGATION ----->
  555.  
  556. <header>
  557. <nav class="upper topnav">
  558. <span class="left">
  559. <a href="/">return</a>
  560. <a href="/archive">archive</a>
  561. </span>
  562. <img src="{PortraitURL-64}" class="icon"> <!--- to replace blog icon with another image, replace {PortraitURL-64} with the url of the image --->
  563. <span class="right">
  564. <a href="https://tumblr.com/dashboard">dashboard</a>
  565. <a href="https://seyche.tumblr.com">theme</a>
  566. </span>
  567. </nav>
  568. </header>
  569.  
  570. <!----- CAROUSEL ----->
  571.  
  572. <section id="container">
  573.  
  574. <input hidden type="radio" name="carousel-control" id="button_about" checked/>
  575. <input hidden type="radio" name="carousel-control" id="button_update"/>
  576. <input hidden type="radio" name="carousel-control" id="button_ask"/>
  577. <input hidden type="radio" name="carousel-control" id="button_nav"/>
  578. <input hidden type="radio" name="carousel-control" id="button_broll"/>
  579.  
  580.  
  581. <div id="carousel">
  582. <div class="carouselwrapper">
  583.  
  584. <!----- ABOUT ----->
  585.  
  586. <section class="panel_about">
  587. <div class="title">
  588. about me
  589. <span class="numbers">01</span>
  590. </div>
  591.  
  592. <!--- some statistics about you. to add more stats, copy and paste as many times as you want. make sure to wrap your text in <div class="stats"></div> and use <h4><h4> for the subject --->
  593. <div id="abtinfo">
  594. <div class="stats">
  595. <h4>name</h4>hamlet
  596. </div>
  597. <div class="stats">
  598. <h4>age</h4>20
  599. </div>
  600. <div class="stats">
  601. <h4>pronouns</h4>he/him
  602. </div>
  603. <div class="stats">
  604. <h4>location</h4>denmark
  605. </div>
  606. <div class="stats">
  607. <h4>star sign</h4>scorpio
  608. </div>
  609. <div class="stats">
  610. <h4>studying</h4>history
  611. </div>
  612. </div>
  613. <!--- end of stats about you>
  614.  
  615. <!--- write about yourself here. use <p></p> to separate paragraphs, <b></b> for bold, <u></u> for underline, <i></i> for italic, <li></li> for list items, <h1></h1> for headings --->
  616. <p>
  617. O, that this too <b>too</b> solid flesh would <i>melt</i>, thaw and <u>resolve</u> itself into a dew! Or that the <a href="/">Everlasting</a> had not fix'd His canon 'gainst self-slaughter! O God! God!
  618. <blockquote>How weary, stale, flat and unprofitable seem to me all the uses of this world!</blockquote>
  619. Fie on't! ah fie! 'tis an unweeded garden that grows to seed.
  620. </p>
  621.  
  622. <p>
  623. <h1>heading</h1>
  624. O, what a rogue and peasant slave am I! Is it not monstrous that this player here, but in a fiction, in a dream of passion,
  625. <ul>
  626. <li>could force his soul so to his own conceit</li>
  627. <li>that from her working all his visage wann'd,</li>
  628. <li>tears in his eyes, distraction in's aspect,</li>
  629. <li>a broken voice, and his whole function suiting</li>
  630. </ul>
  631. with forms to his conceit? and all for nothing! For Hecuba! What's Hecuba to him, or he to Hecuba, that he should weep for her? What would he do had he the motive and the cue for passion that I have?
  632. </p>
  633. <!--- end of text about yourself --->
  634.  
  635. </section>
  636.  
  637. <!----- UPDATES ----->
  638.  
  639. <section class="panel_update">
  640. <div class="title">
  641. updates
  642. <span class="numbers">02</span>
  643. </div>
  644.  
  645. <!--- updates timeline --->
  646. <div class="content">
  647.  
  648. <!--- to add more updates, copy and paste as many times as needed. make sure to wrap your dates with <span class="date"></span> and your update text with <span class="updatetxt"></span> and the css will add it to the timeline --->
  649.  
  650. <div class="updates">
  651. <span class="date">06/08</span>
  652. <span class="updatetxt">There's fennel for you, and columbines: there's rue for you; and here's some for me: we may call it herb-grace o' Sundays.</span>
  653. </div>
  654. <div class="updates">
  655. <span class="date">05/14</span>
  656. <span class="updatetxt">O you must wear your rue with
  657. a difference.</span>
  658. </div>
  659. <div class="updates">
  660. <span class="date">04/23</span>
  661. <span class="updatetxt">There's a daisy: I would give you some violets, but they withered all when my father died.</span>
  662. </div>
  663. </div>
  664. <!--- end of updates timeline --->
  665.  
  666. <!--- update statistics --->
  667. <div class="content">
  668. <h1>currently</h1>
  669.  
  670. <div class="stats">
  671. <h4>reading</h4>words, words, words
  672. </div>
  673. <div class="stats">
  674. <h4>watching</h4>the murder of gonzago
  675. </div>
  676. <div class="stats">
  677. <h4>listening</h4>hey non nonny
  678. </div>
  679. <div class="stats">
  680. <h4>working on</h4>killing my uncle
  681. </div>
  682. </div>
  683. <!--- end of update statistics --->
  684.  
  685. <!--- social media --->
  686. <div class="content">
  687. <h1>find me at</h1>
  688.  
  689. <!--- to change the social media icons, go to https://fontawesome.com/icons?d=gallery&s=brands, click on the one you want and copy and paste the code below. if you don't want the icons, delete the <i class="iconname"></i> parts --->
  690.  
  691. <div class="stats2">
  692. <!--- don't forget to add https:// in the social media links --->
  693. <i class="fab fa-twitter"></i>
  694. <a href="https://YOURLINK" class="social">username</a> <!--- add your social media link and username here --->
  695. </div>
  696. <div class="stats2">
  697. <i class="fab fa-instagram"></i>
  698. <a href="https://YOURLINK" class="social">username</a>
  699. </div>
  700. <div class="stats2">
  701. <i class="fab fa-snapchat-ghost"></i>
  702. <a href="https://YOURLINK" class="social">username</a>
  703. </div>
  704. <div class="stats2">
  705. <i class="fab fa-discord"></i>
  706. <a href="https://YOURLINK" class="social">username</a>
  707. </div>
  708. <div class="stats2">
  709. <i class="fab fa-pinterest-p"></i>
  710. <a href="https://YOURLINK" class="social">username</a>
  711. </div>
  712. <div class="stats2">
  713. <i class="fab fa-tumblr"></i>
  714. <a href="https://YOURLINK" class="social">sideblog</a>
  715. </div>
  716. <!--- end of social media section --->
  717.  
  718. </div>
  719. </section>
  720.  
  721. <!----- FAQ AND ASK SECTION ----->
  722.  
  723. <section class="panel_ask">
  724. <div class="title">
  725. frequently asked questions
  726. <span class="numbers">03</span>
  727. </div>
  728.  
  729. <!--- faq section --->
  730. <!--- to add more faqs, copy and paste as many times as you want everything in <div class="content"></div> i.e from here --->
  731. <div class="content">
  732. <span class="letter">q:</span>
  733. <div class="q"> <!--- question --->
  734. O, what a noble mind is here o'erthrown!
  735. </div>
  736. <span class="letter">a:</span>
  737. <div class="a"> <!--- answer --->
  738. The courtier's, soldier's, scholar's, eye, tongue, sword.
  739. </div>
  740. </div><!--- to here --->
  741.  
  742. <div class="content">
  743. <span class="letter">q:</span>
  744. <div class="q">
  745. The expectancy and rose of the fair state, the glass of fashion and the mould of form; the observed of all observers, quite, quite down!
  746. </div>
  747. <span class="letter">a:</span>
  748. <div class="a">
  749. And I, of ladies most deject and wretched that suck'd the honey of his music vows
  750. </div>
  751. </div>
  752.  
  753. <div class="content">
  754. <span class="letter">q:</span>
  755. <div class="q">
  756. Now see that noble and most sovereign reason, like sweet bells jangled, out of tune and harsh
  757. </div>
  758. <span class="letter">a:</span>
  759. <div class="a">
  760. That unmatch'd form and feature of blown youth, blasted with ecstasy: O, woe is me, to have seen what I have seen, see what I see!
  761. </div>
  762. </div>
  763. <!--- end of faq section --->
  764.  
  765. <!--- this is your askbox --->
  766. <iframe frameborder="0" border="0" scrolling="no" width="600px" height="200px" allowtransparency="true" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color: transparent; overflow: hidden; margin-top: 3em;"></iframe>
  767.  
  768. </section>
  769.  
  770. <!----- NAVIGATION SECTION ----->
  771.  
  772. <section class="panel_nav">
  773. <div class="title">
  774. navigation and tags
  775. <span class="numbers">04</span>
  776. </div>
  777.  
  778. <!--- search bar; no need to edit this --->
  779. <form action="/search" method="get" class="find" name="sform">
  780. <input type="text" name="q" placeholder="search this blog..." value="{SearchQuery}" value autocomplete="off"/>
  781. <i class="fas fa-search"></i>
  782. </form>
  783.  
  784. <!--- to add more link sections, copy and paste everything in <nav></nav> i.e. from here --->
  785. <nav class="content links">
  786. <h3>heading</h3>
  787. <a href="/">link</a>
  788. <a href="/">link</a>
  789. <a href="/">link</a>
  790. <a href="/">link</a>
  791. <a href="/">link</a>
  792. <a href="/">link</a>
  793. <a href="/">link</a>
  794. </nav>
  795. <!--- to here --->
  796.  
  797. <nav class="content links">
  798. <h3>heading</h3>
  799. <a href="/">link</a>
  800. <a href="/">link</a>
  801. <a href="/">link</a>
  802. <a href="/">link</a>
  803. <a href="/">link</a>
  804. <a href="/">link</a>
  805. <a href="/">link</a>
  806. <a href="/">link</a>
  807. <a href="/">link</a>
  808. <a href="/">link</a>
  809. <a href="/">link</a>
  810. <a href="/">link</a>
  811. <a href="/">link</a>
  812. <a href="/">link</a>
  813. <a href="/">link</a>
  814. <a href="/">link</a>
  815. <a href="/">link</a>
  816. <a href="/">link</a>
  817. </nav>
  818.  
  819. <nav class="content links">
  820. <h3>heading</h3>
  821. <a href="/">#tag</a>
  822. <a href="/">#tag</a>
  823. <a href="/">#tag</a>
  824. <a href="/">#tag</a>
  825. <a href="/">#tag</a>
  826. <a href="/">#tag</a>
  827. <a href="/">#tag</a>
  828. <a href="/">#tag</a>
  829. <a href="/">#tag</a>
  830. <a href="/">#tag</a>
  831. <a href="/">#tag</a>
  832. </nav>
  833.  
  834. </section>
  835.  
  836. <!----- BLOGROLL ----->
  837. <!--- no need to edit anything in this section; your blogroll will show up automatically AS LONG AS YOU HAVE "share the tumblrs you're following" turned on in your settings. also blogrolls won't display on sideblogs --->
  838.  
  839. <section class="panel_broll">
  840. <div class="title">
  841. blogs i follow
  842. <span class="numbers">05</span>
  843. </div>
  844.  
  845. <p>
  846. {block:Following}
  847. {block:Followed}
  848. <div class="blog"><a href="{FollowedURL}">
  849. <img src="{FollowedPortraitURL-40}" class="blogicon">
  850. <div class="blogtext">
  851. <div id="blogname">@{FollowedName}</div><br>
  852. <div id="blogtitle" class="upper">{FollowedTitle}<br></div>
  853. </div>
  854. </a></div>
  855. {/block:Followed}
  856. {/block:Following}
  857. </p>
  858. </section>
  859.  
  860. </div>
  861. </div>
  862.  
  863. <!----- CAROUSEL NAVIGATION ----->
  864.  
  865. <div id="navigation" class="upper">
  866. <label for="button_about" class="label_about"> <span>about</span> </label>
  867. <label for="button_update" class="label_update"> <span>updates</span> </label>
  868. <label for="button_ask" class="label_ask"> <span>contact</span> </label>
  869. <label for="button_nav" class="label_nav"> <span>navigation</span> </label>
  870. <label for="button_broll" class="label_broll"> <span>blogroll</span> </label>
  871. </div>
  872.  
  873.  
  874. </section>
  875.  
  876.  
  877. </body>
  878. </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!