Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point

Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
HTML 5

Creating Login Form In CSS

Here, we will use a few tags of HTML and some properties of CSS which are-
 
HTML tags
  • div
  • label
  • form etc
CSS property
  • margin
  • padding
  • text-align
  • color
  • background-color etc 
Let's start coding...
 
HTML code 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>login</title>  
  6.     <link rel="stylesheet" type="text/css" href="logincss.css">  
  7. </head>  
  8.   
  9. <body>  
  10.     <div class="main">  
  11.         <div class="in">  
  12.             <h1>Login</h1>  
  13.             <img src="log.png">  
  14.             <form class="fm">  
  15.                 <label>User Id:</label><input type="text" value="Username"><br>  
  16.                 <label>Password:</label><input type="password" value="123">  
  17.             </form>  
  18.         </div>  
  19.         <div class="bcon">  
  20.             <button class="btn">Submit</button><br>  
  21.         </div>  
  22.     </div>  
  23.   
  24. </body>  
  25.   
  26. </html>  
CSS code 
  1. body {  
  2.     margin: 0;  
  3. }  
  4. .main {  
  5.     background - color: #f7f7f7;  
  6.     max - width: 25 % ;  
  7.     text - align: center;  
  8.     font - family: "Bauhaus 93";  
  9.     color: #06a7e2;  
  10.     margin-top: 2%;  
  11.     margin-left: 35%;  
  12. }  
  13. .in img{  
  14.     max-width: 60%;  
  15.     max-width:60%;  
  16. }  
  17. .fm{  
  18.     display: block;  
  19.     color: # bdbdbd;  
  20.     font - family: "Castellar";  
  21.     margin - left: 2 % ;  
  22.     margin - top: 2 % ;  
  23.     padding: 2 % ;  
  24.     width: 80 % ;  
  25. }  
  26. .fm input {  
  27.     padding: 2 % ;  
  28.     margin: 2 % ;  
  29.     color: #06a7e2;  
  30.     width: 100%;  
  31. }  
  32. .btn{  
  33.     background-color: #06a7e2;  
  34.     color: white;  
  35.     text - decoration: none;  
  36.     padding: 15 px 32 px;  
  37.     border: none;  
  38.     font - size: 100 % ;  
  39. }  
  40. .btn: hover {  
  41.         opacity: 0.9;  
  42.     }  
  43.     .bcon {  
  44.         width: 100 % ;  
  45.         height: 100 % ;  
  46.     }  
  47. label {  
  48.     float: left;  
  49. }  
Output
Ebook Download
View all
Learn
View all