Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"cadastro"
Bootstrap 4.1.1 Snippet by
Stefano97
4.1.1
jQuery
Preview
HTML
CSS
JS
View Full Screen
Fork
Fork this
417
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <?php include_once("conexao.php"); ?> <div class="wrapper"> <header> <nav> <div class="menu-icon"> <i class="fa fa-bars fa-2x"></i> </div> <div class="logo"> AH BORDO </div> <div class="menu"> <ul> <li><a href="../index.html">Iníco</a></li> <li><a href="../pacotes.html">Pacotes</a></li> <li><a href="login.html">Login</a></li> <li><a href="../blog.html">Blog</a></li> <li><a href="../contato.html">Contato</a></li> <li><a href="../sobrenos.htm">Sobre nós</a></li> </ul> </div> </nav> <!------ conteudo nav-bar ----------> <section id="form"><!------ inicio conteudo formulario ----------> <div class="container pt-5 pb-5"> <div class="row"> <div class="col-md-12 text-center"> <h4 class="text-uppercase"> <span class="blue"> faça seu cadastro</span> </h4> <p>É muito importante que você preencha todos os campos para realizar o seu cadastro</p> <div class="row"> <div class="col-md-12"> <div class="form-row"> <div class="form-group col-md-6"> <h5 class="text-left">Dados cadastrais</h5> <form method="POST" action="processa.php"> <input type="name" name="nome" class="form-control" id="inputDado" placeholder="Seu nome"> </div> <div class="form-group col-md-6"> <h5 class="text-left">Dados de acesso</h5> <input type="email" name="email"class="form-control" id="inputDado" placeholder="Seu e-mail"> </div> <div class="form-group col-md-3"> <input type="cpf" name="cpf" class="form-control" id="inputDado" placeholder="Seu cpf"> </div> <div class="form-group col-md-3"> <input type="age" name="idade"class="form-control" id="inputDado" placeholder="Sua idade"> </div> <div class="form-group col-md-6"> <input type="password" name="senha" class="form-control" id="inputDado" placeholder="Senha"> </div> <div class="form-group col-md-1"> <input type="ddd" name="ddd" class="form-control" id="inputDado" placeholder="DDD"> </div> <div class="form-group col-md-3"> <input type="number" name="telefone" class="form-control" id="inputDado" placeholder="Seu telefone"> </div> <div class="form-group col-md-2"> <input type="cep" name="cep" class="form-control" id="inputDado" placeholder="Seu cep"> </div> <div class="form-group col-md-6"> <input type="password" name="confsenha" class="form-control" id="inputDado" placeholder="Confirme a senha"> </div> </div> <h5>Endereço</h5> <div class="form-group"> <label for="inputAddress"> Rua </label> <input type="text" name="rua" class="form-control" id="inputAddress" placeholder="nome/cep da rua"> </div> <div class="form-group"> <label for="inputAddress2"> Bairro </label> <input type="text" name="bairro" class="form-control" id="inputAddress2" placeholder="seu bairro"> </div> <div class="form-row"> <div class="form-group col-md-4"> <label for="inputCity"> Cidade </label> <input type="text" name="cidade" class="form-control" id="inputCity" placeholder="sua cidade"> </div> <div class="form-group col-md-2"> <label for="inputZip">Número</label> <input type="text" name="numero"class="form-control" id="inputZip" > </div> <div class="form-group col-md-4"> <label for="inputState">Complemento</label> <select id="inputState" class="form-control"> <option selected>Sim</option> <option selected>Não</option> </select> </div> <div class="form-group col-md-2"> <label for="inputZip">Complemento</label> <input type="text" name="complemento" class="form-control" id="inputZip" > </div> </div> <button type="submit" class="btn btn-primary">cadastrar</button> </div> </div> </div> </div> </div> </form> </section>
<style type="text/css"> html, body { margin: 0; padding: 0; width: 100%; } body { font-family: "Helvetica Neue",sans-serif; font-weight: lighter; } header { width: 100%; height: 100vh; background-color: white no-repeat 50% 50%; background-size: cover; position: fixed; } .content { width: 94%; margin: 4em auto; font-size: 20px; line-height: 30px; text-align: justify; } .logo { line-height: 60px; position: fixed; float: left; margin: 16px 46px; color: black; font-weight: bold; font-size: 20px; letter-spacing: 2px; } nav { position: fixed; width: 100%; line-height: 60px; } nav ul { line-height: 60px; list-style: none; background: rgba(0, 0, 0, 0); overflow: hidden; color: #fff; padding: 0; text-align: right; margin: 0; padding-right: 40px; transition: 1s; } nav.black ul { background: white; } nav ul li { display: inline-block; padding: 16px 40px;; } nav ul li a { text-decoration: none; color: black; font-size: 16px; } .menu-icon { line-height: 60px; width: 100%; background: #000; text-align: right; box-sizing: border-box; padding: 15px 24px; cursor: pointer; color: #fff; display: none; } @media(max-width: 786px) { .logo { position: fixed; top: 0; margin-top: 16px; } nav ul { max-height: 0px; background: #000; } nav.black ul { background: #000; } .showing { max-height: 34em; } nav ul li { box-sizing: border-box; width: 100%; padding: 24px; text-align: center; } .menu-icon { display: block; } } .row { margin-top: 40px; } .blue { color: #2CAFFD; } #inputDado { border-radius: 30px; border: 1px solid #000; } </style>
<script> $(document).ready(function() { $(".menu-icon").on("click", function() { $("nav ul").toggleClass("showing"); }); }); // Efeito rolagem $(window).on("scroll", function() { if($(window).scrollTop()) { $('nav').addClass('black'); } else { $('nav').removeClass('black'); } }) </script> <!------ script nav-bar ---------->
Related:
See More
Template
Vue Material Dashboard PRO
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76