An Interest In:
Web News this Week
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
Some of Our Sources
- Simplebits
- Just Creative
- Vandelay Design
- Fuel Your Creativity
- Naldz Graphics
- Line 25
- Specky Boy
- CSS Tricks
- Android Dissected
- Hashedout
Help Webnuz
Referal links:
June 24, 2022 07:34 pm GMT
Original Link: https://dev.to/codewithayan10/simple-login-page-in-html-and-css-3p2i
Simple Login Page in HTML and CSS
Hello guys, Today in this post well learn How to Create a Simple Login Page with a fantastic design. To create it we are going to use pure CSS and HTML. Hope you enjoy this post.
A login page is one of the most important component of a website or app that allows authorized users to access an entire site or a part of a website. You would have already seen them when visiting a website. Let's head to create it
Whether its a signup or login page, it should be catchy, user-friendly and easy to use. These types of Forms lead to increased sales, lead generation, and customer growth.
Demo
Click to watch demo!
Simple Login Page HTML CSS (source code)
HTML Code
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="styledfer.css"> </head> <body> <div id="login-form-wrap"> <h2>Login</h2> <form id="login-form"> <p> <input type="email" id="email" name="email" placeholder="Email " required><i class="validation"><span></span><span></span></i> </p> <p> <input type="password" id="password" name="password" placeholder="Password" required><i class="validation"><span></span><span></span></i> </p> <p> <input type="submit" id="login" value="Login"> </p> </form> <div id="create-account-wrap"> <p>Don't have an accout? <a href="#">Create One</a><p> </div> </div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js'></script> </body></html>CSS Code
body { background-color: #020202; font-size: 1.6rem; font-family: "Open Sans", sans-serif; color: #2b3e51;}h2 { font-weight: 300; text-align: center;}p { position: relative;}a,a:link,a:visited,a:active { color: #ff9100; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}a:focus, a:hover,a:link:focus,a:link:hover,a:visited:focus,a:visited:hover,a:active:focus,a:active:hover { color: #ff9f22; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}#login-form-wrap { background-color: #fff; width: 16em; margin: 30px auto; text-align: center; padding: 20px 0 0 0; border-radius: 4px; box-shadow: 0px 30px 50px 0px rgba(0, 0, 0, 0.2);}#login-form { padding: 0 60px;}input { display: block; box-sizing: border-box; width: 100%; outline: none; height: 60px; line-height: 60px; border-radius: 4px;}#email,#password { width: 100%; padding: 0 0 0 10px; margin: 0; color: #8a8b8e; border: 1px solid #c2c0ca; font-style: normal; font-size: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; display: inline-block; background: none;}#email:focus,#password:focus { border-color: #3ca9e2;}#email:focus:invalid,#password:focus:invalid { color: #cc1e2b; border-color: #cc1e2b;}#email:valid ~ .validation,#password:valid ~ .validation { display: block; border-color: #0C0;}#email:valid ~ .validation span,#password:valid ~ .validation span{ background: #0C0; position: absolute; border-radius: 6px;}#email:valid ~ .validation span:first-child,#password:valid ~ .validation span:first-child{ top: 30px; left: 14px; width: 20px; height: 3px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}#email:valid ~ .validation span:last-child#password:valid ~ .validation span:last-child{ top: 35px; left: 8px; width: 11px; height: 3px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}.validation { display: none; position: absolute; content: " "; height: 60px; width: 30px; right: 15px; top: 0px;}input[type="submit"] { border: none; display: block; background-color: #ff9100; color: #fff; font-weight: bold; text-transform: uppercase; cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; font-size: 18px; position: relative; display: inline-block; cursor: pointer; text-align: center;}input[type="submit"]:hover { background-color: #ff9b17; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}#create-account-wrap { background-color: #eeedf1; color: #8a8b8e; font-size: 14px; width: 100%; padding: 10px 0; border-radius: 0 0 4px 4px;}Congratulations! You have now successfully created our Simple Login Page in HTML and CSS.
My Website: codewithayan, see this to checkout all of my amazing Tutorials.
Original Link: https://dev.to/codewithayan10/simple-login-page-in-html-and-css-3p2i
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To