API tools faq
paste
Advertisement
Guest User

mine map

a guest
Jan 17th, 2018
70
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.14 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2.  
  3. <!--
  4.  
  5. page theme #1 by incalescentia
  6.  
  7.  
  8. please do not claim as your own, remove the credit, copy portions of this code, or repost this anywhere. don't hesitate to make alterations though as needed for yourself, including fixing some of my human errors. if you ever need help with anything, send me an ask!
  9.  
  10. -->
  11.  
  12. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  13.  
  14. <style type="text/css">
  15. body {
  16. background-color: #dbd9d9;
  17. font-family: arial;
  18. }
  19.  
  20. ::-webkit-scrollbar {
  21. width: 7px;
  22. background: #fff;
  23. }
  24.  
  25. ::-webkit-scrollbar-thumb {
  26. background: #dbd9d9;
  27. }
  28.  
  29. section {
  30. display: none;
  31.  
  32. }
  33.  
  34. input {
  35. display: none;
  36. }
  37.  
  38. .move {
  39. position:absolute;
  40. top:50%;
  41. left:50%;
  42. transform:translate(-50%,-50%);
  43. }
  44.  
  45.  
  46. label {
  47. display: inline-block;
  48. WIDTH: 55px;
  49. margin: 0 0 -1px;
  50. padding: 36px;
  51. height: 45px;
  52. font-weight: 600;
  53. text-align: center;
  54. color: #bbb;
  55. background-color: #fff;
  56. position: relative;
  57. margin-left: 499.5px;
  58. }
  59.  
  60.  
  61. label:hover {
  62. color: #888;
  63. cursor: pointer;
  64. }
  65.  
  66. input:checked + label {
  67. color: #555;
  68. }
  69.  
  70. #tab1:checked ~ #content1,
  71. #tab2:checked ~ #content2,
  72. #tab3:checked ~ #content3,
  73. #tab4:checked ~ #content4 {
  74. display: block;
  75. }
  76.  
  77. #content1, #content2, #content3, #content4 {
  78. background-color: #fff;
  79. width: 500px;
  80. height: 349px;
  81. overflow: hidden;
  82. margin-top: -348px;
  83. background-image: url(https://i.imgur.com/3yZ2ROH.png);
  84. }
  85.  
  86. .icon {
  87. background-image: url(https://image.ibb.co/jpfh2R/m.png);
  88. border-radius: 50%;
  89. width: 120px;
  90. height: 120px;
  91. border: 5px solid #fff;
  92. margin-top: 15px;
  93. }
  94.  
  95. .speech-bubble {
  96. position: relative;
  97. background: #ffffff;
  98. width: 200px;
  99. height: 45px;
  100. padding: 7px;
  101. border-radius: 2px;
  102. margin-top: 22px;
  103. font-size: 8px;
  104. text-transform: uppercase;
  105. text-align: justify;
  106. font-family: verbena;
  107. }
  108.  
  109. .speech-bubble:after {
  110. content: '';
  111. position: absolute;
  112. top: 0;
  113. left: 50%;
  114. width: 0;
  115. height: 0;
  116. border: 10px solid transparent;
  117. border-bottom-color: #ffffff;
  118. border-top: 0;
  119. margin-left: -10px;
  120. margin-top: -9px;
  121. }
  122.  
  123. .links {
  124. padding: 15px;
  125. border-right: 1px solid #fff;
  126. width: 60px;
  127. height: 45px;
  128. display: inline-block;
  129. color: #fff;
  130. margin-top: 12px;
  131. opacity: 0.8;
  132. }
  133.  
  134. .links a {
  135. color: #fff;
  136. text-decoration: none;
  137. }
  138.  
  139. .link {
  140. padding: 15px;
  141. width: 60px;
  142. display: inline-block;
  143. color: #fff;
  144. opacity: 0.8;
  145.  
  146. }
  147.  
  148. .link a {
  149. color: #fff;
  150. text-decoration: none;
  151. }
  152.  
  153. .border {
  154. height: 1px;
  155. width: 460px;
  156. background-color: #fff;
  157. margin-top: 19px;
  158. opacity: 0.8;
  159. }
  160.  
  161. .about {
  162. background-color: #fff;
  163. padding: 7px;
  164. width: 300px;
  165. height: 280px;
  166. margin-top: 28px;
  167. font-size: 10px;
  168. text-align: justify;
  169. overflow: auto;
  170. display: inline-block;
  171. }
  172.  
  173. .lyric {
  174. width: 81px;
  175. font-size: 30px;
  176. height: 100px;
  177. padding: 5px;
  178. overflow: hidden;
  179. text-transform: uppercase;
  180. display: inline-block;
  181. text-align: right;
  182. font-weight: bold;
  183. color: #fff;
  184. background-color: #d0a18d;
  185. word-wrap: break-word;
  186. }
  187.  
  188. .info {
  189. border-bottom: 1px solid #d0a18d;
  190. color: #fff;
  191. height: 10px;
  192. font-size: 8px;
  193. text-transform: uppercase;
  194. text-align: left;
  195. padding: 5px;
  196. margin-bottom: 5px;
  197. overflow: hidden;
  198. font-family: verbena;
  199. }
  200.  
  201. .fic1 {
  202. background-color: #fff;
  203. padding: 7px;
  204. width: 220px;
  205. height: 246px;
  206. font-size: 10px;
  207. text-align: justify;
  208. overflow: auto;
  209. display: inline-block;
  210. overflow-x: hidden;
  211. }
  212.  
  213. .fic2 {
  214. background-color: #fff;
  215. padding: 7px;
  216. width: 158px;
  217. height: 246px;
  218. margin-top: 28px;
  219. font-size: 10px;
  220. text-align: justify;
  221. overflow: auto;
  222. display: inline-block;
  223. }
  224.  
  225. .title1 {
  226. background-color: #d0a18d;
  227. padding: 7px;
  228. width: 220px;
  229. margin-top: 28px;
  230. height: 20px;
  231. font-size: 15px;
  232. text-transform: uppercase;
  233. text-align: left;
  234. font-weight: bold;
  235. font-style: italic;
  236. color: #fff;
  237. }
  238.  
  239. .title2 {
  240. background-color: #d0a18d;
  241. padding: 7px;
  242. width: 158px;
  243. height: 20px;
  244. font-size: 15px;
  245. text-transform: uppercase;
  246. text-align: right;
  247. font-weight: bold;
  248. font-style: italic;
  249. color: #fff;
  250. }
  251.  
  252. .one {
  253. height: 10px;
  254. font-size: 8px;
  255. text-transform: uppercase;
  256. text-align: left;
  257. padding: 5px;
  258. margin-bottom: 5px;
  259. overflow: hidden;
  260. font-family: verbena;
  261. }
  262.  
  263. .one a {
  264. text-decoration: none;
  265. color: #000;
  266. }
  267.  
  268. .icon2 img {
  269. width: 90px;
  270. height: 120px;
  271. display: inline-block;
  272. }
  273.  
  274. .desc {
  275. text-align: justify;
  276. color: #000;
  277. font-size: 9px;
  278. padding: 5px;
  279. overflow: auto;
  280. width: 114px;
  281. height: 84px;
  282. margin-left: -4px;
  283. }
  284.  
  285. .story {
  286. border-bottom: 1px solid #d0a18d;
  287. color: #000;
  288. height: 10px;
  289. font-size: 9px;
  290. text-transform: uppercase;
  291. text-align: right;
  292. padding: 5px;
  293. margin-bottom: 5px;
  294. overflow: hidden;
  295. }
  296.  
  297. .story a {
  298. text-decoration: none;
  299. color: #000;
  300. }
  301.  
  302. .story2 {
  303. border-bottom: 1px solid #d0a18d;
  304. color: #000;
  305. height: 10px;
  306. font-size: 9px;
  307. text-transform: uppercase;
  308. text-align: left;
  309. padding: 5px;
  310. margin-bottom: 5px;
  311. overflow: hidden;
  312. }
  313.  
  314. .story2 a {
  315. text-decoration: none;
  316. color: #000;
  317. }
  318.  
  319. .credit a {
  320. background-color: #fff;
  321. width: auto;
  322. padding: 7px;
  323. font-family: verbena;
  324. font-size: 8px;
  325. text-transform: uppercase;
  326. position: absolute;
  327. bottom: 0px;
  328. right: 0px;
  329. text-decoration: none;
  330. color: #000;
  331. }
  332.  
  333.  
  334. </style>
  335. </head>
  336.  
  337. <body>
  338. <div class="move">
  339. <input id="tab1" type="radio" name="tabs" checked>
  340. <label for="tab1"><i class="fa fa-sun-o fa-2x"></i><br><div style="font-size: 9px; margin-top: 2px;">PROFILE</div></label>
  341. <br>
  342. <input id="tab2" type="radio" name="tabs">
  343. <label for="tab2"><i class="fa fa-moon-o fa-2x"></i><br><div style="font-size: 9px; margin-top: 2px;">ABOUT ME</div></label>
  344. <br>
  345. <input id="tab3" type="radio" name="tabs">
  346. <label for="tab3"><i class="fa fa-star-o fa-2x"></i><br><div style="font-size: 9px; margin-top: 2px;">WRITINGS</div></label>
  347.  
  348. <section id="content1">
  349. <center>
  350. <div class="icon"></div>
  351. <div class="speech-bubble">BE A SHOOTING STAR: A BRIEF YET WELCOME FLICKER OF HOPE THAT DANCES ACROSS THE NIGHT SKY, LIKE AN ANCHOR FOR ALL THOSE DROWNING IN THE ABYSS.
  352. </div>
  353. <div class="border"></div>
  354. <div class="links"><a href="https://psychepriscilla.tumblr.com/"><i class="fa fa-rocket fa-2x"></i><br><div style="font-size: 9px; margin-top: 2px;">home</div></a></div>
  355. <div class="links"><a href="https://psychepriscilla.tumblr.com/tagged/%E1%B4%84%E1%B4%8F%C9%B4%E1%B4%A0%E1%B4%8F-%2F%2F-%E1%B4%87%E1%B4%A0%E1%B4%87%CA%80%CA%8F-%E1%B4%A1%E1%B4%8F%CA%80%E1%B4%85-s%CA%9C%E1%B4%87-%E1%B4%A1%CA%9C%C9%AAs%E1%B4%98%E1%B4%87%CA%80%E1%B4%87%E1%B4%85-%E1%B4%A1%E1%B4%80s-%CA%9F%C9%AA%E1%B4%8B%E1%B4%87-%E1%B4%A1%E1%B4%80%E1%B4%9B%E1%B4%87%CA%80%E1%B4%84%E1%B4%8F%CA%9F%E1%B4%8F%CA%80s-%E1%B4%8F%C9%B4-%E1%B4%84%E1%B4%80%C9%B4%E1%B4%A0%E1%B4%80s"><i class="fa fa-star fa-2x"></i><br><div style="font-size: 9px; margin-top: 2px;">CONVO</div></a></div>
  356. <div class="links"><a href="https://psychepriscilla.tumblr.com/tagged/%E1%B4%80%CA%99%E1%B4%8F%E1%B4%9C%E1%B4%9B-%2F%2F-%E1%B4%80%CA%9F%CA%9F-%C9%AA-%E1%B4%87%E1%B4%A0%E1%B4%87%CA%80-%E1%B4%A1%E1%B4%80%C9%B4%E1%B4%9B%E1%B4%87%E1%B4%85-%E1%B4%A1%E1%B4%80s-%E1%B4%9B%CA%9C%E1%B4%87-%E1%B4%A1%E1%B4%8F%CA%80%CA%9F%E1%B4%85"><i class="fa fa-bars fa-2x"></i><br><div style="font-size: 9px; margin-top: 2px;">ABOUT</div></a></div>
  357. <div class="links"><a href="https://psychepriscilla.tumblr.com"><i class="fa fa-space-shuttle fa-2x"></i><br><div style="font-size: 9px; margin-top: 2px;">WCS</div></a></div>
  358. <div class="link"><a href="https://psychepriscilla.tumblr.com/tagged/%E1%B4%8F%E1%B4%8F%E1%B4%84-%2F%2F-%E1%B4%8F%E1%B4%9C%E1%B4%9B-%E1%B4%8F%EA%9C%B0-%E1%B4%8F%CA%9F%CA%8F%E1%B4%8D%E1%B4%98%E1%B4%9Cs"><i class="fa fa-quote-right fa-2x"></i><br><div style="font-size: 9px; margin-top: 2px;">OOC</div></a></div>
  359. </center>
  360. </section>
  361.  
  362. <section id="content2"><center>
  363. <table><td><div class="lyric"><i>she's a star.</i></div>
  364. <div style="height: 26px;"></div>
  365. <div class="info">name. cilla falk</div>
  366. <div class="info">age. twenty four</div>
  367. <div class="info">zodiac sign.</div>
  368. <div class="info">personality type.</div>
  369. <div class="info">pronouns. she/her</div>
  370. </td>
  371. <td> <div class="about"><ul><li><small>okay so this is cilla, full name prissila lee falk, youngest child of katherine and jonathan falk.</small><br></li><li><small>okay so for a bit of backstory i’ll talk about her dad. he’s this big time fashion designer behind the brand ‘jon falk’ so she grew up around money and fashion.</small></li><li><small>she got her start modelling for her fathers brand at thirteen after years of nagging her parents not wanting to put any of their children in the limelight.</small></li><li><small>while she’s generally pretty decent person she can be quite vain and self obsessed, years of mummy and daddy spoiling her and calling her the prettiest is hard to shake off. she sometimes has trouble dealing with not being the center of attention.</small></li><li><small>up until eighteen she modeled pretty much exclusively for jon falk and even their still who she gets most of her work with.</small></li><li><small>she picked up a couple of jobs with other brands while at college wanting to build an image for herself outside of nepotism.&nbsp;</small></li><li><small>she doesn’t remember anything of her past as psyche but she’s always felt an intense fascination for mythology leading to her studying a BA in<b>&nbsp;</b>Classical Civilization.</small></li><li><small>she graduated last year and is now focussing on her modelling&nbsp;</small></li><li><small>basically in summary she’s a sweet and charming girl who has a bit to big an opinion of herself and cannot accept the fact that the universe does not revolve around her.</small></li></ul>
  372. </div></td></table>
  373.  
  374. </center></section>
  375.  
  376. <section id="content3"><center>
  377. <table>
  378. <td><div class="title1">connections</div>
  379. <div class="fic1">
  380. <table><td><div class="icon2"><img src="https://i.imgur.com/KscXTIj.png"></div></td><td><div class="story"><a href="">connection</a></div>
  381. <div class="desc">description here.</div></td></table>
  382.  
  383. <table><td><div class="story2"><a href="">connection</a></div>
  384. <div class="desc">description here.</div></td><td><div class="icon2"><img src="https://i.imgur.com/KscXTIj.png"></div></td></tr>
  385. </table>
  386.  
  387. </div>
  388. <td><div class="fic2">
  389. <div class="one"><a href="">name 001</a></div>
  390. </div>
  391. <div class="title2">convos</div>
  392. </td>
  393. </table>
  394. </center></section>
  395. </div>
  396.  
  397. <div class="credit"><a href="http://http://incalescentia.tumblr.com/">credit</a></div>
  398. </body>
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!