I have been working on creating a login page that will appear in front of the main webpage. Through my online research, I discovered a technique to blur the main webpage background until the user logs in. Below is the code snippet:
HTML:
<div id="login">
<form class="form-signin">
<span id="reauth-email"><h2>Login</h2></span>
<input type="email" id="inputEmail" placeholder="Email address">
<input type="password" id="inputPassword" placeholder="Password">
<div id="remember" class="checkbox">
</div>
<button class="btn btn-lg btn-primary btn-block btn-signin" id="btn_login" type="submit">Sign in</button>
</form>
</div>
<div id="main">
<div id="div1">12345</div>
<div id="div2">67890</div>
<div id="div3">abcde</div>
</div>
CSS:
#div1{height:30px; width:400px;background-color:red}
#div2{height:300px; width:400px; background-color:yellow}
#div3{height:30px; width:400px; background-color:green}
#main
{-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
width: 100px;
height: 100px;
background-color: #ccc;}
#login{position:relative; top:180px; left:70px; width:35%; background-color: white; border:2px solid black; padding:0px 20px 20px 20px; border-radius: 10px; z-index: 1000;}
I am facing an issue where the "main" div does not extend to the top of the page (leaving a white space) after placing the "login" div in the middle of the page. How can I fix this?
Additionally, how can I unblur the background once the user successfully logs in?