Skip to main content

Login & Signup forms using Html & CSS

 Login/Signup Form 

Using Html & CSS



Hello hope you all are fine :-), today I'm going to make Login and signup form by using html & css it is very easy to create just like a piece of cake!

  • Login Form

Index.Html

<!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Join-Us</title>
   
    <link rel="stylesheet" href="join-us.css">
   
</head>
<body>
  <div class="form">
    <h1>Login <span><hr style=" border: 0;
      height: 1px;
      
      background: rgb(129, 133, 131);padding-top:2px;
      background-image: linear-gradient(to right, rgba(122, 184, 93, 0.678), rgba(135, 172, 141, 0.404), rgba(202, 200, 200, 0.521));"></span></h1>
   
       <input type="text" autocomplete="off" required>
       <label for="email" class="label-email">
         <span class="content-email">Email</span></label>

      <input type="password"  required>
      <label for="pass" class="label-pass">
        <span class="content-pass">Password</span></label>

   <br><br>
        <div class="pass">Forgot Password</div>
        <input type="submit" value="Login">
        <div class="signup-link"> Not a member? <a href="signup.html">Signup</a>
       
        </div>
  </div>

  
    

</body>
</html>

Style.Css

*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}
body{
    height: 100vh;
    font-family: sans-serif;
  background-image: url(https://cdn.pixabay.com/photo/2016/03/26/13/09/notebook-1280538_960_720.jpg);
  background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.form{
    width: 300px;
    height: 500px;
    position: relative;
    background-color: #393a3b;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 15px;
    padding: 0 15px 0 15px;
    box-shadow: 0px 25px 36px 12px rgba(53, 67, 82, 0.295)
}
.form input{
    width: 100%;
    height: 50px;
    padding-top: 20px;
    color: white;
    border: none;
    background-color: #393a3b;
    border-bottom: 2px solid white;
    outline: none;
}
.form label{
transform: translateY(-50px);
pointer-events: none;
}
.content-email , .content-pass{
    position: absolute;
    top: 25px;
    color: white;
transition: all 0.4s ease;
}
.form input:focus+.label-email .content-email,
.form input:valid+.label-email .content-email{
transform: translateY(-100%);
font-size: 14px;
color: #eee;

}
.form input:focus+.label-pass .content-pass,
.form input:valid+.label-pass .content-pass{
transform: translateY(-100%);
font-size: 14px;
color: #eee;
}
h1{
    align-self: center;
    color: white;
    margin-bottom: 30px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}


input[type="submit"]{
    width: 100%;
    height: 53px;
padding-top: 13px;
    border: 1px solid;
    background: #2ca16b;
    color: rgb(250, 249, 249);
    border-radius: 25px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    outline: none;

}

.pass{
    margin: -5px 0 20px 5px;
    color: #a6a6a6;
    cursor: pointer;
}

input[type="submit"]:hover{
  transition: .5s;
  border: 2px solid rgb(15, 36, 15);
  border-color: rgb(27, 146, 33);
}
.signup-link{
    margin: 30px 0;
    text-align: center;
    font-size: 16px;
    color: #f8f7f7;
}
.signup-link a{
    color: #2ca16b;
    text-decoration: none;
    padding-left: -5px;
}
.signup-link a:hover{
    text-decoration: underline;
} 

Output






  • Sign Up Form

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <link rel="stylesheet" href="signup.css">
    
</head>
<body>
    
    <div class="form">
 <h1 > Sign Up <span><hr style=" border: 0;
    height: 1px;
    background: rgb(129, 133, 131);padding-top:2px;
      background-image: linear-gradient(to right, rgba(127, 158, 113, 0.678), rgba(135, 172, 141, 0.404), rgba(202, 200, 200, 0.521));"></span></h1> <br>

        <input type="text"  required>
        <label for="pass" class="label-pass">
          <span class="content-pass">First Name</span></label>

          <input type="text"  required>
          <label for="pass" class="label-pass">
            <span class="content-pass">Last Name</span></label>
            
            <input type="text"  required>
            <label for="pass" class="label-pass">
              <span class="content-pass">Email</span></label>

              <input type="password"  required>
              <label for="pass" class="label-pass">
                <span class="content-pass">Password</span></label>
                <br>
                <br>
                <br>
               
              
                <input type="submit" value="Sign Up">
                <br><br><br>
                <a href="join-us.html">Already have an account?</a>
    </div>
       <!-- tab-content -->
        
 <!-- /form -->
</body>
</html>

Style.Css

body,html{
    margin: 0;
    padding: 0;
 background-color: #75777613;
    overflow-x: hidden;
}
.navbar{
    background-color:#393a3bce !important;
   
   padding-bottom: 12px;
    border-radius:0px;

  
}

.nav-item :hover{
 
    border-radius: 0px 6px ;
   background-color: rgba(36, 37, 36, 0.815);
 
 transform: translate(-15px);
 transition: 0.4s  ;
}

p{
    margin-top: 20px !important;
    padding-bottom: 33px;
   padding-top: 30px;
    font-size: 20px !important;

}
.para{
    padding-left: 30px;
    padding-right: 30px;
    margin-left: 30px;
    margin-right: 30px;
    padding-bottom: 20px;
    line-height: 1.1cm;
    
}
.features_photos{
    margin-top:50px;
}

.color{
    background-color:#393a3bce !important ;
}

.intro{
    padding-top: 20px;
  
}


.carousel-caption{
    background: rgb(192, 189, 189); /* Fallback color */
    background: rgba(128, 127, 127, 0.4); /* Black background with 0.5 opacity */
    color: #f1f1f1;
   font-size: 17px !important;
    position: absolute;
    bottom: 0 !important;
    padding: 20px !important;
  
}
.button{
    padding-bottom: 28px;
}
/*images button*/
#hover{
  padding: 10px 25px;
  color: #fff;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  border: 2px solid #38a169;  

}
#hover::before{
    content: "";
    position: absolute;
    bottom: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-bottom: 2px solid  #38a169;
    border-left: 2px solid  #38a169;
}
#hover::after{
    content: "";
    position: absolute;
    border-top: 2px solid  #38a169;
    border-right: 2px solid  #38a169;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
}
#hover:hover{
  background-color: #38a169;
  color: #fff;
  transition: all 0.3s ease-in-out 0.4s;
}
#hover:hover::before,#hover:hover::after{
    width: 100%;
    height: 100%;
    transition: all 0.5s ease-in-out;
}
/*-------------images gallery---------*/
/* div>.image-gallery{
 display: flex;
 float: left;

 padding-bottom: 30px;
 
}
@media only screen and (max-width: 900px ){
.image-gallery {
    max-width:  500px;}
}

@media only screen and (max-width: 500px ){
    .image-gallery{
        width:100% !important;
    }
}

.img-items {
    padding-left: 8.5555px !important;
  align-items: center !important;
  position: relative;
  left: 34px;
  }
  @media only screen and (max-width: 400px){
    .img-items {
        width:100% !important;
    }
}


  */
