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 href="#" class="fgpass" >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

Top 10 websites for learning ethical hacking

Do you want to become a Computer expert? Well ,almost 80% of answers will be 'yes'.But becoming a cyber expert is not soo easy task.This is 21st century ,age of science abd technology or let's say age of Internet as well.Now a days computers and internet is used in almost every field of human being including Teaching-learning,Business,industries,scientific study,communication and many more.Some people think that hacking means illegal works like accessing others system for illegal purpose but hacking also means preventing those illegal works and the hacker doing so are known as ethical hackers.Preventing the black hat hackers or illegal hackers form taking other peiple's and tracking such people is the main aima and work of ethical hackers. You can learn hacking online in various websites but some most visited and top rated courses providing websites are listed below.Cybrary is one of the best online site for learning ethical hacking,penetration testing,social en...
Post a Comment
Read more