API tools faq
paste
ninpen

dominator

ninpen
Jan 16th, 2015
8,716
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 29.64 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. <!-------------------------------
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12. DOMINATOR PAGE BY NINPENTHM.COM
  13. DO NOT REMOVE THE CREDIT.
  14.  
  15.  
  16.  
  17.  
  18.  
  19.  
  20.  
  21.  
  22. --------------------------------->
  23.  
  24. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  25. <head>
  26. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  27.  
  28. <title>{Title}</title>
  29. <link rel="shortcut icon" href="{Favicon}" />
  30. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  31.  
  32.  
  33. <link href="http://fonts.googleapis.com/css?family=Exo:700,800" rel="stylesheet" type="text/css">
  34.  
  35. <style type="text/css">
  36.     ::-moz-selection {
  37.         color:SELECTED COLOR TEXT;
  38.         background:SELECTED COLOR BACKGROUND;
  39.     }
  40.  
  41.     ::selection {
  42.         color:SELECTED COLOR TEXT;
  43.         background:SELECTED COLOR BACKGROUND;
  44.     }
  45.    
  46.     html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, a, abbr, acronym, address, big, cite,hr, code,del, dfn,img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, fieldset, form, label, legend,  tbody, tfoot, thead, tr, th, td, article,  canvas, details, embed, figure, figcaption, footer,  hgroup, menu,  output, ruby, summary,time, mark, audio{
  47.         margin: 0;
  48.         padding: 0;
  49.         border: 0;
  50.         font-size: 100%;
  51.         font: inherit;
  52.         vertical-align: baseline;
  53.     }
  54.  
  55.     article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  56.         display: block;
  57.     }
  58.  
  59.     body {
  60.         line-height: 1;
  61.     }
  62.  
  63.     ul {
  64.         list-style: none;
  65.     }
  66.  
  67.     table {
  68.         border-collapse: collapse;
  69.         border-spacing: 0;
  70.     }
  71.  
  72.     ::-webkit-scrollbar {
  73.         width: 4px;
  74.         height: 4px;
  75.         background:SCROLLBAR TRACK COLOR;
  76.     }
  77.  
  78.     ::-webkit-scrollbar-thumb {
  79.         border-radius:10px;
  80.         border:3px solid SCROLLBAR THUMB BORDER COLOR;
  81.         background-color:SCROLLBAR THUMB COLOR;
  82.     }
  83.  
  84.     html,body{
  85.         padding:0;
  86.         margin:0;
  87.         width: 100%;
  88.         height: 100%;
  89.         position: relative;
  90.     }
  91.  
  92.     body {
  93.         color:TEXT COLOR GOES HERE;
  94.         background:#000 url('http://static.tumblr.com/1f1tzta/k8Ynhy5ag/static.gif');
  95.     }
  96.    
  97.     a{
  98.         color:LINK TEXT COLOR;
  99.         text-decoration: none;
  100.     }
  101.    
  102.     .psycho-od{
  103.         width: 100%;
  104.         height: 100%;
  105.         position: absolute;
  106.         top: 0;
  107.         left: 0;
  108.         background:url(http://static.tumblr.com/hczaopr/nODot5uo8/psycho-od.png)no-repeat center;
  109.     }
  110.    
  111.     .psycho-od:before{
  112.         content: "";
  113.         width: 150px;
  114.         height:110px;
  115.         background:url(http://static.tumblr.com/hczaopr/CsFot79u9/side.gif)no-repeat center/150px;
  116.         position: absolute;
  117.         top: 50px;
  118.         left: 50px;
  119.     }
  120.    
  121.     #navi ul,#navi li{
  122.         margin: 0;
  123.         padding: 0;
  124.     }
  125.  
  126.     #navi{
  127.         width:188px;
  128.         height:29px;
  129.         position:fixed;
  130.         top:40px;
  131.         left:50%;
  132.         margin-left:-105px;
  133.     }
  134.  
  135.     #navi li{    
  136.         color:ENFORCER TAB LINK COLOR;
  137.         position: relative;
  138.         list-style-type: none;
  139.         display: inline-block;
  140.         margin:0 10px;
  141.         transition: opacity .4s ease-in-out;
  142.        -moz-transition: opacity .4s ease-in-out;
  143.        -webkit-transition: opacity .4s ease-in-out;
  144.     }
  145.    
  146.     #navi li span {
  147.         opacity:0;
  148.         background:HOME BACKGROUND COLOR;
  149.         position: absolute;
  150.         top: calc(100% + 8px);
  151.         left: 0;
  152.         font: 7px/7px 'Press Start 2P';
  153.         letter-spacing: 2px;
  154.         text-transform: uppercase;
  155.         padding: 5px 5px 3px 5px;
  156.         border-radius: 3px;
  157.         transition: opacity .4s ease-in-out;
  158.        -moz-transition: opacity .4s ease-in-out;
  159.        -webkit-transition: opacity .4s ease-in-out;
  160.     }
  161.    
  162.     #navi li:hover span{
  163.         opacity: 1;
  164.     }
  165.    
  166.     #navi li span:before {
  167.         content: "";
  168.         position: absolute;
  169.         top: -6px;
  170.         left: 9px;
  171.         width: 0;
  172.         height: 0;
  173.         border-left: 3px solid transparent;
  174.         border-right: 3px solid transparent;
  175.         border-bottom: 6px solid HOME BACKGROUND COLOR;
  176.     }
  177.    
  178.     #navi li:nth-child(2) span{
  179.         background: MESSAGE BACKGROUND COLOR;
  180.     }
  181.    
  182.     #navi li:nth-child(2) span:before{
  183.         border-bottom: 6px solid MESSAGE BACKGROUND COLOR;
  184.     }
  185.    
  186.     #navi li:nth-child(3) span{
  187.         background: ARCHIVE BACKGROUND COLOR;
  188.     }
  189.    
  190.     #navi li:nth-child(3) span:before{
  191.         border-bottom: 6px solid ARCHIVE BACKGROUND COLOR;
  192.     }
  193.    
  194.     #navi li:nth-child(4) span{
  195.         background: CREDIT BACKGROUND COLOR;
  196.     }
  197.    
  198.     #navi li:nth-child(4) span:before{
  199.         border-bottom: 6px solid CREDIT BACKGROUND COLOR;
  200.     }
  201.    
  202.     #navi li a{
  203.         opacity:.5;
  204.         transition: opacity .4s ease-in-out;
  205.        -moz-transition: opacity .4s ease-in-out;
  206.        -webkit-transition: opacity .4s ease-in-out;
  207.     }
  208.    
  209.     #navi li a:hover{
  210.         opacity:1;
  211.     }
  212.    
  213.     .content{
  214.         position: relative;
  215.         z-index: 1;
  216.     }
  217.    
  218.     .content:nth-of-type(n+3) {
  219.         display:none;
  220.     }
  221.  
  222.     #psycho{
  223.         width:500px;
  224.         height:140px;
  225.         background:url(http://static.tumblr.com/1f1tzta/OKOnhkyi8/psycho.gif)no-repeat top center;
  226.         position:fixed;
  227.         top:50%;
  228.         left:50%;
  229.         margin:-70px 0 0 -250px;
  230.         box-shadow:5px 5px 100px #000,-5px -5px 100px #000;
  231.     }
  232.  
  233.     #initial{
  234.         position:fixed;
  235.         margin:-114px 0 0 -197px;
  236.         top:50%;
  237.         left:50%;
  238.         width:394px;
  239.         height:228px;
  240.         background: url(http://static.tumblr.com/1f1tzta/aq3nhu0e8/initiator.gif)no-repeat top center;
  241.     }
  242.  
  243.     #initial .name{
  244.         top:38px;
  245.         left:60px;
  246.         width:162px;
  247.         color:ID NUMBER COLOR GOES HERE;
  248.         font:10px/10px calibri;
  249.         text-transform:uppercase;
  250.         letter-spacing:1px;
  251.         border-bottom:1px solid ID NUMBER BOTTOM BORDER COLOR GOES HERE;
  252.         position:relative;
  253.     }
  254.  
  255.     #initial .lding{
  256.         position:absolute;
  257.         top:90px;
  258.         left:100px;
  259.         color:#fff;
  260.         text-shadow:0 0 10px #fff;
  261.         font:bold 30px/30px calibri;
  262.         text-transform:uppercase;
  263.     }
  264.  
  265.     #initial #load{
  266.         width:300px;
  267.         height:50px;
  268.     }
  269.  
  270.     #initializing{
  271.         width:90px;
  272.         height:12px;
  273.         margin:0 auto;
  274.         position:absolute;
  275.         top:120px;
  276.         left:50%;
  277.         margin-left:-45px;
  278.     }
  279.  
  280.     .barlittle {
  281.         background-color:#07fff0;  
  282.         background-image: -moz-linear-gradient(0deg, #07fff0 50%, #07e5ff);
  283.         background-image: -webkit-linear-gradient(0deg, #07fff0 50%, #07e5ff);
  284.         box-shadow:0 0 6px #07fff0;
  285.         width:5px;
  286.         height:5px;
  287.         float:left;
  288.         margin-left:5px;
  289.         opacity:1;
  290.         -moz-transform:scale(0.7);
  291.         -webkit-transform:scale(0.7);
  292.         -moz-animation:move 1s infinite linear;
  293.         -webkit-animation:move 1s infinite linear;
  294.     }
  295.    
  296.     #block_1{
  297.         -moz-animation-delay: .4s;
  298.         -webkit-animation-delay: .4s;
  299.      }
  300.    
  301.     #block_2{
  302.         -moz-animation-delay: .3s;
  303.         -webkit-animation-delay: .3s;
  304.     }
  305.    
  306.     #block_3{
  307.         -moz-animation-delay: .2s;
  308.         -webkit-animation-delay: .2s;
  309.     }
  310.    
  311.     #block_4{
  312.         -moz-animation-delay: .3s;
  313.         -webkit-animation-delay: .3s;
  314.     }
  315.    
  316.     #block_5{
  317.         -moz-animation-delay: .4s;
  318.         -webkit-animation-delay: .4s;
  319.     }
  320.    
  321.     @-moz-keyframes move{
  322.         0%{-moz-transform: scale(1.2);opacity:1;}
  323.         100%{-moz-transform: scale(0.7);opacity:0.1;}
  324.     }
  325.    
  326.     @-webkit-keyframes move{
  327.         0%{-webkit-transform: scale(1.2);opacity:1;}
  328.         100%{-webkit-transform: scale(0.7);opacity:0.1;}
  329.     }
  330.  
  331.     #accepted{
  332.         width:350px;
  333.         height:350px;
  334.         border:2px solid FIRST BORDER COLOR;
  335.         position:fixed;
  336.         border-radius:400px;
  337.         top:50%;
  338.         left:50%;
  339.         margin:-175px 0 0 -175px;
  340.     }
  341.  
  342.     #accepted:before{
  343.         content:"";
  344.         width:350px;
  345.         height:350px;
  346.         position:absolute;
  347.         left:0px;
  348.         bottom:-0px;
  349.         border-radius:400px;
  350.         box-shadow:2px 2px SECOND BORDER COLOR,-2px 0 SECOND BORDER COLOR;
  351.     }
  352.  
  353.     #accepted .lding{
  354.         position:absolute;
  355.         top:90px;
  356.         left:40px;
  357.         width:250px;
  358.         color:TEXT COLOR;
  359.         text-shadow:0 0 10px TEXT GLOW COLOR;
  360.         font:bold 26px/24px calibri;
  361.         text-transform:uppercase;
  362.     }
  363.  
  364.     #accepted .lding:before{
  365.         position:Absolute;
  366.         content:"";
  367.         width:12px;
  368.         height:12px;
  369.         background:#1ff7ff;
  370.         right:90px;
  371.         bottom:0;
  372.         border-radius:10px;
  373.     }
  374.  
  375.     #accepted .lding:after{;
  376.         position:Absolute;
  377.         content:"";
  378.         width:1px;
  379.         height:60px;
  380.         background:#1ff7ff;
  381.         right:81px;
  382.         top:60px;
  383.         -ms-transform: rotate(-30deg);
  384.         -webkit-transform: rotate(-30deg);
  385.         transform: rotate(-30deg);
  386.     }
  387.  
  388.     #portrait{
  389.         font:9px/9px calibri;
  390.         letter-spacing:1px;
  391.         text-transform:uppercase;
  392.         color:TEXT COLOR;
  393.         position:absolute;
  394.         right:36px;
  395.         bottom:83px;
  396.         width:90px;
  397.         height:63px;
  398.     }
  399.    
  400.     #portrait img{
  401.         width:40px;
  402.     }
  403.  
  404.     .portrait{
  405.         margin:0 3px 1px 0;
  406.         width:40px;
  407.         height:40px;
  408.         float:left;
  409.     }
  410.  
  411.     .portrait img{
  412.         border-radius:3px;
  413.     }
  414.  
  415.     #portrait b{
  416.         color:BOLD TEXT COLOR;
  417.     }
  418.  
  419.     .confirmed{
  420.         width:60px;
  421.         position:absolute;
  422.         bottom:51px;
  423.         left:60px;
  424.         color:TEXT COLOR;
  425.         font:bold 16px/14px calibri;
  426.         text-transform:uppercase;
  427.     }
  428.  
  429.     .confirmed:before{
  430.         position:Absolute;
  431.         content:"";
  432.         width:1px;
  433.         height:131px;
  434.         background:#6effff;
  435.         left:87px;
  436.         bottom:25px;
  437.         -ms-transform: rotate(30deg);
  438.         -webkit-transform: rotate(40deg);
  439.         transform: rotate(40deg);
  440.     }
  441.  
  442.     .confirmed span{
  443.         display:block;
  444.         font:24px/24px 'Exo';
  445.         color:BLUE TEXT COLOR;
  446.     }
  447.    
  448.    
  449.    
  450.    
  451.    
  452. /*********** DO NOT EDIT PAST THIS POINT UNLESS YOU KNOW WHAT YOU ARE DOING ***********/
  453.  
  454.     #safety{
  455.         width:250px;
  456.         height:250px;
  457.         position:fixed;
  458.         top:-100px;
  459.         right:-30px;
  460.         background:rgba(24,24,24,.5);
  461.         border-radius:300px;
  462.     }
  463.  
  464.     #safety:before{
  465.         content:"";
  466.         width:250px;
  467.         height:250px;
  468.         background:;
  469.         position:absolute;
  470.         border-radius:300px;
  471.         top:10px;
  472.         right:10px;
  473.         border-left:2px solid #333;
  474.         border-bottom:2px solid #333;
  475.     }
  476.  
  477.     #dominator{
  478.         margin:130px 0 0 25px;
  479.         width:101px;
  480.         height:53px;
  481.         background:url(http://static.tumblr.com/1f1tzta/eOani04nj/dominator.png)no-repeat center;
  482.     }
  483.  
  484.     #safety .aa{
  485.         position:absolute;
  486.         top:123px;
  487.         width:75px;
  488.         right:45px;
  489.         color:#ffffff;
  490.         text-shadow:0 0 4px #ffffff;
  491.         text-transform:uppercase;
  492.         font:16px/16px 'Exo';
  493.         letter-spacing:3px;
  494.     }
  495.  
  496.     #safety .bb{
  497.         position:absolute;
  498.         top:195px;
  499.         width:250px;
  500.         left:-10px;
  501.         color:#6effff;
  502.         text-transform:uppercase;
  503.         font:18px/22px 'Exo';
  504.     }
  505.  
  506.     #safety .cc{
  507.         position:absolute;
  508.         top:125px;
  509.         width:75px;
  510.         right:45px;
  511.         color:#6effff;
  512.         text-transform:uppercase;
  513.         font:30px/30px 'Exo';
  514.     }
  515.  
  516.     #sibyl{
  517.         width:100px;
  518.         height:100px;
  519.         background:url(http://static.tumblr.com/hczaopr/hIQot79zm/sibyl_system.gif)no-repeat center center;
  520.         position:fixed;
  521.         left:50px;
  522.         margin-top:-150px;
  523.     }
  524.  
  525.     #pass{
  526.         width:300px;
  527.         height:300px;
  528.         background:#000 url(http://static.tumblr.com/hczaopr/i3dot79t4/bg3.gif)no-repeat top center;
  529.         border:2px solid #333;
  530.         position:fixed;
  531.         border-radius:300px;
  532.         bottom:-55px;
  533.         left:-55px;
  534.     }
  535.  
  536.     #pass:before{
  537.         content:"";
  538.         width:330px;
  539.         height:330px;
  540.         background:;
  541.         position:absolute;
  542.         border-radius:300px;
  543.         bottom:-5px;
  544.         left:0px;
  545.     }
  546.  
  547.     .arcode{
  548.         left:60px;
  549.         top:100px;
  550.         width:70px;
  551.         color:#ededed;
  552.         z-index:1;
  553.         position:relative;
  554.     }
  555.  
  556.     #pass .arcode{
  557.         text-transform:lowercase;
  558.         font:22px/22px 'Exo';
  559.     }
  560.  
  561.     #pass .dd{
  562.         text-transform:uppercase;
  563.     }
  564.  
  565.     #pass span{
  566.         margin-top:8px;
  567.         font-size:38px;
  568.         display:block;
  569.     }
  570.  
  571.     .cc{
  572.         font:bold 11px/10px calibri;
  573.         color:#bbb;
  574.         width:50px;
  575.         margin:10px 0 0 0;
  576.     }
  577.  
  578.     #pass .load{
  579.         width:106px;
  580.         height:17px;
  581.         display:inline-block;
  582.         z-index:1;
  583.         left:125px;
  584.         top:83px;
  585.         position:relative;
  586.     }
  587.  
  588.     #psycho .button{
  589.         color:#fff;
  590.         position:fixed;
  591.         width:165px;
  592.         height:26px;
  593.         cursor:pointer;
  594.         text-transform:uppercase;
  595.         letter-spacing:1px;
  596.         margin:170px 0 0 300px;
  597.     }
  598.  
  599.     #psycho .button .aa{
  600.         font:7px 'Press Start 2P';
  601.     }
  602.  
  603.     #psycho .button .bb{
  604.     letter-spacing:13px;
  605.     font:700 12px 'Oswald';
  606.     }
  607.  
  608.     #initial .button{
  609.         color:#fff;
  610.         position:fixed;
  611.         width:165px;
  612.         height:26px;
  613.         cursor:pointer;
  614.         text-transform:uppercase;
  615.         letter-spacing:1px;
  616.         margin:230px 0 0 250px;
  617.     }
  618.  
  619.     #initial .button .aa{
  620.         font:7px/12px 'Press Start 2P';
  621.     }
  622.  
  623.     #initial .button .bb{
  624.             letter-spacing:13px;
  625.             margin-top: 10px;
  626.             font:700 12px 'Oswald';
  627.     }
  628.  
  629.     #accepted .button{
  630.         color:#fff;
  631.         position:fixed;
  632.         cursor:pointer;
  633.         text-transform:uppercase;
  634.         letter-spacing:1px;
  635.         margin:300px 0 0 350px;
  636.         -transition: all 0.6s ease-in-out;
  637.         -webkit-transition: all 0.6s ease-in-out;
  638.         -moz-transition: all 0.6s ease-in-out;
  639.         -o-transition: all 0.6s ease-in-out;
  640.     }
  641.  
  642.     #accepted .button:hover{
  643.         margin-left:365px;
  644.         -transition: all 0.6s ease-in-out;
  645.         -webkit-transition: all 0.6s ease-in-out;
  646.         -moz-transition: all 0.6s ease-in-out;
  647.         -o-transition: all 0.6s ease-in-out;
  648.     }
  649.  
  650.     #accepted .button:before {
  651.         position:Absolute;
  652.         content:"";
  653.         width:0;
  654.         height:0;
  655.         right:0;
  656.         margin:-2px -20px 0 0;
  657.         border-top:5px solid transparent;
  658.         border-left:10px solid #fff;
  659.         border-bottom:5px solid transparent;
  660.     }
  661.  
  662.     #accepted .button .aa{
  663.         font:7px 'Press Start 2P';
  664.         color:#fff;
  665.     }
  666.  
  667.     #area{
  668.         width:200px;
  669.         height:112px;
  670.         position:fixed;
  671.         top:50%;
  672.         right:0;
  673.         margin-top:-82px;
  674.         background:url(http://static.tumblr.com/1f1tzta/tuNni3m26/arera.png)no-repeat;
  675.     }
  676.  
  677.  
  678.     #center{
  679.         width:635px;
  680.         height:465px;
  681.         position:fixed;
  682.         top:50%;
  683.         left:50%;
  684.         margin:-232px 0 0 -318px;
  685.     }
  686.  
  687.     #char{
  688.         top:38px;
  689.         left:0;
  690.         position:absolute;
  691.         width:420px;
  692.         height:447px;
  693.         background:url(http://static.tumblr.com/hczaopr/XZUot7b5g/b1.png);
  694.     }
  695.  
  696.     #char .portrait{
  697.         position: absolute;
  698.         top: 121px;
  699.         left: 21px;
  700.         width: 151px;
  701.         height: 300px;
  702.         overflow: hidden;
  703.         border-radius:3px;
  704.     }
  705.  
  706.     #char .portrait img{
  707.         width:187px;
  708.     }
  709.    
  710.     #char .occ{
  711.         width: 133px;
  712.         height: 10px;
  713.         color: OCCUPATION BORDER TEXT COLOR;
  714.         padding: 5px 7px;
  715.         text-transform: uppercase;
  716.         font: bold 10px/10px calibri;
  717.         letter-spacing: 1px;
  718.         border: 2px solid OCCUPATION BORDER COLOR;
  719.         position: absolute;
  720.         top: 45px;
  721.         left: 21px;
  722.     }
  723.  
  724.     #char .id{
  725.         width:140px;
  726.         height:12px;
  727.         padding:2px 30px 2px 5px;
  728.         border-bottom:2px solid ID BORDER COLOR;
  729.         color:ID TEXT COLOR;
  730.         position:Absolute;
  731.         top:5px;
  732.         left:50px;
  733.         font:12px/12px calibri;
  734.         letter-spacing:1px;
  735.         text-transform:uppercase;
  736.     }
  737.  
  738.     #char #id{
  739.         width:209px;
  740.         height:16px;
  741.         overflow: hidden;
  742.         color:ID TEXT COLOR;
  743.         padding:2px 10px;
  744.         text-transform:uppercase;
  745.         font:bold 16px/16px calibri;
  746.         letter-spacing:1px;
  747.         border:2px solid ID BORDER COLOR;
  748.         position:absolute;
  749.         top:45px;
  750.         right:17px;
  751.     }
  752.  
  753.     #char .name{
  754.         width:386px;
  755.         color:ENFORCER NAME;
  756.         font:36px/36px 'Exo';
  757.         text-transform:uppercase;
  758.         letter-spacing:1px;
  759.         position:Absolute;
  760.         top:80px;
  761.         left:21px;
  762.         overflow hidden;
  763.     }
  764.    
  765.     #char .left{
  766.         top: 115px;
  767.         right: 21px;
  768.         font: 8px/12px trebuchet ms;
  769.         letter-spacing: 1px;
  770.         text-transform: uppercase;
  771.         width: 210px;
  772.         height: 308px;
  773.         overflow: auto;
  774.         position: Absolute;
  775.         color:TEXT COLOR;
  776.     }
  777.  
  778.     #char ul.extrainfo{
  779.         margin: 0;
  780.         padding: 0;
  781.     }
  782.    
  783.     #char .extrainfo li{
  784.         list-style-type: none;
  785.         padding: 0;
  786.         margin: 3px 0;
  787.         color:TEXT COLOR;
  788.     }
  789.    
  790.     #char ul.links{
  791.         text-align: right;
  792.         margin:20px 0 0 0;
  793.         padding: 0;
  794.     }
  795.    
  796.     #char .links li{
  797.         list-style-type: none;
  798.         padding: 3px 10px;
  799.         margin: 5px;
  800.         display: inline-block;
  801.         background: #000000;
  802.         color: #ffffff;
  803.         position: relative;
  804.         line-height: 7px;
  805.     }
  806.    
  807.     #char .links li:before{
  808.         content: "";
  809.         width: 0;
  810.         height: 100%;
  811.         position: absolute;
  812.         top: 0;
  813.         right: 0;
  814.         background: #000000;
  815.         -transition: all 0.6s ease-in-out;
  816.         -webkit-transition: all 0.6s ease-in-out;
  817.         -moz-transition: all 0.6s ease-in-out;
  818.         -o-transition: all 0.6s ease-in-out;
  819.     }
  820.    
  821.     #char .links li:hover:before{
  822.         width: 100%;
  823.         background: #00d8ff;
  824.     }
  825.    
  826.     #char .links li a{
  827.         color: #ffffff;
  828.         -transition: all 0.6s ease-in-out;
  829.         -webkit-transition: all 0.6s ease-in-out;
  830.         -moz-transition: all 0.6s ease-in-out;
  831.         -o-transition: all 0.6s ease-in-out;
  832.     }
  833.    
  834.     #char .links li a:hover{
  835.         color: #000000;
  836.     }
  837.  
  838.     #char b{
  839.         color:#32d6ef;
  840.     }
  841.  
  842.     #coeff{
  843.         right:-27px;
  844.         top:35px;
  845.         width:238px;
  846.         position:absolute;
  847.         color:#fff;
  848.     }
  849.  
  850.     #coeff .crime{
  851.         vertical-align:top;
  852.         text-shadow:0 0 10px #fff,0 0 5px #fff;
  853.         font:60px/40px 'Exo';
  854.         text-transform:uppercase;
  855.         letter-spacing:1px;
  856.         display:inline-block;
  857.     }
  858.  
  859.     #coeff small{
  860.         display:block;
  861.         margin:5px 0 8px 0;
  862.         padding:1px 5px;
  863.         font:italic 10px/8px trebuchet ms;
  864.         letter-spacing:1px;
  865.         text-transform:uppercase;
  866.         background:-moz-linear-gradient(left,rgba(0,51,66,0.78)0%,rgba(0,51,66,0.78)40%,rgba(0,51,66,0)100%);
  867.         background:-webkit-gradient(linear,left top,right top, color-stop(0%,rgba(0,51,66,0.78)), color-stop(40%,rgba(0,51,66,0.78)),color-stop(100%,rgba(0,51,66,0)));
  868.         background:-webkit-linear-gradient(left,rgba(0,51,66,0.78)0%,rgba(0,51,66,0.78)40%,rgba(0,51,66,0)100%);
  869.         background:-o-linear-gradient(left,rgba(0,51,66,0.78)0%,rgba(0,51,66,0.78)40%,rgba(0,51,66,0)100%);
  870.         background:-ms-linear-gradient(left,rgba(0,51,66,0.78)0%,rgba(0,51,66,0.78)40%,rgba(0,51,66,0)100%);
  871.         background:linear-gradient(to right,rgba(0,51,66,0.78)0%,rgba(0,51,66,0.78)40%,rgba(0,51,66,0)100%);
  872.     }
  873.  
  874.     #coeff .monitor{
  875.         width:150px;
  876.         height:15px;
  877.         background:url(http://static.tumblr.com/hczaopr/MFeot79no/monitor.gif);
  878.     }
  879.  
  880.     .col{
  881.         width:124px;
  882.         height:50px;
  883.         display:inline-block;
  884.         vertical-align:top;
  885.     }
  886.  
  887.     .col pixl{
  888.         font:7px/7px trebuchet ms;
  889.         letter-spacing:1px;
  890.         text-transform:uppercase;
  891.     }
  892.  
  893.     .yst{
  894.         margin-left:20px;
  895.         position:relative;
  896.         font:20px/20px 'Exo';
  897.         border-bottom:1px solid #fff;
  898.     }
  899.  
  900.     .yst:before{
  901.         width:15px;
  902.         height:15px;
  903.         background:blue;
  904.         position:absolute;
  905.         left:-20px;
  906.         content:"";
  907.     }
  908.  
  909.     .lst{
  910.         padding-top:3px;
  911.         margin-left:20px;
  912.         position:relative;
  913.         font:20px/20px 'Exo';
  914.     }
  915.  
  916.     .lst:before{
  917.         width:15px;
  918.         height:15px;
  919.         background:blue;
  920.         position:absolute;
  921.         left:-20px;
  922.         content:"";
  923.     }
  924.  
  925.     #info{
  926.         width:207px;
  927.         height:333px;
  928.         position:absolute;
  929.         top:130px;
  930.         right:0px;
  931.         color:#fff;
  932.         background:url(http://static.tumblr.com/kcuzms7/iC7ni78oh/info.png);
  933.     }
  934.    
  935.     #info h1 {
  936.         padding: 10px 0;
  937.     }
  938.  
  939.     #info h1,.links h1{
  940.         border-bottom: 3px solid #fff;
  941.         padding-bottom: 0px;
  942.         width: 145px;
  943.         margin-top: 5px;
  944.         font: 20px/20px 'Exo';
  945.         float: right;
  946.     }
  947.    
  948.     .links h1{
  949.         width: 170px;
  950.         padding-right: 5px;
  951.         margin: 0 0 10px 67px;
  952.     }
  953.  
  954.     #info small{
  955.         font:8px/8px trebuchet ms;
  956.         letter-spacing:1px;
  957.         text-transform:uppercase;
  958.         position:absolute;
  959.         top:30px;
  960.         right:5px;
  961.         width:175px;
  962.         text-align:right;
  963.         background:-moz-linear-gradient(left,rgba(0,0,0,0) 0%,rgba(0,57,71,0.65)100%);
  964.         background:-webkit-gradient(linear,left top,right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,57,71,0.65)));
  965.         background:-webkit-linear-gradient(left,rgba(0,0,0,0) 0%,rgba(0,57,71,0.65)100%);
  966.         background:-o-linear-gradient(left,rgba(0,0,0,0) 0%,rgba(0,57,71,0.65)100%);
  967.         background:-ms-linear-gradient(left,rgba(0,0,0,0) 0%,rgba(0,57,71,0.65)100%);
  968.         background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,57,71,0.65)100%);
  969.  
  970.     }
  971.    
  972.     .info li {
  973.         margin-bottom: 5px;
  974.         line-height: 12px;
  975.     }
  976.  
  977.     .info{
  978.         width: 154px;
  979.         padding:5px
  980.         height: 266px;
  981.         overflow: auto;
  982.         margin: 42px 0 0 20px;
  983.         font: 9px/12px trebuchet ms;
  984.         letter-spacing: 1px;
  985.         text-transform: uppercase;
  986.     }
  987.  
  988.     .info b{
  989.         color:#56f6ff;
  990.         margin-right:5px;
  991.     }
  992.  
  993.     .info b:after{
  994.         margin-left:5px;
  995.         content:"—";
  996.     }
  997.  
  998.     #info .desc{
  999.         margin: 10px 0 0 21px;
  1000.         font: 9px/12px trebuchet ms;
  1001.         letter-spacing: 1px;
  1002.         text-transform: uppercase;
  1003.     }
  1004. </style>
  1005. <link href="http://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet" type="text/css">
  1006. <link href="http://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet" type="text/css">
  1007.  
  1008. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
  1009.  
  1010. <script>
  1011. $(document).ready(function() {
  1012. $('#psycho .button').fadeIn(4500).delay(4500);
  1013.  
  1014.     $('.content:first-child').fadeIn();
  1015.     $('.button').click(function (){
  1016.         var $thisParent = $(this).closest('.content');
  1017.         $thisParent.fadeOut(1000, function(){
  1018.             $thisParent.next('.content').fadeIn();
  1019.         });
  1020.     });
  1021.  
  1022. $('.barlittle').removeClass('stop');
  1023. $('.triggerBar').click(function() {
  1024. $('.barlittle').toggleClass('stop');
  1025. });
  1026. });
  1027. </script>
  1028.  
  1029.  
  1030.  
  1031. </head>
  1032. <body>
  1033.    
  1034.  
  1035.  
  1036.  
  1037.  
  1038.  
  1039. <!------- FIRST PAGE START------->
  1040. <div class="content">
  1041.     <div id="psycho">
  1042.         <div class="button">
  1043.             <div class="aa">approval confirmed</div>
  1044.             <div class="bb">Continue</div>
  1045.         </div>
  1046.     </div>
  1047. </div>
  1048. <!------- FIRST PAGE ENDS------->
  1049.  
  1050.  
  1051.  
  1052.  
  1053.  
  1054.  
  1055.  
  1056.  
  1057.  
  1058. <!------- SECOND PAGE START------->
  1059. <div class="content">
  1060.     <div id="initial">
  1061.         <div class="name">id: PUT YOUR OWN ID NUMBER OR WHATEVER HERE</div>
  1062.         <div class="lding">initializing</div>
  1063.  
  1064.         <div id="initializing">
  1065.             <div id="block_1" class="barlittle"></div>
  1066.             <div id="block_2" class="barlittle"></div>
  1067.             <div id="block_3" class="barlittle"></div>
  1068.             <div id="block_4" class="barlittle"></div>
  1069.             <div id="block_5" class="barlittle"></div>
  1070.         </div>
  1071.         <div class="button">
  1072.             <div class="aa">Enforcer identity confirmed</div>
  1073.             <div class="bb">Continue</div>
  1074.         </div>
  1075.     </div>
  1076. </div>
  1077. <!------- SECOND PAGE ENDS------->
  1078.  
  1079.  
  1080.  
  1081.    
  1082.    
  1083.    
  1084. <!------- THIRD PAGE START------->
  1085. <div class="content">
  1086. <div id="accepted">
  1087. <div class="lding">
  1088. Dominator usage approval confirmed
  1089. </div>
  1090.  
  1091. <div id="portrait">
  1092.     <div class="portrait"><img src="PORTRAIT IMAGE GOES HERE(40PX BY 40PX)"></div>
  1093.     PUT A DATE HERE (4 NUMBERS MAX))<br>
  1094.     PUT A NUMBER HERE (4 NUMBERS MAXED)<br>
  1095.     PUT A NAME OR WHATEVER HERE<br><br><br>
  1096.     <b>Enforcer</b><br>
  1097.     PUT A NICKNAME HERE
  1098. </div>
  1099.  
  1100. <div class="confirmed">safety <span>lock</span></div>
  1101. <div class="button"><div class="aa">Continue</div></div>
  1102. </div>
  1103. </div>
  1104. <!------- SECOND PAGE ENDS------->
  1105.    
  1106.    
  1107.    
  1108.  
  1109.  
  1110.  
  1111.  
  1112.  
  1113.  
  1114.    
  1115. <!------- FOURTH PAGE STARTS ------->
  1116. <div class="content">
  1117. <div id="center">
  1118.  
  1119.  
  1120. <div id="char">
  1121.     <div class="id">ID:PUT AN ID HERE</div>
  1122.     <div class="portrait"><img src="PORTRAIT URL GOES HERE (151PX BY 300PX)"></div>
  1123.     <div class="occ">PUT YOUR OCCUPATION HERE</div>
  1124.     <div id="id">ID: PUT AN ID OR WHATEVER HERE</div>
  1125.     <div class="name">PUT YOUR NAME HERE</div>
  1126.  
  1127.    
  1128.        
  1129.     <!------- If you want your info to be in lists, surround the text with <li></li> ------->
  1130.    
  1131.     <div class="left">
  1132.         <ul class="extrainfo">
  1133.             <li><b>Age</b> AGE GOES HERE</li>
  1134.             <li><b>Date of birth</b> 2090.3.12</li>
  1135.             <li><b>Blood type</b> B</li>
  1136.             <li><b>Sex</b> Male</li>
  1137.             <li><b>Height</b> 165 cm 5'5"</li>
  1138.             <li><b>Family</b> Masanori Kagari (father)</li>
  1139.         </ul>
  1140.  
  1141.         <ul class="links">
  1142.             <h1>Database</h1>
  1143.             <li><a href="LINK URL">LINK NAME</a></li>
  1144.             <li><a href="LINK URL">LINK NAME</a></li>
  1145.             <li><a href="LINK URL">LINK NAME</a></li>
  1146.             <li><a href="LINK URL">LINK NAME</a></li>
  1147.             <li><a href="LINK URL">LINK NAME</a></li>
  1148.             <li><a href="LINK URL">LINK NAME</a></li>
  1149.             <li><a href="LINK URL">LINK NAME</a></li>
  1150.             <li><a href="LINK URL">LINK NAME</a></li>
  1151.             <li><a href="LINK URL">LINK NAME</a></li>
  1152.             <li><a href="LINK URL">LINK NAME</a></li>
  1153.             <li><a href="LINK URL">LINK NAME</a></li>
  1154.             <li><a href="LINK URL">LINK NAME</a></li>
  1155.             <li><a href="LINK URL">LINK NAME</a></li>
  1156.             <li><a href="LINK URL">LINK NAME</a></li>
  1157.             <li><a href="LINK URL">LINK NAME</a></li>
  1158.         </ul>
  1159.     </div>
  1160. </div>
  1161.  
  1162.  
  1163. <div id="coeff">
  1164.     <div class="monitor"></div>
  1165.     <small>Crime coefficient</small>
  1166.     <div class="crime">125</div>
  1167.  
  1168.     <div class="col">
  1169.         <div class="yst"><pixl>3 weeks ago /</pixl> 60</div>
  1170.         <div class="lst"><pixl>4 weeks ago /</pixl> 104</div>
  1171.     </div>
  1172.  
  1173. </div>
  1174.  
  1175.  
  1176.  
  1177. <div id="info">
  1178.     <h1>about</h1>
  1179.     <ul class="info">
  1180.         <li><b>Hobbies</b> cooking & maintaining analog games</li>
  1181.        <li><b>Sports</b> Soccer</li>
  1182.        <li><b>Favorite book</b> Eragon series</li>
  1183.        <li><b>Favorite anime</b> K -ON!!, FMA, Nichijou</li>
  1184.        <li><b>Favorite show</b> Bob's burger's</li>
  1185.        
  1186.        <div class="desc">
  1187.            YOU CAN PUT A MORE IN DEPTH ABOUT ME HERE
  1188.        </div>
  1189.    </ul>
  1190. </div>
  1191.  
  1192. </div>
  1193. </div>
  1194. <!------- FOURTH PAGE ENDS ------->
  1195.  
  1196.  
  1197.  
  1198.    
  1199.    
  1200.    
  1201.    
  1202.    
  1203.    
  1204.    
  1205.    
  1206. <!------------ DO NOT EDIT AFTER THIS POINT UNLESS YOU KNOW WHAT YOU ARE DOING ------------>
  1207. <div class="psycho-od"></div>  
  1208.  
  1209. <div id="safety">
  1210. <div id="initializing" style="margin-left:-70px;">
  1211. <div id="block_1" class="barlittle"></div>
  1212. <div id="block_2" class="barlittle"></div>
  1213. <div id="block_3" class="barlittle"></div>
  1214. <div id="block_4" class="barlittle"></div>
  1215. <div id="block_5" class="barlittle"></div>
  1216. </div>
  1217. <div id="dominator"></div>
  1218. <div class="aa">safety</div>
  1219. <div class="cc">Lock</div>
  1220. <div class="bb">non-lethal paralyzer</div>
  1221. </div>
  1222.  
  1223.  
  1224. <div id="area"></div>
  1225.  
  1226. <div id="pass">
  1227. <div id="sibyl"></div>
  1228. <div class="arcode"><div class="dd">Area</div> level <span>02</span>
  1229. <div class="cc">mode:<br>138192</div></div>
  1230. <div class="load"><img src="http://static.tumblr.com/hczaopr/fhGot79oa/psychoload.gif"></div>
  1231. </div>
  1232.  
  1233.    
  1234.    
  1235.    
  1236.    
  1237. <!------------ DO NOT TOUCH MY CREDIT. DON'T MOVE IT, JUST LEAVE IT ALONE ------------>    
  1238.  
  1239. <div id="navi">
  1240.     <ul>
  1241.         <li><a href="/"><img src="http://static.tumblr.com/hczaopr/xcdot5ljb/home.png"></a> <span>Home</span></li>
  1242.         <li><a href="/ask"><img src="http://static.tumblr.com/hczaopr/dkkot5mwb/msg.png"></a> <span>Inbox</span></li>
  1243.         <li><a href="/archive"><img src="http://static.tumblr.com/hczaopr/FIDot5mvx/archive.png"></a> <span>Archived</span></li>
  1244.         <li><a href="http://ninpen.tumblr.com/"><img src="http://static.tumblr.com/hczaopr/88sot5mw5/cred.png"></a> <span>Credit</span></li>
  1245.     </ul>
  1246. </div>
  1247. </body>
  1248. </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!