API tools faq
paste
tricksterkid

tumblr page // raison d'être

tricksterkid
Oct 25th, 2020 (edited)
1,011
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.87 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 tooltips by Atomiks >> https://atomiks.github.io/tippyjs/
  9.  
  10. Fonts from Google >> https://fonts.google.com/
  11.  
  12. Placeholders from Unsplash >> https://unsplash.com/
  13.  
  14. -->
  15.  
  16. <html>
  17.  
  18. <head>
  19.  
  20. <title>{Name} / title</title> <!-- page title -->
  21.  
  22. <link rel="shortcut icon" href="{Favicon}">
  23.  
  24. <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i|Covered+By+Your+Grace:400,400i,700,700i|Lora:400,400i,700,700i" rel="stylesheet">
  25.  
  26. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  27.  
  28. <style type="text/css">
  29.  
  30. /* ----------------------------------------------------------------------- */
  31. /* --------------------------- custom tooltips --------------------------- */
  32.  
  33. .tippy-tooltip.custom-theme {
  34. background-color: #e3bcb6;
  35. border-radius: 0px;
  36. color: #f9f5f5;
  37. font-family: inherit;
  38. margin-bottom: 10px;
  39. text-align: center;
  40. }
  41.  
  42. /* ----------------------------------------------------------------------- */
  43. /* -------------------- custom selection & scrollbar --------------------- */
  44.  
  45. ::-moz-selection {background: #f9f5f5; color: #d9b4af;}
  46. ::selection {background: #f9f5f5; color: #d9b4af;}
  47.  
  48. ::-webkit-scrollbar-thumb {background: #d9b4af;}
  49. ::-webkit-scrollbar {background: #f9f5f5; width: 5px;}
  50.  
  51. * {margin:0; padding:0;}
  52.  
  53. /* ----------------------------------------------------------------------- */
  54. /* ---------------------------- large blocks ----------------------------- */
  55.  
  56. body {
  57. background: #f9f5f5; /* background color */
  58. color: #f3e8e6; /* text color */
  59. font-family: Fira Sans; /* font */
  60. font-size: 14px; /* font size */
  61. text-align: justify; /* text align */
  62. }
  63.  
  64. #container {
  65. background: #d9b4af; /* container background color */
  66. height: 550px;
  67. left: 50%;
  68. margin-bottom: 40px;
  69. overflow: none;
  70. position: absolute;
  71. top: 50%;
  72. transform: translate(-50%,-50%);
  73. width: 700px;
  74. }
  75.  
  76. #header { /* 700 x 180 */
  77. background-color: #ceedbb;
  78. height: 180px;
  79. width: 700px;
  80. }
  81.  
  82. #content { /* container content below header */
  83. height: 290px;
  84. margin-top: 40px;
  85. overflow: none;
  86. padding: 20px;
  87. width: 660px;
  88. }
  89.  
  90. /* ----------------------------------------------------------------------- */
  91. /* -------------------------------- text --------------------------------- */
  92.  
  93. h1 { /* main title */
  94. color: #f3e8e6;
  95. font-family: Covered By Your Grace;
  96. font-size: 2.5em;
  97. font-style: italic;
  98. font-weight: normal;
  99. position: fixed;
  100. right: 2%;
  101. top: 33%;
  102. z-index: 999;
  103. }
  104.  
  105. h2 { /* block titles */
  106. background-color: #ab7972;
  107. color: #f3e8e6;
  108. font-family: Lora;
  109. font-size: 1.2em;
  110. font-weight: normal;
  111. padding: 10px;
  112. text-align: center;
  113. width: 252px;
  114. }
  115.  
  116. a {
  117. color: #ab7972; /* link color */
  118. text-decoration: none;
  119. }
  120.  
  121. a:hover {
  122. color: #f3e8e6; /* link hover color */
  123. transition: 0.4s;
  124. }
  125.  
  126. b { /* bold text */
  127. color: #ab7972;
  128. }
  129.  
  130. i { /* italic text */
  131. color: #ab7972;
  132. }
  133.  
  134. /* ----------------------------------------------------------------------- */
  135. /* --------------------------- layout content ---------------------------- */
  136.  
  137. #picture { /* icon */
  138. border-radius: 100%;
  139. left: 43%;
  140. position: fixed;
  141. top: 23%;
  142. width: 100px;
  143. z-index: 999;
  144. }
  145.  
  146. #picture:hover { /* icon hover */
  147. cursor: cell;
  148. transform: scale(1.1);
  149. transition: 0.4s;
  150. -webkit-filter: contrast(110%);
  151. }
  152.  
  153. #leftblock { /* container for left content */
  154. float: left;
  155. height: 290px;
  156. width: 270px;
  157. }
  158.  
  159. #rightblock { /* container for right content */
  160. float: right;
  161. height: 290px;
  162. width: 270px;
  163. }
  164.  
  165. .borderblock { /* bordered blocks of content */
  166. border: 1px solid #ab7972;
  167. border-top: none;
  168. height: 225px;
  169. padding: 10px;
  170. width: 250px;
  171. }
  172.  
  173. #aesthetic { /* container for middle colors */
  174. float: left;
  175. height: 288px;
  176. margin-left: 23px;
  177. width: 72px;
  178. }
  179.  
  180. /* ----------------------------------------------------------------------- */
  181. /* ------------------------------- content ------------------------------- */
  182.  
  183. .colors { /* color blocks */
  184. background: blue;
  185. height: 72px;
  186. width: 72px;
  187. }
  188.  
  189. /* change colors here! :D */
  190.  
  191. #color1 {background-color:#ab7972;}
  192. #color2 {background-color:#c7978f;}
  193. #color3 {background-color:#d9aaa3;}
  194. #color4 {background-color:#e3bcb6;}
  195.  
  196. #left { /* left column */
  197. border-right: 1px solid #ab7972;
  198. float: left;
  199. font-weight: bold;
  200. height: 120px;
  201. line-height: 20px;
  202. margin-right: 20px;
  203. padding-right: 20px;
  204. text-transform: uppercase;
  205. width: 104px;
  206. }
  207.  
  208. #right { /* right column */
  209. float: left;
  210. height: 120px;
  211. line-height: 20px;
  212. width: 105px;
  213. }
  214.  
  215. #bio { /* bio container */
  216. float: left;
  217. height: 90px;
  218. margin-top: 15px;
  219. overflow: auto;
  220. width: 250px;
  221. -ms-overflow-style: none;
  222. }
  223.  
  224. #bio::-webkit-scrollbar {
  225. display: none;
  226. }
  227.  
  228. .links { /* links in right block */
  229. background-color: #f3e8e6;
  230. color: #ab7972;
  231. display: inline-block;
  232. margin-bottom: 10px;
  233. padding: 10px;
  234. }
  235.  
  236. .links:hover { /* hover links */
  237. background-color: #ab7972;
  238. color: #f3e8e6;
  239. transition: 0.4s;
  240. }
  241.  
  242. /* ----------------------------------------------------------------------- */
  243. /* ------------------------------- credits ------------------------------- */
  244.  
  245. #credit {
  246. color: #d9b4af;
  247. bottom: 0;
  248. display: inline;
  249. font-style: italic;
  250. margin: 10px;
  251. position: fixed;
  252. right: 0;
  253. }
  254.  
  255. #credit:hover {
  256. color: #ab7972;
  257. transition: 0.4s;
  258. }
  259.  
  260. /* ----------------------------------------------------------------------- */
  261.  
  262. </style>
  263.  
  264. </head>
  265.  
  266. <body>
  267.  
  268. <!--------------------------- START MAIN CONTENT---------------------------->
  269.  
  270. <div id="container">
  271.  
  272. <!-- header image -->
  273.  
  274. <img id="header" src="https://i.imgur.com/qqYM8Bg.png">
  275.  
  276. <!-- main title -->
  277.  
  278. <h1>Raison d'être</h1>
  279.  
  280. <!-- icon image -->
  281.  
  282. <a href="/">
  283. <img id="picture" title="{Name}" src="https://i.imgur.com/8oh0gZt.jpg">
  284. </a>
  285.  
  286. <!-- START CONTENT -->
  287.  
  288. <div id="content">
  289.  
  290. <!-- start left block -->
  291.  
  292. <div id="leftblock">
  293.  
  294. <!-- left block title -->
  295.  
  296. <h2>>> until it gets even sweeter</h2>
  297.  
  298. <!-- start left content -->
  299.  
  300. <div class="borderblock">
  301.  
  302. <!-- left column -->
  303.  
  304. <div id="left">
  305. name
  306. <br>
  307. age
  308. <br>
  309. gender
  310. <br>
  311. pronouns
  312. <br>
  313. sexuality
  314. <br>
  315. zodiac
  316. </div>
  317.  
  318. <!-- right column -->
  319.  
  320. <div id="right">
  321. name
  322. <br>
  323. age
  324. <br>
  325. gender
  326. <br>
  327. pronouns
  328. <br>
  329. sexuality
  330. <br>
  331. zodiac
  332. </div>
  333.  
  334. <!-- bio -->
  335.  
  336. <div id="bio">
  337.  
  338. You can put a little bio over here. You can use normal text, <i>italic text</i>, <b>bold text</b>, and you can also put <a href="">a link</a> here if you'd like. Write as much as you want; this little box has automatic overflow!
  339.  
  340. </div>
  341.  
  342. </div>
  343.  
  344. <!-- end left content -->
  345.  
  346. </div>
  347.  
  348. <!-- end left block -->
  349.  
  350. <!-- start color block -->
  351.  
  352. <div id="aesthetic">
  353.  
  354. <div class="colors" id="color1"></div>
  355. <div class="colors" id="color2"></div>
  356. <div class="colors" id="color3"></div>
  357. <div class="colors" id="color4"></div>
  358.  
  359. </div>
  360.  
  361. <!-- end color block -->
  362.  
  363. <!-- start right block -->
  364.  
  365. <div id="rightblock">
  366.  
  367. <!-- right block title -->
  368.  
  369. <h2>>> but the sugar rush is alright</h2>
  370.  
  371. <!-- start right content -->
  372.  
  373. <div class="borderblock">
  374.  
  375. <a href="" title="link title">
  376. <div class="links">
  377. they fall
  378. </div>
  379. </a>
  380.  
  381. <a href="" title="link title">
  382. <div class="links">
  383. for you
  384. </div>
  385. </a>
  386.  
  387. <a href="" title="link title">
  388. <div class="links">
  389. when
  390. </div>
  391. </a>
  392.  
  393. <a href="" title="link title">
  394. <div class="links">
  395. they see
  396. </div>
  397. </a>
  398.  
  399. <a href="" title="link title">
  400. <div class="links">
  401. that you've
  402. </div>
  403. </a>
  404.  
  405. <a href="" title="link title">
  406. <div class="links">
  407. got away
  408. </div>
  409. </a>
  410.  
  411. <a href="" title="link title">
  412. <div class="links">
  413. it's all
  414. </div>
  415. </a>
  416.  
  417. <a href="" title="link title">
  418. <div class="links">
  419. for you
  420. </div>
  421. </a>
  422.  
  423. <a href="" title="link title">
  424. <div class="links">
  425. but they beg
  426. </div>
  427. </a>
  428.  
  429. <a href="" title="link title">
  430. <div class="links">
  431. for it
  432. </div>
  433. </a>
  434.  
  435. <a href="" title="link title">
  436. <div class="links">
  437. anyway
  438. </div>
  439. </a>
  440.  
  441. <a href="" title="link title">
  442. <div class="links">
  443. they love the
  444. </div>
  445. </a>
  446.  
  447. <a href="" title="link title">
  448. <div class="links">
  449. lines you hardly remember at all.......
  450. </div>
  451. </a>
  452.  
  453. </div>
  454.  
  455. <!-- end right content -->
  456.  
  457. </div>
  458.  
  459. <!-- end right block -->
  460.  
  461. </div>
  462.  
  463. <!-- END CONTENT -->
  464.  
  465. </div>
  466.  
  467. <!---------------------------- END MAIN CONTENT----------------------------->
  468.  
  469. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  470.  
  471. <a id="credit" target="blank" href="https://nuclearthemes.tumblr.com/">
  472. page theme by bones.
  473. </a>
  474.  
  475. <script src="https://unpkg.com/popper.js@1"></script>
  476. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  477. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  478.  
  479. <script>
  480. tippy('[title]', {
  481. theme: 'custom',
  482. arrow: false,
  483. delay: [200, 0],
  484. zIndex: 9999999999,
  485. maxWidth: 300,
  486.  
  487. content(reference) {
  488. const title = reference.getAttribute('title');
  489. reference.removeAttribute('title');
  490. return title;
  491. },
  492. });
  493. </script>
  494.  
  495. </body>
  496.  
  497. </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!