Html/css responsive login form without external scripts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HitechKaran</title>
<style type="text/css">
body {
background: url(photos/hd6-body-bg.jpg) no-repeat 50% 50%;
background-size: cover;
background-attachment: fixed;
}
* {
box-sizing: border-box;
}
h2 {
padding: 10px 35px;
font-size: 25px;
box-shadow: 2px 2px 2px rgba(27,31,35,.15);
}
.acsearch {
width: 100%;
margin: 0px;
padding: 0px;
text-align: center;
}
.modal-login {
display: inline-block;
color: #636363;
width: 340px;
border-radius: 5px;
}
.modal-login .modal-content {
padding: 20px;
border-radius: 5px;
border: none;
background: #fffdf2;
}
.modal-login .modal-header {
border-bottom: none;
padding: 20px 0;
position: relative;
justify-content: center;
}
.modal-login h4 {
text-align: center;
font-size: 26px;
}
.modal-login .modal-body {
padding: 10px 20px;
}
.modal-login .form-group {
position: relative;
margin: 10px auto;
text-align: left;
}
.modal-login label {
padding: 10px 0;
}
.modal-login input[type="text"],
.modal-login input[type="password"] {
padding:12px;
margin:0px;
width: 100%;
b order-color: #636363;
}
.modal-login input[type="text"]:focus,
.modal-login input[type="password"]:focus,
.modal-login input[type="text"]:hover,
.modal-login input[type="password"]:hover {
border-color: #636363;
box-shadow: 0 0 5px #002290;
}
.modal-login .button-group {
position: relative;
margin: 20px auto;
text-align: left;
}
.modal-login input[type="submit"] {
font-family: 'MiriamLibre-Bold', times, 'sans-serif';
color: #FFF;
width: 100%;
height: 40px;
border-radius: 3px;
background: #00ce81;
background: linear-gradient(0deg, #0c4f70, #0c7f90);
}
.modal-login input[type="submit"]:hover,
.modal-login input[type="submit"]:focus {
color:#555;
cursor: default;
b ackground: #0c7f90;
background: #00bf78;
}
.modal-login .modal-error {
color: #902211;
background: #ecf0f1;
border-color: #dee4e7;
text-align: center;
margin: 20px 0;
padding: 15px 0;
border-radius: 5px;
font-size: 13px;
justify-content: center;
box-shadow: 0 0 10px #454540;
}
.modal-login .modal-footer {
background: #ecf0f1;
border-color: #dee4e7;
text-align: center;
padding: 15px 0;
margin: 0 -20px -20px;
border-radius: 5px;
font-size: 13px;
justify-content: center;
b order:1px solid #555;
}
.modal-login .modal-footer a {
color: #454540;
text-decoration: none;
}
.modal-login .modal-footer a:hover {
color: #801212;
text-transform: uppercase;
}
.closetop {
position:relative;
top:-15px;
right:-15px;
opacity: .6;
}
.closetop:hover {
opacity: 1;
}
@media only screen and (max-width:250px) {
.modal-login {
width:100%;
}
}
</style>
</head>
<body>
<h2>My Data Manager</h2>
<div class="acsearch">
<div class="modal-login">
<div class="modal-content">
<a href="index.php">
<img src="photos/close2.png" class="closetop" height=20 width=20 align="right">
</a>
<div class="modal-header">
<h4 class="modal-title">User Login</h4>
</div>
<div class="modal-body">
<form action="secureloginexe.php" method="post" autocomplete="off">
<div class="form-group">
<label>User Name</label>
<input type="text" name="username" placeholder="Enter User Name" required="required">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" placeholder="Enter Password" required="required">
</div>
<div class="button-group">
<input type="submit" name="submit" value="LOGIN">
</div>
</form>
</div>
<div class="modal-footer">
<a href="forgetpasspage.php">Forget Password</a>
</div>
</div>
</div>
</div>
</body>
</html>
0 Comments