API tools faq
paste
Advertisement
seiche

page three: tansy

seiche
Apr 27th, 2020 (edited)
7,564
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.66 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <title>{Name} / works in progress</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. -feather icons by Cole Bemis
  16. -tippy.js by atomiks
  17. (full list of credits @ seyche.tumblr.com/credits)
  18.  
  19. --->
  20.  
  21. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i&display=swap" rel="stylesheet">
  22.  
  23. <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i&display=swap" rel="stylesheet">
  24.  
  25. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  26.  
  27. <script src="https://unpkg.com/feather-icons"></script>
  28.  
  29. <!----- TOOLTIPS ----->
  30.  
  31. <script src="https://unpkg.com/popper.js@1"></script>
  32. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  33.  
  34. <style type="text/css">
  35.  
  36. /*----- VARIABLES: EDIT THIS SECTION!!!! -----*/
  37.  
  38. :root {
  39.  
  40. /* ----- colours -----*/
  41.  
  42. --background: #ffffff;
  43. --text: #5a5a5a;
  44. --links: #919191;
  45. --accent: #adc0c7;
  46. --title: #212121;
  47. --borders: #e0e0e0;
  48. --header-background: #212121;
  49. --header-text: #fafafa;
  50. --header-links: #919191;
  51. --cover-background: #f2f2f2;
  52.  
  53. /* ----- font styling -----*/
  54.  
  55. --font-size: 14px;
  56. --body-font: 'Roboto', sans-serif;
  57. --title-font: 'Playfair Display', serif;
  58. --summary-text-align: left;
  59. --character-text-align: left;
  60.  
  61. }
  62.  
  63. /*---
  64.  
  65. IF YOU HAVE LOTS OF WORKS THAT ARE WRAPPING ONTO A SECOND LINE: remove the ASTERISKS (*), DASHES (---), AND SLASHES (/) from the line of code below. This will remove the border from the active tab and will make it look cleaner if you have a lot of works.
  66.  
  67. ---*/
  68.  
  69. /*--- #tabs li a, #tabs li a.inactive {border-bottom: none !important;} ---*/
  70.  
  71. /*----- END VARIABLES: you don't need to edit the css after here -----*/
  72.  
  73. @keyframes lazyload {
  74. 0% {opacity: 0;}
  75. 100% {opacity: 1;}
  76. }
  77.  
  78. @-webkit-keyframes lazyload {
  79. 0% {opacity: 0;}
  80. 100% {opacity: 1;}
  81. }
  82.  
  83. @-moz-keyframes lazyload {
  84. 0% {opacity: 0;}
  85. 100% {opacity: 1;}
  86. }
  87.  
  88. @-o-keyframes lazyload {
  89. 0% {opacity: 0;}
  90. 100% {opacity: 1;}
  91. }
  92.  
  93. body {
  94. font-family: var(--body-font);
  95. font-size: var(--font-size);
  96. color: var(--text);
  97. background-color: var(--background);
  98. text-align: left;
  99. line-height: 160%;
  100. word-wrap: break-word;
  101. letter-spacing: 0.2px;
  102. margin: 0;
  103. overflow-x: hidden;
  104. -webkit-animation: lazyload 2s;
  105. -moz-animation: lazyload 2s;
  106. -o-animation: lazyload 2s;
  107. animation: lazyload 2s;
  108. }
  109.  
  110. a {
  111. color: var(--links);
  112. text-decoration: none;
  113. cursor: pointer;
  114. -webkit-transition: all 0.3s;
  115. -moz-transition: all 0.3s;
  116. -ms-transition: all 0.3s;
  117. -o-transition: all 0.3s;
  118. transition: all 0.3s;
  119. }
  120.  
  121. a:hover {
  122. color: var(--accent);
  123. -webkit-transition: all 0.3s;
  124. -moz-transition: all 0.3s;
  125. -ms-transition: all 0.3s;
  126. -o-transition: all 0.3s;
  127. transition: all 0.3s;
  128. }
  129.  
  130. h1, h2, h3, h4, h5 {
  131. font-family: var(--title-font);
  132. color: var(--title);
  133. text-transform: uppercase;
  134. letter-spacing: 1px;
  135. font-weight: normal;
  136. line-height: 140%;
  137. }
  138.  
  139. h1 {font-size: 1.5em;}
  140. h2 {font-size: 1.3em;}
  141. h3 {font-size: 1.25em;}
  142. h4 {font-size: 1em;}
  143. h5 {font-size: 0.9em;}
  144.  
  145. small {font-size: 0.9em;}
  146. big {font-size: 1.1em;}
  147. b, bold, strong {color: var(--title);}
  148.  
  149. ul {list-style-type: circle;}
  150. ol {list-style-type: decimal;}
  151.  
  152. ::-webkit-scrollbar {
  153. width: 17px;
  154. height: 17px;
  155. background-color: var(--background);
  156. }
  157.  
  158. ::-webkit-scrollbar-track {border: 8px solid var(--background); background-color: var(--borders);}
  159.  
  160. ::-webkit-scrollbar-thumb {
  161. border: 6px solid var(--background);
  162. background-color: var(--title);
  163. min-height: 24px;
  164. min-width: 24px;
  165. }
  166.  
  167. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  168. display: none;
  169. }
  170.  
  171. .tippy-tooltip.custom-theme {
  172. background-color: var(--background);
  173. color: var(--title);
  174. text-align: center;
  175. font-family: var(--body-font);
  176. font-weight: normal;
  177. text-transform: uppercase;
  178. letter-spacing: 1px;
  179. border-radius: 0;
  180. font-style: normal;
  181. padding: 0.25em 0.5em;
  182. margin: 15px auto auto 10px;
  183. font-size: 0.9em;
  184. border: 1px solid var(--borders);
  185. }
  186.  
  187. .title {
  188. font-family: var(--title-font);
  189. color: var(--title);
  190. text-transform: uppercase;
  191. letter-spacing: 2px;
  192. font-size: 1.5em;
  193. font-weight: bold;
  194. line-height: 140%;
  195. }
  196.  
  197. .title::first-letter, .subtitle::first-letter {color: var(--accent);}
  198.  
  199. .subtitle {
  200. font-family: var(--title-font);
  201. color: var(--title);
  202. text-transform: uppercase;
  203. letter-spacing: 1px;
  204. font-size: 1.5em;
  205. margin-bottom: 1.5em;
  206. line-height: 140%;
  207. }
  208.  
  209. .upper, #stats b {
  210. text-transform: uppercase;
  211. letter-spacing: 1px;
  212. font-size: 0.9em;
  213. }
  214.  
  215. /*----- CONTAINER -----*/
  216.  
  217. #content-wrap {
  218. margin: 6.75em auto auto auto;
  219. width: 99vw;
  220. position: relative;
  221. }
  222.  
  223. /*----- HEADER -----*/
  224.  
  225. header {
  226. background-color: var(--header-background);
  227. color: var(--header-text);
  228. position: fixed;
  229. width: 100%;
  230. top: 0;
  231. left: 0;
  232. right: 0;
  233. padding: 1.5em 2em 0 2em;
  234. z-index: 99999;
  235. border-bottom: 1px solid var(--borders);
  236. }
  237.  
  238. header .title {color: var(--header-text);}
  239.  
  240. header nav {
  241. float: right;
  242. position: absolute;
  243. right: calc(5em + 1.75em);
  244. top: 1.75em;
  245. }
  246.  
  247. nav svg {
  248. width: 1.5em;
  249. height: 1.5em;
  250. display: inline-block;
  251. color: var(--header-links);
  252. -webkit-transition: all 0.3s;
  253. -moz-transition: all 0.3s;
  254. -ms-transition: all 0.3s;
  255. -o-transition: all 0.3s;
  256. transition: all 0.3s;
  257. }
  258.  
  259. nav a {margin-left: 1em;}
  260.  
  261. nav a:hover svg {
  262. color: var(--accent);
  263. -webkit-transition: all 0.3s;
  264. -moz-transition: all 0.3s;
  265. -ms-transition: all 0.3s;
  266. -o-transition: all 0.3s;
  267. transition: all 0.3s;
  268. }
  269.  
  270. /*----- TABS -----*/
  271.  
  272. #tabs {
  273. margin: 1em 0 0 0;
  274. padding-bottom: 1.5em;
  275. }
  276.  
  277. #tabs li {
  278. display: inline-block;
  279. list-style-type: none;
  280. outline: none;
  281. }
  282.  
  283. #tabs li a {
  284. color: var(--accent);
  285. font-weight: bold;
  286. margin: 0 1.5em 0 0;
  287. border-bottom: 2px solid var(--accent);
  288. padding-bottom: calc(2px + 1.5em);
  289. }
  290.  
  291. #tabs li a.inactive {
  292. color: var(--header-links);
  293. font-weight: normal;
  294. border-bottom: 2px solid transparent;
  295. }
  296.  
  297. #tabs li a:hover, #tabs li a.inactive:hover {
  298. color: var(--accent);
  299. }
  300.  
  301. .container {
  302. clear: both;
  303. background-color: var(--background);
  304. }
  305.  
  306. /*----- COVER -----*/
  307.  
  308. .cover-wrap {
  309. width: 49vw;
  310. border-right: 1px solid var(--borders);
  311. height: calc(100% - 6.75em);
  312. background-color: var(--cover-background);
  313. position: fixed;
  314. display: flex;
  315. justify-content: center;
  316. align-items: center;
  317. }
  318.  
  319. .cover {
  320. width: 400px;
  321. height: 600px;
  322. display: flex;
  323. justify-content: center;
  324. align-items: center;
  325. }
  326.  
  327. .cover img {
  328. width: 400px;
  329. height: 600px;
  330. object-fit: cover;
  331. overflow: hidden;
  332. }
  333.  
  334. .wip-box {
  335. flex: initial;
  336. background-color: var(--title);
  337. color: var(--background);
  338. width: 225px;
  339. height: auto;
  340. padding: 30px 20px;
  341. text-align: center;
  342. z-index: 100;
  343. position: absolute;
  344. }
  345.  
  346. .wip-box .title {color: var(--background);}
  347. .genre {font-style: italic; margin-top: 0.5em;}
  348.  
  349. /*----- WIP CONTENT -----*/
  350.  
  351. .wip-wrap {
  352. position: relative;
  353. width: 50vw;
  354. margin-left: 49vw;
  355. padding: 70px;
  356. box-sizing: border-box;
  357. }
  358.  
  359. .wip-content {
  360. border-bottom: 1px solid var(--borders);
  361. padding: 3em 0;
  362. }
  363.  
  364. .wip-content:first-of-type {padding-top: 0;}
  365. .wip-content:last-of-type {border-bottom: none; padding-bottom: 0;}
  366.  
  367. /*----- DETAILS BOX -----*/
  368.  
  369. .stats li {
  370. display: inline-block;
  371. width: 49%;
  372. list-style-type: none;
  373. }
  374.  
  375. .stats b {
  376. margin-right: 1em;
  377. text-transform: uppercase;
  378. letter-spacing: 1px;
  379. font-size: 0.9em;
  380. color: var(--accent);
  381. }
  382.  
  383. /*----- SUMMARY -----*/
  384.  
  385. .summary {text-align: var(--summary-text-align);}
  386. .summary p:first-of-type {margin-top: 0;}
  387.  
  388. /*----- THEMES -----*/
  389.  
  390. .themes li {list-style-type: none; display: inline-block;}
  391.  
  392. .themes li::before {
  393. content: '';
  394. display: inline-block;
  395. width: 5px;
  396. height: 5px;
  397. border-radius: 50%;
  398. background: var(--accent);
  399. margin: 0 0.75em 0.15em 0.75em;
  400. }
  401.  
  402. .themes li:first-of-type::before {display: none;}
  403. .themes li:hover {color: var(--accent);}
  404.  
  405. /*----- LINKS -----*/
  406.  
  407. .links {
  408. text-transform: uppercase;
  409. letter-spacing: 1px;
  410. font-size: 0.9em;
  411. }
  412.  
  413. .links a {
  414. background-color: var(--accent);
  415. color: var(--background);
  416. display: inline-block;
  417. padding: 0.5em 0.85em;
  418. box-sizing: border-box;
  419. margin: 0 0.5em 0.5em 0;
  420. border-radius: 4px;
  421. }
  422.  
  423. .links a:hover {background-color: var(--title);}
  424.  
  425. /*----- CHARACTERS -----*/
  426.  
  427. .character {border: 1px solid var(--borders); margin-top: 1.5em;}
  428. .character:first-of-type {margin-top: 0;}
  429. .character p:first-of-type {margin-top: 0;}
  430. .character p:last-of-type {margin-bottom: 0;}
  431.  
  432. .char-wrap {
  433. background-color: var(--header-background);
  434. color: var(--header-text);
  435. min-height: 70px;
  436. padding: 10px;
  437. box-sizing: border-box;
  438. }
  439.  
  440. .character img {
  441. width: 50px;
  442. height: 50px;
  443. border-radius: 50%;
  444. display: inline-block;
  445. float: left;
  446. margin: auto 1em 0.5em auto;
  447. }
  448.  
  449. .character .char-name {font-family: var(--title-font); font-size: 20px;}
  450. .character .upper {margin-top: 0.5em;}
  451. .char-text {padding: 20px; text-align: var(--character-text-align);}
  452.  
  453. /*----- RELATIONSHIPS -----*/
  454.  
  455. .relationships li {list-style-type: none; margin-top: 1em;}
  456. .relationships li:first-of-type {margin-top: 0;}
  457.  
  458. .relationships svg {
  459. width: 1.25em;
  460. height: 1.25em;
  461. color: var(--accent);
  462. display: inline-block;
  463. vertical-align: middle;
  464. margin-right: 0.5em;
  465. }
  466.  
  467. .ship {
  468. font-family: var(--title-font);
  469. color: var(--title);
  470. display: inline-block;
  471. }
  472.  
  473. .relationships .upper {margin-left: 2.75em;}
  474.  
  475. /*----- QUOTE -----*/
  476.  
  477. .quote {
  478. padding-left: 20px;
  479. font-family: var(--title-font);
  480. font-size: 1.25em;
  481. line-height: 160%;
  482. }
  483.  
  484. .quote::before {
  485. content: '❝';
  486. font-size: 30px;
  487. color: var(--title);
  488. float: left;
  489. margin-left: -20px;
  490. }
  491.  
  492. .source {margin-top: 1em; text-align: right;}
  493.  
  494. .source::before, .relationships .upper::before {
  495. content: '';
  496. width: 1.5em;
  497. height: 1px;
  498. background-color: var(--borders);
  499. display: inline-block;
  500. margin: 0 0.5em 0.35em 0;
  501. }
  502.  
  503. /*----- MOBILE FOOTER NAVIGATION -----*/
  504.  
  505. footer {
  506. background-color: var(--header-background);
  507. color: var(--header-text);
  508. position: fixed;
  509. bottom: 0;
  510. left: 0;
  511. right: 0;
  512. z-index: 99999;
  513. border-top: 1px solid var(--borders);
  514. text-align: center;
  515. padding: 1.5em 2em;
  516. display: none;
  517. }
  518.  
  519. footer nav a {margin: 0 1em;}
  520.  
  521. /*----- RESPONSIVENESS -----*/
  522.  
  523. @media only screen and (max-width: 1100px) {
  524. .cover, .cover img {width: 300px; height: 450px;}
  525. .wip-box {width: 200px;}
  526. }
  527.  
  528. @media only screen and (max-height: 767px) {
  529. .cover, .cover img {width: 300px; height: 450px;}
  530. .wip-box {width: 200px;}
  531. }
  532.  
  533. @media only screen and (max-width: 1024px) and (min-width: 801px) {
  534. .stats li {display: block; width: 100%;}
  535. }
  536.  
  537. @media only screen and (max-width: 800px) {
  538. .cover-wrap {
  539. width: 100vw;
  540. height: auto;
  541. padding: 50px 0;
  542. position: relative;
  543. }
  544.  
  545. .wip-wrap {
  546. width: 100vw;
  547. margin: auto;
  548. position: relative;
  549. }
  550.  
  551. header nav {display: none;}
  552. footer {display: block;}
  553. .wip-content:last-of-type {padding-bottom: 6em;}
  554.  
  555. #tabs li a, #tabs li a.inactive {border-bottom: none;}
  556. }
  557.  
  558. </style>
  559. </head>
  560.  
  561. <body>
  562.  
  563. <!----- HEADER ----->
  564.  
  565. <header>
  566.  
  567. <!----- ================================
  568.  
  569. START EDITING HERE: fill in your page title and project titles here
  570.  
  571. ====================================== ----->
  572.  
  573. <div class="title">works in progress</div>
  574.  
  575. <!----- ADDING TAB TITLES: the basic structure of a tab looks like this:
  576.  
  577. <li><a id="tab1">wip title one</a></li>
  578.  
  579. -Copy and paste this and change the "1" in <a id="tab1"></a> to the number of the tab you're creating. so for the second tab, it would be "tab2", "tab3" for the third tab, etc, etc. Make sure you don't deviate from this naming convention.
  580.  
  581. ----->
  582.  
  583. <div id="tabs" class="upper">
  584.  
  585. <li><a id="tab1">wip title one</a></li>
  586. <li><a id="tab2">wip title two</a></li>
  587.  
  588. </div>
  589.  
  590. <!----- ================================
  591.  
  592. END EDITING TABS HERE
  593.  
  594. ====================================== ----->
  595.  
  596. <!----- HEADER NAV: you don't need to edit this ----->
  597.  
  598. <nav>
  599. <a href="/" title="return home"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></a>
  600. <a href="/ask" title="message"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg></a>
  601. <a href="/archive" title="archive"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg></a>
  602. <a href="https://tumblr.com/dashboard" title="dashboard"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-compass"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg></a>
  603. <a href="https://seyche.tumblr.com" title="tansy page by seyche">
  604. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-code"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></a>
  605. </nav>
  606. </header>
  607.  
  608. <!----- CONTENT WRAP: don't touch! ----->
  609.  
  610. <section id="content-wrap">
  611.  
  612. <!----- INSTRUCTIONS FOR ADDING TABS:
  613.  
  614. 1. copy and paste EVERYTHING WITHIN AND INCLUDING <div class="container" id="tab1C"></div>. I've marked those lines with a "🌈" emoji.
  615.  
  616. 2. change the number in id="tab1C" to the number of the tab. so, for the first tab, it would be "tab1C", the second tab would be "tab2C", and so on. do NOT deviate from this naming convention or else everything will get screwed up.
  617.  
  618. 3. you're done. make sure you've added the tab title in the header section above so you can click on it and switch between tabs.
  619.  
  620. 4. if something looks screwed up, it's probably because you changed the naming convention in the tab id, or you didn't copy the tab divs correctly and now you have stray divs. or, you might have pasted the tab inside another tab, in which case it won't show up. if your divs are screwed up, you can delete it and recopy again, or go to http://www.tormus.com/tools/div_checker and figure out which divs are missing. if you don't see two little 🌈 rainbow emojis at the beginning and end of your divs, you definitely didn't copy it correctly.
  621.  
  622. ----->
  623.  
  624. <!----- ================================
  625.  
  626. BEGINNING OF TAB ONE
  627.  
  628. ====================================== ----->
  629.  
  630. <div class="container" id="tab1C"> <!-- 🌈 -->
  631.  
  632. <!----- project cover ----->
  633.  
  634. <div class="cover-wrap">
  635. <div class="cover">
  636.  
  637. <!----- put the image url for your project below ----->
  638.  
  639. <img src="https://via.placeholder.com/400x600.png">
  640.  
  641. <div class="wip-box">
  642. <div class="title">wip title</div>
  643. <div class="genre">genre</div>
  644. </div>
  645.  
  646. </div>
  647. </div>
  648.  
  649. <!----- end project cover ----->
  650.  
  651. <div class="wip-wrap">
  652.  
  653. <!----- start details ----->
  654.  
  655. <div class="wip-content stats">
  656.  
  657. <div class="subtitle">details</div>
  658.  
  659. <li><b>statistic</b> detail</li>
  660. <li><b>statistic</b> detail</li>
  661. <li><b>statistic</b> detail</li>
  662. <li><b>statistic</b> detail</li>
  663. <li><b>statistic</b> detail</li>
  664. <li><b>statistic</b> detail</li>
  665.  
  666. </div>
  667.  
  668. <!----- end details ----->
  669.  
  670. <!----- start summary ----->
  671.  
  672. <div class="wip-content summary">
  673.  
  674. <div class="subtitle">summary</div>
  675.  
  676. <p>You can write a summary of your project here. Don't forget to use < p> < /p> (without the spaces obviously) to separate paragraphs. Here's what <b>bold</b>, <i>italicized</i>, and <u>underlined</u> text looks like.</p>
  677.  
  678. <ul>
  679. <li>This is an unordered list.</li>
  680. <li>And this is another unordered list item.</li>
  681. </ul>
  682.  
  683. <p>How about an ordered list?</p>
  684.  
  685. <ol>
  686. <li>This is an ordered list item.</li>
  687. <li>And another one.</li>
  688. </ol>
  689.  
  690. </div>
  691.  
  692. <!----- end summary ----->
  693.  
  694. <!----- start themes ----->
  695.  
  696. <div class="wip-content themes">
  697.  
  698. <div class="subtitle">themes and tropes</div>
  699.  
  700. <li>theme one</li>
  701. <li>theme two</li>
  702. <li>theme three</li>
  703. <li>theme four</li>
  704. <li>theme five</li>
  705.  
  706. </div>
  707.  
  708. <!----- end themes ----->
  709.  
  710. <!----- start links ----->
  711.  
  712. <div class="wip-content links">
  713.  
  714. <div class="subtitle">links</div>
  715.  
  716. <a href="/">link one</a>
  717. <a href="/">link two</a>
  718. <a href="/">link three</a>
  719.  
  720. </div>
  721.  
  722. <!----- end links ----->
  723.  
  724. <!----- start characters ----->
  725.  
  726. <div class="wip-content">
  727.  
  728. <div class="subtitle">characters</div>
  729.  
  730. <!----- the basic template for a character looks like this:
  731.  
  732. <div class="character">
  733. <div class="char-wrap">
  734. <img src="IMAGE-URL-HERE">
  735. <div class="char-name">Character Name</div>
  736. <div class="upper">statistic. statistic. statistic.</div>
  737. </div>
  738. <div class="char-text">
  739. <p>Add a biography here.</p>
  740. </div>
  741. </div>
  742.  
  743. copy and paste it below as many times as you need.
  744.  
  745. ----->
  746.  
  747. <!----- character one ----->
  748.  
  749. <div class="character">
  750. <div class="char-wrap">
  751. <img src="https://via.placeholder.com/60x60.png">
  752. <div class="char-name">Character Name</div>
  753. <div class="upper">age. gender. sexual orientation.</div>
  754. </div>
  755. <div class="char-text">
  756. <p>Write your character's biography here. You can write as much text as you want here. Each character icon is 60px x 60px. If you don't want to display the icon, you can delete it above. </p>
  757. <p>You can even write multiple paragraphs, if you want.</p>
  758. </div>
  759. </div>
  760.  
  761. <!----- character two ----->
  762.  
  763. <div class="character">
  764. <div class="char-wrap">
  765. <img src="https://via.placeholder.com/60x60.png">
  766. <div class="char-name">Character Name</div>
  767. <div class="upper">statistic. statistic. statistic.</div>
  768. </div>
  769. <div class="char-text">
  770. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  771. </div>
  772. </div>
  773.  
  774. </div>
  775.  
  776. <!----- end characters ----->
  777.  
  778. <!----- start relationships ----->
  779.  
  780. <div class="wip-content relationships">
  781.  
  782. <div class="subtitle">relationships</div>
  783.  
  784. <li>
  785. <i data-feather="heart"></i>
  786. <div class="ship">character one and character two</div>
  787. <div class="upper">romantic</div>
  788. </li>
  789.  
  790. <li>
  791. <i data-feather="user"></i>
  792. <div class="ship">character three and character four</div>
  793. <div class="upper">platonic</div>
  794. </li>
  795.  
  796. <li>
  797. <i data-feather="users"></i>
  798. <div class="ship">character three and character four</div>
  799. <div class="upper">familial</div>
  800. </li>
  801.  
  802. </div>
  803.  
  804. <!----- end relationships ----->
  805.  
  806. <!----- start quote ----->
  807.  
  808. <div class="wip-content">
  809.  
  810. <div class="subtitle">quote</div>
  811.  
  812. <div class="quote">
  813. Put a quote from your wip here. It can be a long quote, or a short quote; whatever you want.
  814. </div>
  815.  
  816. <div class="source upper">
  817. by Character Name
  818. </div>
  819.  
  820. </div>
  821.  
  822. <!----- end quote ----->
  823.  
  824. </div>
  825.  
  826. </div><!-- 🌈 -->
  827.  
  828. <!----- ================================
  829.  
  830. END TAB ONE
  831.  
  832. ====================================== ----->
  833.  
  834. <!----- ================================
  835.  
  836. BEGINNING OF TAB TWO
  837.  
  838. ====================================== ----->
  839.  
  840. <div class="container" id="tab2C"><!-- 🌈 -->
  841.  
  842. <!----- project cover ----->
  843.  
  844. <div class="cover-wrap">
  845. <div class="cover">
  846.  
  847. <!----- put the image url for your project below ----->
  848.  
  849. <img src="https://via.placeholder.com/400x600.png">
  850.  
  851. <div class="wip-box">
  852. <div class="title">wip title</div>
  853. <div class="genre">genre</div>
  854. </div>
  855.  
  856. </div>
  857. </div>
  858.  
  859. <!----- end project cover ----->
  860.  
  861. <div class="wip-wrap">
  862.  
  863. <!----- start details ----->
  864.  
  865. <div class="wip-content stats">
  866.  
  867. <div class="subtitle">details</div>
  868.  
  869. <li><b>statistic</b> detail</li>
  870. <li><b>statistic</b> detail</li>
  871. <li><b>statistic</b> detail</li>
  872. <li><b>statistic</b> detail</li>
  873.  
  874. </div>
  875.  
  876. <!----- end details ----->
  877.  
  878. <!----- start summary ----->
  879.  
  880. <div class="wip-content summary">
  881.  
  882. <div class="subtitle">summary</div>
  883.  
  884. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  885.  
  886. </div>
  887.  
  888. <!----- end summary ----->
  889.  
  890. <!----- start themes ----->
  891.  
  892. <div class="wip-content themes">
  893.  
  894. <div class="subtitle">themes and tropes</div>
  895.  
  896. <li>theme one</li>
  897. <li>theme two</li>
  898. <li>theme three</li>
  899. <li>theme four</li>
  900. <li>theme five</li>
  901.  
  902. </div>
  903.  
  904. <!----- end themes ----->
  905.  
  906. <!----- start links ----->
  907.  
  908. <div class="wip-content links">
  909.  
  910. <div class="subtitle">links</div>
  911.  
  912. <a href="/">link one</a>
  913. <a href="/">link two</a>
  914. <a href="/">link three</a>
  915.  
  916. </div>
  917.  
  918. <!----- end links ----->
  919.  
  920. <!----- start characters ----->
  921.  
  922. <div class="wip-content">
  923.  
  924. <div class="subtitle">characters</div>
  925.  
  926. <!----- character one ----->
  927.  
  928. <div class="character">
  929. <div class="char-wrap">
  930. <img src="https://via.placeholder.com/60x60.png">
  931. <div class="char-name">Character Name</div>
  932. <div class="upper">statistic. statistic. statistic.</div>
  933. </div>
  934. <div class="char-text">
  935. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  936. </div>
  937. </div>
  938.  
  939. </div>
  940.  
  941. <!----- end characters ----->
  942.  
  943. <!----- start relationships ----->
  944.  
  945. <div class="wip-content relationships">
  946.  
  947. <div class="subtitle">relationships</div>
  948.  
  949. <li>
  950. <i data-feather="heart"></i>
  951. <div class="ship">character one and character two</div>
  952. <div class="upper">romantic</div>
  953. </li>
  954.  
  955. <li>
  956. <i data-feather="user"></i>
  957. <div class="ship">character three and character four</div>
  958. <div class="upper">platonic</div>
  959. </li>
  960.  
  961. </div>
  962.  
  963. <!----- end relationships ----->
  964.  
  965. <!----- start quote ----->
  966.  
  967. <div class="wip-content">
  968.  
  969. <div class="subtitle">quote</div>
  970.  
  971. <div class="quote">
  972. Rutrum tellus pellentesque eu tincidunt tortor. Iaculis nunc sed augue lacus viverra vitae. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat.
  973. </div>
  974.  
  975. <div class="source upper">
  976. by Lorem Ipsum
  977. </div>
  978.  
  979. </div>
  980.  
  981. <!----- end quote ----->
  982.  
  983. </div>
  984.  
  985. </div><!-- 🌈 -->
  986.  
  987. <!----- ================================
  988.  
  989. END OF TAB TWO
  990.  
  991. ====================================== ----->
  992.  
  993. <!----- put any additional tabs AFTER THIS MESSAGE and above the STOP EDITING message. DO NOT PUT YOUR TABS INSIDE THE PRE-EXISTING TABS. ----->
  994.  
  995. <!----- STOP EDITING HERE. do not touch anything after here. ----->
  996.  
  997. </section>
  998.  
  999. <!----- MOBILE NAVIGATION ----->
  1000.  
  1001. <footer>
  1002. <nav>
  1003. <a href="/" title="return home"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></a>
  1004. <a href="/ask" title="message"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg></a>
  1005. <a href="/archive" title="archive"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg></a>
  1006. <a href="https://tumblr.com/dashboard" title="dashboard"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-compass"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg></a>
  1007. <a href="https://seyche.tumblr.com" title="tansy page by seyche">
  1008. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-code"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></a>
  1009. </nav>
  1010. </footer>
  1011.  
  1012. <script>
  1013.  
  1014. /// TOOLTIPS
  1015.  
  1016. tippy('[title]', {
  1017. theme: 'custom',
  1018. arrow: false,
  1019. followCursor: true,
  1020. delay: 200,
  1021. placement: 'bottom-start',
  1022. zIndex: 9999999999,
  1023. maxWidth: 400,
  1024.  
  1025. content(reference) {
  1026. const title = reference.getAttribute('title');
  1027. reference.removeAttribute('title');
  1028. return title;
  1029. },
  1030. });
  1031.  
  1032. $(document).ready(function() {
  1033.  
  1034. $('#tabs li a:not(:first)').addClass('inactive');
  1035. $('.container').hide();
  1036. $('.container:first').show();
  1037.  
  1038. $('#tabs li a').click(function(){
  1039. var t = $(this).attr('id');
  1040. if($(this).hasClass('inactive')){
  1041. $('#tabs li a').addClass('inactive');
  1042. $(this).removeClass('inactive');
  1043.  
  1044. $('.container').hide();
  1045. $('#'+ t + 'C').fadeIn('slow');
  1046. }
  1047. window.scrollTo(0, 0);
  1048. });
  1049. });
  1050.  
  1051. feather.replace()
  1052.  
  1053. </script>
  1054.  
  1055. </body>
  1056. </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!