API tools faq
paste
Advertisement
Guest User

edited ophelia page by vcnilla

a guest
Nov 24th, 2017
139
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.48 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <title>muses</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <!--- SCRIPT CODING --->
  6.  
  7. <script type="text/javascript"
  8. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  9. <script> $(document).ready(function() { $('a.poplight[href^=#]').click(function() { var popID = $(this).attr('rel'); var popURL = $(this).attr('href'); var query= popURL.split('?'); var dim= query[1].split('&'); var popWidth = dim[0].split('=')[1]; $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>'); var popMargTop = ($('#' + popID).height() + 80) / 2; var popMargLeft = ($('#' + popID).width() + 80) / 2; $('#' + popID).css({ 'margin-top' : -popMargTop, 'margin-left' : -popMargLeft }); $('body').append('<div id="fade"></div>'); $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); return false; }); $('a.close, #fade').live('click', function() { $('#fade , .popup_block').fadeOut(function() { $('#fade, a.close').remove(); }); return false; }); });
  10. </script>
  11.  
  12. <script>$(function() { $(".closetext").click(function(){$("#txtpop").fadeOut();}); }); $(function() { $(".opentext").click(function(){$("#txtpop").fadeIn();}); }); </script>
  13. <script>$(function() { $(".closetext2").click(function(){$("#txtpop2").fadeOut();}); }); $(function() { $(".opentext2").click(function(){$("#txtpop2").fadeIn();}); }); </script>
  14. <script>$(function() { $(".closetext3").click(function(){$("#txtpop3").fadeOut();}); }); $(function() { $(".opentext3").click(function(){$("#txtpop3").fadeIn();}); }); </script>
  15. <script>$(function() { $(".closetext4").click(function(){$("#txtpop4").fadeOut();}); }); $(function() { $(".opentext4").click(function(){$("#txtpop4").fadeIn();}); }); </script>
  16. <script>$(function() { $(".closetext5").click(function(){$("#txtpop5").fadeOut();}); }); $(function() { $(".opentext5").click(function(){$("#txtpop5").fadeIn();}); }); </script>
  17. <script>$(function() { $(".closetext6").click(function(){$("#txtpop6").fadeOut();}); }); $(function() { $(".opentext6").click(function(){$("#txtpop6").fadeIn();}); }); </script>
  18. <script>$(function() { $(".closetext7").click(function(){$("#txtpop7").fadeOut();}); }); $(function() { $(".opentext7").click(function(){$("#txtpop7").fadeIn();}); }); </script>
  19. <script>$(function() { $(".closetext8").click(function(){$("#txtpop8").fadeOut();}); }); $(function() { $(".opentext8").click(function(){$("#txtpop8").fadeIn();}); }); </script>
  20. <script>$(function() { $(".closetext9").click(function(){$("#txtpop9").fadeOut();}); }); $(function() { $(".opentext9").click(function(){$("#txtpop9").fadeIn();}); }); </script>
  21. <script>$(function() { $(".closetext10").click(function(){$("#txtpop10").fadeOut();}); }); $(function() { $(".opentext10").click(function(){$("#txtpop10").fadeIn();}); }); </script>
  22.  
  23.  
  24.  
  25.  
  26. <!--- STYLESHEET CODING --->
  27. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  28. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600|Montserrat' rel='stylesheet' type='text/css'>
  29. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  30. <script>(function($){ $(document).ready(function() { $("a[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:20, tip_fade_speed:200, attribute:"title" }); }); })(jQuery);</script>
  31. <link href='https://fonts.googleapis.com/css?family=Inconsolata:400,700|Karla:400,700' rel='stylesheet' type='text/css'>
  32. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:700|Roboto:500,700,900" rel="stylesheet">
  33. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700" rel="stylesheet">
  34. <link href='https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,800,400,300,700|Montserrat:400,700' rel='stylesheet' type='text/css'>
  35.  
  36. <head>
  37. <style type="text/css">
  38.  
  39.  
  40.  
  41.  
  42.  
  43.  
  44. /* TOOLTIP CODING */
  45.  
  46. #s-m-t-tooltip { max-width:200px; border-radius: 4px; padding:1px; padding-left:3px; padding-right:3px; margin:25px 20px 5px 0px; color:{color:text}; background: {color:posts}; border:1px solid {color:background}; z-index:99999; text-transform:uppercase; font-weight:bold; letter-spacing:0.5px; font-size:7px; font-family:'Montserrat'; }
  47.  
  48. ::-webkit-scrollbar {width: 0px; height: 4px;}
  49. ::-webkit-scrollbar-thumb {background-color: #e0e0e0;-webkit-border-radius: 1ex;}
  50.  
  51.  
  52.  
  53. /* BODY CODING */
  54.  
  55. body { background:#3a291d; font-family: 'Roboto', sans-serif; color:#646464; font-size:9px; overflow:hidden; background-size:cover;}
  56. #bg { background:#e9e9e9; width:360px; height:400px; overflow:auto;position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; padding-bottom:19px;}
  57. b, strong { color:#c5c2ba; }
  58. a, a:active { color:#404040; }
  59.  
  60.  
  61. /* CHARACTER BOX CODING */
  62.  
  63. #character { width:100px; height:80px; background:#f9f9f9; float:left; margin-left:15px; margin-top:14px;margin-bottom:30px; }
  64. #characterimg { width:100px; height:80px; margin-bottom:0px;}
  65. #characterimg img { width:100px; height:80px; margin-bottom:0px; }
  66. .name { background:#513b2c; width:88px; letter-spacing:0px; padding:6px; font-size:9px; font-weight:400; text-transform:uppercase; text-align:center; margin-top:0px;color:#ccc;margin-bottom:10px; }
  67.  
  68. img:hover {
  69. -webkit-filter: grayscale(100%);
  70. -webkit-transition: .5s ease-in-out;
  71. -moz-filter: grayscale(0%);
  72. -moz-transition: .5s ease-in-out;
  73. -o-filter: grayscale(0%);
  74. -o-transition: .5s ease-in-out;
  75. }
  76.  
  77. img {
  78. -webkit-filter: grayscale(50%);
  79. -webkit-transition: .5s ease-in-out;
  80. -moz-filter: grayscale(100%);
  81. -moz-transition: .5s ease-in-out;
  82. -o-filter: grayscale(100%);
  83. -o-transition: .5s ease-in-out;
  84. }
  85.  
  86.  
  87. /* TOPBAR CODING */
  88.  
  89. #topbar { width:330px; height:2px; background:#513b2c; padding:16px; position:fixed; color:#ccc; letter-spacing:1px; text-transform:uppercase; font-family:'Roboto'; font-weight:700; line-height:5px; font-size:11px; z-index:99999; text-align:center;}
  90. #topbar2 { height:35px; }
  91.  
  92. /* CREDIT CODING - DO NOT REMOVE, OR TAKE ANY PARTS OF THIS CODE */
  93. #credit { position:fixed; bottom:10px; left:10px; }
  94. #credit a { font-size:9px; color:#797979; font-weight:bold; }
  95. #credit i {border-radius:80px; color:#797979; text-transform:uppercase; letter-spacing: 0px; padding:4px; width:10px; height:10px; background:#e8e8e8; opacity:1; text-align:center; }
  96.  
  97. </style></head><body>
  98.  
  99. <!-- HTML BEGINS -->
  100.  
  101. <div id="bg">
  102.  
  103.  
  104. <!-- TOPBAR -->
  105.  
  106.  
  107. <div id="topbar">I am tired of this place, I hope people change</div>
  108. <div id="topbar2"></div>
  109.  
  110. <!--- start --->
  111. <a href="/savant" rel="box4" class="poplight">
  112. <div class="convo1">
  113. <div id="character">
  114. <div id="characterimg"><img src="https://i.imgur.com/yqBrERu.png"></div>
  115. <div class="name">the savant</div>
  116. <div class="opentext"></div></div></a>
  117. </div>
  118.  
  119. <!--- end --->
  120.  
  121.  
  122. <!--- start --->
  123. <a href="/benefactor" rel="box4" class="poplight">
  124. <div class="convo1">
  125. <div id="character">
  126. <div id="characterimg"><img src="https://i.imgur.com/x0BWGvV.png"></div>
  127. <div class="name">the benefactor</div>
  128. <div class="opentext"></div></div></a>
  129. </div>
  130.  
  131. <!--- end --->
  132.  
  133. <!--- start --->
  134. <a href="/lothario" rel="box4" class="poplight">
  135. <div class="convo1">
  136. <div id="character">
  137. <div id="characterimg"><img src="https://i.imgur.com/Ce8lOUk.png"></div>
  138. <div class="name">the lothario</div>
  139. <div class="opentext"></div></div></a>
  140. </div>
  141.  
  142. <!--- end --->
  143.  
  144. <!--- start --->
  145. <a href="/hoyden" rel="box4" class="poplight">
  146. <div class="convo1">
  147. <div id="character">
  148. <div id="characterimg"><img src="https://i.imgur.com/ORuzGZ5.png"></div>
  149. <div class="name">the hoyden</div>
  150. <div class="opentext"></div></div></a>
  151. </div>
  152.  
  153. <!--- end --->
  154.  
  155. <!--- start --->
  156. <a href="/astrophile" rel="box4" class="poplight">
  157. <div class="convo1">
  158. <div id="character">
  159. <div id="characterimg"><img src="https://i.imgur.com/2GNQo7e.png"></div>
  160. <div class="name">the astrophile</div>
  161. <div class="opentext"></div></div></a>
  162. </div>
  163.  
  164. <!--- end --->
  165.  
  166. <!--- start --->
  167. <a href="/connard" rel="box4" class="poplight">
  168. <div class="convo1">
  169. <div id="character">
  170. <div id="characterimg"><img src="https://i.imgur.com/mbrZkNb.png"></div>
  171. <div class="name">the connard</div>
  172. <div class="opentext"></div></div></a>
  173. </div>
  174.  
  175. <!--- end --->
  176.  
  177. <!--- start --->
  178. <a href="/babydoll" rel="box4" class="poplight">
  179. <div class="convo1">
  180. <div id="character">
  181. <div id="characterimg"><img src="https://i.imgur.com/i1CO4EI.png"></div>
  182. <div class="name">the baby doll</div>
  183. <div class="opentext"></div></div></a>
  184. </div>
  185.  
  186. <!--- end --->
  187.  
  188. <!--- start --->
  189. <a href="/ares" rel="box4" class="poplight">
  190. <div class="convo1">
  191. <div id="character">
  192. <div id="characterimg"><img src="https://i.imgur.com/0KQ9JWx.png"></div>
  193. <div class="name">the halcyon</div>
  194. <div class="opentext"></div></div></a>
  195. </div>
  196.  
  197. <!--- end --->
  198. <!--- start --->
  199. <a href="/aphrodite" rel="box4" class="poplight">
  200. <div class="convo1">
  201. <div id="character">
  202. <div id="characterimg"><img src="https://i.imgur.com/0vKn7js.png"></div>
  203. <div class="name">the phoenix</div>
  204. <div class="opentext"></div></div></a>
  205. </div>
  206.  
  207. <!--- end --->
  208.  
  209. <!--- start --->
  210. <a href="/ares" rel="box4" class="poplight">
  211. <div class="convo1">
  212. <div id="character">
  213. <div id="characterimg"><img src="https://i.imgur.com/HXJelma.png"></div>
  214. <div class="name">the facade</div>
  215. <div class="opentext"></div></div></a>
  216. </div>
  217.  
  218. <!--- end --->
  219.  
  220. <a href="http://vcnilla.tumblr.com/" title="vcnilla"><div id="credit"><i class="fa fa-asterisk" aria-hidden="true"></i></div></a>
  221.  
  222. </div> <!---- this is the bg id----->
  223.  
  224. </body>
  225. </html>
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!