API tools faq
paste
tricksterkid

tumblr page // vanilla

tricksterkid
Aug 31st, 2020 (edited)
1,135
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.82 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <!-- @NUCLEARTHEMES ON TUMBLR || PLEASE DON'T DELETE CREDIT -->
  4.  
  5. <!--
  6. || CREDITS ||
  7.  
  8. Custom tooltip by Reinhard Schnetzinger >> https://codepen.io/reiinii1/pen/aPGXEa
  9. Links hover by Larry Geams Parangan >> https://codepen.io/larrygeams/pen/pdchG
  10. Fonts by Google
  11. Placeholders from Unsplash
  12. -->
  13.  
  14. <html>
  15.  
  16. <head>
  17.  
  18. <title>{Name} / vanilla</title> <!-- add page title here -->
  19.  
  20. <link rel="shortcut icon" href="{Favicon}">
  21.  
  22. <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,400i,700,700i|Josefin+Sans:400,400i,700,700i" rel="stylesheet">
  23.  
  24. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  25.  
  26. <style type="text/css">
  27.  
  28. /* color settings for the sidebar links! */
  29.  
  30. #linkhome {border-left: 7px solid #fa96a2; color: #fa96a2;}
  31. #linkhome:after {background-color: #fa96a2;}
  32. #linkhome:hover {color: #f4f4f4; transition: 0.4s;}
  33.  
  34. #link1 {border-left: 7px solid #fba4a7; color: #fba4a7;}
  35. #link1:after {background-color: #fba4a7;}
  36. #link1:hover {color: #f4f4f4; transition: 0.4s;}
  37.  
  38. #link2 {border-left: 7px solid #fbaeaa; color: #fbaeaa;}
  39. #link2:after {background-color: #fbaeaa;}
  40. #link2:hover {color: #f4f4f4; transition: 0.4s;}
  41.  
  42. #link3 {border-left: 7px solid #fcbaae; color: #fcbaae;}
  43. #link3:after {background-color: #fcbaae;}
  44. #link3:hover {color: #f4f4f4; transition: 0.4s;}
  45.  
  46. #link4 {border-left: 7px solid #fdc6b3; color: #fdc6b3;}
  47. #link4:after {background-color: #fdc6b3;}
  48. #link4:hover {color: #f4f4f4; transition: 0.4s;}
  49.  
  50. #link5 {border-left: 7px solid #fed5b8; color: #fed5b8;}
  51. #link5:after {background-color: #fed5b8;}
  52. #link5:hover {color: #f4f4f4; transition: 0.4s;}
  53.  
  54. /* custom colors for selection */
  55.  
  56. ::-moz-selection {background: #fed5b8; color: #f0f0f0;}
  57. ::selection {background: #fed5b8; color: #f0f0f0;}
  58.  
  59. /* custom scrollbar */
  60.  
  61. ::-webkit-scrollbar-thumb {background: #fed5b8;}
  62. ::-webkit-scrollbar {background: #f0f0f0; width: 5px;}
  63.  
  64. * {margin:0; padding:0;}
  65.  
  66. /* tooltip css */
  67.  
  68. [data-tooltip] {
  69. position: relative;
  70. z-index: 10;
  71. }
  72.  
  73. [data-tooltip]:before,[data-tooltip]:after {
  74. bottom: 100%;
  75. left: 50%;
  76. opacity: 0;
  77. pointer-events: none;
  78. position: absolute;
  79. transition: 0.4s;
  80. }
  81.  
  82. [data-tooltip]:before {
  83. background-color: #fed5b8; /* tooltip background color */
  84. content: attr(data-tooltip);
  85. color: #f4f4f4; /* tooltip text color */
  86. font-size: 14px;
  87. padding: 10px 15px;
  88. max-width: 300px;
  89. min-width: 50px;
  90. text-align: center;
  91. text-transform: uppercase;
  92. transform: translate(-50%, -5px) scale(0.5);
  93. width: max-content;
  94. }
  95.  
  96. [data-tooltip]:hover:before, [data-tooltip]:hover:after {
  97. opacity: 1;
  98. transform: translate(-50%, 5px) scale(1);
  99. }
  100.  
  101. /* basic body css */
  102.  
  103. body {
  104. background: #f0f0f0; /* change background color */
  105. color: #979797; /* change text color */
  106. font-family: Josefin Sans; /* change font */
  107. font-size: 14px; /* change font size */
  108. text-align: justify;
  109. }
  110.  
  111. #container {
  112. background: #f0f0f0; /* change container background color */
  113. height: 500px;
  114. left: 50%;
  115. margin-bottom: 40px;
  116. overflow: auto;
  117. padding: 20px;
  118. position: absolute;
  119. top: 50%;
  120. transform: translate(-50%,-50%);
  121. width: 860px;
  122. -ms-overflow-style: none;
  123. }
  124.  
  125. #container::-webkit-scrollbar {
  126. display: none;
  127. }
  128.  
  129. /* text css */
  130.  
  131. h1 { /* page title */
  132. color: #fcbaae;
  133. font-family: Roboto Slab;
  134. font-size: 30px;
  135. margin-bottom: 10px;
  136. padding-bottom: 10px;
  137. text-align: right;
  138. }
  139.  
  140. h2 { /* section titles */
  141. background-color: #fa96a2;
  142. color: #f4f4f4;
  143. display: block;
  144. font-family: Roboto Slab;
  145. font-size: 20px;
  146. padding: 5px;
  147. text-align: right;
  148. }
  149.  
  150. a {
  151. color: #fcbaae; /* link color */
  152. text-decoration: none;
  153. }
  154.  
  155. a:hover {
  156. color: #fa96a2; /* link hover color */
  157. transition: 0.4s;
  158. }
  159.  
  160. /* sidebar menu css */
  161.  
  162. #sidemenu {
  163. background-color: #f4f4f4; /* links background color */
  164. float: left;
  165. height: 500px;
  166. width: 200px;
  167. }
  168.  
  169. img {
  170. height: 200px;
  171. width: 200px;
  172. margin: 0;
  173. }
  174.  
  175. img:hover {
  176. cursor: cell;
  177. }
  178.  
  179. .sidebarlinks a {
  180. box-sizing: border-box;
  181. display: block;
  182. height: 50px;
  183. margin: 0;
  184. padding: 20px;
  185. position: relative;
  186. text-transform: uppercase;
  187. width: 100%;
  188. z-index: 2;
  189. }
  190.  
  191. .sidebarlinks a:after {
  192. content: "";
  193. height: 100%;
  194. left: -1;
  195. position: absolute;
  196. top: 0;
  197. transition: 0.4s;
  198. width: 0px;
  199. z-index: -1;
  200. }
  201.  
  202. .sidebarlinks a:hover:after {
  203. width: calc(100% + 1px);
  204. }
  205.  
  206. /* content css */
  207.  
  208. #contentcontainer { /* invisible container for content */
  209. float: right;
  210. height: 440px;
  211. overflow: auto;
  212. width: 650px;
  213. -ms-overflow-style: none;
  214. }
  215.  
  216. #contentcontainer::-webkit-scrollbar {
  217. display: none;
  218. }
  219.  
  220. .content { /* invisible container for text */
  221. padding: 7px;
  222. }
  223.  
  224. #facts { /* facts section */
  225. background-color: #f4f4f4;
  226. float: left;
  227. height: 215px;
  228. line-height: 24px;
  229. margin-bottom: 10px;
  230. width: 340px;
  231. }
  232.  
  233. #stats { /* stats section */
  234. background-color: #f4f4f4;
  235. float: left;
  236. line-height: 24px;
  237. height: 215px;
  238. width: 340px;
  239. }
  240.  
  241. #text { /* large text section */
  242. background-color: #f4f4f4;
  243. float: right;
  244. height: 440px;
  245. line-height: 20px;
  246. overflow-y: auto;
  247. width: 300px;
  248. -ms-overflow-style: none;
  249. }
  250.  
  251. #text::-webkit-scrollbar {
  252. display: none;
  253. }
  254.  
  255. #left { /* left column in sections */
  256. border-right: 1px solid #fcbaae;
  257. float: left;
  258. font-weight: bold;
  259. margin-right: 15px;
  260. text-transform: uppercase;
  261. width: 100px;
  262. }
  263.  
  264. #right { /* right column in sections */
  265. float: left;
  266. text-transform: lowercase;
  267. }
  268.  
  269. /* credit button css */
  270.  
  271. #credit {
  272. background-color: #fcbaae;
  273. color: #f4f4f4;
  274. bottom: 0;
  275. display: inline;
  276. margin: 8px;
  277. padding: 8px;
  278. position: fixed;
  279. right: 0;
  280. }
  281.  
  282. #credit:hover {
  283. background-color: #fa96a2;
  284. transition: 0.4s;
  285. }
  286.  
  287. </style>
  288.  
  289. </head>
  290.  
  291. <body>
  292.  
  293. <div id="container">
  294.  
  295. <!-- START SIDEBAR MENU -->
  296.  
  297. <div id="sidemenu">
  298.  
  299. <!-- link goes in "a href"
  300. hover text in "data-tooltip"
  301. image goes in "img src" -->
  302.  
  303. <a href="/" data-tooltip="et in arcadia ego">
  304. <img src="https://i.imgur.com/WSJ6om6.jpg">
  305. </a>
  306.  
  307. <div class="sidebarlinks">
  308. <a href="/" id="linkhome">home</a>
  309. </div>
  310.  
  311. <div class="sidebarlinks">
  312. <a href="/" id="link1">link 1</a>
  313. </div>
  314.  
  315. <div class="sidebarlinks">
  316. <a href="/" id="link2">link 2</a>
  317. </div>
  318.  
  319. <div class="sidebarlinks">
  320. <a href="/" id="link3">link 3</a>
  321. </div>
  322.  
  323. <div class="sidebarlinks">
  324. <a href="/" id="link4">link 4</a>
  325. </div>
  326.  
  327. <div class="sidebarlinks">
  328. <a href="/" id="link5">link 5</a>
  329. </div>
  330.  
  331. </div>
  332.  
  333. <!-- END SIDEBAR MENU -->
  334.  
  335. <h1>vanilla</h1> <!-- page title -->
  336.  
  337. <div id="contentcontainer">
  338.  
  339. <!-- START SECTION 1 -->
  340.  
  341. <div id="facts">
  342.  
  343. <h2>facts</h2>
  344.  
  345. <div class="content">
  346.  
  347. <div id="left">
  348. name
  349. <br>
  350. nickname
  351. <br>
  352. age
  353. <br>
  354. gender
  355. <br>
  356. pronouns
  357. <br>
  358. sexuality
  359. <br>
  360. alignment
  361. </div>
  362.  
  363. <div id="right">
  364. your name
  365. <br>
  366. your nickname
  367. <br>
  368. your age
  369. <br>
  370. your gender
  371. <br>
  372. your pronouns
  373. <br>
  374. your sexuality
  375. <br>
  376. your alignment
  377. </div>
  378.  
  379. </div>
  380.  
  381. </div>
  382.  
  383. <!-- END SECTION 1 -->
  384.  
  385. <!-- START SECTION 2 -->
  386.  
  387. <div id="text">
  388.  
  389. <h2>text</h2>
  390.  
  391. <div class="content">
  392.  
  393. 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.
  394.  
  395. <br><br>
  396.  
  397. 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.
  398.  
  399. <br><br>
  400.  
  401. 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.
  402.  
  403. <br><br>
  404.  
  405. Diam sit amet nisl suscipit adipiscing bibendum est. Ante in nibh mauris cursus mattis molestie. Orci porta non pulvinar neque laoreet suspendisse interdum. Erat pellentesque adipiscing commodo elit at. Tincidunt vitae semper quis lectus.
  406.  
  407. </div>
  408.  
  409. </div>
  410.  
  411. <!-- END SECTION 2 -->
  412.  
  413. <!-- START SECTION 3 -->
  414.  
  415. <div id="stats">
  416.  
  417. <h2>stats</h2>
  418.  
  419. <div class="content">
  420.  
  421. <div id="left">
  422. stat name
  423. <br>
  424. stat name
  425. <br>
  426. stat name
  427. <br>
  428. stat name
  429. <br>
  430. stat name
  431. <br>
  432. stat name
  433. <br>
  434. stat name
  435. </div>
  436.  
  437. <div id="right">
  438.  
  439. <!-- for stars instead of hearts: "fa fa-star" -->
  440.  
  441. <!-- START STAT 1 -->
  442.  
  443. <i class="fa fa-heart" style="font-size:15px"></i>
  444. <i class="fa fa-heart" style="font-size:15px"></i>
  445. <i class="fa fa-heart" style="font-size:15px"></i>
  446. <i class="fa fa-heart" style="font-size:15px"></i>
  447. <i class="fa fa-heart" style="font-size:15px"></i>
  448. <i class="fa fa-heart-o" style="font-size:15px"></i>
  449. <i class="fa fa-heart-o" style="font-size:15px"></i>
  450. <i class="fa fa-heart-o" style="font-size:15px"></i>
  451. <i class="fa fa-heart-o" style="font-size:15px"></i>
  452. <i class="fa fa-heart-o" style="font-size:15px"></i>
  453.  
  454. <!-- END STAT 1 -->
  455.  
  456. <br>
  457.  
  458. <!-- START STAT 2 -->
  459.  
  460. <i class="fa fa-heart" style="font-size:15px"></i>
  461. <i class="fa fa-heart" style="font-size:15px"></i>
  462. <i class="fa fa-heart-o" style="font-size:15px"></i>
  463. <i class="fa fa-heart-o" style="font-size:15px"></i>
  464. <i class="fa fa-heart-o" style="font-size:15px"></i>
  465. <i class="fa fa-heart-o" style="font-size:15px"></i>
  466. <i class="fa fa-heart-o" style="font-size:15px"></i>
  467. <i class="fa fa-heart-o" style="font-size:15px"></i>
  468. <i class="fa fa-heart-o" style="font-size:15px"></i>
  469. <i class="fa fa-heart-o" style="font-size:15px"></i>
  470.  
  471. <!-- END STAT 2 -->
  472.  
  473. <br>
  474.  
  475. <!-- START STAT 3 -->
  476.  
  477. <i class="fa fa-heart" style="font-size:15px"></i>
  478. <i class="fa fa-heart" style="font-size:15px"></i>
  479. <i class="fa fa-heart" style="font-size:15px"></i>
  480. <i class="fa fa-heart" style="font-size:15px"></i>
  481. <i class="fa fa-heart-o" style="font-size:15px"></i>
  482. <i class="fa fa-heart-o" style="font-size:15px"></i>
  483. <i class="fa fa-heart-o" style="font-size:15px"></i>
  484. <i class="fa fa-heart-o" style="font-size:15px"></i>
  485. <i class="fa fa-heart-o" style="font-size:15px"></i>
  486. <i class="fa fa-heart-o" style="font-size:15px"></i>
  487.  
  488. <!-- END STAT 3 -->
  489.  
  490. <br>
  491.  
  492. <!-- START STAT 4 -->
  493.  
  494. <i class="fa fa-heart" style="font-size:15px"></i>
  495. <i class="fa fa-heart" style="font-size:15px"></i>
  496. <i class="fa fa-heart" style="font-size:15px"></i>
  497. <i class="fa fa-heart" style="font-size:15px"></i>
  498. <i class="fa fa-heart" style="font-size:15px"></i>
  499. <i class="fa fa-heart" style="font-size:15px"></i>
  500. <i class="fa fa-heart-o" style="font-size:15px"></i>
  501. <i class="fa fa-heart-o" style="font-size:15px"></i>
  502. <i class="fa fa-heart-o" style="font-size:15px"></i>
  503. <i class="fa fa-heart-o" style="font-size:15px"></i>
  504.  
  505. <!-- END STAT 4 -->
  506.  
  507. <br>
  508.  
  509. <!-- START STAT 5 -->
  510.  
  511. <i class="fa fa-heart" style="font-size:15px"></i>
  512. <i class="fa fa-heart-o" style="font-size:15px"></i>
  513. <i class="fa fa-heart-o" style="font-size:15px"></i>
  514. <i class="fa fa-heart-o" style="font-size:15px"></i>
  515. <i class="fa fa-heart-o" style="font-size:15px"></i>
  516. <i class="fa fa-heart-o" style="font-size:15px"></i>
  517. <i class="fa fa-heart-o" style="font-size:15px"></i>
  518. <i class="fa fa-heart-o" style="font-size:15px"></i>
  519. <i class="fa fa-heart-o" style="font-size:15px"></i>
  520. <i class="fa fa-heart-o" style="font-size:15px"></i>
  521.  
  522. <!-- END STAT 5 -->
  523.  
  524. <br>
  525.  
  526. <!-- START STAT 6 -->
  527.  
  528. <i class="fa fa-heart" style="font-size:15px"></i>
  529. <i class="fa fa-heart" style="font-size:15px"></i>
  530. <i class="fa fa-heart" style="font-size:15px"></i>
  531. <i class="fa fa-heart" style="font-size:15px"></i>
  532. <i class="fa fa-heart-o" style="font-size:15px"></i>
  533. <i class="fa fa-heart-o" style="font-size:15px"></i>
  534. <i class="fa fa-heart-o" style="font-size:15px"></i>
  535. <i class="fa fa-heart-o" style="font-size:15px"></i>
  536. <i class="fa fa-heart-o" style="font-size:15px"></i>
  537. <i class="fa fa-heart-o" style="font-size:15px"></i>
  538.  
  539. <!-- END STAT 6 -->
  540.  
  541. <br>
  542.  
  543. <!-- START STAT 7 -->
  544.  
  545. <i class="fa fa-heart" style="font-size:15px"></i>
  546. <i class="fa fa-heart" style="font-size:15px"></i>
  547. <i class="fa fa-heart" style="font-size:15px"></i>
  548. <i class="fa fa-heart" style="font-size:15px"></i>
  549. <i class="fa fa-heart" style="font-size:15px"></i>
  550. <i class="fa fa-heart" style="font-size:15px"></i>
  551. <i class="fa fa-heart" style="font-size:15px"></i>
  552. <i class="fa fa-heart-o" style="font-size:15px"></i>
  553. <i class="fa fa-heart-o" style="font-size:15px"></i>
  554. <i class="fa fa-heart-o" style="font-size:15px"></i>
  555.  
  556. <!-- END STAT 7 -->
  557.  
  558. </div>
  559.  
  560. </div>
  561.  
  562. </div>
  563.  
  564. <!-- END SECTION 3 -->
  565.  
  566. </div>
  567.  
  568. </div>
  569.  
  570. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  571.  
  572. <a id="credit" target="blank" href="https://nuclearthemes.tumblr.com/"><i class="fa fa-anchor" style="font-size:15px"></i></a>
  573.  
  574. </body>
  575.  
  576. </html>
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!