This blog is created by Al Imran. Mobile:+8801721065582.
1 / 6
Now showing first image
2 / 6
Now showing second image
3 / 6
Now showing third image
4 / 6
Now showing first image
5 / 6
Now showing second image
6 / 6
Now showing third image

Design Sign Up & Sign In & Forgot Password Page

                                                  How To Make A Sign Up Page




<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sign Up Page</title>
<style>
*{
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  font-family:arial;
}
body{background:gray;}
h1{
  color:#AAA173;
  text-align:center;
  font-faimly:icon;
  border-bottom:2px dashed #0AC986;
}

.login-form{
  border:2px dashed #0AC986;
  width:350px;
  padding:40px 30px;
  background:rgba(235,235,205,0.7);
 
  margin:50px auto;
}
.form-group{
  position: relative;
  margin-bottom:5px;
}
.form-control{
  width:100%;
  height:50px;
  border:none;
  padding:5px 7px 5px 15px;
  background:#fff;
  color:#666;
  text-align:left;


 
 
}
.form-control:focus, .form-control:focus + .fa{
  border-color:#10CE88;
  color:#10CE88; border-left:5px solid #10CE88; box-shadow:1px 5px 5px gray;
}
.form-group .fa{
  position: absolute;
  right:15px;
  top:17px;
  color:#999;
}


.SignUp{
  background:#0AC986;
  dispaly:inline-block;
  width:100%;
  font-size:16px;
  height:50px;
  color:#fff;
  text-decoration:none;
  border:none;
 
  outline:none;
}
.SignUp:hover{
  background:green;}
.link{
  text-decoration:none;
  color:#9D8E79;
  display:block;
  text-align:center;
  font-size:12px;
  margin-bottom:15px;
}
.link:hover{
  text-decoration:underline;
  color:green;
}
.alert{
  display:none;
  font-size:12px;
  color:#f00;
  float:left;
}


</style>
</head>
<body>
<div class="login-form">
<a class="link" href="#">Already a member,please Sign in?</a>
     <h1>Sign Up</h1>
 
     <div class="form-group ">
       <input type="text" class="form-control" placeholder="Firstname" id="Firstname">
       <i class="fa fa-user"></i>
     </div>
   <div class="form-group ">
       <input type="text" class="form-control" placeholder="Lastname " id="Lastname">
       <i class="fa fa-user"></i>
     </div> <div class="form-group ">
       <input type="text" class="form-control" placeholder="Country " id="Country">
       <i class="fa fa-user"></i>
     </div>
  <div class="form-group ">
       <input type="text" class="form-control" placeholder="Mobile " id="Lastname">
       <i class="fa fa-user"></i></div>
  <div class="form-group ">
       <input type="text" class="form-control" placeholder="Email" id="Email">
       <i class="fa fa-user"></i>
     </div> <div class="form-group ">
       <input type="text" class="form-control" placeholder="Choose a username " id="Choose a username ">
       <i class="fa fa-user"></i>
     </div>
  <div class="form-group log-status">
       <input type="password" class="form-control" placeholder="Passwod" id="Passwod">
       <i class="fa fa-lock"></i>
     </div>
  <div class="form-group log-status">
       <input type="password" class="form-control" placeholder="Confirm passwod" id="Confirm passwod">
       <i class="fa fa-lock"></i>
     </div>
     <input type="submit" value="Sign up"class="SignUp" >
     </div>
</body>
</html> 

                                                  How To Make A Sign In Page




<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sign In Page</title>
<style>
*{
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  font-family:arial;
}
body{background:#FF9000;}
h1{
  color:#AAA173;
  text-align:center;
  font-faimly:icon;
}

.login-form{
  width:350px;
  padding:40px 30px;
  background:rgba(235,235,205,0.7);
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  margin:50px auto;
}
.form-group{
  position: relative;
  margin-bottom:15px;
}
.form-control{
  width:100%;
  height:50px;
  border:none;
  padding:5px 7px 5px 15px;
  background:#fff;
  color:#666;
  border:2px solid #E0D68F;
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
}
.form-control:focus, .form-control:focus + .fa{
  border-color:#10CE88;
  color:#10CE88;
}
.form-group .fa{
  position: absolute;
  right:15px;
  top:17px;
  color:#999;
}
.log-status.wrong-entry {
  -webkit-animation: wrong-log 0.3s;
  -moz-animation: wrong-log 0.3s;
  -ms-animation: wrong-log 0.3s;
  animation: wrong-log 0.3s;
}
.log-status.wrong-entry .form-control, .wrong-entry .form-control + .fa {
  border-color: #ed1c24;
  color: #ed1c24;
}
@keyframes wrong-log {
  0% { left: 0px;}
  20% {left: 15px;}
  40% {left: -15px;}
  60% {left: 15px;}
  80% {left: -15px;}
  100% {left: 0px;}
}
@-ms-keyframes wrong-log {
  0% { left: 0px;}
  20% {left: 15px;}
  40% {left: -15px;}
  60% {left: 15px;}
  80% {left: -15px;}
  100% {left: 0px;}
}
@-moz-keyframes wrong-log {
  0% { left: 0px;}
  20% {left: 15px;}
  40% {left: -15px;}
  60% {left: 15px;}
  80% {left: -15px;}
  100% {left: 0px;}
}
@-webkit-keyframes wrong-log {
  0% { left: 0px;}
  20% {left: 15px;}
  40% {left: -15px;}
  60% {left: 15px;}
  80% {left: -15px;}
  100% {left: 0px;}
}
.log-btn{
  background:#0AC986;
  dispaly:inline-block;
  width:100%;
  font-size:16px;
  height:50px;
  color:#fff;
  text-decoration:none;
  border:none;
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
}

.link{
  text-decoration:none;
  color:#9D8E79;
  display:block;
  text-align:right;
  font-size:12px;
  margin-bottom:15px;
}
.link:hover{
  text-decoration:underline;
  color:#8C918F;
}
.alert{
  display:none;
  font-size:12px;
  color:#f00;
  float:left;
}
</style>
</head>
<body>
<div class="login-form">
     <h1>Login</h1>
     <div class="form-group ">
       <input type="text" class="form-control" placeholder="Username " id="UserName">
       <i class="fa fa-user"></i>
     </div>
     <div class="form-group log-status">
       <input type="password" class="form-control" placeholder="Password" id="Passwod">
       <i class="fa fa-lock"></i>
     </div>
      <span class="alert">Invalid Credentials</span>
      <a class="link" href="#">Lost your password?</a>
     <button type="button" class="log-btn" >Log in</button>
</div>
</body>
</html>


                                     Creating A Styling Log In Page 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Creating A Log In Page</title>
<style>
*{
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  font-family:arial;
}
body{background:gray;}
h1{
  color:#AAA173;
  text-align:center;
  font-faimly:icon;
  border-bottom:2px dashed #0AC986;
}

.login-form{
  border:2px dashed #0AC986;
  width:350px;
  padding:40px 30px;
  background:rgba(235,235,205,0.7);
  border-radius:40px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  margin:50px auto;
}
.form-group{
  position: relative;
  margin-bottom:15px;
}
.form-control{
  width:100%;
  height:50px;
  border:none;
  padding:5px 7px 5px 15px;
  background:#fff;
  color:#666;
  text-align:center;
  border:2px solid #E0D68F;
 
  border-radius:404px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
}
.form-control:focus, .form-control:focus + .fa{
  border-color:#10CE88;
  color:#10CE88;
}
.form-group .fa{
  position: absolute;
  right:15px;
  top:17px;
  color:#999;
}
.log-status.wrong-entry {
  -webkit-animation: wrong-log 0.3s;
  -moz-animation: wrong-log 0.3s;
  -ms-animation: wrong-log 0.3s;
  animation: wrong-log 0.3s;
}
.log-status.wrong-entry .form-control, .wrong-entry .form-control + .fa {
  border-color: #ed1c24;
  color: #ed1c24;
}
@keyframes wrong-log {
  0% { left: 0px;}
  20% {left: 15px;}
  40% {left: -15px;}
  60% {left: 15px;}
  80% {left: -15px;}
  100% {left: 0px;}
}
@-ms-keyframes wrong-log {
  0% { left: 0px;}
  20% {left: 15px;}
  40% {left: -15px;}
  60% {left: 15px;}
  80% {left: -15px;}
  100% {left: 0px;}
}
@-moz-keyframes wrong-log {
  0% { left: 0px;}
  20% {left: 15px;}
  40% {left: -15px;}
  60% {left: 15px;}
  80% {left: -15px;}
  100% {left: 0px;}
}
@-webkit-keyframes wrong-log {
  0% { left: 0px;}
  20% {left: 15px;}
  40% {left: -15px;}
  60% {left: 15px;}
  80% {left: -15px;}
  100% {left: 0px;}
}
.log-btn{
  background:#0AC986;
  dispaly:inline-block;
  width:100%;
  font-size:16px;
  height:50px;
  color:#fff;
  text-decoration:none;
  border:none;
  border-radius:404px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
}
.log-btn:hover{
  background:green;}
.link{
  text-decoration:none;
  color:#9D8E79;
  display:block;
  text-align:right;
  font-size:12px;
  margin-bottom:15px;
}
.link:hover{
  text-decoration:underline;
  color:green;
}
.alert{
  display:none;
  font-size:12px;
  color:#f00;
  float:left;
}


</style>
</head>
<body>
<div class="login-form">
     <h1>Login</h1>
 
     <div class="form-group ">
       <input type="text" class="form-control" placeholder="Username " id="UserName">
       <i class="fa fa-user"></i>
     </div>
     <div class="form-group log-status">
       <input type="password" class="form-control" placeholder="Password" id="Passwod">
       <i class="fa fa-lock"></i>
     </div>
      <span class="alert">Invalid Credentials</span>
      <a class="link" href="#">Lost your password?</a>
     <button type="button" class="log-btn" >Log in</button>
     </div>
</body>
</html>

                                   
                                           Creating A Styling Register Page


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Design A Register Page</title>
<style>
*{
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  font-family:arial;
}
body{background:gray;}
h1{
  color:#AAA173;
  text-align:center;
  font-faimly:icon;
  border-bottom:2px dashed #0AC986;
}

.login-form{
  border:2px dashed #0AC986;
  width:350px;
  padding:40px 30px;
  background:rgba(235,235,205,0.7);
  border-radius:40px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  margin:50px auto;
}
.form-group{
  position: relative;
  margin-bottom:5px;
}
.form-control{
  width:100%;
  height:50px;
  border:none;
  padding:5px 7px 5px 15px;
  background:#fff;
  color:#666;
  text-align:center;
  border:2px solid #E0D68F;
 
  border-radius:404px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
}
.form-control:focus, .form-control:focus + .fa{
  border-color:#10CE88;
  color:#10CE88;
}
.form-group .fa{
  position: absolute;
  right:15px;
  top:17px;
  color:#999;
}


.SignUp{
  background:#0AC986;
  dispaly:inline-block;
  width:100%;
  font-size:16px;
  height:50px;
  color:#fff;
  text-decoration:none;
  border:none;
  border-radius:404px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
}
.SignUp:hover{
  background:green;}
.link{
  text-decoration:none;
  color:#9D8E79;
  display:block;
  text-align:center;
  font-size:12px;
  margin-bottom:15px;
}
.link:hover{
  text-decoration:underline;
  color:green;
}
.alert{
  display:none;
  font-size:12px;
  color:#f00;
  float:left;
}


</style>
</head>
<body>
<div class="login-form">
<a class="link" href="#">Already a member,please Sign in?</a>
     <h1>Sign Up</h1>
 
     <div class="form-group ">
       <input type="text" class="form-control" placeholder="Firstname" id="Firstname">
       <i class="fa fa-user"></i>
     </div>
   <div class="form-group ">
       <input type="text" class="form-control" placeholder="Lastname " id="Lastname">
       <i class="fa fa-user"></i>
     </div> <div class="form-group ">
       <input type="text" class="form-control" placeholder="Country " id="Country">
       <i class="fa fa-user"></i>
     </div>
  <div class="form-group ">
       <input type="text" class="form-control" placeholder="Mobile " id="Lastname">
       <i class="fa fa-user"></i></div>
  <div class="form-group ">
       <input type="text" class="form-control" placeholder="Email" id="Email">
       <i class="fa fa-user"></i>
     </div> <div class="form-group ">
       <input type="text" class="form-control" placeholder="Choose a username " id="Choose a username ">
       <i class="fa fa-user"></i>
     </div>
  <div class="form-group log-status">
       <input type="password" class="form-control" placeholder="Passwod" id="Passwod">
       <i class="fa fa-lock"></i>
     </div>
  <div class="form-group log-status">
       <input type="password" class="form-control" placeholder="Confirm passwod" id="Confirm passwod">
       <i class="fa fa-lock"></i>
     </div>
     <button type="button" class="SignUp" >Sign Up</button>
     </div>
</body>
</html>


                                                  Make A Styling Sign Up Page



<!DOCTYPE html>
<html>
<head>
<title>How to make a sign up page</title>
<style>
  #target{
      width:300px;
    height:342px;
    background:red;
    padding:40px 30px;
    margin:50px auto;
  }
  p{padding-top:0px;}
  #bt{width:293px;background:pink;height:30px;font-size:20px;border:none;margin-left:4px;}
  #bt:hover{background:gray;color:green;}
  h1{background:pink;color:green;text-align:center;}
  input{width:290px;text-align:center;margin-top:2px;color:green;margin-left:3px;background:black;height:20px;border:1px solid green;border-radius:15px;}
