Just starting out in the front end world! :D I'm having trouble setting the background of my login page. It's not extending to cover the entire page. Here's how it looks:https://i.sstatic.net/bQQLv.png
This is the HTML code I'm using:
<body>
<div class="login" >
<h3>Login </h3>
<form>
<div class="ema-pass">
<label for="email" >Email</label>
<br>
<input required type="text" style="border-radius: 5px;">
<br>
<label for="password" >Password</label>
<br>
<input type="password" style="border-radius: 5px;">
</div>
<button>Login</button>
<br>
<p>Or sign in with</p>
<div class="google-sign-in">
<div class="col-md-3">
<a class="btn-outline-dark" href="/users/googleauth" role="button" style="text-transform:none">
<img width="20px" style="margin-bottom:3px; margin-right:5px" alt="Google sign-in" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
</a>
</div>
</div>
<span>Don't have an account?
<a routerLink="/signUp">signUp</a></span>
</form>
</div>
</body>
The issue seems to be in the CSS section, specifically here:
body{
background: #4261cf;
background: -moz-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #3023ae), color-stop(100%, #53a0fd));
background: -webkit-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: -o-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: -ms-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$gradient-start', endColorstr='$gradient-end',GradientType=1 );
color: white;
}
.login {
margin: 400px auto;
text-align: center;
max-width: 400px;
border-radius: 10px;
letter-spacing: 0.5px;
line-height: 55px;
font-family: 'Comic Sans MS';
box-shadow: 1px 0px 10px 3px;
z-index: 1;
}
I attempted changing .login { margin: 400px auto; to margin: 0 auto;, but it doesn't center the page like I want it to.