API tools faq
paste
son86000

form

son86000
Apr 26th, 2017
84
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 17.75 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Espaço para Eventos | RÁI ROOFTOP</title>
  6.     <meta name="description" content="O RÁI ROOFTOP oferece diferentes formatações e tem uma nova proposta para seu evento. Arrojado, Compacto e Ideal para Você!">
  7.     <link rel="stylesheet" type="text/css" href="style.css">
  8.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  9.     <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900,900i&amp;subset=latin-ext" rel="stylesheet">
  10.     <link rel="stylesheet"  href="lightslider.css"/>
  11.     <link rel="stylesheet"  href="sliderstyle.css"/>
  12.  
  13.     <!-- Google Analytics -->
  14.     <script>
  15.        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  16.        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  17.        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  18.        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  19.  
  20.        ga('create', 'UA-98109930-1', 'auto');
  21.        ga('send', 'pageview');
  22.  
  23.     </script>
  24.     <!-- Fim Google Analytics -->
  25.  
  26.   </head>
  27.  
  28.   <body>
  29.  
  30.     <!-- VERSÃO DESKTOP -->
  31.     <div id="desktop-version">
  32.  
  33.           <!-- header -->
  34.           <header id="header-one-page">
  35.  
  36.             <nav id="menu">
  37.               <figure id="menu-background">
  38.                 <ul class="menu">
  39.                   <li><a href="#header-one-page" class="link-close">Home</a></li>
  40.                   <li><a href="#one-page-images-interative" class="link-close">Eventos</a></li>
  41.                   <li><a href="#formulario" class="link-close">Contato</a></li>
  42.                 </ul>
  43.  
  44.                 <img src="img/menu.png" class="menu-background">
  45.               </figure>
  46.             </nav>
  47.  
  48.             <div id="text-header" class="responsive">
  49.               <p class="txt-header-1">Bem vindo<br>ao espaço Rái</p>
  50.               <p class="txt-header-2">Rooftop</p>
  51.               <p class="txt-header-3">Se você busca um espaço<br>versátil para seu evento,<br>você está no lugar certo.</p>
  52.             </div>
  53.  
  54.             <figure id="heder-infos">
  55.               <img src="img/header-info-1.png" class="header-info-1">
  56.               <img src="img/header-info-2.png" class="header-info-2">
  57.             </figure>
  58.  
  59.             <div id="header-image" class="responsive">
  60.  
  61.               <figure id="label1">
  62.                 <img src="img/label1.png" class="label1">
  63.               </figure>
  64.  
  65.             </div>
  66.           </header>
  67.           <!-- fim do header -->
  68.  
  69.           <!-- introdução -->
  70.           <section id="one-page-introducao">
  71.  
  72.              <div id="text-one-page" class="responsive">
  73.                 <p class="txt-one-page-1" class="fadeIn">Muitas<br>possibilidades<br>em um único<br>espaço.</p>
  74.                 <p class="txt-one-page-2">Fora dos padrões convencionais,<br>o Espaço Rái Rooftop oferece diferentes
  75.                 <br>formatações e tem uma nova proposta<br>para seu evento.</p>
  76.              </div>
  77.  
  78.              <figure id="introducao-images">
  79.                <img src="img/img-principal-1.png" class="img-introducao-1">
  80.                <img src="img/img-principal-2.png" class="img-introducao-2">
  81.              </figure>
  82.  
  83.              <div id="bg-1">
  84.  
  85.              </div>
  86.  
  87.           </section>
  88.           <!-- fim da introdução -->
  89.  
  90.           <!-- imagens interativas -->
  91.           <section id="one-page-images-interative">
  92.  
  93.              <figure id="label1" class="responsive">
  94.                <img src="img/label2.png" class="label2">
  95.              </figure>
  96.  
  97.              <div id="text-images-interative" class="responsive">
  98.                 <p class="txt-images-interative-1">Social,<br>corporativo,<br>infantil<br>e mini wedding.</p>
  99.                 <p class="txt-images-interative-2">Conheça nosso espaço<br>e sonhe com o que você<br>nunca imaginou.</p>
  100.              </div>
  101.  
  102.              <div id="botoes-slider-1" class="responsive">
  103.                <img src="img/seta1.png" class="seta1">
  104.                <img src="img/seta2.png" class="seta2">
  105.                <img src="img/bg-setas.png" class="bgsetas">
  106.              </div>
  107.  
  108.              <div class="item">
  109.                  <ul id="content-slider" class="content-slider">
  110.                      <li>
  111.                          <img src="img/slider1.png" class="img-responsive">
  112.                      </li>
  113.                      <li>
  114.                          <img src="img/slider2.png" class="img-responsive">
  115.                      </li>
  116.                      <li>
  117.                          <img src="img/slider3.png" class="img-responsive">
  118.                      </li>
  119.                      <li>
  120.                          <img src="img/slider4.png" class="img-responsive">
  121.                      </li>
  122.                      <li>
  123.                          <img src="img/slider5.png" class="img-responsive">
  124.                      </li>
  125.                      <li>
  126.                          <img src="img/slider6.png" class="img-responsive">
  127.                      </li>
  128.                  </ul>
  129.              </div>
  130.  
  131.              <figure id="slider-infos" class="responsive">
  132.                <img src="img/info-icon-1.png" class="info-icon-1">
  133.                <img src="img/info-icon-2.png" class="info-icon-2">
  134.                <img src="img/info-icon-3.png" class="info-icon-3">
  135.              </figure>
  136.  
  137.           </section>
  138.           <!-- fim das imagens interativas -->
  139.  
  140.           <!-- informações 2 -->
  141.           <section id="one-page-experience">
  142.  
  143.             <article id="one-page-experience-text">
  144.               <p class="txt-info-experience-1">Vivencie Uma Nova Experiência</p>
  145.               <p class="txt-info-experience-2">Bem localizado, arrojado, compacto e idela para você. O Rái Rooftop comporta diferentes
  146.               <br>configurações e proporciona liberdade e personalização ao seu evento.</p>
  147.               <p class="txt-info-experience-3">Vai de música ao vivo? Aqui a banda da sua festa tem ambiente e liberdade
  148.               <br>para realizar um verdadeiro show.</p>
  149.               <p class="txt-info-experience-4">Venha Nos Conhecer e Vivencie o Inimaginável</p>
  150.             </article>
  151.  
  152.           </section>
  153.           <!-- fim informações 2 -->
  154.  
  155.           <!-- slider interactive 2 -->
  156.           <section id="slider-interactive-2">
  157.  
  158.             <article id="slideshow">
  159.  
  160.                 <div id="slides">
  161.                   <ul>
  162.                     <li style="background-color:#fff;"><img src="img/slider-new-5.png"/></li>
  163.                     <li style="background-color:#fff;"><img src="img/slider-new-6.png"/></li>
  164.                     <li style="background-color:#fff;"><img src="img/slider-new-7.png"/></li>
  165.                     <li style="background-color:#fff;"><img src="img/slider-new-8.png"/></li>
  166.                   </ul>
  167.                 </div>
  168.  
  169.                 <div class="btn_slider" id="responsive">
  170.                   <p id="previous">Anterior</p>
  171.                   <p id="next">Proximo</p>
  172.                 </div>
  173.  
  174.             </article>
  175.  
  176.           </section>
  177.           <!-- slider interactive 2 -->
  178.  
  179.           <!-- formulario -->
  180.           <section id="formulario">
  181.  
  182.              <div id="contato" class="responsive">
  183.                <p class="text-contato-1">Perdizes<br>São Paulo - Brasil</p>
  184.                <img src="img/endereco.png" class="endereco-icon">
  185.                <br>
  186.                <p class="text-contato-2">11 99866-6069<br>11 98613-9003</p>
  187.                <img src="img/telefone.png" class="telefone-icon">
  188.                <br>
  189.                <p class="text-contato-3">
  190.                <a href="mailto:contato@espacorairooftop.com.br" class="contato-email">contato@espacorairooftop.com.br</a><br>
  191.                <a href="mailto:patricia@espacorairooftop.com.br" class="contato-email">patricia@espacorairooftop.com.br</a><br>
  192.                <a href="mailto:camila@espacorairooftop.com.br" class="contato-email">lilian@espacorairooftop.com.br</a><br>
  193.                <a href="mailto:lilian@espacorairooftop.com.br" class="contato-email">camila@espacorairooftop.com.br</a>
  194.                </p>
  195.                <img src="img/email.png" class="email-icon">
  196.                <br>
  197.              </div>
  198.  
  199.              <figure id="label4" class="responsive">
  200.                <img src="img/label4.png" class="label4">
  201.              </figure>
  202.  
  203.              <form name="formcontato" action="enviamailer.php" id="form-campos" class="responsive" method="post">
  204.                <p class="form-campos-title">Fale Conosco</p>
  205.                <p class="form-campos-text">Para mais informações, preencha o formulário</p>
  206.                <br>
  207.                <br>
  208.                <p class="form-campos-nome">Nome</p>
  209.                <input type="text" name="nome" class="nome" required>
  210.                <br>
  211.                <p class="form-campos-email">Email</p>
  212.                <input type="email" name="email" class="email" required>
  213.                <br>
  214.                <p class="form-campos-telefone">Telefone</p>
  215.                <input type="telefone" name="telefone" class="telefone" required>
  216.                <br>
  217.                <p class="form-campos-mensagem">Mensagem</p>
  218.                <textarea name="mensagem" class="mensagem" required></textarea>
  219.                <br>
  220.                <a href="#" class="btn-enviar" onclick="validaForm()">Enviar</a>
  221.              </form>
  222.  
  223.              <figure id="mapa">
  224.  
  225.              </figure>
  226.  
  227.           </section>
  228.           <!-- fim formulario -->
  229.  
  230.           <footer id="rodape">
  231.             <figure id="rai-logo" class="responsive">
  232.               <img src="img/railogo.png" class="rai-logo">
  233.             </figure>
  234.           </footer>
  235.  
  236.      </div>
  237.      <!-- FIM VERSÃO DESKTOP -->
  238.  
  239.      <!-- VERSÃO MOBILE -->
  240.      <div id="mobile-version">
  241.  
  242.         <!-- menu after -->
  243.         <nav id="menu-after">
  244.           <ul>
  245.             <li><a href="#header-mobile" class="link-close">Home</a></li>
  246.             <li><a href="#info-responsive-1" class="link-close">Eventos</a></li>
  247.             <li><a href="#formulario-responsive" class="link-close">Contato</a></li>
  248.           </ul>
  249.  
  250.           <img src="img/close.png" class="close">
  251.         </nav>
  252.         <!-- fim menu after -->
  253.  
  254.         <!-- header responsive -->
  255.         <header id="header-mobile">
  256.           <figure id="background-header-responsive">
  257.             <img src="img/bg-header-mobile.png" class="header-responsive">
  258.           </figure>
  259.  
  260.           <figure id="logo-responsive" class="responsive">
  261.             <img src="img/railogo.png" class="logo-responsive">
  262.           </figure>
  263.  
  264.           <figure id="menu-hamburger" class="responsive">
  265.             <img src="img/hamburger.png" class="hamburger">
  266.           </figure>
  267.  
  268.           <figure id="lablel-responsive-1" class="responsive">
  269.             <img src="img/label-responsive-1.png" class="label-responsive-1">
  270.           </figure>
  271.  
  272.           <div id="text-header" class="responsive">
  273.             <p class="txt-header-1">Bem vindo<br>ao espaço Rái</p>
  274.             <p class="txt-header-2">Rooftop</p>
  275.             <p class="txt-header-3">Se você busca um espaço<br>versátil para seu evento,<br>você está no lugar certo.</p>
  276.           </div>
  277.  
  278.         </header>
  279.         <!-- header responsive -->
  280.  
  281.         <!-- slider responsive -->
  282.         <section id="slider-responsive">
  283.  
  284.           <article id="slideshow">
  285.  
  286.               <div id="slides">
  287.                 <ul>
  288.                   <li style="background-color:#fff;"><img src="img/slider-new-5.png" class="slides"/></li>
  289.                   <li style="background-color:#fff;"><img src="img/slider-new-6.png" class="slides"/></li>
  290.                   <li style="background-color:#fff;"><img src="img/slider-new-7.png" class="slides"/></li>
  291.                   <li style="background-color:#fff;"><img src="img/slider-new-8.png" class="slides"/></li>
  292.                 </ul>
  293.               </div>
  294.  
  295.               <p class="btn_slider" id="responsive">
  296.                 <a href="#" id="previous">Anterior</a>
  297.                 <a href="#" id="next">Proximo</a>
  298.               </p>
  299.  
  300.           </article>
  301.  
  302.         </section>
  303.         <!-- fim slider responsive -->
  304.  
  305.         <!-- info responsive 1 -->
  306.         <section id="info-responsive-1">
  307.           <article id="info-responsive-1-text">
  308.             <p class="info-responsive-1-text">Muitas Possibilidades<br>em um único espaço</p><br>
  309.             <p class="info-responsive-2-text">Fora dos padrões convencionais, o Espaço Rái Rooftop
  310.             <br>oferece diferentes formatações e tem uma nova<br>proposta para o seu evento.</p><br>
  311.           </article>
  312.  
  313.           <div id="text-images-interative-responsive" class="responsive">
  314.              <p class="txt-images-interative-responsive-1">Social,<br>corporativo,<br>infantil<br>e mini wedding.</p>
  315.              <p class="txt-images-interative-responsive-2">Conheça nosso espaço<br>e sonhe com o que você<br>nunca imaginou.</p>
  316.           </div>
  317.  
  318.           <figure id="label-responsive-2" class="responsive">
  319.              <img src="img/label-responsive-2.png" class="label-responsive-2">
  320.           </figure>
  321.  
  322.           <figure id="thumb-fotos">
  323.             <img src="img/thumb-fotos.png" class="thumb-fotos">
  324.           </figure>
  325.  
  326.           <article id="one-page-experience-text-responsive">
  327.             <p class="txt-info-experience-1-responsive">Vivencie Uma Nova Experiência</p>
  328.             <p class="txt-info-experience-2-responsive">Bem localizado, arrojado, compacto e idela para você.<br>O Rái Rooftop comporta diferentes
  329.             <br>configurações<br>e proporciona liberdade e personalização ao seu evento.</p>
  330.             <p class="txt-info-experience-3-responsive">Vai de música ao vivo? Aqui a banda da sua festa tem<br>ambiente e liberdade
  331.             <br>para realizar um verdadeiro show.</p>
  332.             <p class="txt-info-experience-4-responsive">Venha Nos Conhecer e Vivencie o Inimaginável</p>
  333.           </article>
  334.         </section>
  335.         <!-- fim info responsive 1 -->
  336.  
  337.         <!-- formulario -->
  338.         <section id="formulario-responsive">
  339.           <figure id="label-responsive-3" class="responsive">
  340.              <img src="img/label-responsive-3.png" class="label-responsive-3">
  341.              <img src="img/img-responsive-1.png" class="img-responsive-1">
  342.           </figure>
  343.  
  344.           <div id="text-form-responsive" class="responsive">
  345.              <p class="text-form-responsive-1">Contato<br> & localização.</p><br>
  346.              <p class="text-form-responsive-2">Para mais informações,<br>preencha o formulario.</p>
  347.           </div>
  348.  
  349.           <form id="form-campos-responsive" class="responsive">
  350.             <p class="form-campos-nome-responsive">Nome</p>
  351.             <input type="text" name="text" class="nome">
  352.             <br>
  353.             <p class="form-campos-email-responsive">Email</p>
  354.             <input type="email" name="email" class="email">
  355.             <br>
  356.             <p class="form-campos-telefone-responsive">Telefone</p>
  357.             <input type="telefone" name="telefone" class="telefone">
  358.             <br>
  359.             <p class="form-campos-mensagem-responsive">Mensagem</p>
  360.             <textarea name="msg" class="mensagem"></textarea>
  361.             <br>
  362.             <a href="#" class="btn-enviar">Enviar</a>
  363.           </form>
  364.  
  365.         </section>
  366.         <!-- fim formulario -->
  367.  
  368.         <!-- fim formulario -->
  369.         <footer id="rodape-responsive">
  370.           <figure id="label-responsive-4" class="responsive">
  371.              <img src="img/label-responsive-4.png" class="label-responsive-4">
  372.              <img src="img/img-responsive-2.png" class="img-responsive-2">
  373.           </figure>
  374.  
  375.           <div id="contato-responsive">
  376.             <figure id="logo-rai-footer" class="responsive">
  377.                <img src="img/rai-logo-footer.png" class="rai-logo-footer">
  378.             </figure>
  379.  
  380.             <figure id="email-responsive" class="responsive">
  381.                <img src="img/e-mail-responsive.png" class="e-mail-responsive">
  382.                <a href="contato@espacorairooftop.com.br" class="e-mail-responsive">contato@espacorairooftop.com.br</a>
  383.             </figure>
  384.           </div>
  385.  
  386.         </footer>
  387.         <!-- fim formulario -->
  388.  
  389.      </div>
  390.      <!-- FIM MOBILE DESKTOP -->
  391.      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  392.      <script type="text/javascript" src="js/menu-mobile.js"></script>
  393.      <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  394.      <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
  395.      <script type="text/javascript" src="js/scrolltop.js"></script>
  396.      <script type="text/javascript" src="js/slideshow-eventos.js"></script>
  397.      <script type="text/javascript" src="js/validator.js"></script>
  398.      <script src="js/lightslider.js"></script>
  399.  
  400.      <script>
  401.  
  402.        $(function(){
  403.          $("#slides ul").cycle({
  404.            fx: 'fade',
  405.            speed: 1000,
  406.            timeout: 4000,
  407.            prev: '#previous',
  408.            next: '#next',
  409.          })
  410.        })
  411.  
  412.      </script>
  413.  
  414.      <script>
  415.          $(document).ready(function() {
  416.             $("#content-slider").lightSlider({
  417.                    loop:true,
  418.                    keyPress:true
  419.                });
  420.                $('#image-gallery').lightSlider({
  421.                    gallery:true,
  422.                    item:1,
  423.                    thumbItem:9,
  424.                    slideMargin: 0,
  425.                    speed:500,
  426.                    auto:true,
  427.                    loop:true,
  428.                    onSliderLoad: function() {
  429.                        $('#image-gallery').removeClass('cS-hidden');
  430.                    }
  431.                });
  432.         });
  433.      </script>
  434.  
  435.   </body>
  436. </html>
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!