.img-fluid{
    box-shadow: 0 10px 10px rgba(16, 18, 19, 0.61);
}

.img-fluid:hover,.box:hover{
    transform: scale(1);
    filter: blur(0px); opacity: 1;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8) ;
}


.img-fluid:hover  {

    transform: scale(0.98);
    box-shadow: none;
}
.fa:hover{
    color: black !important;
    transition: all 0.1s ease-in 0.2s;
}


Output





Labels:

Comments

Post a Comment

Popular posts from this blog

Best ToDo-Application using javascript

To Do Application  What is To Do List? ToDoList is a type of software which is used for managing your productive workflow.It is also called "Getting things done" (GTD), scheduling and collaboration. ToDoList is general-purpose, Windows-based software, which can be used for simple “honey do” home lists or to manage complex multi-user projects for business. In addition to tracking the status of tasks, ToDoList includes a powerful system for logging and reporting time spent on tasks. Combined with powerful reporting mechanisms, this makes ToDoList an effective tool for client billing. About My To Do Application So as you can read the above intro of ToDO-Application, I build this with very easy way and you can also try this for enhance or revise your JavaScript concepts. The code is simple and easy to understand, if you are new to JavaScript and web development then this tutorial is for you.I tried my best to design it for user friendly and keep it simple.Here is some screen sh
Post a Comment
Read more

Best Ui Dark Calculator using Html,Css and Javascript

   How to Create a  Calculator  Introduction Calculator is one of the basic projects of JavaScript or any other languages a newbie programmer should probably know how to create it.The best thing of this is that the coding is short and easy to understand . It is a basic project that perform arithmetical operations. All you have to do is to create a button for each number, arithmetic operations. symbols and then add a text-box or input-field. Here is the Output of Dark Calculator : Output: Source Code : Index.html: Here is the html coding :) <!DOCTYPE html> <html  lang =" en "> <head> <meta  charset =" UTF-8 "> <meta  name =" viewport "  content =" width=device-width, initial-scale=1.0 "> <title> Dark Calculator </title> <link  rel =" stylesheet "  href =" styel.css "> </head> <body> <div  class =" main "> <div> <input  id =" result &quo
Post a Comment
Read more