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

Labels:

Comments

Post a Comment

Popular posts from this blog

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 ...
Post a Comment
Read more

Netflix Logo with CSS

  Netflix Logo With CSS Hello Folks! today I'am going to share with you a "Netflix" logo design with CSS code is easy and simple even 10y/o child could try.   Let's see our Source Code : If you know Html and CSS very well then this post is just a piece of cake with you not and hard and fast coding is applied just span tag i choose and design it accordingly. Index.html  <div class=" container ">     <span></span>     <span></span>     <span></span>   </div>  Style.CSS   body { background:#26242e; } .container{   position:absolute;   top:30%;   left:50%;   display:flex;   width:120px;   height:200px;   overflow:hidden; } span {   position:absolute;   width:40px;   height:200px;   background:#d81f26 } span :nth-child(1){   right:0; } span :nth-child(2){   left:40px;   z-index:1;   transform:skew(22deg); ...
1 comment
Read more