Advertisement
son86000

cadastro-anunciante.html

Aug 23rd, 2017
291
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 19.28 KB | None | 0 0
  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Classi Ofertas ::: Cadastro do Anunciante</title>
  6.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7.         <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
  8.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  9.         <link rel="stylesheet" type="text/css" href="css/cadastro-anunciante.css">
  10.     </head>
  11.  
  12.     <body>
  13.  
  14.       <!-- DESKTOP VERSION -->
  15.       <div id="desktop-version">
  16.  
  17.             <!-- Cabeclaho -->
  18.             <header id="cabecalho">
  19.  
  20.                    
  21.                   <nav id="menu">
  22.                     <div id="trace"></div><br>
  23.                     <div id="trace"></div><br>
  24.                     <div id="trace"></div>
  25.                   </nav>
  26.  
  27.                     <!-- Menu depois de clicado -->
  28.                     <nav id="menu-after">
  29.                         <ul>
  30.                            <li><a href="#" class="sub-menu">Todas as Ofertas</a></li>
  31.                            <li><a href="#" class="sub-menu">Ofertas em sua cidade</a></li>
  32.                            <li><a href="#" class="sub-menu">Categorias</a></li>
  33.                            <li><a href="#" class="sub-menu">Como funciona</a></li>
  34.                            <li><a href="#" class="sub-menu">Quero anunciar</a></li>
  35.                            <li><a href="#" class="sub-menu">Tire suas dúvidas</a></li>
  36.                            <li><a href="#" class="sub-menu">Contato</a></li>
  37.                         </ul>
  38.                     </nav>
  39.  
  40.                     <nav id="sub-menu">
  41.                         <ul>
  42.                            <li><a href="#">Link 1</a></li>
  43.                            <li><a href="#">Link 2</a></li>
  44.                            <li><a href="#">Link 3</a></li>
  45.                         </ul>
  46.                     </nav>
  47.  
  48.                   <figure id="logo">
  49.                  <img src="img/logo.png" class="logo">
  50.                 </figure>
  51.  
  52.                   <div id="cabecalho" class="responsive">
  53.                    
  54.                     <div id="search">
  55.                          <a href="login-anunciante.html" class="btn-login">Login do Anunciante</a>
  56.                     </div>
  57.  
  58.                 </div>
  59.  
  60.                 <div id="cabecalho-area">
  61.                 </div>
  62.  
  63.                 <div id="block-title" class="responsive">
  64.                   <p class="cadastro-title">Cadastro</p>
  65.                 </div>
  66.  
  67.              </header>
  68.              <!-- Fim Cabeclaho -->
  69.  
  70.              <!-- Anunciante Intro -->
  71.              <section id="cadastro-anunciante-intro">
  72.                 <article id="cadastro-anunciante-intro" class="responsive">
  73.                    <p class="cadastro-anunciante-intro-title">Como Funciona</p>
  74.                    <br>
  75.                    <p class="cadastro-anunciante-intro-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  76.                    <br><br>
  77.                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  78.                    </p>
  79.                 </article>
  80.              </section>
  81.              <!-- Anunciante Intro -->
  82.  
  83.              <!-- Form  -->
  84.              <section id="form">
  85.                 <article id="form" class="responsive">
  86.  
  87.                    <form action="" method="" id="cadastro-anunciante" name="ca" onsubmit="return validar()">
  88.                       <p class="cadastro-anunciante-form-title">Preencha as informações abaixo:</p>
  89.  
  90.                             <span class="error-message">Preencha todos os campos para prosseguir</span>
  91.  
  92.                             <input type="text" name="razaosocial" class="razaosocial" placeholder="Razão social:" required>
  93.                             <br><br><br><br>
  94.  
  95.                         <div id="cadastro-left">
  96.  
  97.                             <input type="text" name="ins_municipal" class="ins_municipal" placeholder="Inscrição municipal:" required>
  98.                             <br><br><br><br>
  99.                             <input type="text" name="end_cobranca" class="end_cobranca" placeholder="Endereço de cobrança:" required>
  100.                             <br><br><br><br>
  101.                             <input type="text" name="cep" class="cep" placeholder="CEP:" required>
  102.                             <br><br><br><br>
  103.                             <input type="text" name="bairro" class="bairro" placeholder="Bairro:" required>
  104.                             <br><br><br><br>
  105.                             <input type="text" name="numero" class="numero" placeholder="Número:" required>
  106.  
  107.                         </div>
  108.  
  109.                         <div id="cadastro-right">
  110.                      
  111.                             <input type="text" name="ins_estadual" class="ins_estadual" placeholder="Inscrição estadual:" required>
  112.                             <br><br><br><br>
  113.                             <input type="text" name="cnpj" class="cnpj" placeholder="CNPJ:" required>
  114.                             <br><br><br><br>
  115.                             <input type="text" name="endereco" class="endereco" placeholder="Endereço:" required>
  116.                             <br><br><br><br>
  117.                             <input type="text" name="cidade" class="cidade" placeholder="Cidade:" required>
  118.                            
  119.  
  120.                         </div>
  121.  
  122.                   </form>
  123.  
  124.                   <div id="formas-de-pagamento" class="responsive">
  125.  
  126.                       <div class="last-radio">
  127.  
  128.                       <div  class="last-radio-1">
  129.                         <input type="radio" name="promocoes" value="promocoes">&nbsp;&nbsp;<p>Desejo receber promoçõs do Classi Ofertas</p>
  130.                       </div>
  131.  
  132.                       <br><br>
  133.  
  134.                       <div  class="last-radio-2">
  135.                         <input type="radio" name="termos_servico" value="termos_servico">&nbsp;&nbsp;<p>Concordo com os termos de serviço e a política de privacidade do site</p>
  136.                       </div>
  137.  
  138.                       <input type="submit" value="cadastrar" class="btn-cadastrar">
  139.  
  140.                   </div>
  141.  
  142.                 </article>
  143.  
  144.              </section>
  145.              <!-- Fim Form  -->
  146.  
  147.              <!-- Rodapé -->
  148.              <footer id="rodape">
  149.                   <article id="rodape" class="responsive">
  150.  
  151.                         <ul class="rodape-links-1">
  152.                             <li><a href="#">Como Funciona</a></li>
  153.                             <li><a href="#">Política de Privacidade</a></li>
  154.                             <li><a href="#">Quem Somos</a></li>
  155.                             <li><a href="#">Termos de Uso</a></li>
  156.                         </ul>
  157.  
  158.                         <ul class="rodape-links-2">
  159.                             <li><a href="#">Categorias / Subcategorias</a></li>
  160.                             <li><a href="#">Cidades / Estados</a></li>
  161.                         </ul>
  162.  
  163.                         <ul class="rodape-links-3">
  164.                             <li><a href="#">FAQ</a></li>
  165.                             <li><a href="#">Anuncie</a></li>
  166.                             <li><a href="#">Fale Conosco</a></li>
  167.                         </ul>
  168.                    
  169.  
  170.                   </article>
  171.  
  172.                   <article id="cartoes-newsletter">
  173.  
  174.                   <div id="cartoes-newsletter" class="responsive">
  175.  
  176.                      <figure id="cartao">
  177.                         <p class="cartao-title">Aceitamos todos os cartões de crédito e débito</p><br>
  178.                         <img src="img/cartoes.jpg" class="cartoes">
  179.                      </figure>
  180.  
  181.                      <figure id="certificado">
  182.                         <p class="certificado-title">Certificados de Segurança</p><br>
  183.                         <img src="img/certificados.jpg" class="certificado">
  184.                      </figure>
  185.  
  186.                      <div id="newsletter">
  187.                         <p class="newsletter-title">cadastre-se e receba novidades!</p>
  188.                         <input type="text" name="nome" class="nome" placeholder="Nome:">
  189.                         <input type="text" name="email" class="email" placeholder="Email:">
  190.                         <a href="#" class="btn-inscrever">Inscrever</a>
  191.                      </div>
  192.  
  193.                   </div>
  194.  
  195.                   </article>
  196.  
  197.                   <article id="copyright">
  198.  
  199.                      <div id="copyright" class="responsive">
  200.                         <p class="copyright-title">Classi Ofertas 2017 LTDA - Todos os direitos reservados.</p>
  201.                      </div>
  202.  
  203.                   </article>
  204.              </footer>
  205.              <!-- Fim Rodapé -->
  206.  
  207.       </div>
  208.       <!-- FIM DESKTOP VERSION -->
  209.  
  210.       <!-- MOBILE VERSION -->
  211.       <div id="mobile-version">
  212.  
  213.           <!-- HEADER RESPONSIVE -->
  214.           <header id="cabecalho-responsive">
  215.  
  216.               <nav id="menu-hamburger-responsive">
  217.                   <div id="trace"></div><br>
  218.                   <div id="trace"></div><br>
  219.                   <div id="trace"></div>
  220.               </nav>
  221.              
  222.               <figure id="logo">
  223.                    <img src="img/logo.png" class="logo">
  224.               </figure>
  225.              
  226.               <!-- CABECALHO RESPONSIVE -->
  227.               <div id="cabecalho-responsive" class="responsive">
  228.  
  229.                 <div id="block-title" class="responsive">
  230.                   <p class="cadastro-title">Cadastro</p>
  231.                 </div>
  232.                  
  233.               </div>
  234.               <!-- FIM CABECALHO RESPONSIVE -->
  235.  
  236.               <!-- SUB MENU 1-->
  237.               <nav id="sub-menu-1">
  238.                 <div id"menu-collapse" class="responsive">
  239.                     <ul>
  240.                       <li><a href="#" class="sub-menu-link-1">Todas as ofertas</a></li>
  241.                       <li><a href="#" class="sub-menu-link-1">Ofertas em sua cidade</a></li>
  242.                       <li><a href="#" class="sub-menu-link-1">Categorias</a></li>
  243.                       <li><a href="#" class="sub-menu-link-1">Como funciona</a></li>
  244.                       <li><a href="#" class="sub-menu-link-1">Quero anunciar</a></li>
  245.                       <li><a href="#" class="sub-menu-link-1">Tire suas dúvidas</a></li>
  246.                       <li><a href="#" class="sub-menu-link-1">Contato</a></li>
  247.                     </ul>
  248.                 </div>
  249.               </nav>
  250.               <!-- FIM SUB MENU 1-->
  251.              
  252.           </header>
  253.           <!-- FIM HEADER RESPONSIVE -->
  254.          
  255.          
  256.          
  257.           <!-- SEARCH RESPONSIVE -->
  258.           <section id="cabecalho-area-responsive">
  259.               <article id="cabecalho-area-responsive" class="responsive">
  260.                  
  261.                  
  262.                  
  263.               </article>
  264.           </section>
  265.           <!-- FIM SEARCH RESPONSIVE -->
  266.  
  267.           <!-- Anunciante Intro -->
  268.              <section id="cadastro-anunciante-intro">
  269.                 <article id="cadastro-anunciante-intro" class="responsive">
  270.                    <p class="cadastro-anunciante-intro-title">Como Funciona</p>
  271.                    <br>
  272.                    <p class="cadastro-anunciante-intro-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  273.                    <br><br>
  274.                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  275.                    </p>
  276.                 </article>
  277.              </section>
  278.              <!-- Anunciante Intro -->
  279.  
  280.              <!-- Form  -->
  281.              <section id="form">
  282.                 <article id="form" class="responsive">
  283.  
  284.                    <form action="" method="" id="cadastro-anunciante-responsive" name="car">
  285.                       <p class="cadastro-anunciante-form-title">Preencha as informações abaixo:</p>
  286.  
  287.  
  288.                             <input type="text" name="razaosocial" class="razaosocial" placeholder="Razão social:" required>
  289.                             <br><br><br><br>
  290.  
  291.                         <div id="cadastro-left">
  292.  
  293.                             <input type="text" name="ins_municipal" class="ins_municipal" placeholder="Inscrição municipal:" required>
  294.                             <br><br><br><br>
  295.                             <input type="text" name="end_cobranca" class="end_cobranca" placeholder="Endereço de cobrança:" required>
  296.                             <br><br><br><br>
  297.                             <input type="text" name="cep" class="cep" placeholder="CEP:" required>
  298.                             <br><br><br><br>
  299.                             <input type="text" name="bairro" class="bairro" placeholder="Bairro:" required>
  300.                             <br><br><br><br>
  301.                             <input type="text" name="numero" class="numero" placeholder="Número:" required>
  302.  
  303.                         </div>
  304.  
  305.                         <div id="cadastro-right">
  306.                      
  307.                             <input type="text" name="ins_estadual" class="ins_estadual" placeholder="Inscrição estadual:" required>
  308.                             <br><br><br><br>
  309.                             <input type="text" name="cnpj" class="cnpj" placeholder="CNPJ:" required>
  310.                             <br><br><br><br>
  311.                             <input type="text" name="endereco" class="endereco" placeholder="Endereço:" required>
  312.                             <br><br><br><br>
  313.                             <input type="text" name="cidade" class="cidade" placeholder="Cidade:" required>
  314.                            
  315.  
  316.                         </div>
  317.  
  318.                   </form>
  319.  
  320.                   <div id="formas-de-pagamento" class="responsive">
  321.  
  322.                       <div class="last-radio">
  323.  
  324.                       <div  class="last-radio-1">
  325.                         <input type="radio" name="promocoes" value="promocoes">&nbsp;&nbsp;<p>Desejo receber promoçõs do Classi Ofertas</p>
  326.                       </div>
  327.  
  328.                       <br><br>
  329.  
  330.                       <div  class="last-radio-2">
  331.                         <input type="radio" name="termos_servico" value="termos_servico">&nbsp;&nbsp;<p>Concordo com os termos de serviço e a política de privacidade do site</p>
  332.                       </div>
  333.  
  334.                       <input type="submit" value="cadastrar" class="btn-cadastrar">
  335.  
  336.                   </div>
  337.  
  338.                 </article>
  339.  
  340.           </section>
  341.           <!-- Fim Form  -->
  342.  
  343.           <!-- Rodapé -->
  344.           <footer id="rodape">
  345.               <article id="rodape" class="responsive">
  346.  
  347.                       <ul class="rodape-links-1">
  348.                       <li><a href="#">Como Funciona</a></li>
  349.                       <li><a href="#">Política de Privacidade</a></li>
  350.                       <li><a href="#">Quem Somos</a></li>
  351.                       <li><a href="#">Termos de Uso</a></li>
  352.                     </ul>
  353.  
  354.                     <ul class="rodape-links-2">
  355.                       <li><a href="#">Categorias / Subcategorias</a></li>
  356.                       <li><a href="#">Cidades / Estados</a></li>
  357.                     </ul>
  358.  
  359.                     <ul class="rodape-links-3">
  360.                       <li><a href="#">FAQ</a></li>
  361.                       <li><a href="#">Anuncie</a></li>
  362.                       <li><a href="#">Fale Conosco</a></li>
  363.                     </ul>
  364.                  
  365.  
  366.                 </article>
  367.  
  368.                 <article id="cartoes-newsletter">
  369.  
  370.                   <div id="cartoes-newsletter" class="responsive">
  371.  
  372.                      <figure id="cartao">
  373.                       <p class="cartao-title">Aceitamos todos os cartões de crédito e débito</p><br>
  374.                       <img src="img/cartoes.jpg" class="cartoes">
  375.                      </figure>
  376.  
  377.                      <figure id="certificado">
  378.                       <p class="certificado-title">Certificados de Segurança</p><br>
  379.                       <img src="img/certificados.jpg" class="certificado">
  380.                      </figure>
  381.  
  382.                      <div id="newsletter">
  383.                       <p class="newsletter-title">cadastre-se e receba novidades!</p>
  384.                       <input type="text" name="nome" class="nome" placeholder="Nome:">
  385.                       <input type="text" name="email" class="email" placeholder="Email:">
  386.                       <a href="#" class="btn-inscrever">Inscrever</a>
  387.                      </div>
  388.  
  389.                   </div>
  390.  
  391.                 </article>
  392.  
  393.                 <article id="copyright">
  394.  
  395.                    <div id="copyright" class="responsive">
  396.                     <p class="copyright-title">Classi Ofertas 2017 LTDA - Todos os direitos reservados.</p>
  397.                    </div>
  398.  
  399.               </article>
  400.             </footer>
  401.              <!-- Fim Rodapé -->
  402.          
  403.       </div>
  404.       <!-- FIM MOBILE VERSION -->
  405.  
  406.        <!-- Scripts -->
  407.        <script type="text/javascript" src="js/menus.js"></script>
  408.        <script type="text/javascript" src="js/menu-responsive.js"></script>
  409.        <script type="text/javascript" src="js/slider.js"></script>
  410.        <script type="text/javascript" src="js/pop-up-login.js"></script>
  411.        <script type="text/javascript" src="js/validacao-anunciante.js"></script>
  412.  
  413.     </body>
  414. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement