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 estilizada por mim"
Bootstrap 4.1.1 Snippet by
letrux
4.1.1
Preview
HTML
CSS
View Full Screen
Fork
Fork this
231
 
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 ----------> <!DOCTYPE html> <html> <head> <link rel="icon" href="icones/ahbordo_icone.png"><!--para mostrar o icone na tab da página--> <title>Ah Bordo | Cadastro</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="estilos/index.css"><!--link para o estilo da pagina--> <link rel="stylesheet" href="js/index.css"><!--link para o js da pagina inicial--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <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> <link href="https://fonts.googleapis.com/css?family=Raleway:800,300" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style type="text/css"> .height-100 { background: #e74c3c; height: 100vh; } @media (max-width: 767px) { h1 { font-size: 2rem; } p { font-size: 1rem; font-weight: 300; } } #esquerda { float: left; width: 50%; } #direita { float: right; width: 50%; } </style> </head> <body> <!-- Navbar presa no topo --> <div class="w3-top"> <div class="w3-bar w3-white w3-wide w3-padding w3-card "> <a href="index.html" class="w3-bar-item"><img src="imagens/ahbordo_logo.png" style="width: 20%;"></a> <!-- Float links mas não os esconde --> <div class="w3-right"> <a href="voluntariado.html" class="w3-bar-item w3-button">Bora ajudar?</a> <a href="transporte.html" class="w3-bar-item w3-button">Fui!</a> <a href="mepoupe.html" class="w3-bar-item w3-button">Me poupe!</a> <a href="destinos.html" class="w3-bar-item w3-button">Brota aí!</a> <a href="#" class="w3-bar-item w3-button">Cadastro</a> <a href="login.html" class="w3-bar-item w3-button">Login</a> </div> </div> </div> <header></header> <!-- Conteúdo da página vai aqui dentro, já está estilizado, não mexer --> <div class="container"> <section class="height-85%"> <div id="panel"> <div id="esquerda"> <img src="imagens/aventura.jpg" width="400" height="250"> <form action = "cadastro/cadastroviajante.php" method = "post"><br> <button type="submit" class="form-submit-button submit-button btn-outline-info jsTest-submitField" data-component="button" data-content=""> Area do Voluntário </button> </form> </div> <div class="direita"> <img src="imagens/hotel.jpg" width="400" height="250"> <form action = "cadastro/cadastrohostel.php" method = "post"><br> <button type="submit" class="form-submit-button submit-button btn-outline-info jsTest-submitField" data-component="button" data-content=""> Area do Hostel </button> </form> </div> </div> </section> </div> <!-- fim do conteúdo da página --> </div> <!-- Rodapé --> <link rel="stylesheet" href="estilos/rodape.css"><!--link para o estilo externo do rodapé--> <section id="footer"> <div class="container"> <div class="row text-center text-xs-center text-sm-left text-md-left"><!--responsividade do rodapé--> <div class="col-xs-12 col-sm-4 col-md-4"> <img id="logo" src="imagens/ahbordo_logo.png" style="width: 470px;height: 300px;"><!--estilização em linha da logo do fim da página--> </div> <div class="col-xs-12 col-sm-4 col-md-4"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-5"><!--responsividade do rodapé--> <ul class="list-unstyled list-inline social text-center"><!--responsividade do rodapé--> <li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li> <li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li> <li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li> <li class="list-inline-item"><a href="#"><i class="fa fa-google-plus"></i></a></li> <li class="list-inline-item"><a href="#" target="_blank"><i class="fa fa-envelope"></i></a></li> </ul> </div> <hr> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white"><!--responsividade do rodapé, classes com cores e alinhamento no css--> <p><h6>Ah Bordo com você.</h6> </p> <p class="h6">© Todos os Direitos reservados. Imagens by<a href="http://www.freepik.com">Freepik Template by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank">w3.css</a></p><!--direitos autorais dos códigos utilizados e alterados nesta página--> </div> <hr> </div> </div> </section> </div> <!-- fim rodapé --> </body> </html>
html, body { margin: 0; padding: 0; width: 100%; } body { font-weight: lighter; font-size: 16px; font-family: "Raleway", sans-serif; } /*em vez da foto na pagina inicial adiciona um espaço entre a navbar e o conteúdo para funcionar ok a responsividade*/ header { width: 15%; height: 15vh; background-size: cover; } h1 { font-size: 4rem; } p { font-size: 2.5rem; font-weight: 300; } section { display: table; width: 100%; } .center{ margin-top: 10px; } .height-88 { background: #FF6347; height: 80vh; } .height-75 { background: #4682B4; height: 78vh; } .height-95 { background: white; height: 95vh; } .height-20 { background: white; height: 20vh; text-align: center; } .height-85 { background: #4169E1; height: 100vh; text-align: center; } .content { color: #ffffff; display: table-cell; vertical-align: middle; padding: 7%; } #logo{ width: 40% } .logo { line-height: 60px; position: fixed; float: center; margin: 16px 46px; color: #fff; font-weight: bold; font-size: 20px; letter-spacing: 2px; align-content: center; } body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif} body, html { height: 100%; line-height: 1.8; } /* Full height image header */ .bgimg-1 { background-position: center; background-size: cover; background-image: url("/w3images/mac.jpg"); min-height: 100%; } .w3-bar .w3-button { padding: 16px; } @media (max-width: 767px) { h1 { font-size: 2rem; } p { font-size: 1.5rem; font-weight: 300; } header { width: 25%; height: 25vh; background-size: cover; } } /* css do rodapé */ @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); section { padding: 60px 0; } section .section-title { text-align: center; color: #007b5e; margin-bottom: 50px; text-transform: uppercase; } #footer { background: black !important; } #footer h5{ padding-left: 10px; border-left: 3px solid #eeeeee; padding-bottom: 6px; margin-bottom: 20px; color:#ffffff; } #footer a { color: #ffffff; text-decoration: none !important; background-color: transparent; -webkit-text-decoration-skip: objects; } #footer ul.social li{ padding: 3px 0; } #footer ul.social li a i { margin-right: 5px; font-size:25px; -webkit-transition: .5s all ease; -moz-transition: .5s all ease; transition: .5s all ease; } #footer ul.social li:hover a i { font-size:30px; margin-top:-10px; } #footer ul.social li a, #footer ul.quick-links li a{ color:#ffffff; } #footer ul.social li a:hover{ color:#eeeeee; } #footer ul.quick-links li{ padding: 3px 0; -webkit-transition: .5s all ease; -moz-transition: .5s all ease; transition: .5s all ease; } #footer ul.quick-links li:hover{ padding: 3px 0; margin-left:5px; font-weight:700; } #footer ul.quick-links li a i{ margin-right: 5px; } #footer ul.quick-links li:hover a i { font-weight: 700; } @media (max-width:767px){ #footer h5 { padding-left: 0; border-left: transparent; padding-bottom: 0px; margin-bottom: 10px; } }
Related:
See More
Template
Paper Dashboard 2 PRO
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76