API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 19th, 2019
105
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 8.22 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
  7. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  8. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
  9. <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  10. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  11. <!--end slider -->
  12. <!---strat-date-piker---->
  13.             <script>
  14.                     $(function() {
  15.                     jQuery(function ($) {
  16.                     $.datepicker.regional['pt'] = {
  17.                         closeText: 'Fechar',
  18.                         prevText: '',
  19.                         nextText: '',
  20.                         currentText: 'Hoje',
  21.                         monthNames: ['Janeiro', 'Fevereiro', 'Mar&ccedil;o', 'Abril', 'Maio', 'Junho',
  22.                         'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
  23.                         monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
  24.                         'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
  25.                         dayNames: ['Domingo', 'Segunda-feira', 'Ter&ccedil;a-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'S&aacute;bado'],
  26.                         dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'S&aacute;b'],
  27.                         dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'S&aacute;b'],
  28.                         weekHeader: 'Sem',
  29.                         dateFormat: 'dd/mm/yy',
  30.                         firstDay: 0,
  31.                         isRTL: false,
  32.                         showMonthAfterYear: false,
  33.                         yearSuffix: ''
  34.                     };
  35.                     $.datepicker.setDefaults($.datepicker.regional['pt']);
  36.                     });
  37.                     $( ".date" ).datepicker();
  38.                     });
  39.             </script>
  40. <!---/End-date-piker---->
  41.  
  42. <style>
  43. html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline; text-align: right;}
  44. article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
  45. ol,ul{list-style:none;margin:0;padding:0;}
  46.  
  47. body {
  48.     font-family: 'Open Sans', sans-serif;
  49.     font-size: 100%;
  50.     width: 100%;
  51. }
  52. .wrap{
  53.     margin:0 auto;
  54.     width:100%;
  55.     -moz-transition:all .2s linear;
  56.     -webkit-transition:all .2s linear;
  57.     -o-transition:all .2s linear;
  58.     -ms-transition:all .2s linear;
  59. }
  60. .reservation{
  61.     font-family: 'Open Sans', sans-serif;
  62.     float: left;
  63.     width: 100%;
  64.     background: none;
  65.     opacity: 0.9;
  66.     margin-top: 60px !important;
  67. }
  68.  
  69.  
  70. .reservation ul{
  71.     display: table;
  72.     margin: 0 auto;
  73. }
  74.  
  75. .reservation ul li{
  76.     float: left;
  77.     margin: 0 5px 0 5px;
  78. }
  79. .reservation ul li.left{
  80.     margin-left: 5px;
  81. }
  82. .reservation ul li.span1_of_1{
  83.     width: 26.33%;
  84. }
  85. .reservation ul li.span1_of_2{
  86.     width: 12.33%;
  87. }
  88. .reservation ul li.span1_of_3{
  89.     width: 19.33%;
  90.     margin-left: 20px;
  91. }
  92. .reservation h5{
  93.     font-size: 1em;
  94.     color: #5F5F5F;
  95.     text-transform: capitalize;
  96.     margin-bottom: 10px;
  97. }
  98.  
  99. .reservation label{
  100.     color: #f8a33c;
  101. }
  102.  
  103. select {
  104.     width: 100%;
  105.     color: #858585;
  106.     font-size: 0.8725em;
  107.     padding: 7px;
  108.     outline: none;
  109.     margin: 5px 0;
  110.     font-family: 'Open Sans', sans-serif;
  111.     background: #ffffff;
  112.     border: 1px solid #DFDFDF;
  113.     box-shadow: inset 0 0 2px rgb(236, 236, 236);
  114.     -webkit-box-shadow: inset 0 0 2px rgb(236, 236, 236);
  115.     -moz-box-shadow: inset 0 0 2px rgb(236, 236, 236);
  116.     -o-box-shadow: inset 0 0 2px rgb(236, 236, 236);
  117. }
  118. select option{
  119.     border: 1px solid #DFDFDF;
  120.     outline: none;
  121.     -webkit-transition: all 0.3s ease-in-out;
  122.     -moz-transition: all 0.3s ease-in-out;
  123.     -o-transition: all 0.3s ease-in-out;
  124.     transition: all 0.3s ease-in-out;
  125. }
  126. .book_date input[type="text"]{
  127.     width: 88%;
  128.     color: #858585;
  129.     font-size: 0.8725em;
  130.     padding: 8px;
  131.     outline: none;
  132.     margin: 5px 0;
  133.     font-family: 'Open Sans', sans-serif;
  134.     border: 1px solid #DFDFDF;
  135.     box-shadow: inset 0 0 2px rgb(236, 236, 236);
  136.     -webkit-box-shadow: inset 0 0 2px rgb(236, 236, 236);
  137.     -moz-box-shadow: inset 0 0 2px rgb(236, 236, 236);
  138.     -o-box-shadow: inset 0 0 2px rgb(236, 236, 236);
  139.     -webkit-appearance: none;
  140. }
  141. .date{
  142.     /background:url('https://i65.tinypic.com/7k1z.jpg') no-repeat 100% 50% #FFF;/
  143. }
  144. .date_btn{
  145.     margin-top: 0px;
  146. }
  147. .date_btn input[type="submit"] {
  148.     width: 100% !important;
  149.     background: #f8a33c;
  150.     font-family: 'Open Sans', sans-serif;
  151.     color: #FFF;
  152.     padding: 8px;
  153.     border: none;
  154.     font-size: 1em;
  155.     transition: 0.5s all;
  156.     -webkit-transition: 0.5s all;
  157.     -moz-transition: 0.5s all;
  158.     -o-transition: 0.5s all;
  159.     outline: none;
  160.     cursor: pointer;
  161.     margin-top: 4px;
  162. }
  163. .date_btn input[type="submit"]:hover{
  164.     background: #4a7879;
  165. }
  166.  
  167. /** Media Quries **/
  168. @media only screen and (max-width: 1366px) {
  169.     .wrap{
  170.         width: 95%;
  171.     }
  172.     .span_of_2 {
  173.         padding: 3% 0;
  174.         margin: 4% 0;
  175.     }
  176. }
  177. @media only screen and (max-width: 1280px) {
  178.     .wrap{
  179.         width: 95%;
  180.     }
  181. }
  182. @media only screen and (max-width: 1024px) {
  183.     .wrap{
  184.         width: 95%;
  185.         margin: 0;
  186.     }
  187.     .reservation ul li.span1_of_3 {
  188.         width: 17.33333%;
  189.         margin-left: 15px;
  190.     }
  191. }
  192. @media only screen and (max-width: 768px) {
  193.     .wrap{
  194.         width: 95%;
  195.         margin: 0;
  196.     }
  197.     .reservation ul li {
  198.         float: none;
  199.         display: inline-block;
  200.     }
  201.     .reservation {
  202.         float: none;
  203.         width: 98%;
  204.     }
  205.     .b_room {
  206.         display: inline-block;
  207.     }
  208.     .reservation h5 {
  209.         margin: 10px 0;
  210.     }
  211. }
  212. @media only screen and (max-width: 640px){
  213.     .wrap{
  214.         width: 95%;
  215.         margin: 0;
  216.     }
  217.  
  218.     .reservation{
  219.         margin-top: 20px !important;
  220.     }
  221.  
  222.     .reservation ul li.span1_of_1 {
  223.         width: 100%;
  224.     }
  225.     .reservation ul li.span1_of_2 {
  226.         width: 49.33333%;
  227.     }
  228.     .reservation ul li.span1_of_3 {
  229.         width: 47.33333%;
  230.         margin-left: 10px;
  231.     }
  232.     .reservation ul li.span1_of_4 {
  233.         width: 100%;
  234.     }
  235.     .book_date input[type="text"] {
  236.         width: 96% !important;
  237.     }
  238.     .reservation ul li.left {
  239.         margin-left: 0px;
  240.     }
  241.  
  242.     .reservation ul li.span1_of_3 {
  243.         width: 100%;
  244.         margin-top: 5px;
  245.         margin-left: 0px;
  246.     }
  247. }
  248. @media only screen and (max-width: 480px) {
  249.     .wrap{
  250.         width: 95%;
  251.         margin: 0;
  252.     }
  253.     .date_btn {
  254.         margin: 0 0 20px;
  255.     }
  256. }
  257. @media only screen and (max-width: 320px) {
  258.     .wrap{
  259.         width: 95%;
  260.         margin: 0;
  261.     }
  262.     .reservation {
  263.         padding: 10px;
  264.         width: 97%;
  265.     }
  266.     .reservation ul li.span1_of_2 {
  267.         width: 100%;
  268.     }
  269.     .reservation ul li.span1_of_3 {
  270.         width: 100%;
  271.         margin-left: 0px;
  272.     }
  273.     .reservation ul li.span1_of_4 {
  274.         width: 100%;
  275.     }
  276.     .book_date input[type="text"] {
  277.         width: 93% !important;
  278.     }
  279.     .span2_of_1 {
  280.         float: none;
  281.         width: 100%;
  282.         margin-left: 0%;
  283.     }
  284. }
  285.  
  286. #ui-datepicker-div{
  287.     z-index: 1000 !important;
  288. }
  289.  
  290. </style>
  291.  
  292. </head>
  293. <body>
  294.  
  295. <div class="wrap">
  296.     <div class="reservation">
  297.         <form id="booking" action="https://myreservations.omnibees.com/default.aspx" method="GET" target="_blank">
  298.             <!--Hotel ID-->
  299.             <input type="hidden" name="q" value="7090"/>
  300.             <!--Language-->
  301.             <input type="hidden" name="lang" value="pt-BR"/>
  302.             <input type="hidden" name="ad" value="2"/>
  303.             <input type="hidden" name="Ch" value="0"/>
  304.             <ul>
  305.                 <li class="span1_of_4">
  306.                     <label>Reservas<br>Online</label>
  307.                 </li>
  308.                 <li class="span1_of_4 left">
  309.                     <div class="book_date">
  310.                         <input class="date" id="checkin" name="CheckIn" type="text" value="Check-in" autocomplete="off">
  311.                     </div>
  312.                 </li>
  313.                 <li class="span1_of_4 left">
  314.                     <div class="book_date">
  315.                         <input class="date" id="checkout" name="CheckOut" type="text" value="Check-out" autocomplete="off">
  316.                     </div>
  317.                 </li>
  318.                 <li class="span1_of_4">
  319.                     <div class="date_btn">
  320.                         <input type="submit" value="Pesquisar" />
  321.                     </div>
  322.                 </li>
  323.             </ul>
  324.         </form>
  325.     </div>
  326. </div>
  327.  
  328. <script type="text/javascript">
  329.     $(function() {
  330.         $("#booking").submit(function() {
  331.             var checkin = $("#checkin").val();
  332.             checkin = checkin.split("/").join("");
  333.             $("#checkin").val(checkin);
  334.             var checkout = $("#checkout").val();
  335.             checkout = checkout.split("/").join("");
  336.             $("#checkout").val(checkout);
  337.         });
  338.         return false;
  339.     });
  340. </script>
  341.  
  342. </body>
  343. </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!