"login"
Bootstrap 4.1.1 Snippet by Stefano97

<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 ----------> </head> <body> <div class="wrapper"> <header> <nav> <!------ inicio conteudo nav-bar ----------> <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</a></li> <li><a href="../blog.html">Blog</a></li> <li><a href="../contato.html">Contato</a></li> <li><a href="../sobrenos.html">Sobre nós</a></li> </ul> </div> </nav> <!------ inicio conteudo nav-bar ----------> <!------ inicio conteudo login ----------> <div class="cotn_principal"> <div class="cont_login"> <div class="cont_info_log_sign_up"> <div class="col_md_login"> <div class="cont_ba_opcitiy"> <h2>LOGIN</h2> <p></p> <button class="btn_login" onclick="cambiar_login()">LOGIN</button> </div> </div> <div class="col_md_sign_up"> <div class="cont_ba_opcitiy"> <h2>CADASTRAR</h2> <p></p> <button class="btn_sign_up" onclick="cambiar_sign_up()">CADASTRAR </button> </div> </div> </div> <div class="cont_centrar"> <div class="cont_back_info"> <div class="cont_img_back_grey"> <img src="https://www.gtagangwars.de/suite/images/styleLogo-6bd77433ddf78bd8477ea7306e804f677bc925d0.png" alt="" /> </div> </div> <div class="cont_forms" > <div class="cont_img_back_"> <img src="https://www.gtagangwars.de/suite/images/styleLogo-6bd77433ddf78bd8477ea7306e804f677bc925d0.png" alt="" /> </div> <div class="cont_form_login"> <a href="#" onclick="ocultar_login_sign_up()" ><i class="material-icons"></i></a> <h2>LOGIN</h2> <input type="text" placeholder="Nome do usuário" /> <input type="password" placeholder="senha" /> <button class="btn_login" onclick="cambiar_login()">LOGIN</button> </div> <div class="cont_form_sign_up"> <a href="#" onclick="ocultar_login_sign_up()"><i class="material-icons"></i></a> <h2>CADASTRAR</h2> <input type="text" placeholder="Nome do usuário" /> <input type="password" placeholder="Senha" /> <input type="password" placeholder="Confirmar senha" /> <a href="./cadastro.php"><button class="btn_sign_up" onclick="cambiar_sign_up()">CADASTRAR</button></a> </div> </div> </div> </div> </div> </div> <!------ fim conteudo login ----------> </header>
<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: url(https://png.pngtree.com/thumb_back/fw800/background/20190223/ourmid/pngtree-black-gold-background-golden-streamer-commendation-assembly-background-material-goldgolden-streameraward-image_73706.jpg) 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: white; 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: white; 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: black; 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; } } * { margin: 0px auto; padding: 0px; text-align: center; font-family: 'Open Sans', sans-serif; } .cotn_principal { position: absolute; width: 100%; height: 100%; margin-top: 100px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cfd8dc+0,607d8b+100,b0bec5+100 */ /* Old browsers */ } .cont_centrar { position: relative; float: left; width: 100%; } .cont_login { position: relative; width: 640px; left: 50%; margin-left: -320px; } .cont_back_info { position: relative; float: left; width: 640px; height: 280px; overflow: hidden; background-color: #fff; margin-top: 100px; box-shadow: 1px 10px 30px -10px rgba(0,0,0,0.5); } .cont_forms { position: absolute; overflow: hidden; top:100px; left: 0px; width: 320px; height: 280px; background-color: #eee; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .cont_forms_active_login { box-shadow: 1px 10px 30px -10px rgba(0,0,0,0.5); height: 420px; top:20px; left: 0px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .cont_forms_active_sign_up { box-shadow: 1px 10px 30px -10px rgba(0,0,0,0.5); height: 420px; top:20px; left:320px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .cont_img_back_grey { position: absolute; width: 950px; top:-80px; left: -116px; } .cont_img_back_grey > img { width: 100%; -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.2; animation-name: animar_fondo; animation-duration: 20s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } .cont_img_back_ { position: absolute; width: 950px; top:-80px; left: -116px; } .cont_img_back_ > img { width: 100%; opacity: 0.3; animation-name: animar_fondo; animation-duration: 20s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } .cont_forms_active_login > .cont_img_back_ { top:0px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .cont_forms_active_sign_up > .cont_img_back_ { top:0px; left: -435px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .cont_info_log_sign_up { position: absolute; width: 640px; height: 280px; top: 100px; z-index: 1; } .col_md_login { position: relative; float: left; width: 50%; } .col_md_login > h2 { font-weight: 400; margin-top: 70px; color: #757575; } .col_md_login > p { font-weight: 400; margin-top: 15px; width: 80%; color: #37474F; } .btn_login { background-color: #bc8a2f; border: none; padding: 10px; width: 200px; border-radius:3px; box-shadow: 1px 5px 20px -5px rgba(0,0,0,0.4); color: #fff; margin-top: 10px; cursor: pointer; } .col_md_sign_up { position: relative; float: left; width: 50%; } .cont_ba_opcitiy > h2 { font-weight: 400; color: #fff; } .cont_ba_opcitiy > p { font-weight: 400; margin-top: 15px; color: #fff; } /* ---------------------------------- background texto ------------------------------------ */ .cont_ba_opcitiy { position: relative; background-color: rgba(120, 144, 156, 0.55); width: 80%; border-radius:3px ; margin-top: 60px; padding: 15px 0px; } .btn_sign_up { background-color: #bc8a2f; border: none; padding: 10px; width: 200px; border-radius:3px; box-shadow: 1px 5px 20px -5px rgba(0,0,0,0.4); color: #fff; margin-top: 10px; cursor: pointer; } .cont_forms_active_sign_up { z-index: 2; } @-webkit-keyframes animar_fondo { from { -webkit-transform: scale(1) translate(0px); -moz-transform: scale(1) translate(0px); -ms-transform: scale(1) translate(0px); -o-transform: scale(1) translate(0px); transform: scale(1) translate(0px); } to { -webkit-transform: scale(1.5) translate(50px); -moz-transform: scale(1.5) translate(50px); -ms-transform: scale(1.5) translate(50px); -o-transform: scale(1.5) translate(50px); transform: scale(1.5) translate(50px); } } @-o-keyframes identifier { from { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } } @-moz-keyframes identifier { from { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } } @keyframes identifier { from { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } } .cont_form_login { position: absolute; opacity: 0; display: none; width: 320px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .cont_forms_active_login { z-index: 2; } .cont_forms_active_login >.cont_form_login { } .cont_form_sign_up { position: absolute; width: 320px; float: left; opacity: 0; display: none; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .cont_form_sign_up > input { text-align: left; padding: 15px 5px; margin-left: 10px; margin-top: 20px; width: 260px; border: none; color: #757575; } .cont_form_sign_up > h2 { margin-top: 50px; font-weight: 400; color: #757575; } .cont_form_login > input { padding: 15px 5px; margin-left: 10px; margin-top: 20px; width: 260px; border: none; text-align: left; color: #757575; } .cont_form_login > h2 { margin-top: 110px; font-weight: 400; color: #757575; } .cont_form_login > a,.cont_form_sign_up > a { color: #757575; position: relative; float: left; margin: 10px; margin-left: 30px; } </style>
<script> /* ------------------------------------ Clique em Login e Cadastre-se para mudar e ver o efeito --------------------------------------- */ function cambiar_login() { document.querySelector('.cont_forms').className = "cont_forms cont_forms_active_login"; document.querySelector('.cont_form_login').style.display = "block"; document.querySelector('.cont_form_sign_up').style.opacity = "0"; setTimeout(function(){ document.querySelector('.cont_form_login').style.opacity = "1"; },400); setTimeout(function(){ document.querySelector('.cont_form_sign_up').style.display = "none"; },200); } function cambiar_sign_up(at) { document.querySelector('.cont_forms').className = "cont_forms cont_forms_active_sign_up"; document.querySelector('.cont_form_sign_up').style.display = "block"; document.querySelector('.cont_form_login').style.opacity = "0"; setTimeout(function(){ document.querySelector('.cont_form_sign_up').style.opacity = "1"; },100); setTimeout(function(){ document.querySelector('.cont_form_login').style.display = "none"; },400); } function ocultar_login_sign_up() { document.querySelector('.cont_forms').className = "cont_forms"; document.querySelector('.cont_form_sign_up').style.opacity = "0"; document.querySelector('.cont_form_login').style.opacity = "0"; setTimeout(function(){ document.querySelector('.cont_form_sign_up').style.display = "none"; document.querySelector('.cont_form_login').style.display = "none"; },500); } $(document).ready(function() { $(".menu-icon").on("click", function() { $("nav ul").toggleClass("showing"); }); }); // Efeito rolagem nav-bar $(window).on("scroll", function() { if($(window).scrollTop()) { $('nav').addClass('black'); } else { $('nav').removeClass('black'); } }) </script>

Related: See More


Questions / Comments: