Heres A Mobile Friendly Login Page You Can Use

HTML

I have created a free to use login page, you need to implement the database lookup but other than that, I have created the login form and styled the page ready to be used.

This is what it will look like, its also mobile friendly so will render to any device.

Free login page

You can simply copy and paste the code below and you can have your login page up and running within seconds.

The Login Page Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Michael Tedder</title>
    <meta name="description" content="">
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
      <div class="pagetitle">LOGO</div>
      <div class="box">
          <div class="boxhead">
              Sign In
          </div>
          <hr>
          <form method="post" action="">
              <input type="text" name="uname" placeholder="Username" class="usernamebox">
              <input type="password" name="uname" placeholder="Password" class="passwordbox">
              <input type="submit" name="Login" class="login" value="Sign In">
              <a href="" class="register">Register</a>
          </form>
          <div class="clearboth"></div>
      </div>
  </body>
  </html>

The Styles Used

body {
    padding:0px;
    margin:0px;
    background:#dcdcdc;
    font-family: Arial, Helvetica, sans-serif;
}
hr {
    border:1px solid #dcdcdc;
    margin-right:auto;
    margin-left:auto;
    width:90%;
}
.pagetitle {
    color:#464545;
    padding-top:20px;
    width:20%;
    font-size:31px;
    font-weight: bold;
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    
}
.box {
    padding-top:20px;
    padding-left:15px;
    padding-right:15px;
    padding-bottom:25px;
    margin-top:30px;
    margin-right:auto;
    margin-left:auto;
    width:29%;
    background:white;
    border-radius:5px;
    -moz-box-shadow: 0 0 3px #afafaf;
-webkit-box-shadow: 0 0 3px #afafaf;
box-shadow: 0 0 3px #afafaf;
}
.boxhead {
    padding-left:20px;
    color:#464545;
    font-size:22px;
    font-weight: bold;
    padding-bottom:15px;
}
.usernamebox {
    font-size:15px;
    color:#333;
    margin-top:12px;
    padding:11px;
    margin-right:auto;
    margin-left:auto;
    width:92%;
    background-color: #f1f1f1;
    border-radius:6px;
    border:1px solid grey;
}
.passwordbox {
    font-size:15px;
    color:#333;
    margin-top:22px;
    padding:11px;
    margin-right:auto;
    margin-left:auto;
    width:92%;
    background-color: #f1f1f1;
    border-radius:6px;
    border:1px solid grey;
}
.login {
    float:right;
  margin-top:35px;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:30px;
  padding-right:30px;
  background-color: #5173bd; 
  border-radius:5px;
  border:none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
.register {
    float:right;
  margin-top:35px;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:30px;
  padding-right:30px;
  background-color: #fffff; 
  border-radius:5px;
  border:none;
  color: #5173bd;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
.clearboth {
    clear:both;
}
@media only screen and (max-width: 950px) {
.box {
    margin-right:auto;
    margin-left:auto;
    width:64%;
    padding-top:20px;
    padding-left:20px;
    padding-right:20px;
    padding-bottom:25px;
}
.boxhead {
    color:#464545;
    font-size:20px;
    font-weight: bold;
    padding-bottom:15px;
    margin-left:35px;
}
}

All you need to do is add the Login code to a new webpage and add the css to your style sheet, or create a new style sheet.

Leave a Reply Cancel reply