"cadastro estilizada por mim"
Bootstrap 4.1.1 Snippet by letrux

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

Now UI Kit

Questions / Comments: