API tools faq
paste
heartilys

trustinginthelight ships

heartilys
Jun 25th, 2020
155
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.62 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <title>SHIPS</title> <!--- Change the title of your page here --->
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8.  
  9. <!--- Font Scripts --->
  10. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
  11. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  12.  
  13. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  14. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
  15. <script type="text/javascript">
  16. $(document).ready( function() {
  17. // init Isotope
  18. var $grid = $('.musecon').isotope({
  19. itemSelector: '.muse'
  20. });
  21.  
  22. // store filter for each group
  23. var filters = {};
  24.  
  25. $('.filters').on( 'click', '.button', function() {
  26. var $this = $(this);
  27. // get group key
  28. var $buttonGroup = $this.parents('.button-group');
  29. var filterGroup = $buttonGroup.attr('data-filter-group');
  30. // set filter for group
  31. filters[ filterGroup ] = $this.attr('data-filter');
  32. // combine filters
  33. var filterValue = concatValues( filters );
  34. // set filter for Isotope
  35. $grid.isotope({ filter: filterValue });
  36. });
  37.  
  38. // change is-checked class on buttons
  39. $('.button-group').each( function( i, buttonGroup ) {
  40. var $buttonGroup = $( buttonGroup );
  41. $buttonGroup.on( 'click', 'button', function() {
  42. $buttonGroup.find('.is-checked').removeClass('is-checked');
  43. $( this ).addClass('is-checked');
  44. });
  45. });
  46.  
  47. });
  48.  
  49. // flatten object by concatting values
  50. function concatValues( obj ) {
  51. var value = '';
  52. for ( var prop in obj ) {
  53. value += obj[ prop ];
  54. }
  55. return value;
  56. }
  57. </script>
  58.  
  59. <style>
  60.  
  61. @font-face { font-family:'saturday night'; src: url('https://dl.dropboxusercontent.com/s/t1v8lrtmfsvr7ky/saturday%20nights%20personal%20use.ttf') ;}
  62.  
  63. /* TOOLTIPS */
  64.  
  65. .tooltip{
  66. display:inline;
  67. position:absolute;
  68. }
  69.  
  70. #s-m-t-tooltip {
  71. max-width:100px;
  72. background-color:#fff;
  73. border:1px solid #cacaca;
  74. margin:15px 10px 10px 10px;
  75. font-size:9px;
  76. text-transform:uppercase;
  77. font-family: 'Open Sans', sans-serif;
  78. text-align:center;
  79. padding:4px;
  80. }
  81.  
  82. /* SCROLLBAR */
  83.  
  84. ::-webkit-scrollbar {
  85. background-color:#1e242b;
  86. }
  87.  
  88. ::-webkit-scrollbar-thumb{
  89. width:4px;
  90. border:8px solid #1e242b;
  91. background:#a47eb8;
  92. margin-right:5px;
  93. }
  94.  
  95. /* GENERAL STYLING */
  96.  
  97. a {
  98. color:#92b6b6;
  99. text-transform:uppercase;
  100. text-decoration:underline;
  101. font-weight:bold;
  102. }
  103.  
  104. b, strong {
  105. font-weight:bold;
  106. color:#a47eb8;
  107. }
  108.  
  109. i, em {
  110. font-style:italic;
  111. color:#92b6b6;
  112. }
  113.  
  114. u, {
  115. color:#979546;
  116. }
  117.  
  118. /* MAIN AREAS */
  119.  
  120. body {
  121. font-family:'roboto condensed';
  122. background:url(link) top #1e242b;
  123. }
  124.  
  125. #main {
  126. width:950px;
  127. height:640px;
  128. position:fixed;
  129. margin:auto;
  130. top:0px;
  131. bottom:0px;
  132. left:0px;
  133. right:0px;
  134. }
  135.  
  136. #title {
  137. color:#c9c769;
  138. font-family:'saturday night';
  139. text-transform:lowercase;
  140. font-size:70px;
  141. text-shadow:
  142. 0px 0px 0,
  143. 0px 0px 0,
  144. -3px 3px 0 #775a86,
  145. 0px 0px 0;
  146. position:fixed;
  147. margin-top:-55px;
  148. margin-left:0px;
  149. z-index:999;
  150. }
  151.  
  152. #desc {
  153. width:940px;
  154. color:#fff;
  155. font-size:11px;
  156. font-style:italic;
  157. text-align:right;
  158. text-transform:uppercase;
  159. margin-top:-33px;
  160. margin-left:0px;
  161. padding-bottom:10px;
  162. position:fixed;
  163. border-bottom:1px solid #a47eb8;
  164. }
  165.  
  166. #bck {
  167. width:940px;
  168. height:15px;
  169. font-size:12px;
  170. font-weight:800;
  171. text-align:center;
  172. position:absolute;
  173. margin-top:650px;
  174. z-index:9999;
  175. }
  176.  
  177. #bck a {
  178. color:#c9c769;
  179. }
  180.  
  181. #mc {
  182. width:940px;
  183. height:500px;
  184. margin-top:135px;
  185. margin-left:5px;
  186. overflow-x:hidden;
  187. overflow-y:scroll;
  188. background-color:#1e242b;
  189. outline:1px solid #a47eb8;
  190. position:fixed;
  191. }
  192.  
  193. .musecon {
  194. margin-left:10px;
  195. }
  196.  
  197. #mc::-webkit-scrollbar {
  198. background-color:#1e242b;
  199. }
  200.  
  201. #mc::-webkit-scrollbar-thumb{
  202. width:4px;
  203. border:8px solid #1e242b;
  204. background:#a47eb8;
  205. margin-right:5px;
  206. }
  207.  
  208. /* FILTERS */
  209.  
  210. #filtercon {
  211. width:550px;
  212. height:120px;
  213. text-align:center;
  214. margin-top:-5px;
  215. margin-left:210px;
  216. overflow-x:hidden;
  217. overflow-y:scroll;
  218. background:#1e242b;
  219. position:absolute;
  220. }
  221.  
  222. #filtercon::-webkit-scrollbar {
  223. background-color:#1e242b;
  224. }
  225.  
  226. #filtercon::-webkit-scrollbar-thumb{
  227. width:4px;
  228. border:8px solid #1e242b;
  229. background:#a47eb8;
  230. margin-right:5px;
  231. }
  232.  
  233. .filters {
  234. padding:14px;
  235. margin-top:0px;
  236. overflow-y:scroll;
  237. }
  238.  
  239. .button-group {
  240. margin-left:4px;
  241. }
  242.  
  243. gr {
  244. padding-right:5px;
  245. color:#a47eb8;
  246. font-size:13px;
  247. font-weight:800;
  248. text-transform:uppercase;
  249. text-decoration:underline;
  250. }
  251.  
  252. .button {
  253. font-family:'roboto condensed';
  254. border:none;
  255. padding-left:5px;
  256. padding-right:5px;
  257. font-weight:bold;
  258. font-style:italic;
  259. font-size:11px;
  260. text-transform:uppercase;
  261. color:#92b6b6;
  262. display:inline-block;
  263. background:none;
  264. }
  265.  
  266. .button:hover {
  267. color:#979546;
  268. text-decoration:underline;
  269. transition-duration:1s;
  270. -moz-transition-duration:1s;
  271. -webkit-transition-duration:1s;
  272. -o-transition-duration:1s;
  273. }
  274.  
  275. .button:focus {
  276. color:#979546;
  277. font-style:none;
  278. text-decoration:underline;
  279. outline:0;
  280. }
  281.  
  282. /* MUSE CELLS */
  283.  
  284. .muse {
  285. width:270px;
  286. height:200px;
  287. overflow:hidden;
  288. margin-top:20px;
  289. margin-bottom:-45px;
  290. margin-left:20px;
  291. margin-right:10px;
  292. display:inline-block;
  293. }
  294.  
  295. #micon {
  296. width:100px;
  297. height:100px;
  298. margin-left:0px;
  299. border:1px solid #a47eb8;
  300. }
  301.  
  302. #micon img {
  303. width:100px;
  304. height:100px;
  305. margin-top:4px;
  306. margin-left:6px;
  307. }
  308.  
  309. #info {
  310. width:150px;
  311. height:104px;
  312. color:#f8f1f1;
  313. font-size:11.5px;
  314. text-align:justify;
  315. text-transform:lowercase;
  316. margin-top:-100px;
  317. margin-left:120px;
  318. position:absolute;
  319. overflow-x:hidden;
  320. overflow-y:scroll;
  321. }
  322.  
  323. #info::-webkit-scrollbar {
  324. background-color:#1e242b;
  325. }
  326.  
  327. #info::-webkit-scrollbar-thumb{
  328. width:4px;
  329. border:8px solid #1e242b;
  330. background:#a47eb8;
  331. margin-right:5px;
  332. }
  333.  
  334. label {
  335. color:#979546;
  336. text-transform:uppercase;
  337. text-decoration:underline;
  338. font-weight:800;
  339. padding-right:10px;
  340. }
  341.  
  342. #name {
  343. width:270px;
  344. height:20px;
  345. color:#1e242b;
  346. font-size:12px;
  347. font-weight:800;
  348. text-align:center;
  349. text-transform:uppercase;
  350. margin-top:12px;
  351. padding-top:5px;
  352. position:absolute;
  353. background-color:#92b6b6;
  354. }
  355.  
  356. /* CREDIT — DO NOT TOUCH! */
  357.  
  358.  
  359. #credit {
  360. position:fixed;
  361. bottom:12px;
  362. right:8px;
  363. font-size:14px;
  364. }
  365.  
  366. #credit a {
  367. width:60px;
  368. height:60px;
  369. color:#fff;
  370. text-shadow:none;
  371. text-decoration:none;
  372. background-color:#a47eb8;
  373. padding:6px 6px 4px 6px;
  374. }
  375.  
  376. </style>
  377.  
  378. </head>
  379. <body>
  380.  
  381. <div id="main">
  382.  
  383. <div id="title"> relationships </div>
  384. <div id="desc"> this only lists ships from their canon and ones i currently ship. <b>i'm fully willing to discuss other ships.</b> </div>
  385.  
  386. <div id="bck"><a href="http://trustinginthelight.tumblr.com">go back</a></div>
  387.  
  388. <div id="mc">
  389. <div class="musecon">
  390.  
  391. <!--- MUSE START --->
  392.  
  393. <div class="muse kq mp">
  394. <div id="micon">
  395. <img src="https://66.media.tumblr.com/677045c99f8da95c45463282ced70ce5/82c74b61d68d9890-c4/s540x810/3f8a83f425d6d7b3b4c728acbc19b65a65505c4c.png"> </div>
  396. <div id="info"> <label>series</label> series name <br><br>
  397. <label>orientation</label> orientation here ( preference ) <br><br>
  398. <label>ships</label> name / name, name / name
  399. </div>
  400. <div id="name">muse name</div>
  401. </div>
  402.  
  403. <!--- MUSE END --->
  404.  
  405.  
  406. </div>
  407. </div>
  408.  
  409. <div id="filtercon">
  410.  
  411. <div class="filters">
  412.  
  413. <div class="button-group" data-filter-group="series"><gr>series</gr>
  414. <button class="button is-checked" data-filter="">all</button>
  415. <button class="button" data-filter=".agko">aggretsuko</button>
  416. <button class="button" data-filter=".dbh">detroit: become human</button>
  417. <button class="button" data-filter=".da">dragon age</button>
  418. <button class="button" data-filter=".drrr">durarara!!</button>
  419. <button class="button" data-filter=".fb">fruits basket</button>
  420. <button class="button" data-filter=".kq">king's quest</button>
  421. <button class="button" data-filter=".lis">life is strange</button>
  422. <button class="button" data-filter=".og">original</button>
  423. <button class="button" data-filter=".ohshc">ouran high school host club</button>
  424. <button class="button" data-filter=".p5r">personal 5 royal</button>
  425. <button class="button" data-filter=".rvb">red vs blue</button>
  426. <button class="button" data-filter=".rwby">rwby</button>
  427. <button class="button" data-filter=".sp">south park</button>
  428. <button class="button" data-filter=".twdg">the walking dead game</button>
  429. </div>
  430. <br>
  431. <div class="button-group" data-filter-group="pref"><gr>partner preference</gr>
  432. <button class="button is-checked" data-filter="">all</button>
  433. <button class="button" data-filter=".fp">female preference</button>
  434. <button class="button" data-filter=".mp">male preference</button>
  435. <button class="button" data-filter=".np">no preference</button>
  436. </div>
  437.  
  438. </div>
  439.  
  440. </div>
  441.  
  442. <!--- CREDIT — DO NOT TOUCH! --->
  443.  
  444. <div id="credit"><a href="http://irnmaidn.tumblr.com" title="coded by evie !"><span class="th th-sun"></span></a></div>
  445.  
  446. </body>
  447. </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!