<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>
