Looking for some help with CSS - I want to split an HTML page into two sections, with a background and text/login form on top. Can anyone provide sample CSS and HTML code?
This is what I've tried so far in CSS:
.logindiv {
height: 200px;
width: 200px;
background: linear-gradient(to bottom, #1F4E79 50%, #FFFF 50%);
}
And here's the HTML:
<div class="container logindiv">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please Sign In</h3>
</div>
<div class="panel-body">
@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { @class = "form-signin" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Username" name="Username" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<!-- Change this to a button or input when using this as a form <a href="#" class="btn btn-lg btn-success btn-block">Login</a> -->
<button class="btn btn-lg btn-primary btn-block" name="logsubmit" id="logsubmit" type="submit">Login</button>
</fieldset>
}
</div>
</div>
</div>
</div>
</div>