API tools faq
paste
tricksterkid

tumblr page // mango

tricksterkid
Sep 3rd, 2020 (edited)
252
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.18 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} / mango</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-bottom: 2px solid #fa96a2; color: #fa96a2;}
  31. #linkhome:after {background-color: #fa96a2;}
  32. #linkhome:hover {color: #f4f4f4; transition: 0.4s;}
  33.  
  34. #link1 {border-bottom: 2px solid #fba4a7; color: #fba4a7;}
  35. #link1:after {background-color: #fba4a7;}
  36. #link1:hover {color: #f4f4f4; transition: 0.4s;}
  37.  
  38. #link2 {border-bottom: 2px solid #fbaeaa; color: #fbaeaa;}
  39. #link2:after {background-color: #fbaeaa;}
  40. #link2:hover {color: #f4f4f4; transition: 0.4s;}
  41.  
  42. #link3 {border-bottom: 2px solid #fcbaae; color: #fcbaae;}
  43. #link3:after {background-color: #fcbaae;}
  44. #link3:hover {color: #f4f4f4; transition: 0.4s;}
  45.  
  46. #link4 {border-bottom: 2px solid #fdc6b3; color: #fdc6b3;}
  47. #link4:after {background-color: #fdc6b3;}
  48. #link4:hover {color: #f4f4f4; transition: 0.4s;}
  49.  
  50. #link5 {border-bottom: 2px 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: 35%;
  75. left: 180%;
  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: 60px;
  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 { /* column titles */
  141. background-color: #fa96a2;
  142. color: #f4f4f4;
  143. display: block;
  144. font-family: Roboto Slab;
  145. font-size: 20px;
  146. padding: 7px;
  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. #sidepicture { /* mini picture */
  163. height: 80px;
  164. width: 80px;
  165. }
  166.  
  167. #sidepicture:hover {
  168. cursor: cell;
  169. }
  170.  
  171. #sidemenu {
  172. background-color: #f4f4f4; /* links background color */
  173. float: left;
  174. height: 500px;
  175. margin: 0px;
  176. text-align: center;
  177. width: 80px;
  178. }
  179.  
  180. .sidebarlinks a {
  181. box-sizing: border-box;
  182. display: block;
  183. height: 70px;
  184. margin: 0;
  185. padding: 20px;
  186. position: relative;
  187. text-transform: uppercase;
  188. width: 100%;
  189. z-index: 2;
  190. }
  191.  
  192. .sidebarlinks a:after {
  193. content: "";
  194. height: 100%;
  195. left: -1;
  196. position: absolute;
  197. top: 0;
  198. transition: 0.4s;
  199. width: 0px;
  200. z-index: -1;
  201. }
  202.  
  203. .sidebarlinks a:hover:after {
  204. height: calc(100% + 1px);
  205. width: calc(100% + 1px);
  206. }
  207.  
  208. /* content css */
  209.  
  210. #contentcontainer { /* invisible container for linkboxes */
  211. float: right;
  212. height: 440px;
  213. overflow: auto;
  214. width: 760px;
  215. -ms-overflow-style: none;
  216. }
  217.  
  218. #contentcontainer::-webkit-scrollbar {
  219. display: none;
  220. }
  221.  
  222. .content { /* invisible container for text */
  223. padding: 7px;
  224. }
  225.  
  226. #characterpic { /* character picture */
  227. float: left;
  228. height: 210px;
  229. margin-bottom: 20px;
  230. margin-right: 15px;
  231. width: 210px;
  232. }
  233.  
  234. #characterpic:hover {
  235. cursor: cell;
  236. }
  237.  
  238. #facts { /* facts section */
  239. background-color: #f4f4f4;
  240. float: left;
  241. height: 210px;
  242. line-height: 23px;
  243. margin-bottom: 20px;
  244. margin-right: 15px;
  245. width: 250px;
  246. }
  247.  
  248. #stats { /* stats section */
  249. background-color: #f4f4f4;
  250. float: left;
  251. line-height: 23px;
  252. height: 210px;
  253. margin-bottom: 20px;
  254. width: 270px;
  255. }
  256.  
  257. #left { /* left column in sections */
  258. border-right: 1px solid #fcbaae;
  259. float: left;
  260. font-weight: bold;
  261. margin-right: 15px;
  262. text-transform: uppercase;
  263. width: 100px;
  264. }
  265.  
  266. #right { /* right column in sections */
  267. float: left;
  268. text-transform: lowercase;
  269. }
  270.  
  271. #bio { /* bio section */
  272. background-color: #f4f4f4;
  273. float: left;
  274. height: 210px;
  275. line-height: 20px;
  276. margin-left: 15px;
  277. overflow-y: auto;
  278. width: 535px;
  279. -ms-overflow-style: none;
  280. }
  281.  
  282. #bio::-webkit-scrollbar {
  283. display: none;
  284. }
  285.  
  286. #colorcontainer { /* invisible container for colors */
  287. float: left;
  288. height: 210px;
  289. width: 210px;
  290. }
  291.  
  292. .colors { /* color blocks */
  293. float: left;
  294. height: 100px;
  295. width: 100px;
  296. }
  297.  
  298. .colors:hover {
  299. cursor: cell;
  300. }
  301.  
  302. /* color settings for the color moodboard! */
  303.  
  304. #color1 {background-color: #b5befa; margin-right: 10px;}
  305. #color2 {background-color: #9aa6f3; margin-bottom: 10px;}
  306. #color3 {background-color: #9788ea; margin-right: 10px;}
  307. #color4 {background-color: #7e6edc;}
  308.  
  309. /* credit button css */
  310.  
  311. #credit {
  312. background-color: #fcbaae;
  313. color: #f4f4f4;
  314. bottom: 0;
  315. display: inline;
  316. margin: 8px;
  317. padding: 8px;
  318. position: fixed;
  319. right: 0;
  320. }
  321.  
  322. #credit:hover {
  323. background-color: #fa96a2;
  324. transition: 0.4s;
  325. }
  326.  
  327. </style>
  328.  
  329. </head>
  330.  
  331. <body>
  332.  
  333. <div id="container">
  334.  
  335. <!-- START SIDEBAR MENU -->
  336.  
  337. <div id="sidemenu">
  338.  
  339. <!-- link goes in "a href"
  340. hover text in "data-tooltip"
  341. image goes in "img src" -->
  342.  
  343. <a href="/">
  344. <img id="sidepicture" src="https://i.imgur.com/WSJ6om6.jpg">
  345. </a>
  346.  
  347. <div class="sidebarlinks" data-tooltip="home">
  348. <a href="/" id="linkhome">
  349. <i class="fa fa-home" style="font-size:20px"></i>
  350. </a>
  351. </div>
  352.  
  353. <div class="sidebarlinks" data-tooltip="link 1">
  354. <a href="/" id="link1">
  355. <i class="fa fa-star" style="font-size:20px"></i>
  356. </a>
  357. </div>
  358.  
  359. <div class="sidebarlinks" data-tooltip="link 2">
  360. <a href="/" id="link2">
  361. <i class="fa fa-eye" style="font-size:20px"></i>
  362. </a>
  363. </div>
  364.  
  365. <div class="sidebarlinks" data-tooltip="link 3">
  366. <a href="/" id="link3">
  367. <i class="fa fa-rocket" style="font-size:20px"></i>
  368. </a>
  369. </div>
  370.  
  371. <div class="sidebarlinks" data-tooltip="link 4">
  372. <a href="/" id="link4">
  373. <i class="fa fa-gamepad" style="font-size:20px"></i>
  374. </a>
  375. </div>
  376.  
  377. <div class="sidebarlinks" data-tooltip="link 5">
  378. <a href="/" id="link5">
  379. <i class="fa fa-cloud" style="font-size:20px"></i>
  380. </a>
  381. </div>
  382.  
  383. </div>
  384.  
  385. <!-- END SIDEBAR MENU -->
  386.  
  387. <h1>mango</h1> <!-- page title -->
  388.  
  389. <div id="contentcontainer">
  390.  
  391. <img id="characterpic" src="https://i.imgur.com/WSJ6om6.jpg">
  392.  
  393. <!-- START FACTS -->
  394.  
  395. <div id="facts">
  396.  
  397. <h2>facts</h2>
  398.  
  399. <div class="content">
  400.  
  401. <div id="left">
  402. name
  403. <br>
  404. nickname
  405. <br>
  406. age
  407. <br>
  408. gender
  409. <br>
  410. pronouns
  411. <br>
  412. sexuality
  413. <br>
  414. alignment
  415. </div>
  416.  
  417. <div id="right">
  418. your name
  419. <br>
  420. your nickname
  421. <br>
  422. your age
  423. <br>
  424. your gender
  425. <br>
  426. your pronouns
  427. <br>
  428. your sexuality
  429. <br>
  430. your alignment
  431. </div>
  432.  
  433. </div>
  434.  
  435. </div>
  436.  
  437. <!-- END FACTS -->
  438.  
  439. <!-- START STATS -->
  440.  
  441. <div id="stats">
  442.  
  443. <h2>stats</h2>
  444.  
  445. <div class="content">
  446.  
  447. <!-- NOTE: width of column is adjusted so it fits inside box! -->
  448. <!-- keep stat names short! if you want them longer: -->
  449. <!-- adjust width of fact section and left column in css -->
  450. <!-- you can then adjust width of stats section in css -->
  451. <!-- and then you can adjust the width below as well! -->
  452. <!-- if you can't get it to work, please contact me!! -->
  453.  
  454. <div id="left" style="width:45px">
  455. stat
  456. <br>
  457. stat
  458. <br>
  459. stat
  460. <br>
  461. stat
  462. <br>
  463. stat
  464. <br>
  465. stat
  466. <br>
  467. stat
  468. </div>
  469.  
  470. <div id="right">
  471.  
  472. <!-- for stars instead of hearts: "fa fa-star" -->
  473.  
  474. <!-- START STAT 1 -->
  475.  
  476. <i class="fa fa-heart" style="font-size:15px"></i>
  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.  
  487. <!-- END STAT 1 -->
  488.  
  489. <br>
  490.  
  491. <!-- START STAT 2 -->
  492.  
  493. <i class="fa fa-heart" style="font-size:15px"></i>
  494. <i class="fa fa-heart" style="font-size:15px"></i>
  495. <i class="fa fa-heart-o" style="font-size:15px"></i>
  496. <i class="fa fa-heart-o" style="font-size:15px"></i>
  497. <i class="fa fa-heart-o" style="font-size:15px"></i>
  498. <i class="fa fa-heart-o" style="font-size:15px"></i>
  499. <i class="fa fa-heart-o" 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.  
  504. <!-- END STAT 2 -->
  505.  
  506. <br>
  507.  
  508. <!-- START STAT 3 -->
  509.  
  510. <i class="fa fa-heart" style="font-size:15px"></i>
  511. <i class="fa fa-heart" style="font-size:15px"></i>
  512. <i class="fa fa-heart" style="font-size:15px"></i>
  513. <i class="fa fa-heart" 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.  
  521. <!-- END STAT 3 -->
  522.  
  523. <br>
  524.  
  525. <!-- START STAT 4 -->
  526.  
  527. <i class="fa fa-heart" style="font-size:15px"></i>
  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" 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.  
  538. <!-- END STAT 4 -->
  539.  
  540. <br>
  541.  
  542. <!-- START STAT 5 -->
  543.  
  544. <i class="fa fa-heart" style="font-size:15px"></i>
  545. <i class="fa fa-heart-o" style="font-size:15px"></i>
  546. <i class="fa fa-heart-o" style="font-size:15px"></i>
  547. <i class="fa fa-heart-o" style="font-size:15px"></i>
  548. <i class="fa fa-heart-o" style="font-size:15px"></i>
  549. <i class="fa fa-heart-o" style="font-size:15px"></i>
  550. <i class="fa fa-heart-o" style="font-size:15px"></i>
  551. <i class="fa fa-heart-o" 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.  
  555. <!-- END STAT 5 -->
  556.  
  557. <br>
  558.  
  559. <!-- START STAT 6 -->
  560.  
  561. <i class="fa fa-heart" style="font-size:15px"></i>
  562. <i class="fa fa-heart" style="font-size:15px"></i>
  563. <i class="fa fa-heart" style="font-size:15px"></i>
  564. <i class="fa fa-heart" style="font-size:15px"></i>
  565. <i class="fa fa-heart-o" style="font-size:15px"></i>
  566. <i class="fa fa-heart-o" style="font-size:15px"></i>
  567. <i class="fa fa-heart-o" style="font-size:15px"></i>
  568. <i class="fa fa-heart-o" style="font-size:15px"></i>
  569. <i class="fa fa-heart-o" style="font-size:15px"></i>
  570. <i class="fa fa-heart-o" style="font-size:15px"></i>
  571.  
  572. <!-- END STAT 6 -->
  573.  
  574. <br>
  575.  
  576. <!-- START STAT 7 -->
  577.  
  578. <i class="fa fa-heart" style="font-size:15px"></i>
  579. <i class="fa fa-heart" style="font-size:15px"></i>
  580. <i class="fa fa-heart" style="font-size:15px"></i>
  581. <i class="fa fa-heart" style="font-size:15px"></i>
  582. <i class="fa fa-heart" style="font-size:15px"></i>
  583. <i class="fa fa-heart" style="font-size:15px"></i>
  584. <i class="fa fa-heart" style="font-size:15px"></i>
  585. <i class="fa fa-heart-o" style="font-size:15px"></i>
  586. <i class="fa fa-heart-o" style="font-size:15px"></i>
  587. <i class="fa fa-heart-o" style="font-size:15px"></i>
  588.  
  589. <!-- END STAT 7 -->
  590.  
  591. </div>
  592.  
  593. </div>
  594.  
  595. </div>
  596.  
  597. <!-- END STATS -->
  598.  
  599. <!-- START COLORS >> EDIT IN CSS! -->
  600.  
  601. <div id="colorcontainer">
  602.  
  603. <div class="colors" id="color1"></div>
  604. <div class="colors" id="color2"></div>
  605. <div class="colors" id="color3"></div>
  606. <div class="colors" id="color4"></div>
  607.  
  608. </div>
  609.  
  610. <!-- END COLORS -->
  611.  
  612. <!-- START BIO -->
  613.  
  614. <div id="bio">
  615.  
  616. <h2>biography</h2>
  617.  
  618. <div class="content">
  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. <br><br>
  631.  
  632. 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.
  633.  
  634. </div>
  635.  
  636. </div>
  637.  
  638. <!-- END BIO -->
  639.  
  640. </div>
  641.  
  642. </div>
  643.  
  644. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  645.  
  646. <a id="credit" target="blank" href="https://nuclearthemes.tumblr.com/"><i class="fa fa-anchor" style="font-size:15px"></i></a>
  647.  
  648. </body>
  649.  
  650. </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!