API tools faq
paste
mataharikemalaman

Mayu Ciyut2

mataharikemalaman
Aug 24th, 2012
67
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.22 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. Family Page 01: Nasake
  3. by sakurane - (sakurane.tumblr.com)
  4. ----------------------------------------------------------------------
  5. TERMS OF USAGE
  6. 1. Do not remove the credit. (You may move it to a credits page.)
  7. 2. Do not use as a base code.
  8. 3. Do not take any part of the code.
  9. 4. Do not redistribute.
  10. 5. Do not claim as your own.
  11. 6. You may customize to your liking, but keep the credit intact.
  12. -->
  13.  
  14. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  15. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  16.  
  17. <head>
  18.  
  19. <title>{Title}</title>
  20.  
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23.  
  24. <style type="text/css">
  25. ::-webkit-scrollbar-thumb:vertical {
  26. height: 100px;
  27. background: #D3643B;
  28. }
  29. ::-webkit-scrollbar {
  30. height: 10px;
  31. width: 10px;
  32. background: #403B33;
  33. }
  34. body {
  35. background: #EDEBE6 url(http://i.imgur.com/KqAvu.jpg) fixed;
  36. margin: 0;
  37. }
  38. a {
  39. color: #eee;
  40. text-decoration: none;
  41. }
  42.  
  43. b { color:#D3643B;
  44. }
  45.  
  46. #sidebar {
  47. position: fixed;
  48. width: 220px;
  49. height: 100%;
  50. background: #403B33;
  51. left:108px;
  52. border-left:10px solid #D3643B;
  53. background-image: url(http://i.imgur.com/4JEKP.jpg);
  54. background-position: bottom;
  55. background-repeat: no-repeat;
  56. }
  57. #sb {
  58. margin-top: 70%;
  59. }
  60. h1 {
  61. font: 18px consolas;
  62. color: #94C7B6;
  63. text-align: center;
  64. }
  65. .desc {
  66. font: 8px lucida console;
  67. color: #555;
  68. text-transform: uppercase;
  69. letter-spacing: 1px;
  70. text-align: center;
  71. padding: 10px;
  72. background: #94C7B6;
  73. border-radius: 5px;
  74. -moz-border-radius: 5px;
  75. margin-left: 10px;
  76. margin-right: 10px;
  77. }
  78. #nav {
  79. text-align: center;
  80. }
  81. #nav a {
  82. width: 50px;
  83. font: 8px lucida console;
  84. color: #000;
  85. text-align: center;
  86. display: inline-block;
  87. background: #94C7B6;
  88. border: 1px solid #434343;
  89. padding: 2px;
  90. margin: 5px;
  91. }
  92.  
  93.  
  94. #nav a:hover {background: #D3643B;
  95. }
  96.  
  97. #family {
  98. width: 777px;
  99. position: absolute;
  100. left: 492px;
  101. top: 50px;
  102. padding-bottom: 80px;
  103. }
  104.  
  105. img a {
  106. border: none;
  107. }
  108. #famtable {
  109. width: 260px;
  110. background: #403B33;
  111. border-left: 10px solid #D3643B;
  112. padding: 10px;
  113. display: inline-block;
  114. margin: 9px;
  115. margin-right: 44px;
  116. }
  117.  
  118. #famtable img {
  119. opacity: .8;
  120. -webkit-transition: all 0.7s ease-in-out;
  121. -moz-transition: all 0.7s ease-in-out;
  122. -o-transition: all 0.7s ease-in-out;
  123. -ms-transition: all 0.7s ease-in-out;
  124. transition: all 0.7s ease-in-out;
  125. }
  126.  
  127. #famtable img:hover {
  128. opacity: 1;
  129. -webkit-transition: all 0.7s ease-in-out;
  130. -moz-transition: all 0.7s ease-in-out;
  131. -o-transition: all 0.7s ease-in-out;
  132. -ms-transition: all 0.7s ease-in-out;
  133. transition: all 0.7s ease-in-out;
  134. }
  135.  
  136. #famtd {
  137. width: 180px;
  138. font: 10px lucida console;
  139. color: #eee;
  140. text-align: center;
  141. }
  142. .charaname {
  143. font: bold 15px consolas;
  144. color: #94C7B6;
  145. text-transform: uppercase;
  146. border-bottom: 1px dotted #eee;
  147. }
  148.  
  149. #fade {
  150. display: none;
  151. background: #000;
  152. position: fixed;
  153. left: 0;
  154. top: 0;
  155. width: 100%;
  156. height: 100%;
  157. opacity: .80;
  158. z-index: 9999;
  159. }
  160.  
  161. .popup_block{
  162. display: none;
  163. background: #403B33;
  164. padding: 20px;
  165. padding-bottom: 51px;
  166. float: left;
  167. position: fixed;
  168. top: 50%;
  169. left: 50%;
  170. z-index: 99999;
  171. height:250px;
  172. width: 550px;
  173. border-bottom-left-radius: 50px;
  174. font: 12px consolas;
  175. color: #94C7B6;
  176. }
  177.  
  178. img.btn_close {
  179. float: right;
  180. margin: -55px -55px 0 0;
  181. }
  182.  
  183. *html #fade {
  184. position: absolute;
  185. }
  186.  
  187. *html .popup_block {
  188. position: absolute;
  189. }
  190.  
  191. #content {
  192. overflow: auto;
  193. position: absolute;
  194. height: 250px;
  195. left: 27px;
  196. top: 31px;
  197. width: 533px;
  198. }
  199.  
  200. </style>
  201.  
  202.  
  203.  
  204. <script type="text/javascript"
  205. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  206.  
  207. <script>
  208.  
  209.  
  210.  
  211. $(document).ready(function() {
  212.  
  213. //
  214.  
  215.  
  216.  
  217. //When you click on a link with class of poplight and the href starts with a #
  218.  
  219. $('a.poplight[href^=#]').click(function() {
  220.  
  221. var popID = $(this).attr('rel'); //Get Popup Name
  222.  
  223. var popURL = $(this).attr('href'); //Get Popup href to define size
  224.  
  225.  
  226.  
  227. //Pull Query & Variables from href URL
  228.  
  229. var query= popURL.split('?');
  230.  
  231. var dim= query[1].split('&');
  232.  
  233. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  234.  
  235.  
  236.  
  237. //Fade in the Popup and add close button
  238.  
  239. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://tiny.cc/closeimg" class="btn_close" title="Close Window" alt="Close" /></a>');
  240.  
  241.  
  242. //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
  243.  
  244. var popMargTop = ($('#' + popID).height() + 80) / 2;
  245.  
  246. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  247.  
  248.  
  249.  
  250. //Apply Margin to Popup
  251.  
  252. $('#' + popID).css({
  253.  
  254. 'margin-top' : -popMargTop,
  255.  
  256. 'margin-left' : -popMargLeft
  257.  
  258. });
  259.  
  260.  
  261.  
  262. //Fade in Background
  263.  
  264. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  265.  
  266. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  267.  
  268.  
  269.  
  270. return false;
  271.  
  272. });
  273.  
  274.  
  275.  
  276. //Close Popups and Fade Layer
  277.  
  278. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  279.  
  280. $('#fade , .popup_block').fadeOut(function() {
  281.  
  282. $('#fade, a.close').remove(); //fade them both out
  283.  
  284. });
  285.  
  286. return false;
  287.  
  288. });
  289.  
  290.  
  291.  
  292.  
  293.  
  294. });
  295.  
  296. </script>
  297. </head><body>
  298.  
  299. <div id="sidebar">
  300. <div id="sb">
  301. <h1>Title</h1>
  302. <div class="desc">Description here.</div>
  303. <div id="nav"><a href="/">return</a><a href="/ask">join?</a><a href="http://sakurane.tumblr.com">credit</a></div>
  304. </div>
  305. </div>
  306.  
  307.  
  308. <div id="family">
  309.  
  310. <!-- Start-Of-Character-Table -->
  311. <table id="famtable">
  312. <tr>
  313. <td><a href="#?w=550" rel="Mana" class="poplight"><img src="http://a7.sphotos.ak.fbcdn.net/hphotos-ak-ash4/645_42888299291_526369291_1111729_6537_n.jpg"></a></td>
  314. <td id="famtd"><font class="charaname">Mana Yuuhi</font><br><i>Abstract School</i></td>
  315. </tr>
  316. </table>
  317.  
  318. <!-- Pop-UP -->
  319.  
  320. <div id="Mana" class="popup_block">
  321. <div id="content"><p><b>Visualization:</b> Rita Mordio (Tales of Vesperia)</p>
  322. <p>Name Origin: Mana diambil dari istilah mana yang biasa ada dalam game (energi sihir), sedangkan Yuuhi itu terdiri dari kanji sore dan hari, yang berarti sore hari. Kenapa namanya nyampur Inggris-Jepang, karena awalnya dia ini half Inggris-Jepang</p>
  323. <p>Physical Description: Rambut berwarna coklat pendek, mata berwarna hijau.</p>
  324. <p>Alice: Memory Manipulate (Dangerous) - Sesuai namanya, Alice ini berfungsi untuk memanipulasi memori milik orang lain, tapi terbatas.</p>
  325. <p>Personality: Iseng, suka sama gosip (akibat sharing sama temen yang punya ide bikin dia jadi ratu gosip =)) ), ceria.</p>
  326. <p>History: (PM lupa OTL)</p>
  327. <p>Trivia: Visunya ini waktu AS versi 2. Visu waktu AS versi 1 itu original dan gak nyimpen aslinya, jadi begitulah @_@</p></div>
  328. </div>
  329.  
  330. <!-- End-Of-Character-Table -->
  331.  
  332.  
  333. <!-- Start-Of-Character-Table -->
  334. <table id="famtable">
  335. <tr>
  336. <td><a href="#?w=550" rel="Shirogane" class="poplight"><img src="http://l-userpic.livejournal.com/96359195/20564852"></a></td>
  337. <td id="famtd"><font class="charaname">Shirogane Hikari</font><br><i>Abstract School</i></td>
  338. </tr>
  339. </table>
  340.  
  341. <!-- Pop-UP -->
  342.  
  343. <div id="Shirogane" class="popup_block">
  344. <div id="content">
  345. <p>Visualization&#160;: Hinamori Amu (Shugo Chara)</p>
  346. <p>Name Origin: Hikari artinya cahaya, sedangkan Shirogane itu dulu nyomot dari nama Naoto Shirogane (Persona 4) karena waktu bikin Hikari ini, PM sedang ngefans-ngefansnya sama Persona 4 dan Naoto ini.</p>
  347. <p>Physical Description: Rambut berwarna merah muda sebahu, mata berwarna coklat.</p>
  348. <p>Alice: Electric Shock (Special) - Bisa membuat orang seperti terkena setruman listrik tingkat rendah sewaktu Hikari menyentuh orang lain (Anggap saja seperti terkena raket listrik / listrik statis)</p>
  349. <p>Personality: Tipe yang bicara apa adanya, energik, tidak suka dengan orang yang menyebalkan / jahat kepada orang lain.</p>
  350. <p>History: Murid SMP biasa pada umumnya, tetapi mendadak kemampuan Alicenya muncul sehingga ia harus pergi dan tinggal di AS</p>
  351. </div></div>
  352.  
  353. <!-- End-Of-Character-Table -->
  354.  
  355. <!-- Start-Of-Character-Table -->
  356. <table id="famtable">
  357. <tr>
  358. <td><a href="#?w=550" rel="Shigure" class="poplight"><img src="http://l-userpic.livejournal.com/90221842/20776841"></a></td>
  359. <td id="famtd"><font class="charaname"> Shigure Suika</font><br><i>Abstract School</i></td>
  360. </tr>
  361. </table>
  362.  
  363. <!-- Pop-UP -->
  364.  
  365. <div id="Shigure" class="popup_block">
  366. <div id="content">
  367. <p>Visualization: Arietta the Wild (Tales of the Abyss)</p>
  368. <p>Name Origin: Shigure diambil dari kanji yang memiliki arti hujan di musim gugur. Suika di sini bukan berarti semangka, tapi terdiri dari kanji air (Sui) dan bunga (Ka). Namanya sengaja diplesetkan oleh PM :&#8221;| *ditendang*</p>
  369. <p>Physical Description: Panjang rambutnya sepunggung berwarna merah muda, sedangkan matanya berwarna hijau. Pendek mungil</p>
  370. <p>Alice: Doll Making (Technical) - Mampu mengubah benda yang diinginkan untuk menjadi boneka, tetapi tidak bisa mengubah benda yang tidak memiliki bentuk atau makhluk hidup seperti hewan atau manusia menjadi boneka. Bisa mengubah tumbuhan menjadi boneka, tetapi juga tidak bisa yang terlalu besar.</p>
  371. <p>Personality: Lugu, Pemalu, suka kepada boneka, agak takut kepada orang-orang tertentu yang dirasa mengerikan / berbahaya, manja kepada beberapa orang tertentu.</p>
  372. <p>History: Gadis yatim piatu yang tinggal di panti asuhan. Hanya memiliki boneka bernama Momo sebagai kenang-kenangan akan kedua orang tuanya. Pada suatu waktu, kemampuannya membuat boneka muncul dan ia sering sekali membagi-bagikan boneka yang dibuatnya kepada teman di panti asuhan. Kemampuannya diketahui oleh pihak AS dan dia pun tinggal di sana.</p>
  373. <p>Trivia: Diangkat anak oleh Lee Hyon Bi dan Saku (lupa nama lengkapnya, gomen OTL)</p>
  374. </div></div>
  375.  
  376. <!-- End-Of-Character-Table -->
  377.  
  378. <!-- Start-Of-Character-Table -->
  379. <table id="famtable">
  380. <tr>
  381. <td><a href="#?w=550" rel="Feith" class="poplight"><img src="http://i115.photobucket.com/albums/n291/palmia/01260byelbowsunite.png"></a></td>
  382. <td id="famtd"><font class="charaname">Feith</font><br><i>Cross Sky Academy</i></td>
  383. </tr>
  384. </table>
  385.  
  386. <!-- Pop-UP -->
  387.  
  388. <div id="Feith" class="popup_block">
  389. <div id="content">
  390. <p>Visualization&#160;: Hei (Darker Than Black)</p>
  391. <p>Name Origin: Cuma mengubah cara baca kepercayaan (Faith), karena waktu itu PM sedang tidak kreatif :&#8221;|</p>
  392. <p>Physical Description: Berambut hitam pendek, matanya juga berwarna hitam. Memakai topeng sewaktu kekuatan khususnya sedang aktif.</p>
  393. <p>Cross: Lightning (Tapi PM lupa detilnya karena ada tiga macam skill yang bisa dimiliki oleh per chara OTL. Dan iya, ini chara percobaan yang kemampuannya mirip dengan yang dimiliki oleh visunya OTL <strike>buka aib huahahaha</strike>)</p>
  394. <p>Class: Fighter</p>
  395. <p>Dorm: Terra</p>
  396. <p>Personality: Pendiam, tidak begitu peduli dengan keadaan sekitar, lebih suka menyendiri</p>
  397. <p>History: Lahir dari keluarga yang cukup kaya dan bahagia, namun keluarganya dibunuh oleh pembunuh bayaran pada suatu malam ketika ia masih kecil. Dia sendiri juga nyaris mati, tetapi dewa kematian yang sedang bosan mengajaknya untuk membuat kontrak dengannya. Persyaratannya adalah Feith boleh hidup lebih lama lagi dan sang dewa akan meminjamkan kekuatannya untuk sementara waktu, tetapi tubuh sang bocah akan menjadi tempat tinggal sang dewa untuk sementara waktu. Selain itu, sewaktu mati nanti nyawanya akan jadi makanan si dewa kematian. Setuju dengan persyaratan itu, diapun tidak jadi mati dan nantinya dia dididik menjadi pembunuh bayaran juga oleh yang membunuh keluarganya hanya karena tertarik dengan tekad sang bocah. Masuk ke CSA karena mendapat misi untuk menyelusup ke sana dan mencari tahu sesuatu.</p>
  398. </div></div>
  399.  
  400. <!-- End-Of-Character-Table -->
  401.  
  402.  
  403.  
  404.  
  405. </body></html>
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!