API tools faq
paste
Advertisement
silbrigthemes

Charakterstudie (Page 30)

silbrigthemes
May 29th, 2020 (edited)
1,355
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.23 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. CHARAKTERSTUDIE
  7. Page #30 by silbrigthemes
  8.  
  9. Charakterstudie is a responsive page which allows you to display information on multiple characters at once.
  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. 6) Do not redistribute to other sites.
  21.  
  22. ----------
  23.  
  24. Useful comments to this code have been made.
  25.  
  26. If you need any help for a problem , feel free to send me a message via silbrigthemes.tumblr.com/ask or send a message to my official support blog, silbrigsupport.tumblr.com.
  27.  
  28. Have fun!
  29.  
  30. Love,
  31. Julia <3
  32.  
  33. ----------
  34.  
  35. Note:
  36.  
  37. This work is protected by a creative commons
  38. Attribution-NonCommercial-NoDerivatives 4.0 International
  39. (CC BY-NC-ND 4.0)
  40. license.
  41.  
  42. -->
  43.  
  44. <head>
  45.  
  46. <meta charset="utf-16">
  47. <title>{Title} | Charakterstudie</title>
  48. <!-- {Title} is your blog title. Change after the "|". -->
  49. <link rel="shortcut icon" href="{Favicon}"/>
  50. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  51. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  52.  
  53. <!-- Necessary for the theme to be responsive. -->
  54. <meta name="viewport" content="width=device-width, initial-scale=1">
  55.  
  56. <!-- Changes the toolbar color on mobile. -->
  57. <meta name="theme-color" content="#d9d9d9"/>
  58.  
  59. <!-- Icon font, by suiomi. -->
  60. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  61.  
  62. <!-- Necessary for the scripts to work. -->
  63. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  64.  
  65. <!-- FONTS -->
  66. <!-- Body | Open Sans -->
  67. <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
  68. <!-- Titles | Josefin Sans -->
  69. <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;700&display=swap" rel="stylesheet">
  70.  
  71. <!-- OTHER FONTS -->
  72. <!-- Cormorant Garamond -->
  73. <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,400,700&amp;subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
  74. <!-- Dancing Script -->
  75. <link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700&amp;subset=latin-ext,vietnamese" rel="stylesheet">
  76. <!-- Roboto Mono -->
  77. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  78.  
  79. <style>
  80.  
  81. body{
  82. margin:0;
  83. top:0;
  84. left:0;
  85. background-color:#fff; /* background color */
  86. font-family:"Open Sans", Verdana; /* font family */
  87. font-size:1em; /* 1em = 16px */
  88. color:#222; /* text color */
  89. overflow-x:hidden;
  90. text-align:justify; /* alt.: left */
  91. }
  92.  
  93. /* Custom Scrollbar */
  94. ::-webkit-scrollbar{
  95. width:10px;
  96. }
  97.  
  98. ::-webkit-scrollbar-thumb{
  99. width:10px;
  100. border-radius:5px;
  101. box-shadow: inset 2px 2px 6px #b8b8b8,
  102. inset -2px -2px 6px #ffffff;
  103. /* (direction) offset-left offset-top color */
  104. }
  105.  
  106. /* Custom Text Selection */
  107. ::selection{
  108. background-color:#ececec; /* background color */
  109. color:#222; /* text color */
  110. }
  111.  
  112. ::-moz-selection{
  113. background-color:#ececec; /* background color */
  114. color:#222; /* text color */
  115. }
  116.  
  117. ::-o-selection{
  118. background-color:#ececec; /* background color */
  119. color:#222; /* text color */
  120. }
  121.  
  122. ::-webkit-selection{
  123. background-color:#ececec; /* background color */
  124. color:#222; /* text color */
  125. }
  126.  
  127. /* Custom Tooltips */
  128. .tippy-tooltip.charakterstudie-theme{
  129. background-color:#02182b; /* background color */
  130. color:#fff; /* text color */
  131. text-align:left; /* alt.: center, justify */
  132. text-transform:lowercase;
  133. /* alt.: normal, uppercase, capitalize */
  134. }
  135.  
  136. .tippy-tooltip.charakterstudie-theme .tippy-svg-arrow{
  137. fill:#02182b; /* background color */
  138. }
  139.  
  140. /* ––– END GENERAL | START TEXT STYLES ––– */
  141.  
  142. /* Bold Text */
  143. b, strong{
  144. font-weight:bold;
  145. color:#444; /* text color */
  146. }
  147.  
  148. /* Italic Text */
  149. i, em{
  150. font-weight:300; /* thin, alt.: 400 */
  151. font-style:italic;
  152. color:#000; /* text color */
  153. }
  154.  
  155. /* Marked Text */
  156. mark{
  157. color:#222; /* text color */
  158. background-color:#68c5db; /* background color */
  159. border-radius:4px; /* rounded corners */
  160. padding:0 4px;
  161. }
  162.  
  163. /* Preformatted Text */
  164. pre{
  165. background-color:#02182b; /* background color */
  166. color:#fff; /* text color */
  167. font-family:"Roboto Mono", Courier; /* font-family */
  168. font-size:calc(1em - 2px); /* font size */
  169. word-wrap:break-all;
  170. white-space:pre-wrap;
  171. padding:1em;
  172. }
  173.  
  174. /* Small Text */
  175. small{
  176. font-size:calc(1em - 4px); /* font size */
  177. }
  178.  
  179. /* Underlined Text */
  180. u{
  181. text-decoration:none;
  182. border-bottom:2px solid #222; /* width style color */
  183. }
  184.  
  185. /* Blockquote */
  186. blockquote{
  187. border-left:2px solid #02182b; /* width style color */
  188. padding-left:1em;
  189. }
  190.  
  191. /* Embedded Media */
  192. img, iframe{
  193. max-width:100%;
  194. height:auto;
  195. }
  196.  
  197. /* Empty Paragraphs */
  198. p:empty{
  199. display:none;
  200. }
  201.  
  202. /* Text Line */
  203. hr{
  204. width:100%;
  205. border:none;
  206. height:4px;
  207. border-radius:2px; /* rounded corners */
  208. box-shadow: inset 1px 1px 3px #b8b8b8,
  209. inset -1px -1px 3px #ffffff;
  210. /* (direction) offset-left offset-top color */
  211. }
  212.  
  213. /* LISTS */
  214. /* Ordered Lists */
  215. ol{
  216. list-style-type:decimal;
  217. }
  218.  
  219. /* Unordered Lists */
  220. ul{
  221. list-style-type:disc;
  222. }
  223.  
  224. /* LINKS */
  225. /* Link */
  226. a{
  227. text-decoration:none;
  228. color:#222; /* text color */
  229. border-bottom:2px solid #0197f6; /* width style color */
  230. }
  231.  
  232. /* Link | Hover */
  233. a:hover{
  234. color:#0197f6; /* text color */
  235. border-bottom:2px solid #0197f6; /* width style color */
  236. }
  237.  
  238. /* Link | Transitions */
  239. a, a:hover{
  240. transition:0.5s;
  241. -moz-transition:0.5s;
  242. -o-transition:0.5s;
  243. -webkit-transition:0.5s;
  244. }
  245.  
  246. /* SPECIAL FONTS */
  247. /* Quirky Font */
  248. .npf_quirky{
  249. font-family: "Dancing Script", cursive; /* font family */
  250. font-size:1.5em; /* font size */
  251. }
  252.  
  253. /* Chat Font */
  254. .npf_chat{
  255. font-family:"Roboto Mono", Courier; /* font family */
  256. }
  257.  
  258. /* Quote Font */
  259. .npf_quote{
  260. font-family:"Cormorant Garamond", "Palatino"; /* font */
  261. font-size:1.25em; /* font size */
  262. }
  263.  
  264. /* HEADINGS */
  265. /* First Heading */
  266. h1{
  267. color:#d7263d; /* text color */
  268. font-size:1.625em; /* font size */
  269. }
  270.  
  271. /* Second Heading */
  272. h2{
  273. font-size:1.5em; /* font size */
  274. color:#02182b; /* text color */
  275. }
  276.  
  277. /* Third Heading */
  278. h3{
  279. font-size:1.375em; /* font size */
  280. color:#448fa3; /* text color */
  281. }
  282.  
  283. /* Fourth Heading */
  284. h4{
  285. font-size:1.25em; /* font size */
  286. color:#d7263d; /* text color */
  287. }
  288.  
  289. /* Fifth Heading */
  290. h5{
  291. font-size:1.125em; /* font size */
  292. color:#02182b; /* text color */
  293. }
  294.  
  295. /* Sixth Heading */
  296. h6{
  297. font-size:1em; /* font size */
  298. color:#448fa3; /* text color */
  299. }
  300.  
  301. /* All Headings */
  302. h1, h2, h3, h4, h5, h6{
  303. font-weight:400; /* alt.: 300 (thin), 700 (bold) */
  304. }
  305.  
  306. /* COLORED TEXT */
  307. /* Pink Text */
  308. .npf_color_niles {
  309. color:#f400cb; /* text color */
  310. }
  311.  
  312. /* Red Text */
  313. .npf_color_joey {
  314. color:#f40028; /* text color */
  315. }
  316.  
  317. /* Orange Text */
  318. .npf_color_monica {
  319. color:#f47a00; /* text color */
  320. }
  321.  
  322. /* Yellow Text */
  323. .npf_color_phoebe {
  324. color:#f4cc00; /* text color */
  325. }
  326.  
  327. /* Green Text */
  328. .npf_color_ross {
  329. color:#15db15; /* text color */
  330. }
  331.  
  332. /* Blue Text */
  333. .npf_color_rachel {
  334. color:#0051f4; /* text color */
  335. }
  336.  
  337. /* Purple Text */
  338. .npf_color_chandler {
  339. color:#a300f4; /* text color */
  340. }
  341.  
  342. /* ––– END TEXT STYLES | START LAYOUT ––– */
  343.  
  344. /* TOPBAR */
  345. #topbar{
  346. background-color:#d7263d; /* background color */
  347. color:#fff; /* text color */
  348. box-shadow: inset -20px -20px 60px #b72034,
  349. inset 20px 20px 60px #f72c46,
  350. 20px 20px 60px #d9d9d9,
  351. -20px -20px 60px #ffffff;
  352. /* (direction) offset-left offset-top color */
  353. width:calc(80vw - 2em);
  354. position:fixed;
  355. left:10vw;
  356. top:0;
  357. height:56px;
  358. padding:1em;
  359. border-radius:0 0 3em 3em; /* rounded corners */
  360. display:flex;
  361. align-items:center;
  362. justify-content:center;
  363. }
  364.  
  365. /* Topbar | Title */
  366. #t-title{
  367. font-size:3em; /* font size */
  368. font-family:"Josefin Sans", "Open Sans", Verdana; /* font */
  369. }
  370.  
  371. /* CONTAINER */
  372. #container{
  373. margin-top:calc(10vh + 56px + 2em);
  374. }
  375.  
  376. /* CARD */
  377. .card{
  378. width:calc(60vw + 2em);
  379. margin-left:calc(20vw - 1em);
  380. min-height:60vh;
  381. height:auto;
  382. margin-top:10vh;
  383. margin-bottom:10vh;
  384. display:grid;
  385. grid-template-rows:auto auto auto auto;
  386. grid-row-gap:1em;
  387. grid-template-columns:20vw 20vw 20vw;
  388. grid-column-gap:1em;
  389. border-radius:1em;
  390. box-shadow: 20px 20px 60px #d9d9d9,
  391. -20px -20px 60px #ffffff;
  392. /* (direction) offset-left offset-top color */
  393. }
  394.  
  395. /* Card | Title */
  396. .card-title{
  397. background-color:#02182b; /* background color */
  398. color:#fff; /* text color */
  399. box-shadow: inset 20px 20px 60px #021425,
  400. inset -20px -20px 60px #021c31;
  401. /* (direction) offset-left offset-top color */
  402. font-size:1.5em; /* font size */
  403. font-family:"Josefin Sans", "Open Sans", Verdana;
  404. padding:1em;
  405. grid-row-start:1;
  406. grid-row-end:2;
  407. grid-column-start:1;
  408. grid-column-end:4;
  409. display:flex;
  410. align-items:center;
  411. justify-content:center;
  412. border-radius:1em 1em 0 0; /* rounded corners */
  413. }
  414.  
  415. /* Card | Image */
  416. .card-image{
  417. grid-row-start:2;
  418. grid-row-end:5;
  419. display:flex;
  420. align-items:center;
  421. justify-content:center;
  422. padding:1em;
  423. }
  424.  
  425. /* -- Card | Odd Card | Image */
  426. .card:nth-child(n) .card-image{
  427. grid-column-start:1;
  428. grid-column-end:2;
  429. }
  430.  
  431. /* -- Card | Even Card | Image */
  432. .card:nth-child(2n) .card-image{
  433. grid-column-start:3;
  434. grid-column-end:4;
  435. }
  436.  
  437. /* -- Card | Image */
  438. .card-image img{
  439. max-width:100%;
  440. max-height:100%;
  441. }
  442.  
  443. /* Card | Short Info */
  444. .card-short-info{
  445. grid-row-start:2;
  446. grid-row-end:3;
  447. padding:1em;
  448. }
  449.  
  450. /* -- Card | Short Info | Odd Card */
  451. .card:nth-child(n) .csi1{
  452. grid-column-start:2;
  453. grid-column-end:3;
  454. }
  455.  
  456. /* -- Card | Short Info | Even Card */
  457. .card:nth-child(2n) .csi1{
  458. grid-column-start:1;
  459. grid-column-end:2;
  460. }
  461.  
  462. /* -- Card | Short Info | Table */
  463. .card-short-info table, .card-short-info table tr{
  464. max-width:100%;
  465. }
  466.  
  467. .card-short-info table td{
  468. text-align:left;
  469. vertical-align:top;
  470. padding:2px 4px;
  471. }
  472.  
  473. /* Card | Long Info */
  474. .card-long-info{
  475. grid-row-start:3;
  476. grid-row-end:5;
  477. padding:1em;
  478. }
  479.  
  480. /* -- Card | Long Info | Odd Card */
  481. .card:nth-child(n) .card-long-info{
  482. grid-column-start:2;
  483. grid-column-end:4;
  484. }
  485.  
  486. /* -- Card | Long Info | Even Card */
  487. .card:nth-child(2n) .card-long-info{
  488. grid-column-start:1;
  489. grid-column-end:3;
  490. }
  491.  
  492. /* ––– END LAYOUT | START EXTRAS ––– */
  493.  
  494. /* CONTROLS */
  495. /* Control Element */
  496. .cont{
  497. width:36px;
  498. height:36px;
  499. background-color:#fff; /* background color */
  500. color:#02182b; /* text color */
  501. box-shadow: inset 4px 4px 12px #d9d9d9,
  502. inset -4px -4px 12px #ffffff,
  503. 4px 4px 12px #d9d9d9,
  504. -4px -4px 12px #ffffff;
  505. /* (direction) offset-left offset-top color */
  506. border-radius:8px; /* rounded corners */
  507. display:flex;
  508. align-items:center;
  509. justify-content:center;
  510. }
  511.  
  512. /* Control Element | Hover */
  513. .cont:hover{
  514. transform:scale(1.05); /* increase size */
  515. color:#d7263d; /* text color */
  516. }
  517.  
  518. /* Control Element | Transitions */
  519. .cont, .cont:hover{
  520. transition:0.5s;
  521. -moz-transition:0.5s;
  522. -o-transition:0.5s;
  523. -webkit-transition:0.5s;
  524. }
  525.  
  526. /* Control Element | Icon */
  527. .cont span{
  528. font-size:calc(1em - 2px); /* font size */
  529. }
  530.  
  531. /* CREDIT */
  532. #credit{
  533. position:fixed;
  534. bottom:8px;
  535. left:8px;
  536. }
  537.  
  538. /* HOME */
  539. #home{
  540. position:fixed;
  541. top:8px;
  542. left:8px;
  543. }
  544.  
  545. /* Hides standard tumblr controls */
  546. body > iframe:first-child {
  547. display: none !important;
  548. }
  549.  
  550. /* CUSTOM CONTROLS */
  551. #custom-controls{
  552. width:calc(2 * 36px + 8px);
  553. height:calc(2 * 36px + 8px);
  554. position:fixed;
  555. right:8px;
  556. top:8px;
  557. display:flex;
  558. align-items:flex-start;
  559. justify-content:space-between;
  560. flex-wrap:wrap;
  561. }
  562.  
  563. /* Controls | Link */
  564. a.conlink{
  565. border-bottom:none;
  566. }
  567.  
  568. /* Hides the tumblr app button, by @yeoli-thm */
  569. .tmblr-iframe--app-cta-button {
  570. display:none!important;
  571. }
  572.  
  573. /* ––– END EXTRAS | START RESPONSIVE LAYOUT ––– */
  574.  
  575. /* RESPONSIVE LAYOUT | LARGE SCREENS (DESKTOP) */
  576. @media only screen and (min-width:800px){
  577. /* MOBILE FOOTER */
  578. #mobile-footer{
  579. display:none;
  580. }
  581. }
  582.  
  583. /* RESPONSIVE LAYOUT | SMALL SCREENS (TABLETS) */
  584. @media only screen and (max-width:800px){
  585. /* TOPBAR */
  586. #topbar{
  587. width:calc(85vw - 2em);
  588. position:fixed;
  589. left:7.5vw;
  590. }
  591.  
  592. /* CONTAINER */
  593. #container{
  594. margin-bottom:20vh;
  595. }
  596.  
  597. /* CARD */
  598. .card{
  599. width:calc(75vw + 2em);
  600. margin-left:calc(12.5vw - 1em);
  601. grid-template-rows:auto auto auto auto auto;
  602. }
  603.  
  604. /* -- Odd Cards */
  605. .card:nth-child(n){
  606. grid-template-columns:30vw 22.5vw 22.5vw;
  607. }
  608.  
  609. /* -- Even Cards */
  610. .card:nth-child(2n){
  611. grid-template-columns:22.5vw 22.5vw 30vw;
  612. }
  613.  
  614. /* -- Card Short Info 1 */
  615. .csi1{
  616. grid-row-start:2;
  617. grid-row-end:3;
  618. }
  619.  
  620. /* -- Card Short Info 2 */
  621. .csi2{
  622. grid-row-start:3;
  623. grid-row-end:4;
  624. }
  625.  
  626. /* -- »» Odd Cards | Short Info */
  627. .card:nth-child(n) .csi1, .card:nth-child(n) .csi2{
  628. grid-column-start:2;
  629. grid-column-end:4;
  630. }
  631.  
  632. /* -- »» Even Cards | Short Info */
  633. .card:nth-child(2n) .csi1, .card:nth-child(2n) .csi2{
  634. grid-column-start:1;
  635. grid-column-end:3;
  636. }
  637.  
  638. /* -- Card Long Info */
  639. .card-long-info{
  640. grid-row-start:4;
  641. grid-row-end:6;
  642. }
  643.  
  644. /* MOBILE FOOTER */
  645. #mobile-footer{
  646. background-color:#448fa3; /* background color */
  647. box-shadow: inset -20px -20px 60px #3a7a8b,
  648. inset 20px 20px 60px #4ea4bb,
  649. 20px 20px 60px #d9d9d9,
  650. -20px -20px 60px #ffffff;
  651. /* (direction) offset-left offset-top color */
  652. width:85vw;
  653. position:fixed;
  654. left:7.5vw;
  655. bottom:0;
  656. height:calc(56px + 2em);
  657. border-radius:3em 3em 0 0; /* rounded corners */
  658. display:flex;
  659. align-items:center;
  660. justify-content:space-between;
  661. }
  662.  
  663. /* -- Mobile Footer | Element */
  664. .mf{
  665. width:calc(80vw / 5);
  666. display:flex;
  667. align-items:center;
  668. justify-content:center;
  669. }
  670.  
  671. /* Mobile Footer | Link */
  672. a.mf-link{
  673. border-bottom:none;
  674. color:#fff; /* text color */
  675. font-size:calc(1em + 2px); /* font size */
  676. }
  677.  
  678. /* Mobile Footer | Link | Hover */
  679. a.mf-link:hover{
  680. transform:scale(1.1); /* increase size */
  681. }
  682.  
  683. /* Mobile Footer | Link | Transitions */
  684. a.mf-link, a.mf-link:hover{
  685. transition:0.5s;
  686. -moz-transition:0.5s;
  687. -o-transition:0.5s;
  688. -webkit-transition:0.5s;
  689. }
  690.  
  691. /* EXTRAS */
  692. #credit, #custom-controls, #home{
  693. display:none;
  694. }
  695. }
  696.  
  697. /* RESPONSIVE LAYOUT | SMALL SCREENS (PHONES) */
  698. @media only screen and (max-width: 450px){
  699. /* TOPBAR */
  700. #topbar{
  701. border-radius:0 0 1em 1em; /* rounded corners */
  702. }
  703.  
  704. /* TOPBAR | Title */
  705. #t-title{
  706. font-size:2em; /* font size */
  707. }
  708.  
  709. /* CARD | Image */
  710. .card-image{
  711. display:none;
  712. }
  713.  
  714. /* CARD | Long + Short Info */
  715. .card:nth-child(n) .csi1, .card:nth-child(2n) .csi1,
  716. .card:nth-child(n) .csi2, .card:nth-child(2n) .csi2,
  717. .card:nth-child(n) .card-long-info,
  718. .card:nth-child(2n) .card-long-info{
  719. grid-column-start:1;
  720. grid-column-end:4;
  721. }
  722.  
  723. /* MOBILE FOOTER */
  724. #mobile-footer{
  725. border-radius:1em 1em 0 0; /* rounded corners */
  726. }
  727. }
  728.  
  729. </style>
  730. </head>
  731.  
  732. <body>
  733.  
  734. <!-- TOPBAR -->
  735. <div id="topbar">
  736. <!-- Page Title -->
  737. <div id="t-title">Charakterstudie</div>
  738. </div>
  739. <!-- // end topbar -->
  740.  
  741. <!-- CONTAINER -->
  742. <div id="container">
  743. <!-- ARD -->
  744. <div class="card">
  745. <!-- Card Title -->
  746. <div class="card-title">[CHARACTER NAME HERE]</div>
  747. <!-- Card Image -->
  748. <div class="card-image">
  749. <img src="[IMAGE URL HERE]" alt="[IMAGE DESCRIPTION HERE]"/>
  750. </div>
  751. <!-- Short Info 1 -->
  752. <div class="card-short-info csi1">
  753. <table>
  754. <tr>
  755. <td>Info:</td>
  756. <td>…</td>
  757. </tr>
  758. <tr>
  759. <td>Info:</td>
  760. <td>…</td>
  761. </tr>
  762. <tr>
  763. <td>Info:</td>
  764. <td>…</td>
  765. </tr>
  766. <tr>
  767. <td>Info:</td>
  768. <td>…</td>
  769. </tr>
  770. </table>
  771. </div>
  772. <!-- Short Info 2 -->
  773. <div class="card-short-info csi2">
  774. <table>
  775. <tr>
  776. <td>Info:</td>
  777. <td>…</td>
  778. </tr>
  779. <tr>
  780. <td>Info:</td>
  781. <td>…</td>
  782. </tr>
  783. <tr>
  784. <td>Info:</td>
  785. <td>…</td>
  786. </tr>
  787. </table>
  788. </div>
  789. <!-- Long Info -->
  790. <div class="card-long-info">
  791. <p>[LONG DESCRIPTION HERE]</p>
  792. </div>
  793. </div>
  794. <!-- // end card -->
  795.  
  796. <!-- Copy and paste more cards after this comment! -->
  797. </div>
  798. <!-- // end character container -->
  799.  
  800. <!-- MOBILE FOOTER -->
  801. <div id="mobile-footer">
  802. <!-- Dashboard Link -->
  803. <div class="mf">
  804. <a href="https://www.tumblr.com/dashboard" title="tumblr dashboard" class="mf-link">
  805. <span class="th th-tumblr-o"></span>
  806. </a>
  807. </div>
  808.  
  809. <!-- Follow User -->
  810. <div class="mf">
  811. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="mf-link">
  812. <span class="th th-plus-1-o"></span>
  813. </a>
  814. </div>
  815.  
  816. <!-- Home Link | Back to Blog -->
  817. <div class="mf">
  818. <a href="/" title="return home" class="mf-link">
  819. <span class="th th-home-o"></span>
  820. </a>
  821. </div>
  822.  
  823. <!-- Archive Link -->
  824. <div class="mf">
  825. <a href="/archive" title="browse archive" class="mf-link">
  826. <span class="th th-box-o"></span>
  827. </a>
  828. </div>
  829.  
  830. <!-- Page Credit -->
  831. <!-- Delete this and die. -->
  832. <div class="mf">
  833. <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="mf-link">
  834. <span class="th th-code"></span>
  835. </a>
  836. </div>
  837. </div>
  838. <!-- // end mobile footer -->
  839.  
  840. <!-- PAGE CREDIT -->
  841. <!-- Delete this and die. -->
  842. <a href="https://silbrigthemes.tumblr.com/" class="conlink">
  843. <div class="cont" id="credit" title="page by silbrigthemes">
  844. <span class="th th-code"></span>
  845. </div>
  846. </a>
  847. <!-- // end page credit -->
  848.  
  849. <!-- CUSTOM TUMBLR CONTROLS -->
  850. <div id="custom-controls">
  851. <!-- Dashboard Link -->
  852. <a href="https://www.tumblr.com/dashboard" class="conlink">
  853. <div class="cont" title="tumblr dashboard">
  854. <span class="th th-tumblr-o"></span>
  855. </div>
  856. </a>
  857.  
  858. <!-- Direct Message -->
  859. <a href="https://www.tumblr.com/message/{Name}" class="conlink">
  860. <div class="cont" title="send a message to {Name}">
  861. <span class="th th-chat-bubble-o"></span>
  862. </div>
  863. </a>
  864.  
  865. <!-- Page Customization -->
  866. <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" class="conlink">
  867. <div class="cont" title="customize page">
  868. <span class="th th-pencil-o"></span>
  869. </div>
  870. </a>
  871.  
  872. <!-- Follow -->
  873. <a href="https://www.tumblr.com/follow/{Name}" class="conlink">
  874. <div class="cont" title="follow {Name}">
  875. <span class="th th-plus-1-o"></span>
  876. </div>
  877. </a>
  878. </div>
  879. <!-- // end custom tumblr controls -->
  880.  
  881. <!-- HOME LINK -->
  882. <a href="/" class="conlink">
  883. <div class="cont" id="home" title="return to blog">
  884. <span class="th th-home-o"></span>
  885. </div>
  886. </a>
  887. <!-- // end home link -->
  888.  
  889. <!-- TOOLTIPS -->
  890. <!-- Tippy.js tooltips, by atomiks. -->
  891. <script src="https://unpkg.com/popper.js@1"></script>
  892. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  893. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  894.  
  895. <script>
  896. tippy('a[title], .cont', {
  897. theme: 'charakterstudie',
  898. zIndex: 9999999999,
  899. arrow: tippy.roundArrow,
  900. maxWidth: 300,
  901. placement: 'auto',
  902.  
  903. content(reference) {
  904. const title = reference.getAttribute('title');
  905. reference.removeAttribute('title');
  906. return title;
  907. },
  908. });
  909. </script>
  910.  
  911. </body>
  912. </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!