API tools faq
paste
BappidyBoopidy

Code Police File

BappidyBoopidy
Feb 23rd, 2017 (edited)
556
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.36 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. /*
  3. ======== !! IMPORTANT !! DO NOT REMOVE ANY PART OF THIS SECTION =========
  4.  
  5. Author: Elle
  6. For: Papi [RPC Profile]
  7. Text type: CSS/HTML
  8. */
  9.  @import url('https://fonts.googleapis.com/css?family=Carrois+Gothic+SC|Cutive+Mono|Share+Tech+Mono|Special+Elite');
  10.  
  11.   ::-webkit-scrollbar{width:0.3vh;height:0.3vh;}
  12.   ::-webkit-scrollbar-track{border-radius:0;background:transparent;}
  13.   ::-webkit-scrollbar-thumb{border-radius:0;background:rgba(31,94,0,0.5);}
  14.  
  15.   * {font-family: 'Share Tech Mono'; color: #fff;}
  16.  
  17.   h1{font-family: 'Cutive Mono'; font-size: 3vh;}
  18.  
  19.   a{text-decoration: none; font-family: 'Special Elite';color: #a03d57;transition-duration: 0.5s;}
  20.  
  21.   a:hover {color: #ffaae4; font-size: 110%; transition-duration: 0.5s;}
  22.  
  23.   b{font-family: 'Share Tech Mono'; color: #3ea54a;}
  24.  
  25.   body {
  26.     background-image: url('http://i.picpar.com/WRnc.jpg');
  27.     background-size: cover;
  28.   }
  29.  
  30.   #main {
  31.     position: fixed;
  32.     background: rgba(0,0,0,0.5);
  33.     height: 90%;
  34.     width: 90%;
  35.     top: 5%;
  36.     left: 5%;
  37.   }
  38.  
  39.   #img {
  40.     position: absolute;
  41.     height: 50%;
  42.     width: 22%;
  43.     border: solid 3px;
  44.     border-color: rgba(0,0,0,0.5);
  45.     background: rgba(255,255,255,0.2);
  46.   }
  47.  
  48.   #front {
  49.     position: absolute;
  50.     right: 7%;
  51.    opacity: 1;
  52.    transition-duration: 1s;
  53.    transition-delay: 1s;
  54.    animation: front 9s 1;
  55.    -webkit-animation: front 9s 1;
  56.    animation-fill-mode: forwards;
  57.    -webkit-animation-fill-mode: forwards;
  58.     animation-delay: 3s;
  59.    animation-iteration-count: infinite;
  60.    animation-direction: alternate;
  61. }
  62.  
  63. @keyframes front{
  64.   0% {opacity: 1;}
  65.   50% {opacity: 0;}
  66.   100% {opacity: 0;}
  67. }
  68.  
  69. @-webkit-keyframes front{
  70.   0% {opacity: 1;}
  71.   50% {opacity: 0;}
  72.   100% {opacity: 0;}
  73. }
  74.  
  75. #side {
  76.   position: absolute;
  77.   right: 1%;
  78.   opacity: 0;
  79.   transition-duration: 1s;
  80.   transition-delay: 1s;
  81.   animation: side 9s 1;
  82.   -webkit-animation: side 9s 1;
  83.   animation-fill-mode: forwards;
  84.   -webkit-animation-fill-mode: forwards;
  85.   animation-delay: 3s;
  86.   animation-iteration-count: infinite;
  87.   animation-direction: alternate;
  88. }
  89.  
  90. @keyframes side{
  91.   0% {opacity: 0;}
  92.   50% {opacity: 1;}
  93.   100% {opacity: 0;}
  94. }
  95.  
  96. @-webkit-keyframes side{
  97.   0% {opacity: 0;}
  98.   50% {opacity: 1;}
  99.   100% {opacity: 0;}
  100. }
  101.  
  102. #back {
  103.   position: absolute;
  104.   right: 1%;
  105.   opacity: 0;
  106.   transition-duration: 1s;
  107.   transition-delay: 1s;
  108.   animation: back 9s 1;
  109.   -webkit-animation: back 9s 1;
  110.   animation-fill-mode: forwards;
  111.   -webkit-animation-fill-mode: forwards;
  112.   animation-delay: 3s;
  113.   animation-iteration-count: infinite;
  114.   animation-direction: alternate;
  115. }
  116.  
  117. @keyframes back{
  118.   0% {opacity: 0;}
  119.   50% {opacity: 0;}
  120.   100% {opacity: 1;}
  121. }
  122.  
  123. @-webkit-keyframes back{
  124.   0% {opacity: 0;}
  125.   50% {opacity: 0;}
  126.   100% {opacity: 1;}
  127. }
  128.  
  129. #nav {
  130.   position: absolute;
  131.   top: 55%;
  132.   height: 50%;
  133.   width: 22%;
  134.   bottom: 0%;
  135. }
  136.  
  137. .nav {
  138.   list-style-type: none;
  139.   margin: 0;
  140.   padding: 10px;
  141.   background: transparent;
  142.   height: 100%;
  143.   width: 100%;
  144. }
  145.  
  146. a.bam{
  147.   display: block;
  148.   padding: 10px;
  149.   transition-duration: 1s;
  150.   color: #3ea54a;
  151.   font-size: 3.5vh;
  152.   border-radius: 10px;
  153.  
  154. }
  155.  
  156. a.bam:hover{
  157.   color: #76fc86;
  158.   font-size: 160%;
  159.   transition-duration: 1s;
  160. }
  161.  
  162. #box {
  163.   position: absolute;
  164.   height: 93.5%;
  165.   left: 22.5%;
  166.   width: 45%;
  167.   padding: 20px;
  168. }
  169.  
  170. #host{height:100%;width:100%;overflow:hidden;}
  171.  
  172. #stats, #bio, #contacts, #info {height:100%;width:100%;overflow:auto;}
  173.  
  174. .r {float: right;}
  175.  
  176. .blink {
  177.   animation: blink 1s 1;
  178.   -webkit-animation: blink 1s 1;
  179.   text-decoration: underline;
  180.   animation-iteration-count: infinite;
  181.   animation-fill-mode: forwards;
  182.   -webkit-animation-fill-mode: forwards;
  183.   animation-direction: alternate;
  184. }
  185.  
  186. @keyframes blink{
  187.   from{opacity: 0.5;}
  188.   to{opacity: 1;}
  189. }
  190.  
  191. @-webkit-keyframes{
  192.   from{opacity:0.5;}
  193.   to{opacity:1;}
  194. }
  195.  
  196. /* CREDIT. PLEASE DON'T REMOVE. */
  197.  
  198. #credit {
  199.   position: fixed;
  200.   left: 40%;
  201.   bottom: 1%;
  202.   padding: 3px;
  203.   background: rgba(0,0,0,0.3);
  204.   border-left: 3px solid;
  205.   border-color: #fff;
  206.   font-size: 2vh;
  207. }
  208.  
  209. </style>
  210. <div id="main">
  211.   <div id="img">
  212.     <img src="http://i.picpar.com/eRnc.png" style="height: 100%;">
  213.   </div>
  214.     <div id="front">
  215.       <img src="http://i.picpar.com/XRnc.png" style="height: 100%;">
  216.     </div>
  217.     <div id="side">
  218.       <img src="http://i.picpar.com/cSnc.png" style="height:100%;">
  219.     </div>
  220.     <div id="back">
  221.       <img src="http://i.picpar.com/eSnc.png" style="height:100%;">
  222.     </div>
  223.     <div id="nav">
  224.       <ul class="nav">
  225.         <center>
  226.         <a href="#stats" class="bam">Information</a><br>
  227.         <a href="#bio" class="bam">Last Seen</a><br>
  228.         <a href="#contacts" class="bam">Contacts</a><br>
  229.         <a href="#ooc" class="bam">OOC</a>
  230.         </center>
  231.       </ul>
  232.     </div>
  233.     <div id="box">
  234.       <div id="host">
  235.         <div id="stats">
  236.           <center><h1><div class="blink">> Information Gathered</div></h1></center>
  237.           <br><br><br>
  238.           <b>Name</b><div class="r">Papi</div><br><br>
  239.           <b>Moniker</b><div class="r">Unknown</div><br><br>
  240.           <b>Species</b><div class="r">Werewolf</div><br><br>
  241.           <b>Gender</b><div class="r">Female</div><br><br>
  242.           <b>Marital Status</b><div class="r">Unknown</div><br><br>
  243.           <b>Orientation</b><div class="r">Unknown</div><br><br>
  244.           <b>Age</b><div class="r">Unknown</div><br><br>
  245.           <b>Residence</b><div class="r">On the run</div><br><br><br><br><br>
  246.           <center><b><font style="color: #ff7272">Status: EXTREMELYE DANGEROUS ; DO NOT ENGAGE</font></b>
  247.             <br><br>Proceed to next page for sightings.
  248.           </center>
  249.         </div>
  250.         <div id="bio">
  251.           <center><h1><div class="blink">> Sightings</div></h1>
  252.           <br><br>
  253.             <b>Sightings are considered classified. Please input authorized ID code to access.</b><br><br><br><br>
  254.             <br><br>
  255.             Code: <div class="blink">|__________</div>
  256.           </center>
  257.         </div>
  258.         <div id="contacts">
  259.            <center>
  260.     <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  261.     <center><b>- Name -</b><br> <i>ally/enemy/witness</i></center> small note.<br><br><br>
  262.     <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  263.     <center><b>- Name -</b><br> <i>ally/enemy/witness</i></center> small note.<br><br><br>
  264.     <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  265.     <center><b>- Name -</b><br> <i>ally/enemy/witness</i></center> small note.<br><br><br>
  266.     <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  267.     <center><b>- Name -</b><br> <i>ally/enemy/witness</i></center> small note.<br><br><br>
  268.     <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  269.     <center><b>- Name -</b><br> <i>ally/enemy/witness</i></center> small note.<br><br><br>
  270.     <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  271.     <center><b>- Name -</b><br> <i>ally/enemy/witness</i></center> small note.<br><br><br>
  272.     <br><br></center>
  273.         </div>
  274.         <div id="ooc">
  275.           <center><h1><div class="blink">> Out of Character</div></h1></center>
  276.           <b>></b> In-room approach is your best bet. <br>
  277.           <b>></b> Smut is earned.<br>
  278.           <b>></b> What I do IC does not reflect on me OOC.<br>
  279.           <b>></b> PM Picky. <br>
  280.           <b>></b> No profile = No RP<br>
  281.           <b>></b> more info whatever just copy paste the b bullshit.<br>
  282.           <br><br>
  283.           <center><h1><div class="blink">> Typist Information</div></h1></center>
  284.           <b>></b> Female<br>
  285.           <b>></b> BLAH<br>
  286.           <b>></b> MORE BLAH<br>
  287.           <b>></b> same goes just copy the b for more bullets
  288.           <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  289.         </div>
  290.       </div>
  291.     </div>
  292. </div>
  293. <div id="credit">
  294.   &copy; <a href="https://www.themonster.xyz/" target="_blank">The Monster.</a> Send an RPC mail to <b>Deum</b> for information.</a>
  295. </div>
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!