</style>
<script>
   
</script>
</head>
<body>
<div id="target">
 <h1>Sign Up</h1>
  <p>If you don't have an ID then please Register</p>
  <input type="text" placeholder="First Name" Required/>
  <input type="text" placeholder="Last Name"/>
  <input type="text" placeholder="Country"/>
  <input type="text" placeholder="Email"/>
  <input type="text" placeholder="Choose A Username"/>
  <input type="text" placeholder="Password"/>
  <input type="text" placeholder="Confirm Password"/>
  <input type="text" placeholder="Mobile No"/>
  <input type="submit" id="bt" value="Sign Up"/>
</div>
</body>
</html>


                                               Create A Styling Sign In Page





<!DOCTYPE html>
<html>
<head>
<title>How to make a Log In page</title>
<style>
  #target{
      width:300px;
    height:170px;
    background:gray;
    padding:40px 30px;
    margin:50px auto;
  }
  a:hover{color:green;}
  p{padding-top:0px;}
  #bt{width:293px;background:pink;height:30px;font-size:20px;border:none;margin-left:4px;}
  #bt:hover{background:white;color:green;}
  h1{color:green;text-align:center;border-bottom:2px dashed pink;margin-top:0px;}
  input{width:290px;text-align:center;margin-top:2px;color:green;margin-left:3px;margin-top:3px;background:black;height:30px;border:1px solid green;border-radius:15px;}
