API tools faq
paste
mataharikemalaman

forchele

mataharikemalaman
Feb 26th, 2016
92
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.08 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <title>TWILIGHT VISIONS</title>
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8.  
  9. <style type="text/css">
  10. body {
  11.     font-family:arial;
  12.     font-size:9px;
  13.     background:#D9D5CD url("http://i.imgur.com/dmhoUAR.png");
  14.     }
  15.  
  16. a {text-decoration:none;
  17.     color:#cbcbcb;}
  18.  
  19. hr { border: #E5E5E5 1px dashed;}
  20.  
  21. #charlist {
  22.     text-align: center;
  23.     font-family: 'Economica', sans-serif;
  24.     font-size: 65px;
  25.     text-transform: uppercase;
  26.     letter-spacing: 1px;
  27.     font-weight: normal;
  28.     margin: 0px auto;
  29.     margin-bottom: -18px;
  30.     position: relative;
  31.     color: #6D6B6B;
  32.     line-height: 13px;
  33.     width: 655px;
  34.     padding-top: 32px;
  35. }
  36.  
  37. .navigation{
  38.     padding: 3px;
  39.     background-color: #000;
  40.     color: #fff;
  41.     font-family: arial;
  42.     font-size: 10px;
  43.     width: 86px;
  44.     letter-spacing: 1px;
  45.     }
  46.  
  47. #all {
  48.     margin: 0 auto;
  49.     margin-top: 20px;
  50. }
  51.  
  52. #family {
  53.     width: 631px;
  54.     height: 304px;
  55.     background: #ECE8E0;
  56.     padding: 12px;
  57.     overflow: auto;
  58.     }
  59.  
  60. #family img {
  61.     opacity: .7;
  62.     -webkit-transition: all 0.5s ease-in-out;
  63.     padding: 2px;
  64.     }
  65.  
  66. #family img:hover {opacity: 1;}
  67.  
  68. #portrait {
  69.     width: 100px;
  70.     margin: 0px auto;
  71.     margin-top: -17px;
  72.     overflow: hidden;
  73.     margin-bottom: 21px;
  74.     }
  75.  
  76. #portrait img {
  77.     width: 100px;
  78. }
  79.  
  80. .title {
  81.     color:#6cc4db;
  82.     font-weight:800;
  83.     margin-bottom:3px;
  84.     border-left:11px solid;
  85.     padding-left:5px;
  86.     letter-spacing:1px;
  87.     text-transform: uppercase;
  88.     }
  89.  
  90. #fade {
  91.     display: none;
  92.     background: #D9D5CD;
  93.     position: fixed;
  94.     left: 0;
  95.     top: 0;
  96.     width: 100%;
  97.     height: 100%;
  98.     opacity: .80;
  99.     z-index: 9999;
  100.     }
  101.  
  102. .popup_block{
  103.     display: none;
  104.     float: left;
  105.     position: fixed;
  106.     top: 50%;
  107.     left: 50%;
  108.     z-index: 99999;
  109.     height: 400px;
  110.     font: 12px consolas;
  111.     color: #abad9e;
  112.     background: #bbb url(http://i.imgur.com/BydyKYO.png);
  113.     padding: 20px;
  114.     }
  115.  
  116. img.btn_close {
  117.     float: right;
  118.     width: 22px;
  119.     margin: -15px -22px;
  120.     }
  121.  
  122. *html #fade {
  123.     position: absolute;
  124. }
  125.  
  126. *html .popup_block {
  127.     position: absolute;
  128. }
  129.  
  130. #content {
  131.     overflow: auto;
  132.     position: absolute;
  133.     height: 309px;
  134.     left: 27px;
  135.     top: 71px;
  136.     width: 517px;
  137.     }
  138.  
  139. #menu {
  140.     margin-top: 20px;
  141.     font-family: trebuchet ms;
  142.     font-size: 8px;
  143.     letter-spacing: 7px;
  144. }
  145.  
  146. #menu a {
  147.     padding : 12px;
  148.     color : #4E4E4E;
  149. }
  150.  
  151.  
  152.  
  153. .charaimg {
  154.     display: inline-block;
  155.     float: left;
  156.     width: 300px;
  157.     height: 200px;
  158.     margin-right: 5px;
  159. }
  160.  
  161. .kolom1 {
  162.     display: inline-block;
  163.     width: 235px;
  164.     height: 192px;
  165.     float: right;
  166.     border: 1px solid #bbb;
  167.     overflow: auto;
  168.     padding: 4px;
  169.     color: #000;
  170. }
  171.  
  172. .kolom2 {
  173.     display: block;
  174.     width: 100%;
  175.     float: right;
  176.     margin-top: 3px;
  177.     overflow: auto;
  178.     height: 200px;
  179.     color: #464646;
  180.     text-align: justify;
  181.     font: 11px Arial;
  182.     line-height: 1.5;
  183. }
  184.  
  185. .nama {
  186.     display: block;
  187.     width: 100%;
  188.     background: #CCC;
  189.     font-family: Economica;
  190.     text-align: center;
  191.     font-size: 22px;
  192.     color: #2D2D2D;
  193. }
  194. </style>
  195. <link href="http://fonts.googleapis.com/css?family=Economica" rel="stylesheet" type="text/css">
  196.  
  197. <script type="text/javascript"
  198. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  199.  
  200. <script>
  201.  
  202.  
  203.  
  204. $(document).ready(function() {
  205. //When you click on a link with class of poplight and the href starts with a #
  206.  
  207. $('a.poplight[href^=#]').click(function() {
  208.     var popID = $(this).attr('rel'); //Get Popup Name
  209.     var popURL = $(this).attr('href'); //Get Popup href to define size
  210.  
  211.     //Pull Query & Variables from href URL
  212.    var query= popURL.split('?');
  213.     var dim= query[1].split('&');
  214.     var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  215.  
  216.     //Fade in the Popup and add close button
  217.     $('#' + 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>');
  218.  
  219.     //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
  220.     var popMargTop = ($('#' + popID).height() + 80) / 2;
  221.     var popMargLeft = ($('#' + popID).width() + 80) / 2;
  222.  
  223.     //Apply Margin to Popup
  224.     $('#' + popID).css({
  225.         'margin-top' : -popMargTop,
  226.         'margin-left' : -popMargLeft
  227.     });
  228.     //Fade in Background
  229.     $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  230.     $('#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
  231.     return false;
  232. });
  233.  
  234. //Close Popups and Fade Layer
  235. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  236.     $('#fade , .popup_block').fadeOut(function() {
  237.         $('#fade, a.close').remove();  //fade them both out
  238.     });
  239.     return false;
  240. });
  241. });
  242. </script>
  243. </head>
  244.  
  245. <body>
  246. <div id="charlist">
  247. <div id="portrait">
  248. <img src="http://i.imgur.com/PmQ77OF.png">
  249. </div>
  250.  
  251. <!-- Judul Di sini -->
  252. Twilight Vision
  253.  
  254. <div id="menu">
  255. <!-- Menu di sini -->
  256. <a href="/"><span class="button">home</span></a>
  257. <a href="/ask"><span class="button">message</span></a>
  258. <a href="http://happyroleplaying.tumblr.com/"><span class="button">credits</span></a>
  259. </div></div>
  260.  
  261.  
  262. <!-- Start! Roleplay Charlist! -->
  263. <table id="all" cellspacing="0" cellpadding="0">
  264. <tbody><tr>
  265. <td>
  266. <div id="family">
  267.  
  268. <!-- Gambar karakternya disini! -->
  269. <a href="#?w=550" rel="one" class="poplight"><img src="http://i.imgur.com/taeTTOi.jpg"></a>
  270. <a href="#?w=550" rel="two" class="poplight"><img src="http://i.imgur.com/taeTTOi.jpg"></a>
  271. <!--Kalau ingin menambahkan karakter cukup tambah di atas saja. -->
  272. </div>
  273. <!--Akhir Gambar Karakter-->
  274. </td>
  275. </tr>
  276.  
  277.  
  278.  
  279. <!--Awal Deskripsi-->
  280. <div id="one" class="popup_block">
  281. <!-- gambar karakter di sini -->
  282. <div class="charaimg">
  283. <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97200&w=300&h=200">
  284. </div>
  285.  
  286. <!-- Isi Kolom 1 -->
  287. <div class="kolom1">
  288. <div class="nama">Name Here</div> <!-- Isi nama karakter -->
  289. <b>Birthdate :</b>
  290. <br><b>Blood Type :</b>
  291. <br><b>Height / Weight :</b>
  292. <br><b>Zodiac :</b>
  293. <br><b>Physical Description :</b> <br>
  294. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  295.  
  296. </div>
  297.  
  298. <!-- Isi Kolom 2 -->
  299. <div class="kolom2">
  300. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  301. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  302. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  303. </div>
  304.  
  305. </div>
  306. </div>
  307. <!--Akhir Deskripsi-->
  308.  
  309.  
  310. <!--Awal Deskripsi-->
  311. <div id="two" class="popup_block">
  312. <!-- gambar karakter di sini -->
  313. <div class="charaimg">
  314. <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97200&w=300&h=200">
  315. </div>
  316.  
  317. <!-- Isi Kolom 1 -->
  318. <div class="kolom1">
  319. <div class="nama">Wowaka waka ee</div> <!-- Isi nama karakter -->
  320. <b>Birthdate :</b>
  321. <br><b>Blood Type :</b>
  322. <br><b>Height / Weight :</b>
  323. <br><b>Zodiac :</b>
  324. <br><b>Physical Description :</b> <br>
  325. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  326.  
  327. </div>
  328.  
  329. <!-- Isi Kolom 2 -->
  330. <div class="kolom2">
  331. Lihat beda kan
  332. </div>
  333.  
  334. </div>
  335. </div>
  336. <!--Akhir Deskripsi-->
  337.  
  338.  
  339.  
  340.  
  341. </tbody></table>
  342. </body>
  343. </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!