Login

HTML: ``` Login

CSS: ``` @import url('[url=[https://fonts.googleapis.com/css?family=Roboto'](https://fonts.googleapis.com/css?family=Roboto));][https://fonts.googleapis.com/css?family=Roboto'](https://fonts.googleapis.com/css?family=Roboto));[/url] html, body{ ``` font-family: 'Roboto', sans-serif; width:100%; background-image:-webkit-linear-gradient(#5b82c1,#74a6f7); margin:0; padding:0; } ``` body{ ``` display: flex; justify-content: center; align-items: center; } #box{ display:flex; align-items: center; flex-flow: column wrap; width: 30%; background-color:#fff; padding:18px; } ``` h1{ ``` color:#5b82c1; font-size:2em; ; } ``` form{ ``` width:90%; } ``` form input{ ``` border:none; } ``` form input[type="text"], form input[type="email"], form input[type="password"]{ ``` width:100%; height:35px; font-size:20px; margin-bottom:8%; } ``` form input[type="submit"]{ ``` background-color:#5b82c1; width:95px; height:45px; font-size:1.5em; color:#fff; margin-left:46%; } ``` button{ ``` border:none; background-color:#5b82c1; width:95px; height:45px; font-size:1.5em; color:#fff; } .hiddenclass{ display:none; } .showclass{ display:block; } o código que em javascript que tentei: var form1, form2, btns, btnl; window.onload = function () { form1 = document.getElementById("form1"); form2 = document.getElementById("form2"); btns = document.getElementById("btns"); btnl = document.getElementById("btnl"); form2.className = "hiddenclass"; btns.addEventListener("click", function(){ form1.className = "hiddenclass"; form2.className = "shownclass"; }); btnl.addEventListener("click", function(){ form1.className = "shownclass"; form2.className = "hiddenclass"; }); }; ```

Login

Signup

jaojpaulo

Como faço para trocar de visível para invisível entre dois formulários