How to Create Login /Sign In form Using HTML and CSS (JavaScript)

This Tutorial will show you, How to Create Sign In/Login form using html and css and This instructional exercise will likewise show you how you can include JavaScript in structures and make them more appealing and great.

Codes are available for free, you can use these codes for free.

Code with HTML,CSS and Javascript :

<html>
<head>
      <title>Cobra Kai</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body{
background-color: #0e0e0e;
}

nav{
border-bottom:solid 5px #e50303;
}

ul{
padding
  list-style: none;
  padding: 20px;
}

li{
   display: inline-block;
   color: #e50303;
   padding-left: 20px;
   font-size: 18px;
   font-family: Arial;
}

.form-container{
               background-color: #e50303;
      margin: 9%;
      padding:30px;
      margin-left:30%;
      margin-right:30%;
      
               }
input{
   border: none;
   font-size: 31px;
   padding: 3px;
   width:100%;
     }
 h1{
   color: white;
   text-align: center;
   font-size: 41px;
   font-family: Arial;
 }
label{
      color: white;
   letter-spacing: 1px;
   font-size: 18px;
   font-family: Arial;
     }
.sign-in{
       text-align: center;
    border: none;
    padding: 16px;
    font-size: 18px;
    letter-spacing: 1px;
    background-color:white;
    
}
p, p > a{
 color: white;
 font-family: Arial;
 text-decoration: none;
}
p > a:hover{
 color: white;
 font-family: Arial;
 text-decoration: underline;
}
.jam{
display:none;
}
.create-acc{
           margin-top:-90px;
     text-align: center;
     margin-left: 43%;
      border: none;
    padding: 16px;
    font-size: 18px;
    letter-spacing: 1px;
    background-color:white;
    padding-left: 34px;
    padding-right: 34px;
}

.overlay {
    height: 90%;
    width: 100%;
    background-color: #0e0e0e;
    overflow-y: hidden;
    transition: .5s;
 transition-delay:1s;
}

.overlay-content {
    width: 100%;
    
}

img{
width: 50%;
margin-left: 25%;
}

</style>  
</head>
<body>

<nav>
<ul>
<li>Home</li>
<li>About us</li>
<li>Contact Us</li>
</ul>
</nav>

<label>Username</label>
<br/>
<input type="text">

<label>Password</label>
<br/>
<input type="password">

<p>
<a href="#">Forgot Password?</a></p>
</form>
</div>
<button type="submit" class="create-acc">Create Account</button>
</div>
<script>

function closeNav() {
 document.getElementById('myImage').src='https://image.ibb.co/iofW5T/ss.jpg';
var x = document.getElementById("myAudio");
x.play(); 
    document.getElementById("myNav").style.height = "0%";
}
</script>

</body>
</html>

Code with HTML and CSS Only :

<html><!DOCTYPE html>
<html>
<head>
 <title>Cobra Kai</title>

:root{
--blacky: #0e0e0e;
--redy: #e50303;
}

body{
 background-color: var(--blacky);
 font-family: Arial;
}

ul{
 list-style: none;
}

nav{
    border-bottom: solid 5px var(--redy);
}

nav ul li{
 display: inline-block;
 padding: 20px;
 color: var(--redy);
}

.main-container{
 background-color: var(--redy);
 margin-left: 30%;
 margin-right: 30%;
 margin-top: 6%;
 padding: 30px;
}

h1{
 color: white;
 padding: 40px;
 text-align: center;
}

label{
 font-size: 24px;
 color: white;

}

input{
 font-size: 24px;
 padding: 5px;
 outline: none;
 width: 100%;
}

.btn-signin{
 font-size: 24px;
 padding: 5px;
 outline: none;
 background-color: white;
 color: var(--blacky);
 border: none;
}

.btn-create-account{
  font-size: 24px;
 padding: 10px;
 outline: none;
 background-color: white;
 color: var(--blacky);
 border: none;
 margin-left: 44%;
}

</style>

</head>
<body>

<nav>
 <ul>
<li>Home</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</nav>

<h1>
Sign in</h1>
<form>
 
 <label>Username</label>
 <br/>
 <input type="text">
<br/><br/>
 <label>Password</label>
 <br/>
 <input type="Password">
<br/><br/>
 <button type="submit" class="btn-signin">Sign in</button>

</form>
</div>
</div>

<br/><br/><br/>
<button type="submit" class="btn-create-account">Create Account</button>

</body>
</html>

----------------------------------------------------------------------------------------------------

Disclaimer: This website is aimed to provide you information on the technology or provides information on the topics related to programming, web designing, and tutorials on them as well as. The content provided here on https://www.kapilonline.ooo is based upon the various studies from web, books, newspaper and various other resources. All the information we provided on the website is free to all you can use it for educational purpose only. Neither KAPIL ONLINE nor any person/organization acting on its behalf is liable to accept any legal liability/responsibility for any error/mislead in this information or any information available on the website. This website in no way accepts the responsibility for any loss, injury, damage, discomfort or inconvenience caused as a result of reliance on any information provided on this website.

August 16, 2018

How to Create Login /Sign In form Using HTML and CSS (JavaScript)

0 comments:

Facebook Likes

Popular Posts

Labels