I'm developing a system with Asp.Net Mvc using the bootstrap, but I want to give a different "face" to my login screen, I created a css but I would like to make it responsive, does anyone know how to do this? follow the CSS below: more specifically the "loginbox" style (which is where my login form is)
body {
margin: 0;
padding: 0;
background: url('../images/orage.png');
background-size: cover;
background-position: center;
font-family: sans-serif;
}
.loginbox {
width: 320px;
height: 420px;
background: #000;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
max-width: 100%;
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.login p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginbox input {
width: 100%;
margin-bottom: 20px;
}
.footer {
position: inherit;
bottom: 0;
width: 100%;
}
Follow Html
@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
;
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<br>
<br>
<div class="loginbox">
<img src="~/images/avatar.png" class="avatar" />
<h1>Login Here</h1>
@Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control input-lg", placeholder = "E-mail", autofocus = true } })
@Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
@Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control input-lg", placeholder = "Senha" } })
@Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
<input type="submit" value="Acessar" class="btn primary btn-lg" />
<br/>
<a href="#">Lost your password? </a>
<a href="#"> Don't have an acount? </a>
</div>
}