</style>
<script>
   
</script>
</head>
<body>
<div id="target">
 <h1>Log In</h1>
  <p>If you don't have an ID then please <a href="register.html">Register</a></p>
  <input type="text" placeholder="Username"/>
  <input type="text" placeholder="Password"/>
  <input type="submit" id="bt" value="Log In"/>
</div>
</body>
</html>


                                                Make A Simple Sign Up Page


<!DOCTYPE html>
<html>
<head>
<title>Very simple sign up page</title>
<style>
  #target{
      width:300px;
    height:420px;
    background:red;padding:40px 30px;
    margin:50px auto;border-radius:15px;
  }
  p{padding-left:15px;width:285px;height:25px;border:1px solid pink;background:black;color:white;}
  #bt{width:300px;background:pink;height:30px;font-size:20px;border:none;margin-left:4px;margin-top:10px;}
  #bt:hover{background:gray;color:green;}
  h1{background:pink;color:green;text-align:center;}
  input{width:150px;text-align:center;color:green;background:white;height:20px;border:0;float:right;margin-top:1.82px;}
</style>
<script>
   
</script>
</head>
<body>
<div id="target">
 <h1>Sign Up</h1>

 <p>First Name :  <input type="text"/></p>
  <p>Last Name :<input type="text" /></p>
  <p>Country  :<input type="text" /></p>
  <p>Email :<input type="text" /></p>
  <p>Username :<input type="text" /></p>
  <p>Password :<input type="text" /></p>
  <p>Confirm Password :<input type="text" /></p>
  <p>Mobile No :<input type="text" />
  <input type="submit" id="bt" value="Register"/>
</div>
</body>
</html>

                                             Make A Simple Sign In Page



<!DOCTYPE html>
<html>
<head>
<title>Very simple log in page</title>
<style>
  #target{
      width:300px;
    height:170px;
    background:red;padding:40px 30px;
    margin:50px auto;border-radius:15px;
  }
  p{padding-left:15px;width:285px;height:25px;border:1px solid pink;background:black;color:white;}
  #bt{width:300px;background:pink;height:30px;font-size:20px;border:none;margin-left:4px;margin-top:8px;}
  #bt:hover{background:gray;color:green;}
  h1{background:pink;color:green;text-align:center;}
  input{width:150px;text-align:center;color:green;background:white;height:20px;border:0;float:right;margin-top:1.82px;}
</style>
<script>
   
</script>
</head>
<body>
<div id="target">
 <h1>Sign Up</h1>
  <p>Username :<input type="text" /></p>
  <p>Password :<input type="text" /></p>
  <input type="submit" id="bt" value="Register"/>
</div>
</body>
</html>




Comments

Post a Comment