Perfect Css+Html Login Form

hellow again,
now i'm going to show you login form design that is one of my best i hope you will love it..
i have designed a login form and in this tutorial you will learn about menu that is owsm

see screen shot :

simple login form with css+html

THE STEPS ARE :

CREATE TWO FILES WITH NAME LOGIN.HTML AND STYLE.CSS respectively
COPY AND PASTE BELOW CODE IN LOGIN.HTML

<!DOCTYPE HTML>
<html>
<head>
<title>Login : AIO-TUTORIALS.BLOGSPOT.IN</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
<div id="header-wrapper">
 <div id="header" class="container">
  <div id="logo">
   <h1>
<a href="#">Site Logo</a></h1>
</div>
<div id="menu">
<nav>
 <ul  class="menu">

<a href="#">
<li>Home</li>
</a>
  <a href="#">
<li>Gallery</li>
</a>
  <a href="#">
<li>Register</li>
</a>
  <a href="#">
<li>About</li>
</a>
 </ul>
</nav>
  </div>
</div>
<div class="main">
    <div class="login">

<h1>
Please Login</h1>
<div class="login-bottom">
     <form>
      <input type="text" placeholder="Username" required=" ">     
      <input type="password" class="password" placeholder="Password" required=" ">      
      <input type="submit" value="login">
     </form>
<a href="#"><p>
Forgot your password? Click Here</p>
</a>
     </div>
</div>
</div>
</div>
<div class="footer">
   <p>
© 2016 HTML Basic Tamplate All rights reserved | Design by <a href="http://www.facebook.com/sarjil.96">Sarjil Shaikh</a> - <a href="aio-tutorials.blogspot.in">AIO-TUTORIALS</a></p>
</div>
</body>
</html>

NOW COPY BELOW CODE IN STYLE.CSS FILE

body
 {
  margin: 0px;
  padding: 0px;
  background:black url(images/head-bg.jpg) no-repeat center fixed;
  font-family: 'Didact Gothic', sans-serif;
  font-size: 12pt;
  font-weight: 200;
  color: #FFF;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 }
 
 
 
 
 .container
 {
  overflow: hidden;
  margin: 0em auto;
  width: 1200px;
 }

#wrapper
 {
  position: relative;
  padding: 5em 0em 10em 0em;
  background:rgba(0,0,0,0);
  margin:0px auto;
  width:90%;
  border:2px dashed white;
 }

#header-wrapper
 {
  position: relative;
  padding: 0em 0em 7em 0em;

} 
 
 #header
 {
  position: relative;
  padding: 5em 0em;
 }

#logo
 {
  position: absolute;
  top: 3.6em;
  left: 0;
 }
 
 #logo h1
 {
  font-size: 2.6em;
  color: #79C255;
 }
 
 #logo a
 {
  text-decoration: none;
  color: rgba(255,255,255,1);
 }

#menu
 {
  position: absolute;
  top: 4.5em;
  right: 0;
 }
 
 #menu ul
 {
  display: inline-block;
 }
 
 #menu li
 {
  display: block;
  float: left;
  text-align: center;
   -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
 }

nav li  
{
  border-style: solid;
  border-top-width: 2px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  text-align:center;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
nav ul li:before 
{
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(images/bnr-btn.jpg);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
nav ul li :hover, nav ul li:focus, nav ul li:active 
{
  color: white;
}
nav ul li:hover:before, nav ul li:focus:before, nav ul li:active:before 
{
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

nav ul a
{

padding-left:3px;
 padding-right:3px;
 border-radius:5px;
 margin-right:2px;
 margin-left:2px;
}
nav ul a li 
{
 line-height:45px; 
 text-decoration:none;
 color:white;
 display:inline-block;
 padding:0px 10px 2px 10px;
 margin-right:10px;
 margin-left:10px;
}
.main {
  margin:1em 0 0em;
  
}

.login {
 margin-left:35%;
    width: 20%;
 background:black url(images/regbg.jpg) no-repeat center fixed;
 border:2px solid #127DA7;
 padding: 3em;
 position: relative;
 border:2px solid white;
}
.login h1 {
    text-align: center;
    font-size: 2em;
    margin: 1em 0;
 margin-top:0px;
    color: #fff;
 font-family: 'PT Sans Narrow', sans-serif;
}

.login-bottom input[type="text"] {
    font-size: 1.2em;
    width: 90%;
    padding: .6em .8em;
    outline: none;
 background:rgba(0,0,0,0);
 border-left:2px solid white;
 border-right:2px solid white;
 border-top:0px;
 border-bottom:0px;
 color:white;
 text-align: center;
 font-family: 'PT Sans Narrow', sans-serif
}
.login-bottom input[type="password"] {
    font-size: 1.2em;
    width: 88%;
    padding: .6em 1em;
    outline: none;
 background:rgba(0,0,0,0);
 border-left:2px solid white;
 border-right:2px solid white;
 border-top:0px;
 border-bottom:0px;
 color:white;
 text-align: center;
 font-family: 'PT Sans Narrow', sans-serif
}

/* Bounce In */
.login-bottom input[type="submit"]{
    font-size: 1.5em;
    padding: .3em .3em;
    width: 45%;
    border: none;
    text-transform: capitalize;
    outline: none;
 border-top:2px solid white;
 border-bottom:2px solid white;
 border-left:none;
 border-right:none;
    background:rgba(0,0,0,0);
    color: #fff;
    cursor: pointer;
    font-family: 'PT Sans Narrow', sans-serif;
    margin: 0 auto;
    display: block;

vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.login-bottom input[type="submit"]:hover, .login-bottom input[type="submit"]:focus, .login-bottom input[type="submit"]:active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
.password {
    margin: 1.5em 0;
}
.login-bottom p {
    font-size: 1em;
    text-align: center;
    margin-top: 2em;
    margin-bottom:0em;
    color: white;
}
.login-bottom  a {
 text-decoration:none;
}
.login-bottom a p:hover {
    color: #127DA7;
}
.footer {
    text-align: center;
    padding: 3em 0;
}
.footer p {
    font-size: .9em;
    color: #fff;
    margin: 0px;
}
.footer p a:hover {
    color: #fff;
}
.footer p a {
    color: #fff;
}

NOW SAVE BOTH FILE IN SINGLE FOLDER AND RUN LOGIN.HTML

"SureToCode - Your Ultimate Guide to Programming and Technology"

Search This Blog

Perfect Css+Html Login Form

Comments

Post a Comment