API tools faq
paste
tricksterkid

nuclearthemes / page 002

tricksterkid
Dec 10th, 2020 (edited)
1,018
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.90 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <!-- nuclearthemes on tumblr || thanks for using my code! -->
  4. <!-- consider supporting me on ko-fi >> https://ko-fi.com/cameroni -->
  5.  
  6. <!--
  7. || CREDITS ||
  8.  
  9. • Custom tooltips by Atomiks >> https://atomiks.github.io/tippyjs/
  10. • Fonts from Google >> https://fonts.google.com/
  11. • Icons from Font Awesome >> https://fontawesome.com/
  12. • Placeholders from Unsplash >> https://unsplash.com/
  13. • Tumblr controls fix by odeysseus >> https://odeysseus.tumblr.com/
  14.  
  15. -->
  16.  
  17. <html>
  18.  
  19. <head>
  20.  
  21. <title>{Name} / title</title> <!-- page title -->
  22.  
  23. <link rel="shortcut icon" href="{Favicon}">
  24.  
  25. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  26.  
  27. <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,400i,700,700i" rel="stylesheet">
  28.  
  29. <script src="https://kit.fontawesome.com/802dca85f3.js" crossorigin="anonymous"></script>
  30.  
  31. <style type="text/css">
  32.  
  33. * {margin:0; padding:0;}
  34.  
  35. /* ----------------------------------------------------------------------- */
  36. /* --------------------------- tumblr controls --------------------------- */
  37.  
  38. .tmblr-iframe {
  39. filter: invert(100%);
  40. -o-filter: invert(100%);
  41. -moz-filter: invert(100%);
  42. -ms-filter: invert(100%);
  43. -webkit-filter: invert(100%);
  44. opacity: 0.2;
  45. position: fixed;
  46. right: 5px;
  47. top: 5px;
  48. transform: scale(0.7,0.7);
  49. transform-origin: 100% 0%;
  50. -ms-transform-origin: 100% 0%;
  51. -webkit-transform-origin: 100% 0%;
  52. transition: 0.4s;
  53. -o-transition: 0.4s;
  54. -moz-transition: 0.4s;
  55. -ms-transition: 0.4s;
  56. -webkit-transition: 0.4s;
  57. white-space: nowrap;
  58. }
  59.  
  60. .tmblr-iframe:hover {
  61. opacity: 1;
  62. }
  63.  
  64. /* ----------------------------------------------------------------------- */
  65. /* --------------------------- custom tooltips --------------------------- */
  66.  
  67. .tippy-tooltip.custom-theme {
  68. background-color: #c2776d;
  69. border-radius: 0;
  70. color: #ffffff;
  71. font-family: inherit;
  72. font-size: inherit;
  73. text-align: center;
  74. }
  75.  
  76. /* ----------------------------------------------------------------------- */
  77. /* -------------------- custom selection & scrollbar --------------------- */
  78.  
  79. ::-moz-selection {background: #c2776d; color: #ffffff;}
  80. ::selection {background: #c2776d; color: #ffffff;}
  81.  
  82. ::-webkit-scrollbar-thumb
  83. {background: #c4a29d; border: 5px solid #ffffff; border-radius: 10px;}
  84. ::-webkit-scrollbar-track
  85. {background: #141414; border: 7px solid #ffffff;}
  86. ::-webkit-scrollbar
  87. {width: 15px;}
  88.  
  89. /* ----------------------------------------------------------------------- */
  90. /* ----------------------------- page layout ----------------------------- */
  91.  
  92. body {
  93. background: #ffffff; /* background color */
  94. color: #141414; /* text color */
  95. font-family: Work Sans; /* font */
  96. font-size: 15px; /* font size */
  97. text-align: justify; /* text align */
  98. }
  99.  
  100. #container {
  101. height: 600px;
  102. margin: 50px auto;
  103. max-width: 900px;
  104. width: 75%;
  105. }
  106.  
  107. /* ----------------------------------------------------------------------- */
  108. /* ------------------------------- tabs css ------------------------------ */
  109.  
  110. #btncontainer { /* container for tab buttons */
  111. bottom: 100%;
  112. height: 200px;
  113. left: 100%;
  114. position: relative;
  115. width: 45px;
  116. }
  117.  
  118. #btncontainer button { /* tab buttons */
  119. background-color: #c4a29d;
  120. border-radius: 0px 20px 20px 0px;
  121. border: none;
  122. cursor: pointer;
  123. font-family: inherit;
  124. outline: none;
  125. margin-bottom: 10px;
  126. padding: 15px 17px 15px 15px;
  127. text-align: right;
  128. transition: 0.4s;
  129. -moz-transition: 0.4s;
  130. -ms-transition: 0.4s;
  131. -o-transition: 0.4s;
  132. -webkit-transition: 0.4s;
  133. width: 45px;
  134. }
  135.  
  136. #btncontainer button:hover { /* tab buttons hover */
  137. background-color: #c2776d;
  138. transition: 0.4s;
  139. -moz-transition: 0.4s;
  140. -ms-transition: 0.4s;
  141. -o-transition: 0.4s;
  142. -webkit-transition: 0.4s;
  143. width: 60px;
  144. }
  145.  
  146. #btncontainer button.active { /* active tab button */
  147. background-color: #c2776d;
  148. }
  149.  
  150. .tabcontent { /* container for tab content */
  151. background-color: #f2e3e1;
  152. display: none;
  153. float: left;
  154. height: calc(100% - 40px);
  155. height: -moz-calc(100% - 40px);
  156. height: -webkit-calc(100% - 40px);
  157. overflow: auto;
  158. padding: 20px;
  159. transition: 1s;
  160. -moz-transition: 1s;
  161. -ms-transition: 1s;
  162. -o-transition: 1s;
  163. -webkit-transition: 1s;
  164. width: calc(100% - 440px);
  165. width: -moz-calc(100% - 440px);
  166. width: -webkit-calc(100% - 440px);
  167. -moz-overflow-style: none;
  168. -ms-overflow-style: none;
  169. -o-overflow-style: none;
  170. }
  171.  
  172. .tabcontent::-webkit-scrollbar {display: none;}
  173.  
  174. /* ----------------------------------------------------------------------- */
  175. /* -------------------------- character picture -------------------------- */
  176.  
  177. #character {float: left; overflow-x: hidden;}
  178.  
  179. #character img { /* character image */
  180. position: relative;
  181. transition: 1s;
  182. -moz-transition: 1s;
  183. -ms-transition: 1s;
  184. -o-transition: 1s;
  185. -webkit-transition: 1s;
  186. width: 400px;
  187. }
  188.  
  189. #links { /* image hover links container */
  190. height: 600px;
  191. opacity: 0;
  192. position: absolute;
  193. top: 50px;
  194. transition: 0.4s;
  195. -moz-transition: 0.4s;
  196. -ms-transition: 0.4s;
  197. -o-transition: 0.4s;
  198. -webkit-transition: 0.4s;
  199. width: 400px;
  200. z-index: 1;
  201. }
  202.  
  203. #links:hover { /* links appear on hover */
  204. cursor: cell;
  205. opacity: 1;
  206. transition: 0.4s;
  207. -moz-transition: 0.4s;
  208. -ms-transition: 0.4s;
  209. -o-transition: 0.4s;
  210. -webkit-transition: 0.4s;
  211. }
  212.  
  213. .link { /* individual links */
  214. background-color: #f2e3e1;
  215. margin-bottom: 10px;
  216. padding: 10px;
  217. text-align: center;
  218. width: calc(100% - 20px);
  219. width: -moz-calc(100% - 20px);
  220. width: -webkit-calc(100% - 20px);
  221. }
  222.  
  223. /* ----------------------------------------------------------------------- */
  224. /* ---------------------------- tab content ------------------------------ */
  225.  
  226. #facts, #skills, #traits, #network { /* top sections */
  227. background-color: #ffffff;
  228. height: 160px;
  229. margin: 20px 0;
  230. padding: 20px;
  231. }
  232.  
  233. #bio, #sliders, #write { /* bottom sections */
  234. background-color: #ffffff;
  235. height: 235px;
  236. line-height: 20px;
  237. overflow: auto;
  238. padding: 20px;
  239. -moz-overflow-style: none;
  240. -ms-overflow-style: none;
  241. -o-overflow-style: none;
  242. }
  243.  
  244. #skills { /* tab 2 | skills section */
  245. float: left;
  246. width: calc(60% - 50px);
  247. width: -moz-calc(60% - 50px);
  248. width: -webkit-calc(60% - 50px);
  249. }
  250.  
  251. #traits { /* tab 2 | traits section */
  252. float: left;
  253. margin-left: 20px;
  254. width: calc(40% - 50px);
  255. width: -moz-calc(40% - 50px);
  256. width: -webkit-calc(40% - 50px);
  257. }
  258.  
  259. #traits i { /* tab 2 | traits icons */
  260. color: #c4a29d;
  261. font-size: 1.5em;
  262. margin-left: 10px;
  263. }
  264.  
  265. #words { /* tab 3 | words section */
  266. display: flex;
  267. display: -moz-box;
  268. display: -ms-flexbox;
  269. display: -webkit-box;
  270. display: -webkit-flex;
  271. flex-wrap: wrap;
  272. height: 200px;
  273. justify-content: space-between;
  274. margin: 20px 0;
  275. overflow: auto;
  276. -moz-overflow-style: none;
  277. -ms-overflow-style: none;
  278. -o-overflow-style: none;
  279. }
  280.  
  281. #colors { /* tab 3 | colors section */
  282. display: flex;
  283. display: -moz-box;
  284. display: -ms-flexbox;
  285. display: -webkit-box;
  286. display: -webkit-flex;
  287. height: 275px;
  288. }
  289.  
  290. #network { /* tab 4 | network section */
  291. display: flex;
  292. display: -moz-box;
  293. display: -ms-flexbox;
  294. display: -webkit-box;
  295. display: -webkit-flex;
  296. flex-wrap: wrap;
  297. justify-content: space-between;
  298. overflow: auto;
  299. -moz-overflow-style: none;
  300. -ms-overflow-style: none;
  301. -o-overflow-style: none;
  302. }
  303.  
  304. .left { /* tab 1 + 2 | left column */
  305. border-right: 1px solid #c2776d;
  306. float: left;
  307. font-weight: bold;
  308. line-height: 21px;
  309. margin-right: 10px;
  310. padding-right: 10px;
  311. text-transform: uppercase;
  312. }
  313.  
  314. .right { /* tab 1 + 2 | right column */
  315. float: left;
  316. line-height: 21px;
  317. }
  318.  
  319. .slider { /* tab 2 | sliders */
  320. display: flex;
  321. display: -moz-box;
  322. display: -ms-flexbox;
  323. display: -webkit-box;
  324. display: -webkit-flex;
  325. justify-content: space-between;
  326. margin: 0px auto 10px auto;
  327. width: 100%;
  328. }
  329.  
  330. .box { /* tab 2 | slider bars */
  331. background-color: #f2e3e1;
  332. height: 3px;
  333. margin: 8px;
  334. overflow: visible;
  335. width: 200px;
  336. }
  337.  
  338. .box i { /* tab 2 | slider bars icons */
  339. color: #c2776d;
  340. margin-top: -6px;
  341. }
  342.  
  343. .word { /* tab 3 | individual words */
  344. background-color: #c4a29d;
  345. height: 20px;
  346. padding: 10px;
  347. transition: 0.4s;
  348. -moz-transition: 0.4s;
  349. -ms-transition: 0.4s;
  350. -o-transition: 0.4s;
  351. -webkit-transition: 0.4s;
  352. }
  353.  
  354. .word:hover { /* tab 3 | words on hover */
  355. background-color: #c2776d;
  356. cursor: cell;
  357. transform: scale(1.25);
  358. -moz-transform: scale(1.25);
  359. -ms-transform: scale(1.25);
  360. -o-transform: scale(1.25);
  361. -webkit-transform: scale(1.25);
  362. transition: 0.4s;
  363. -moz-transition: 0.4s;
  364. -ms-transition: 0.4s;
  365. -o-transition: 0.4s;
  366. -webkit-transition: 0.4s;
  367. }
  368.  
  369. /* misc stuff, you don't have to change anything here */
  370.  
  371. #bio::-webkit-scrollbar {display: none;}
  372. #network::-webkit-scrollbar {display: none;}
  373. #sliders::-webkit-scrollbar {display: none;}
  374. #words::-webkit-scrollbar {display: none;}
  375. #write::-webkit-scrollbar {display: none;}
  376.  
  377. .colors {width: 100%;}
  378. .relationships {margin-bottom: 10px; width: 100px;}
  379. .relationships img {max-width: 100px; width: 100%;}
  380. .relationships a {border: none;}
  381. .relationships a:hover {border: none;}
  382. .slider:last-of-type {margin-bottom: 0px;}
  383.  
  384. /* ----------------------------------------------------------------------- */
  385. /* -------------------------------- text --------------------------------- */
  386.  
  387. h1 { /* tab titles */
  388. font-family: inherit;
  389. font-size: 2.5em;
  390. font-weight: normal;
  391. text-align: right;
  392. text-transform: uppercase;
  393. }
  394.  
  395. h2 { /* traits titles */
  396. font-family: inherit;
  397. font-size: 1.2em;
  398. font-weight: normal;
  399. line-height: 50%;
  400. text-transform: uppercase;
  401. }
  402.  
  403. h3 { /* character names */
  404. font-family: inherit;
  405. font-size: 1em;
  406. margin-top: 12px;
  407. text-align: center;
  408. text-transform: uppercase;
  409. }
  410.  
  411. a {
  412. border-bottom: 3px solid #c4a29d;
  413. color: #c4a29d; /* link color */
  414. text-decoration: none;
  415. transition: 0.4s;
  416. -moz-transition: 0.4s;
  417. -ms-transition: 0.4s;
  418. -o-transition: 0.4s;
  419. -webkit-transition: 0.4s;
  420. }
  421.  
  422. a:hover {
  423. border-bottom: 3px solid #c2776d;
  424. color: #c2776d; /* link hover color */
  425. transition: 0.4s;
  426. -moz-transition: 0.4s;
  427. -ms-transition: 0.4s;
  428. -o-transition: 0.4s;
  429. -webkit-transition: 0.4s;
  430. }
  431.  
  432. /* ----------------------------------------------------------------------- */
  433. /* ----------------------------- responsive ------------------------------ */
  434.  
  435. @media only screen and (max-width: 1100px){
  436. #links {display: none;}
  437.  
  438. #character img {
  439. margin-left: -400px;
  440. transition: 1s;
  441. -moz-transition: 1s;
  442. -ms-transition: 1s;
  443. -o-transition: 1s;
  444. -webkit-transition: 1s;
  445. }
  446.  
  447. .tabcontent {
  448. transition: 1s;
  449. -moz-transition: 1s;
  450. -ms-transition: 1s;
  451. -o-transition: 1s;
  452. -webkit-transition: 1s;
  453. width: calc(100% - 40px);
  454. width: -moz-calc(100% - 40px);
  455. width: -webkit-calc(100% - 40px);
  456. }
  457. }
  458.  
  459. @media only screen and (max-width: 550px){
  460. h1 {font-size: 1.5em;}
  461. #bio, #write {height: 250px;}
  462. #colors {height: 290px;}
  463. #network {justify-content: center;}
  464. .box {width: 150px;}
  465.  
  466. #skills, #traits {
  467. float: none;
  468. width: calc(100% - 40px);
  469. width: -moz-calc(100% - 40px);
  470. width: -webkit-calc(100% - 40px);
  471. margin-left: 0;
  472. }
  473. }
  474.  
  475. /* ----------------------------------------------------------------------- */
  476. /* ------------------------------- credits ------------------------------- */
  477.  
  478. #credit {
  479. background-color: #ffffff;
  480. border: none;
  481. color: #c4a29d;
  482. bottom: 0;
  483. font-size: 20px;
  484. font-style: italic;
  485. margin: 10px;
  486. padding: 10px 0px;
  487. position: fixed;
  488. right: 0;
  489. text-align: center;
  490. transition: 0.4s;
  491. -moz-transition: 0.4s;
  492. -ms-transition: 0.4s;
  493. -o-transition: 0.4s;
  494. -webkit-transition: 0.4s;
  495. width: 40px;
  496. }
  497.  
  498. #credit:hover {
  499. background-color: #c4a29d;
  500. color: #ffffff;
  501. transition: 0.4s;
  502. -moz-transition: 0.4s;
  503. -ms-transition: 0.4s;
  504. -o-transition: 0.4s;
  505. -webkit-transition: 0.4s;
  506. }
  507.  
  508. /* ----------------------------------------------------------------------- */
  509.  
  510. </style>
  511.  
  512. </head>
  513.  
  514. <body>
  515.  
  516. <!--------------------------- START MAIN CONTENT---------------------------->
  517.  
  518. <div id="container">
  519.  
  520. <!-- side image -->
  521.  
  522. <div id="character">
  523.  
  524. <!-- character image | 400 x 600 -->
  525.  
  526. <img src="https://i.imgur.com/2bGEfln.jpg">
  527.  
  528. <!-- hover links -->
  529.  
  530. <div id="links">
  531.  
  532. <a href="/">
  533. <div class="link">
  534. link 1
  535. </div>
  536. </a>
  537.  
  538. <a href="/">
  539. <div class="link">
  540. link 2
  541. </div>
  542. </a>
  543.  
  544. <a href="/">
  545. <div class="link">
  546. link 3
  547. </div>
  548. </a>
  549.  
  550. </div>
  551.  
  552. </div>
  553.  
  554. <!-- tab 1 -->
  555.  
  556. <div id="Tab 1" class="tabcontent">
  557.  
  558. <!-- character name -->
  559.  
  560. <h1>character name.</h1>
  561.  
  562. <!-- facts section -->
  563.  
  564. <div id="facts">
  565.  
  566. <!-- left column -->
  567.  
  568. <div class="left">
  569.  
  570. name
  571. <br>
  572. nickname
  573. <br>
  574. age
  575. <br>
  576. gender
  577. <br>
  578. pronouns
  579. <br>
  580. sexuality
  581. <br>
  582. alignment
  583. <br>
  584. zodiac
  585.  
  586. </div>
  587.  
  588. <!-- right column -->
  589.  
  590. <div class="right">
  591.  
  592. name
  593. <br>
  594. nickname
  595. <br>
  596. age
  597. <br>
  598. gender
  599. <br>
  600. pronouns
  601. <br>
  602. sexuality
  603. <br>
  604. alignment
  605. <br>
  606. zodiac
  607.  
  608. </div>
  609.  
  610. </div>
  611.  
  612. <!-- bio section -->
  613.  
  614. <div id="bio">
  615.  
  616. Write a character bio here. You can use <b>bold text</b>, <i>italic text</i>, and you can even put <a href="">links</a> here if you'd like. The box has automatic overflow, so you don't have to worry about writing too much!
  617.  
  618. <br><br>
  619.  
  620. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In ante metus dictum at tempor commodo ullamcorper a lacus. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
  621.  
  622. <br><br>
  623.  
  624. Egestas congue quisque egestas diam in arcu cursus euismod quis. Scelerisque viverra mauris in aliquam sem. Tellus molestie nunc non blandit massa enim nec. Velit laoreet id donec ultrices tincidunt arcu. Elit pellentesque habitant morbi tristique senectus et netus et malesuada. Quisque egestas diam in arcu cursus. Varius duis at consectetur lorem donec massa. Mollis nunc sed id semper risus in hendrerit.
  625.  
  626. <br><br>
  627.  
  628. Nibh tortor id aliquet lectus proin. Ac turpis egestas sed tempus urna et. Egestas congue quisque egestas diam in arcu cursus euismod. Dis parturient montes nascetur ridiculus mus. Enim eu turpis egestas pretium. Nulla aliquet enim tortor at. Odio ut enim blandit volutpat maecenas volutpat. Facilisi morbi tempus iaculis urna id. Pretium lectus quam id leo in vitae turpis massa sed.
  629.  
  630. </div>
  631.  
  632. </div>
  633.  
  634. <!-- tab 2 -->
  635.  
  636. <div id="Tab 2" class="tabcontent">
  637.  
  638. <!-- tab title -->
  639.  
  640. <h1>statistics.</h1>
  641.  
  642. <!-- skills section -->
  643.  
  644. <div id="skills">
  645.  
  646. <!-- left column -->
  647.  
  648. <div class="left">
  649. skill 1
  650. <br>
  651. skill 2
  652. <br>
  653. skill 3
  654. <br>
  655. skill 4
  656. <br>
  657. skill 5
  658. <br>
  659. skill 6
  660. <br>
  661. skill 7
  662. <br>
  663. skill 8
  664. </div>
  665.  
  666. <!-- right column -->
  667.  
  668. <div class="right">
  669.  
  670. <!-- stat 1 -->
  671.  
  672. <i class="fas fa-heart"></i>
  673. <i class="fas fa-heart"></i>
  674. <i class="fas fa-heart"></i>
  675. <i class="far fa-heart"></i>
  676. <i class="far fa-heart"></i>
  677.  
  678. <br>
  679.  
  680. <!-- stat 2 -->
  681.  
  682. <i class="fas fa-heart"></i>
  683. <i class="fas fa-heart"></i>
  684. <i class="fas fa-heart"></i>
  685. <i class="fas fa-heart"></i>
  686. <i class="far fa-heart"></i>
  687.  
  688. <br>
  689.  
  690. <!-- stat 3 -->
  691.  
  692. <i class="fas fa-heart"></i>
  693. <i class="far fa-heart"></i>
  694. <i class="far fa-heart"></i>
  695. <i class="far fa-heart"></i>
  696. <i class="far fa-heart"></i>
  697.  
  698. <br>
  699.  
  700. <!-- stat 4 -->
  701.  
  702. <i class="fas fa-heart"></i>
  703. <i class="fas fa-heart"></i>
  704. <i class="fas fa-heart"></i>
  705. <i class="far fa-heart"></i>
  706. <i class="far fa-heart"></i>
  707.  
  708. <br>
  709.  
  710. <!-- stat 5 -->
  711.  
  712. <i class="fas fa-heart"></i>
  713. <i class="fas fa-heart"></i>
  714. <i class="far fa-heart"></i>
  715. <i class="far fa-heart"></i>
  716. <i class="far fa-heart"></i>
  717.  
  718. <br>
  719.  
  720. <!-- stat 6 -->
  721.  
  722. <i class="fas fa-heart"></i>
  723. <i class="fas fa-heart"></i>
  724. <i class="fas fa-heart"></i>
  725. <i class="fas fa-heart"></i>
  726. <i class="fas fa-heart"></i>
  727.  
  728. <br>
  729.  
  730. <!-- stat 7 -->
  731.  
  732. <i class="fas fa-heart"></i>
  733. <i class="fas fa-heart"></i>
  734. <i class="far fa-heart"></i>
  735. <i class="far fa-heart"></i>
  736. <i class="far fa-heart"></i>
  737.  
  738. <br>
  739.  
  740. <!-- stat 8 -->
  741.  
  742. <i class="fas fa-heart"></i>
  743. <i class="fas fa-heart"></i>
  744. <i class="fas fa-heart"></i>
  745. <i class="fas fa-heart"></i>
  746. <i class="far fa-heart"></i>
  747.  
  748. </div>
  749.  
  750. </div>
  751.  
  752. <!-- traits section -->
  753.  
  754. <div id="traits">
  755.  
  756. <!-- qualities -->
  757.  
  758. <h2>qualities</h2>
  759.  
  760. <br>
  761.  
  762. <i class="fas fa-plus"></i> positive
  763. <br>
  764. <i class="fas fa-plus"></i> positive
  765.  
  766. <br><br>
  767.  
  768. <!-- flaws -->
  769.  
  770. <h2>flaws</h2>
  771.  
  772. <br>
  773.  
  774. <i class="fas fa-minus"></i> negative
  775. <br>
  776. <i class="fas fa-minus"></i> negative
  777.  
  778. </div>
  779.  
  780. <!-- sliders section -->
  781.  
  782. <div id="sliders">
  783.  
  784. <!-- slider 1 -->
  785.  
  786. <div class="slider">
  787.  
  788. option 1
  789.  
  790. <!-- change the percentage to something between -5 and 95 -->
  791.  
  792. <div class="box">
  793. <i style="margin-left:50%;" class="fas fa-star"></i>
  794. </div>
  795.  
  796. option 2
  797.  
  798. </div>
  799.  
  800. <!-- slider 2 -->
  801.  
  802. <div class="slider">
  803.  
  804. option 1
  805.  
  806. <div class="box">
  807. <i style="margin-left:-5%;" class="fas fa-star"></i>
  808. </div>
  809.  
  810. option 2
  811.  
  812. </div>
  813.  
  814. <!-- slider 3 -->
  815.  
  816. <div class="slider">
  817.  
  818. option 1
  819.  
  820. <div class="box">
  821. <i style="margin-left:95%;" class="fas fa-star"></i>
  822. </div>
  823.  
  824. option 2
  825.  
  826. </div>
  827.  
  828. <!-- slider 4 -->
  829.  
  830. <div class="slider">
  831.  
  832. option 1
  833.  
  834. <div class="box">
  835. <i style="margin-left:35%;" class="fas fa-star"></i>
  836. </div>
  837.  
  838. option 2
  839.  
  840. </div>
  841.  
  842. <!-- slider 5 -->
  843.  
  844. <div class="slider">
  845.  
  846. option 1
  847.  
  848. <div class="box">
  849. <i style="margin-left:90%;" class="fas fa-star"></i>
  850. </div>
  851.  
  852. option 2
  853.  
  854. </div>
  855.  
  856. <!-- slider 6 -->
  857.  
  858. <div class="slider">
  859.  
  860. option 1
  861.  
  862. <div class="box">
  863. <i style="margin-left:5%;" class="fas fa-star"></i>
  864. </div>
  865.  
  866. option 2
  867.  
  868. </div>
  869.  
  870. <!-- slider 7 -->
  871.  
  872. <div class="slider">
  873.  
  874. option 1
  875.  
  876. <div class="box">
  877. <i style="margin-left:70%;" class="fas fa-star"></i>
  878. </div>
  879.  
  880. option 2
  881.  
  882. </div>
  883.  
  884. <!-- slider 8 -->
  885.  
  886. <div class="slider">
  887.  
  888. option 1
  889.  
  890. <div class="box">
  891. <i style="margin-left:45%;" class="fas fa-star"></i>
  892. </div>
  893.  
  894. option 2
  895.  
  896. </div>
  897.  
  898. </div>
  899.  
  900. </div>
  901.  
  902. <!-- tab 3 -->
  903.  
  904. <div id="Tab 3" class="tabcontent">
  905.  
  906. <!-- tab title -->
  907.  
  908. <h1>aesthetic.</h1>
  909.  
  910. <!-- words section -->
  911.  
  912. <div id="words">
  913.  
  914. <div class="word">leather jackets</div>
  915. <div class="word">cigarette smoke</div>
  916. <div class="word">cheap cologne</div>
  917. <div class="word">neon lights</div>
  918. <div class="word">late night shopping trips</div>
  919. <div class="word">black coffee</div>
  920. <div class="word">bruised knuckles</div>
  921. <div class="word">bottles of whiskey</div>
  922. <div class="word">hazy eyes</div>
  923. <div class="word">large hoodies</div>
  924. <div class="word">midnight drives</div>
  925. <div class="word">dark colors</div>
  926. <div class="word">snow</div>
  927.  
  928. </div>
  929.  
  930. <!-- colors section -->
  931.  
  932. <!-- change colors in style="background: [...]" -->
  933.  
  934. <div id="colors">
  935.  
  936. <div style="background: #e9cfcc;" class="colors"></div>
  937. <div style="background: #e3c1bd;" class="colors"></div>
  938. <div style="background: #deb6b1;" class="colors"></div>
  939. <div style="background: #d7a8a1;" class="colors"></div>
  940. <div style="background: #d19a92;" class="colors"></div>
  941. <div style="background: #cb8b82;" class="colors"></div>
  942.  
  943. </div>
  944.  
  945. </div>
  946.  
  947. <!-- tab 4 -->
  948.  
  949. <div id="Tab 4" class="tabcontent">
  950.  
  951. <!-- tab title -->
  952.  
  953. <h1>notes.</h1>
  954.  
  955. <!-- network section -->
  956.  
  957. <div id="network">
  958.  
  959. <!-- character 1 -->
  960.  
  961. <div class="relationships">
  962. <a href="/" title="friends">
  963. <img src="https://i.imgur.com/wt2oZOX.png">
  964. <h3>character <br> name</h3>
  965. </a>
  966. </div>
  967.  
  968. <!-- character 2 -->
  969.  
  970. <div class="relationships">
  971. <a href="/" title="lovers">
  972. <img src="https://i.imgur.com/LSgIA2k.png">
  973. <h3>character <br> name</h3>
  974. </a>
  975. </div>
  976.  
  977. <!-- character 3 -->
  978.  
  979. <div class="relationships">
  980. <a href="/" title="enemies">
  981. <img src="https://i.imgur.com/xFb2Rkz.png">
  982. <h3>character <br> name</h3>
  983. </a>
  984. </div>
  985.  
  986. <!-- character 4 -->
  987.  
  988. <div class="relationships">
  989. <a href="/" title="friends">
  990. <img src="https://i.imgur.com/qtwyQXF.png">
  991. <h3>character <br> name</h3>
  992. </a>
  993. </div>
  994.  
  995. </div>
  996.  
  997. <!-- write anything section -->
  998.  
  999. <div id="write">
  1000.  
  1001. Write anything you want here. You can use <b>bold text</b>, <i>italic text</i>, and you can even put <a href="">links</a> here if you'd like. The box has automatic overflow, so you don't have to worry about writing too much!
  1002.  
  1003. <br><br>
  1004.  
  1005. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In ante metus dictum at tempor commodo ullamcorper a lacus. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
  1006.  
  1007. <br><br>
  1008.  
  1009. Egestas congue quisque egestas diam in arcu cursus euismod quis. Scelerisque viverra mauris in aliquam sem. Tellus molestie nunc non blandit massa enim nec. Velit laoreet id donec ultrices tincidunt arcu. Elit pellentesque habitant morbi tristique senectus et netus et malesuada. Quisque egestas diam in arcu cursus. Varius duis at consectetur lorem donec massa. Mollis nunc sed id semper risus in hendrerit.
  1010.  
  1011. <br><br>
  1012.  
  1013. Nibh tortor id aliquet lectus proin. Ac turpis egestas sed tempus urna et. Egestas congue quisque egestas diam in arcu cursus euismod. Dis parturient montes nascetur ridiculus mus. Enim eu turpis egestas pretium. Nulla aliquet enim tortor at. Odio ut enim blandit volutpat maecenas volutpat. Facilisi morbi tempus iaculis urna id. Pretium lectus quam id leo in vitae turpis massa sed.
  1014.  
  1015. </div>
  1016.  
  1017. </div>
  1018.  
  1019. <!-- tab buttons -->
  1020.  
  1021. <!-- hover text is <button title="[...]">, icon is <i class="[...]"> -->
  1022.  
  1023. <div id="btncontainer">
  1024. <button class="tablinks" onclick="openTab(event, 'Tab 1')"
  1025. id="defaultOpen" title="general">
  1026. <i class="far fa-user"></i>
  1027. </button>
  1028.  
  1029. <button class="tablinks" onclick="openTab(event, 'Tab 2')"
  1030. title="stats">
  1031. <i class="far fa-chart-bar"></i>
  1032. </button>
  1033.  
  1034. <button class="tablinks" onclick="openTab(event, 'Tab 3')"
  1035. title="aesthetic">
  1036. <i class="fas fa-palette"></i>
  1037. </button>
  1038.  
  1039. <button class="tablinks" onclick="openTab(event, 'Tab 4')"
  1040. title="notes">
  1041. <i class="far fa-bookmark"></i>
  1042. </button>
  1043. </div>
  1044.  
  1045. </div>
  1046.  
  1047. <!---------------------------- END MAIN CONTENT----------------------------->
  1048.  
  1049. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  1050.  
  1051. <a id="credit" target="blank" title="by bones" href="https://nuclearthemes.tumblr.com/"><i class="fas fa-skull"></i></a>
  1052.  
  1053. <script src="https://unpkg.com/popper.js@1"></script>
  1054. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1055. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1056.  
  1057. <script>
  1058. function openTab(evt, tabName) {
  1059. var i, tabcontent, tablinks;
  1060. tabcontent = document.getElementsByClassName("tabcontent");
  1061. for (i = 0; i < tabcontent.length; i++) {
  1062. tabcontent[i].style.display = "none";
  1063. }
  1064.  
  1065. tablinks = document.getElementsByClassName("tablinks");
  1066. for (i = 0; i < tablinks.length; i++) {
  1067. tablinks[i].className = tablinks[i].className.replace(" active", "");
  1068. }
  1069.  
  1070. document.getElementById(tabName).style.display = "block";
  1071. evt.currentTarget.className += " active";
  1072. }
  1073.  
  1074. document.getElementById("defaultOpen").click();
  1075.  
  1076. tippy('[title]', {
  1077. theme: 'custom',
  1078. arrow: false,
  1079. delay: [200, 0],
  1080. zIndex: 9999999999,
  1081. maxWidth: 300,
  1082.  
  1083. content(reference) {
  1084. const title = reference.getAttribute('title');
  1085. reference.removeAttribute('title');
  1086. return title;
  1087. },
  1088. });
  1089. </script>
  1090.  
  1091. </body>
  1092.  
  1093. </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!