Сделал мою страницу входа отзывчивой ?
У меня очень простая страница входа в систему, так как я новичок в веб-дизайнере, и это мой код
стиль.CSS-файл
*{
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body
{
margin: 100px auto;
background-image:url('../img/bg.jpeg');
-webkit-background-size:cover;
background-repeat:no-repeat;
background-size:cover;
background-repeat:no-repeat;
}
.container{
width:500px;
height:400px;
text-align:center;
background-color:rgba(51, 51, 51,0.2);
margin:0 auto;
margin-top:150px;
border-radius:4px;
}
.container img{
width:120px;
height:120px;
margin-top:-60px;
margin-bottom:30px;
}
input[type="text"],input[type="password"]{
height:45px;
width:300px;
font-size:18px;
border:none;
margin-bottom:20px;
background-color:#fff;
padding-left:40px;
border-radius:4px;
}
.form-input::before{
content:"\f007";
position:absolute;
font-family:"FontAwesome";
padding-left:5px;
color:#999999;
padding-top:7px;
font-size:35px;
}
.form-input:nth-child(2)::before{
content:"\f023";
}
.btn-login{
padding :15px 30px;
cursor:pointer;
color:#fff;
background-color:#006600;
border-radius:4px;
border:none;
border-bottom:4px solid #004d00;
margin-bottom:20px;
}
a{
color:#fff;
}
и это мое index.html файл
<!DOCTYPE html> <html> <head> <title> </title> <link rel="stylesheet" type="text/css" href="css/style.css"></link> <link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css"> </head> <body> <div class="container"> <img src="img/login.png"/> <form> <div class="form-input"> <input type="text" name="username" placeholder="Enter Username"> </div> <div class="form-input"> <input type="password" name="paswword" placeholder="Enter Password"> </div> <input type="submit" name="submit" value="LOGIN" class="btn-login"> <br/> <a href="#">Forget Password?</a> </form> </div> </body> </html>
Что я уже пробовал:
Мне просто нужно, чтобы вы поставили меня на правильный путь, так как я новичок, помогите мне, пожалуйста :)