HTML CSS Login Form

HTML CSS Login Form

index.html and css/style.css files should look:

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Sign in</title> <!-- Add style.css link --> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <h2>Sign in</h2> <div class="container" id="container"> <div class="form-container sign-in-container"> <form action="#"> <h1>Sign in</h1> <div class="social-container"> <a href="#" class="social"> <i class="fa fa-facebook"></i> </a> <a href="#" class="social"> <i class="fa fa-youtube-play"></i> </a> <a href="#" class="social"> <i class="fa fa-linkedin"></i> </a> </div> <span>or use your account</span> <input type="email" placeholder="Email" /> <input type="password" placeholder="Password" /> <a href="#">Forgot your password?</a> <button>Sign In</button> </form> </div> </div> <footer> <p> Created with <i class="fa fa-heart"></i> by <a target="_blank" href="https://soengsouy.com">Soeng Souy</a> </p> </footer> <!-- Add internal.js script link --> <script type="text/javascript" src="js/internal.js"></script> </body> </html>

css/style.css

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,800"); * { box-sizing: border-box; } body { background: #f6f5f7; display: flex; font-family: "Jost", sans-serif; background-image: url('../images/image_background.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; justify-content: center; align-items: center; flex-direction: column; font-family: "Montserrat", sans-serif; height: 100vh; margin: -20px 0 50px; } h1 { font-weight: bold; color: white; margin: 0; } h2 { text-align: center; color: white; } p { color: white; font-size: 14px; font-weight: 100; line-height: 20px; letter-spacing: 0.5px; margin: 20px 0 30px; } span { color: white; font-size: 12px; } a { color: #fff; font-size: 14px; text-decoration: none; margin: 15px 0; } ::placeholder { color: white; } input:focus, textarea:focus, select:focus { -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; border: 1px solid #1fb4d5 !important; border-bottom: 2px solid #0c4d73!important; outline-width: 0; font-weight: 400; } button { border: 0; outline: none; border-radius: 20px; color: #FFFFFF; font-size: 12px; font-weight: bold; padding: 12px 45px; letter-spacing: 1px; text-transform: uppercase; background: linear-gradient(to right, rgb(199 139 215) 0%, rgb(95 146 185) 96%); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); transition: transform 80ms ease-in; } button:active { transform: scale(0.95); } button:focus { outline: none; } button.ghost { background-color: transparent; border-color: #FFFFFF; } form { background: linear-gradient(to right, #a76dc6, #5d93b8); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 50px; height: 100%; text-align: center; } input { background: linear-gradient(to right, rgb(199 139 215) 0%, rgb(95 146 185) 96%); color: white; border: none; padding: 12px 15px; margin: 8px 0; width: 100%; } .container { background: linear-gradient(to right, #0c4d73, #1fb4d5); position: relative; overflow: hidden; width: 350px; max-width: 100%; min-height: 480px; border-radius: 10px; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2); } .form-container { position: absolute; top: 0; height: 100%; transition: all 0.6s ease-in-out; } .sign-in-container { left: 0; width: 100%; z-index: 2; } .container.right-panel-active .sign-in-container { transform: translateX(100%); } .container.right-panel-active .sign-up-container { transform: translateX(100%); opacity: 1; z-index: 5; animation: show 0.6s; } @keyframes show { 0%, 49.99% { opacity: 0; z-index: 1; } 50%, 100% { opacity: 1; z-index: 5; } } .overlay-container { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; overflow: hidden; transition: transform 0.6s ease-in-out; z-index: 100; } .container.right-panel-active .overlay-container { transform: translateX(-100%); } .overlay { background: linear-gradient(to right, #0c4d73, #1fb4d5); background-repeat: no-repeat; background-size: cover; background-position: 0 0; color: #FFFFFF; position: relative; left: -100%; height: 100%; width: 200%; transform: translateX(0); transition: transform 0.6s ease-in-out; } .container.right-panel-active .overlay { transform: translateX(50%); } .overlay-panel { position: absolute; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 40px; text-align: center; top: 0; height: 100%; width: 50%; transform: translateX(0); transition: transform 0.6s ease-in-out; } .overlay-left { transform: translateX(-20%); } .container.right-panel-active .overlay-left { transform: translateX(0); } .overlay-right { right: 0; transform: translateX(0); } .container.right-panel-active .overlay-right { transform: translateX(20%); } .social-container { margin: 20px 0; } .social-container a { border: 1px solid #DDDDDD; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; margin: 0 5px; height: 40px; width: 40px; } footer { background: linear-gradient(to right, #122b48, #11141d); color: #fff; font-size: 14px; bottom: 0; position: fixed; left: 0; right: 0; text-align: center; z-index: 999; } footer p { margin: 10px 0; } footer i { color: red; } footer a { color: #ffffff; text-decoration: none; }

The above updates link the css/style.css in the index.html, and ensure proper functionality of the background-image and CSS styling. Let me know if you need further adjustments!

Soeng Souy

Soeng Souy

Website that learns and reads, PHP, Framework Laravel, How to and download Admin template sample source code free.

Post a Comment

CAN FEEDBACK
close