API tools faq
paste
yeahna

coal coast / page # 5

yeahna
Aug 18th, 2018
1,270
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.05 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6.  
  7. COAL COAST
  8. ----------
  9. a page theme by anna
  10. RULES:
  11. - don't steal
  12. - don't remove credit
  13. - u can modify for personal use but no redistribution w/o asking pls
  14. - all code is technically protected by copyright so u take this and i'll come @ u with the power of the law on my side.
  15. - creative commons attribution-noncommercial-sharealike ft. u gotta ask before redistributing if anyone was curious
  16. CREDIT:
  17. - not my images. script font hosted by @dohertys. background from @honeylcve's backgrounds page. inspired by @minseokwrites' character psd 013
  18. -->
  19.  
  20. <title>{Title}</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Pragati+Narrow" rel="stylesheet">
  24. <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
  25. <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
  26. <link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  27. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  28. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  29. <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700&amp;subset=latin-ext" rel="stylesheet">
  30.  
  31. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  32. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  33.  
  34. <script>
  35. (function($){
  36. $(document).ready(function() {
  37. $("a[title]").style_my_tooltips({
  38. tip_follows_cursor:true,
  39. tip_delay_time:90,
  40. tip_fade_speed:600,
  41. attribute:"title"
  42. });
  43. });
  44. })(jQuery);
  45. </script>
  46.  
  47. <style>
  48.  
  49.  
  50.  
  51. ::-webkit-scrollbar {
  52. display:none;
  53. }
  54.  
  55. body{
  56. font-family:roboto;
  57. font-size:14px;
  58. background:#000;
  59. background-image:url('https://78.media.tumblr.com/fa267347af3c65ee85d3e351156c1bfb/tumblr_pdor6dSUu61wtlk7go1_1280.jpg'); /*if you want a background.*/
  60. background-size:cover;
  61. }
  62.  
  63. #container{
  64. width:440px;
  65. height:550px;
  66. background:#fff;
  67. overflow-y:scroll;
  68. position:absolute;
  69. top:0;
  70. left:0;
  71. bottom:0;
  72. right:0;
  73. margin:auto;
  74. overflow-x:hidden;
  75. }
  76.  
  77. .bigimg{
  78. width:440px;
  79. height:550px;
  80. overflow:hidden;
  81. background:url('https://c1.staticflickr.com/5/4272/34886822031_08c58d8a73_o.jpg'); /*big image at the top. don't need to change image's size/shape just adjust background-size as necessary and make sure the image was larger than 440x550 to start with*/
  82. background-size:440px;
  83. position:absolute;
  84. top:0;
  85. left:0;
  86. }
  87.  
  88.  
  89. @font-face { font-family: paduka; src: url('https://dl.dropboxusercontent.com/s/17sjbqt7xfnor93/Paduka%20Script%20free.ttf') ; }
  90.  
  91. .bigimg h1{
  92. font-family:paduka;
  93. font-size:150px;
  94. text-decoration:none;
  95. font-weight:normal;
  96. width:340px;
  97. height:340px;
  98. position:absolute;
  99. left:50px;
  100. top:70px;
  101. text-align:center;
  102. color:#fff; /* colour of title */
  103. text-shadow:2px 2px #000; /* shadow colour */
  104. }
  105.  
  106. .bigimg h2{
  107. font-family:roboto;
  108. font-size:12px;
  109. letter-spacing:2px;
  110. text-decoration:none;
  111. font-weight:400;
  112. width:170px;
  113. text-align:center;
  114. height:30px;
  115. position:absolute;
  116. top:300px;
  117. left:135px;
  118. color:#fff; /* colour of subtitle */
  119. text-transform:uppercase;
  120. text-shadow:2px 2px #000; /* shadow colour */
  121. }
  122.  
  123. .yoink{
  124. width:140px;
  125. height:140px;
  126. border-radius:140px;
  127. overflow:hidden;
  128. background:url('https://78.media.tumblr.com/2e3e6fb3ee27fbb904b0de387f6fb13b/tumblr_oqvkf0IgrD1wnxzsxo10_400.png'); /* icon. should be square but it's not the end of the world if it isn't. */
  129. background-size:140px;
  130. position:absolute;
  131. top:570px;
  132. left:150px;
  133. margin-bottom:20px;
  134. }
  135.  
  136. .yoinkleft{
  137. width:120px;
  138. height:140px;
  139. padding-left:20px;
  140. padding-right:10px;
  141. position:absolute;
  142. top:570px;
  143. left:0px;
  144. font-family:roboto;
  145. font-size:12px;
  146. text-align:right;
  147. text-transform:uppercase;
  148. }
  149.  
  150. .yoinkleft #a{
  151. position:absolute;
  152. top:-10px;
  153. left:20px;
  154. padding-top:30px;
  155. height:30px;
  156. width:120px;
  157. padding-bottom:15px;
  158. border-bottom:1px #cacaca solid;
  159. }
  160.  
  161. .yoinkleft #b{
  162. position:absolute;
  163. top:50px;
  164. left:20px;
  165. padding-top:30px;
  166. height:30px;
  167. width:120px;
  168. padding-bottom:15px;
  169. border-bottom:1px #cacaca solid;
  170. }
  171.  
  172.  
  173. .yoinkright{
  174. width:120px;
  175. height:140px;
  176. padding-left:20px;
  177. padding-right:10px;
  178. position:absolute;
  179. top:570px;
  180. right:0px;
  181. font-family:roboto;
  182. font-size:12px;
  183. text-align:left;
  184. text-transform:uppercase;
  185. }
  186.  
  187. .yoinkright #a{
  188. position:absolute;
  189. top:-10px;
  190. left:10px;
  191. padding-top:30px;
  192. height:30px;
  193. width:120px;
  194. padding-bottom:15px;
  195. border-bottom:1px #cacaca solid;
  196. }
  197.  
  198. .yoinkright #b{
  199. position:absolute;
  200. top:50px;
  201. left:10px;
  202. padding-top:30px;
  203. height:30px;
  204. width:120px;
  205. padding-bottom:15px;
  206. border-bottom:1px #cacaca solid;
  207. }
  208.  
  209. .bio{
  210. width:230px;
  211. height:230px;
  212. position:absolute;
  213. top:750px;
  214. left:20px;
  215. padding:5px;
  216. overflow-y:scroll;
  217. font-family:roboto;
  218. font-size:12px;
  219. text-align:justify;
  220. margin-bottom:20px;
  221. }
  222.  
  223. .biotitle{
  224. width:220px;
  225. height:20px;
  226. font-family:roboto;
  227. text-transform:uppercase;
  228. font-size:20px;
  229. letter-spacing:2px;
  230. position:absolute;
  231. top:720px;
  232. left:30px;
  233. font-weight:600;
  234. color:#000;
  235. }
  236.  
  237. #line{
  238. width:1px;
  239. height:265px;
  240. position:absolute;
  241. top:725px;
  242. left:272px;
  243. background:#cacaca;
  244. }
  245.  
  246. .extrastatstitle{
  247. font-family:roboto;
  248. text-transform:uppercase;
  249. font-size:20px;
  250. letter-spacing:2px;
  251. font-weight:600;
  252. color:#000;
  253. position:absolute;
  254. top:720px;
  255. left:290px;
  256. width:160px;
  257. height:20px;
  258. }
  259.  
  260. .extrastats{
  261. width:160px;
  262. height:230px;
  263. position:absolute;
  264. top:750px;
  265. left:290px;
  266. font-family:roboto;
  267. font-size:12px;
  268. overflow:hidden;
  269. padding-top:5px;
  270. padding-bottom:5px;
  271. }
  272.  
  273. .extrastats b{
  274. font-size:13px;
  275. }
  276.  
  277. .extrastats p{
  278. margin-top:5px;
  279. margin-bottom:5px;
  280. }
  281.  
  282. #circles{
  283. width:400px;
  284. height:225px;
  285. padding-top:20px;
  286. border-top:1px #cacaca solid;
  287. position:absolute;
  288. top:1010px;
  289. left:20px;
  290. margin-bottom:20px;
  291. overflow:hidden;
  292. }
  293.  
  294. .yoikstitle{
  295. font-family:roboto;
  296. text-transform:uppercase;
  297. font-size:20px;
  298. letter-spacing:2px;
  299. font-weight:600;
  300. color:#000;
  301. position:absolute;
  302. top:20px;
  303. right:0px;
  304. width:180px;
  305. padding-left:20px;
  306. height:25px;
  307. border-left:1px #cacaca solid;
  308. }
  309.  
  310. .yoiks{
  311. width:180px;
  312. height:200px;
  313. position:absolute;
  314. top:45px;
  315. right:0px;
  316. border-left:1px #cacaca solid;
  317. padding-left:20px;
  318. }
  319.  
  320. .yoiks b{
  321. font-size:12px;
  322. }
  323.  
  324.  
  325. #uno{
  326. position: relative;
  327. width:180px;
  328. height:10px;
  329. border-radius:1px;
  330. background:#e4e4e4;
  331. margin-top:3px;
  332. }
  333.  
  334. #uno span{
  335. position:absolute;
  336. top:0;
  337. left:0;
  338. line-height: 10px;
  339. height:10px;
  340. background:#7e7e7e; /* change this to a colour constant in all your images */
  341. }
  342.  
  343. .noicenoicetitle{
  344. font-family:roboto;
  345. text-transform:uppercase;
  346. font-size:12px;
  347. letter-spacing:2px;
  348. font-weight:600;
  349. color:#fff; /* text colour */
  350. text-shadow:2px 2px #000; /* shadow colour */
  351. position:absolute;
  352. text-align:center;
  353. top:110px;
  354. left:0px;
  355. width:180px;
  356. height:20px;
  357. }
  358.  
  359. .noicenoice{
  360. width:180px;
  361. height:245px;
  362. position:absolute;
  363. top:20px;
  364. left:0px;
  365. background:url('https://i.pinimg.com/236x/78/cd/f1/78cdf1e687fee4001af7799a452f848f--a-dream-korean-artist.jpg'); /* resizes itself, adjust background-size as necessary */
  366. background-size:180px;
  367. }
  368.  
  369.  
  370. /* credit styling (don't delete because then the credit won't be pretty and unobtrusive) */
  371.  
  372. .credit{
  373. padding:5px;
  374. width:10px;
  375. height:10px;
  376. background:#f5f5f5;
  377. font-size:10px;
  378. color:#000;
  379. position:fixed;
  380. bottom:5px;
  381. left:5px;
  382. border-radius:10px;
  383. text-align:center;
  384. line-height:0px;
  385. }
  386.  
  387. .credit a, .credit i{
  388. color:#000;
  389. }
  390.  
  391.  
  392. #s-m-t-tooltip {
  393. max-width:300px;
  394. border-radius: 10px;
  395. padding:0px 5px;
  396. margin:25px 20px 5px 0px;
  397. color:#000;
  398. background:#fff;
  399. border:1px solid #eaeaea;
  400. z-index:99999;
  401. font-size:10px;
  402. text-transform:uppercase;
  403. font-family:montserrat;
  404. font-weight:400;
  405. z-index:999999999999999;
  406. }
  407.  
  408. </style>
  409.  
  410. </head>
  411.  
  412. <body>
  413.  
  414. <div id="container">
  415. <div class="bigimg">
  416. <h1>an</h1>
  417. <h2>ananada thipthapha</h2>
  418. </div>
  419. <div class="yoink"></div>
  420. <div class="yoinkleft">
  421. <div id="a"><b>date of birth</b><br><i>00 month 0000</i></div>
  422. <div id="b"><b>species</b><br><i>something</i></div>
  423. </div>
  424. <div class="yoinkright">
  425. <div id="a"><b>pronouns</b><br><i>one/two/etc</i></div>
  426. <div id="b"><b>orientation</b><br><i>something</i></div>
  427. </div>
  428.  
  429. <div id="line"></div>
  430.  
  431. <div class="biotitle">about.</div>
  432. <div class="bio">
  433. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a enim non augue pharetra rutrum a a tortor. Nam magna turpis, volutpat et euismod nec, maximus sed ipsum. Quisque posuere et velit molestie pharetra. Integer condimentum rhoncus sapien eget iaculis. In porta, odio sit amet congue fermentum, velit augue eleifend diam, vel consectetur dui dolor at orci. Nulla sollicitudin risus erat, at gravida nunc consequat ut. Sed leo metus, porta vitae scelerisque vulputate, auctor id lacus.
  434. <br><br>
  435. Sed scelerisque a ante quis commodo. Maecenas nec lacus eget felis vehicula sagittis. Maecenas rhoncus tellus lectus, vel eleifend elit blandit in. In ac semper nulla. Suspendisse potenti. Nam libero arcu, gravida eu ornare at, scelerisque ac turpis. Maecenas sit amet arcu tortor. Duis eget maximus quam. Donec posuere diam quis leo blandit, ac pellentesque nisl commodo. Nunc tempus mi convallis nunc scelerisque varius. Vestibulum viverra nibh nec dolor lacinia, eget efficitur ante ornare. Fusce lobortis ac felis id dictum. In dictum eros non lacus euismod, at blandit quam semper. Pellentesque imperdiet, ante ut porttitor pellentesque, tellus nulla iaculis justo, a malesuada nisi est a tellus. Cras a tortor sem. Cras facilisis sed tellus non commodo.
  436. </div>
  437.  
  438. <div class="extrastatstitle">stats.</div>
  439. <div class="extrastats">
  440. <b>AGE</b><br>
  441. number-number
  442. <p><b>OCCUPATION</b><br>
  443. something</p>
  444. <p><b>FACE CLAIM</b><br>
  445. someone</p>
  446. <p><b>EYE COLOUR</b><br>
  447. something</p>
  448. <p><b>HAIR COLOUR</b><br>
  449. something</p>
  450. <p><b>HEIGHT</b><br>
  451. 000 cm</p>
  452. </div>
  453.  
  454. <div id="circles">
  455.  
  456. <div class="yoikstitle">persona.</div>
  457. <div class="yoiks">
  458.  
  459. <b>INTELLIGENCE</b>
  460. <div id="uno"><span style="width:80%;"></span></div>
  461.  
  462. <b>EMPATHY</b>
  463. <div id="uno"><span style="width:73%;"></span></div>
  464.  
  465. <b>COMPASSION</b>
  466. <div id="uno"><span style="width:90%;"></span></div>
  467.  
  468. <b>CREATIVITY</b>
  469. <div id="uno"><span style="width:30%;"></span></div>
  470.  
  471. <b>WISDOM</b>
  472. <div id="uno"><span style="width:67%;"></span></div>
  473.  
  474. <b>CHARISMA</b>
  475. <div id="uno"><span style="width:18%;"></span></div>
  476. </div>
  477.  
  478. <div class="noicenoice"><div class="noicenoicetitle">don't look back</div></div>
  479.  
  480.  
  481.  
  482.  
  483. </div>
  484.  
  485.  
  486. </div>
  487.  
  488. <!-- credit: don't delete this, man. that's just rude. i made it extra small on purpose -->
  489. <div class="credit"><a title="code by anna" href="http://sprfluous.tumblr.com"><i style="font-size:9px;" class="far fa-star"></i></a></div>
  490.  
  491. </body>
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!