Skip to main content

Designing a simple login form using HTML and CSS with source code




This is a simple login form designed for learning purpose only.I have used HTML and CSS for designing this form.Its source code is available below...

Way of executing the given code:
  1. Copy the given HTML code and paste it in your Text editor and save it as Loginform.html
  2. Copy the CSS code to your text editor and save it as loginform.css
  3. Download this image and save it as login_logo.png
  4. Both the files including the above image must be in same location.

HTML CODE...


<html> <head> <title>Account management</title> <meta name="viewport" content="width=device-width,initial-scale-1"> <link rel="stylesheet" type="text/css" href="loginform.css"> </head> <body> <div class="header"> <table> <form class="search" action="#"> <th><input type="search" class="search" placeholder="Search here..."></th> <th><button class="srch">Search</button></th> </table></form> </div> <div class="form"> <p align="center" class="form">User Login !</p> <center> <img class="logo" src="login_logo.jpg"> <form> <input type="email" class="email" placeholder="Email Or Phone"> <br> <input type="password" class="password" placeholder="********" min-length="8"> <br> <p class="fgpass"><a class="fgpass" href="#">Forgot password?</a></p> <input type="submit" class="login" value="Login"> </form> <hr> <div class="or">Or</div> <div> <form action="signup.html"> <button class="signup">Sign up</button> </form></div> </html>

CSS CODE...

body{ background-color:#000025; } div.header{ background:#0052cc; min-height:30px;width:100%; padding:10px; left:0px;top:0px; position:fixed; } input.search{ color:grey; background:#000025; font-family:serif;letter-spacing:1px; margin-left:120px; border:1px solid #000090;outline:none; border-radius:10px; height:25px;width:220px;padding:5px; } input.search:hover { border:none; } button.srch{ font-family:serif; background:linear-gradient(to bottom,white 10%,grey 50%); color:white; margin-left:-63px;border:none; border-top-right-radius:10px; border-bottom-right-radius:10px; border-left:1px solid #000090; outline:none; height:23px; } button.srch:hover:active { border-color:yellow; font-size:10px; } div.form{ margin-top:50px; background-color:#000020; } IMG.logo{ height:120px;width:120px; border-radius:500px; } div.form p.form{ font-family:serif; font-size:35px; text-shadow:1px 1px 1px white; color:grey; } input.email{ margin-top:15px; color:grey; font-size:20px; border:none; border-bottom:1px solid grey; outline:none; background:transparent; width:100%; padding:10px; height:40px; letter-spacing:2px; } input.email:hover{ border-bottom-color:#000099; } input.password { letter-spacing:2px; font-size:20px; margin-top:15px; border:none; border-bottom:1px solid grey; outline:none; background:transparent; width:100%; padding:10px; height:40px; } input.password:hover { border-bottom-color:#000099; } input.login{ text-transform:uppercase;font-size:20px; font-weight:bold;color:grey; margin-top:10px; width:100%; height:35px; border-radius:5px; letter-spacing:2px; background:#0052cc; outline:none; } input.login:hover { font-size:17px; } a.fgpass{ text-decoration:none; } p.fgpass{ margin-top:10px; font-size:20px; letter-spacing:1px; } div.or{ color:grey; margin-top:-15px; background-color:#000025; height:10px;font-size:20px; width:50px; } hr{ border:1px solid #0052cc; border-radius:10px; } button.signup{ margin-top:20px; width:100%; border-radius:5px; background:#fff; font-size:18px; outline:none; } button.signup:hover { font-size:14px; }

Thanks for visiting.Please like and follow my blog and don't forget to visit daily for new content.

Comments

Post a Comment

Popular posts from this blog

E-books based on web designing and some programming languages

Here I am with some PDF books.This time I am only publishing PDF books related various programming languages and some PDF books required to a beginner web developer.Each PDF book is fully detailed and contains very efficient content.These books are specially dedicated to the students and beginners.Each programming book contains 500+ pages. Download Your Required Books Here : Advanced c++ programming language.pdf download Ethical hacking full course.pdf download Pearl programming language.pdf download Advanced in linux OS.pdf download Java programming language full course.pdf download Html 5 full course.pdf download Gmail hacking full course.pdf download Network security full course.pdf download C Programming language.pdf download html and css full advanced course.pdf download html,css and java script all in one.pdf download Beside these PDFs, I have 100s of PDF books of C# programming,C++ programmi...
6 comments
Read more

Designing a Facebook login page with source code.

Do you use Facebook lite?This is the login page of Facebook lite.This is for learning purpose only.The front-end design of login page of Facebook very simple using HTML and CSS.The source code and way of executing the code is below: How to execute the code? Copy the HTML code and paste it in your notepad or text editor and save it as Facebooksample.html Copy the CSS code and paste it in your notepad or text editor and save it as facebooksample.css The location of both the files must be same otherwise there will be error... HTML CODE Facebook sample Facebook Mobile Number Or Email Password Forgot your password? Or English नेपाली More Languages... Help Exit CSS CODE #header{ background-color:#0052cc; position:fixed; min-height:20px; padding:5px; width:100%; left:0px; top:0px; color:white; } #form{ margin-top:36px; } #email_value{color:#404040;font-size:15px;} #email{ background:#f2f2f2; margin-top:10px; height:35px; width:100...
3 comments
Read more