API tools faq
paste
Advertisement
NecromancerCoding

Reserva de PBs

NecromancerCoding
Apr 16th, 2019
381
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.34 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.     <title>{Title} - Reservas</title>
  4.     <meta name="description" content="Descripción"/>
  5.     <meta charset="utf-8" />
  6.     <!-- FONTS -->
  7.     <link href="https://fonts.googleapis.com/css?family=Assistant:300,400,700,800" rel="stylesheet"/>
  8.     <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"/>
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  10.     <script src="https://static.tumblr.com/zd7jnbb/TDPpnlgj3/jquery.style-my-tooltips.js"></script>
  11. <script>
  12.     (function($){
  13.         $(document).ready(function(){
  14.             $("[title]").style_my_tooltips({
  15.                 tip_follows_cursor:true,
  16.                 tip_delay_time:0,
  17.                 tip_fade_speed:0
  18.             });
  19.         });
  20.     })(jQuery);
  21. </script>
  22.     <!--To use the icons of the honeybee font, you can look up the class names here -> https://honeybee.suiomi.com/ -->
  23.     <style type="text/css">
  24.     body{
  25.         background-image:url(https://cdn.wallpapersafari.com/42/1/0ptNeJ.jpg);
  26.         background-position:center;
  27.         background-size:cover;
  28.         background-repeat:no-repeat;
  29.         background-attachment:fixed;
  30.         text-align:center;
  31.         font:11px calibri;
  32.         line-height:14px;
  33.         color:#333;
  34.     }
  35.    
  36.     .body {
  37.     width: 832px;
  38.     padding: 20px;
  39.     position: fixed;
  40.     top: 50%;
  41.     left: 50%;
  42.     transform: translateX(-50%) translateY(-50%);
  43.     background:rgba(255,255,255,0.3);
  44.     border:1px solid rgba(0,0,0,0.15);
  45.     border-radius:3px;
  46. }
  47.     .body div{
  48.         background:#f4f4f4;
  49.         border:1px solid #ddd;
  50.         padding:5px;
  51.     }
  52.     .desc{
  53.         width:450px;
  54.         margin:0 auto;
  55.         margin-top:20px;
  56.     }
  57.     .lista{
  58.         display:inline-block;
  59.         vertical-align:middle;
  60.         margin-top:20px;
  61.         width:400px;
  62.     }
  63.     n{
  64.         display:inline-block;
  65.         vertical-align:middle;
  66.         width:400px;
  67.         margin-top:20px;
  68.         margin-left:20px;
  69.     }
  70.     m{
  71.         display:block;
  72.         width:52px;
  73.         position:fixed;
  74.         top:50%;
  75.         transform:translateY(-50%);
  76.         left: calc((50%) - (500px));
  77.     }
  78.     m a{
  79.         background:#f4f4f4;
  80.         border:1px solid #ddd;
  81.         color:#6b8e7f;
  82.         font-size:15px;
  83.         text-decoration:none;
  84.         display:inline-block;
  85.         vertical-align:top;
  86.         height:50px;
  87.         width:50px;
  88.         line-height:50px;
  89.         border-radius:3px;
  90.         margin-bottom:10px;
  91.         transition:ease 0.3s;
  92.     }
  93.     m a:hover{
  94.         background:#6b8e7f;
  95.         border:1px solid rgba(0,0,0,0.05);
  96.         color:white;
  97.         text-shadow:2px 2px 0px rgba(0,0,0,0.2);
  98.     }
  99.     h1, h2{
  100.         background:#6b8e7f;
  101.         font:20px 'Assistant';
  102.         font-weight:400;
  103.         line-height:40px;
  104.         height:40px;
  105.         margin:0 auto;
  106.         color:white;
  107.         text-shadow:2px 2px 0px rgba(0,0,0,0.1);
  108.     }
  109.     h2{
  110.         font-size:11px;
  111.         border-radius:3px;
  112.         font-weight:300;
  113.         margin-bottom:10px;
  114.         border:1px solid rgba(0,0,0,0.1);
  115.     }
  116.     h2:last-child{
  117.         margin-bottom:0px;
  118.     }
  119.     h1 span, h2 span{
  120.         font-size:15px;
  121.         display:inline-block;
  122.         height:40px;
  123.         width:80px;
  124.         float:left;
  125.         background:rgba(0,0,0,0.08);
  126.         border-right:1px solid rgba(0,0,0,0.05);
  127.     }
  128.     [class^="th-"]:before, [class*=" th-"]:before{
  129.         line-height:inherit;
  130.     }
  131.     div p{
  132.         background:#fafafa;
  133.         margin:5px auto 0;
  134.         padding:10px;
  135.         text-align:justify;
  136.         border:1px solid #e5e5e5;
  137.     }
  138.     div p strong{
  139.         color:#6b8e7f;
  140.         text-transform:uppercase;
  141.     }
  142.     div p strong:before{
  143.         content:"○ ";
  144.         color:#333;
  145.         font-size:10px;
  146.         position:relative;
  147.         top:-1px;
  148.     }
  149.     .credit{
  150.         position:fixed;
  151.         bottom:0px;
  152.         right:0px;
  153.         background:rgba(255,255,255,0.8);
  154.         display:block;
  155.         width:50px;
  156.         height:50px;
  157.         font-size:20px;
  158.         line-height:50px;
  159.         text-decoration:none;
  160.         color:#444;
  161.         opacity:0.7;
  162.         transition:ease 0.3s;
  163.     }
  164.     .credit:hover{
  165.         opacity:1;
  166.     }
  167.    
  168. *::selection{
  169. background: #6b8e7f;
  170. color: white;
  171. }
  172. #s-m-t-tooltip{
  173.   display:block;
  174.   position:absolute;
  175.   max-width:300px;
  176.   z-index:10;
  177.   margin:14px 14px 7px 12px;
  178.   padding:8px;
  179.   background:#6b8e7f;
  180.   -moz-border-radius:3px;
  181.   -webkit-border-radius:3px;
  182.   border-radius:2px;
  183.   border:1px solid rgba(0,0,0,0.2);
  184.   font-family:Calibri,sans-serif;
  185.   font-size:11px;
  186.   font-weight:bold;
  187.   text-transform:uppercase;
  188.   line-height:16px;
  189.   color:#fff;
  190. }
  191.     </style>
  192. </head>
  193. <body>
  194. <div class="body">
  195.     <div class="desc">
  196.     <h1><span class="th th-cabinet"></span> RESERVA DE PBS</h1>
  197.     <p>Aquí puedes poner las normas si prefieres prescindir de los disclaimers.</p>
  198.     </div>
  199.     <m><a href="/" title="Inicio"><span class="th th-home"></span></a>
  200.     <a href="/ask" title="Ask"><span class="th th-paper-plane-o"></span></a></m>
  201.     <div class="lista">
  202.     <h1><span class="th th-clipboard"></span> PBS OCUPADOS</h1>
  203.     <p><strong>Nombre del PB</strong> - Nombre del User.<br/>
  204.        <strong>Nombre del PB</strong> - Nombre del User.<br/>
  205.        <strong>Nombre del PB</strong> - Nombre del User.<br/>
  206.        <strong>Nombre del PB</strong> - Nombre del User.<br/>
  207.        <strong>Nombre del PB</strong> - Nombre del User.<br/>
  208.        <strong>Nombre del PB</strong> - Nombre del User.<br/>
  209.        <strong>Nombre del PB</strong> - Nombre del User.<br/>
  210.        <!--Remember to always put a <br/> at the end of each line-->
  211.     </p>
  212.     </div>
  213.     <n class="disclaimers">
  214.     <h2><span class="th th-settings"></span> No se aceptarán reservas sin contraseña.</h2>
  215.     <h2><span class="th th-shuffle"></span> Sólo se cancelarán o cambiarán reservas con contraseña.</h2>
  216.     <h2><span class="th th-server"></span> No se aceptarán reservas enviadas por submit.</h2>
  217.     <!--You can put here more h2s if you need more rules-->
  218.     </n>
  219.     </div>
  220.     <!--Don't delete the credit-->
  221.     <a href="http://necromancercoding.tumblr.com/" title="Page Credit" class="credit"><span class="th th-fish-bone"></span></a>
  222. </body>
  223. </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!