Modern Login Box

Developer
Gigaleet
Size
4,165 Kb
Views
8,096
  1. Modern Login Box Previews
  2. Modern Login Box HTML Codes
  3. Modern Login Box CSS Codes

How do I make an modern login box?

What is a modern login box? How do you make a modern login box? This script and codes were developed by Gigaleet on 08 January 2023, Sunday.

Modern Login Box Previews
IQ Test

Modern Login Box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Modern Login Box</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="loginbox"> <div id="header"> <div id="cont-lock"><i class="fa fa-lock"></i></div> <div id="bottom-head"><h1>Login to Control Panel</h1></div> </div> <form name="LoginForm" class="account_form" method="" action=""> <div class="group"> <input type="text" name="username" id="username" required> <span class="highlight"></span> <span class="bar"></span> <label>Username</label> </div> <div class="group"> <input type="password" name="password" id="password" autocomplete="off" required> <span class="highlight"></span> <span class="bar"></span> <label>Password</label> </div> <p><a href="/">Forgot Password &raquo;</a></p> <button type="submit" name="webLogin" class="submit">Login</button> </form> <div id="footer-box"> <p>Not a member? <a href="/" class="sign-up">Sign up now</a></p> </div>
</div>
</body>
</html>

Modern Login Box - Script Codes CSS Codes

html { font-family: 'Open Sans', Arial, sans-serif; font-size: 18px; line-height: 24px; color: #000; background-color: #fff;
}
/* Login Box */
.loginbox { position: relative; margin: auto; margin-bottom: 100px; height: 460px; width: 400px; top: 40px; left: 0; right: 0; z-index: 200; border-radius: 3px; background: #FFF; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); overflow: hidden;
}
.loginbox p { font-size: 14px; text-align: center;
}
.loginbox a { color: #000; cursor: pointer; text-decoration: none;
}
.loginbox a:hover { text-decoration: underline;
}
.loginbox #header { background: #92ce61; position: relative; height: 120px; width: 100%; margin-bottom: 30px;
}
.loginbox #header #cont-lock { width: 100%; height: 70px; position: relative;
}
.loginbox #header #cont-lock .fa-lock { text-align: center; color: white; position: absolute; left: 0; right: 0; margin: 0; top: 0; bottom: 0; line-height: 65px; font-size: 28px;
}
.loginbox #header #bottom-head { position: relative; background: #71BB44; height: 50px;
}
.loginbox #header #bottom-head::after { content: ''; width: 0px; height: 0px; display: block; position: absolute; margin: auto; left: 0; right: 0; bottom: 0; border-bottom: 7px solid white; border-right: 7px solid transparent; border-left: 7px solid transparent; border-top: 7px solid transparent;
}
.loginbox #header #bottom-head h1 { font-size: 18px; padding-top: 5px; text-align: center; margin-left: 20px; margin-top: 0; font-weight: 300; color: #fff; line-height: 35px;
}
.loginbox form .group { position: relative; margin-top: 35px; margin-left: 40px;
}
.loginbox form .group input { font-size: 18px; padding: 10px 10px 10px 5px; display: block; width: 300px; border: none; border-bottom: 1px solid #000;
}
.loginbox form .group input:focus { outline: none;
}
.loginbox form .group input:focus ~ label, .loginbox form .group input:valid ~ label { top: -20px; font-size: 14px; color: #ff8800;
}
.loginbox form .group input:focus ~ .bar:before, .loginbox form .group input:focus ~ .bar:after { width: 50%;
}
.loginbox form .group input:focus ~ .highlight { -webkit-animation: inputHighlighter 0.3s ease; animation: inputHighlighter 0.3s ease;
}
.loginbox form .group .bar { position: relative; display: block; width: 315px;
}
.loginbox form .group .bar:before, .loginbox form .group .bar:after { content: ''; height: 2px; width: 0; bottom: 1px; position: absolute; background: #ff8800; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all;
}
.loginbox form .group .bar:before { left: 50%;
}
.loginbox form .group .bar:after { right: 50%;
}
.loginbox form .group label { color: #000; font-size: 14px; font-weight: normal; position: absolute; pointer-events: none; left: 5px; top: 10px; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all;
}
.loginbox form p { margin-top: 25px;
}
.loginbox form p a { color: #6FBC44;
}
.loginbox form button { background-color: #ff8800; border: 2px solid #fff; border-radius: 5px; color: #fff; font-size: 16px; margin: 15px auto 0 auto; padding: 10px 60px; display: block;
}
.loginbox form button:hover, .loginbox form button:focus { background-color: #fff; border-color: #ff8800; outline: none; color: #ff8800;
}
.loginbox form button:active { box-shadow: inset 2px 3px 5px rgba(0, 0, 0, 0.25);
}
.loginbox #footer-box { width: 100%; height: 50px; background: #71BB44; position: absolute; bottom: 0; color: #fff;
}
.loginbox #footer-box p a { margin-left: 3px;
}
/* Annimations */
@-webkit-keyframes inputHighlighter { from { background: #ff8800; } to { width: 0; background: transparent; }
}
@keyframes inputHighlighter { from { background: #ff8800; } to { width: 0; background: transparent; }
}
Modern Login Box - Script Codes
Modern Login Box - Script Codes
Home Page Home
Developer Gigaleet
Username Gigaleet
Uploaded January 08, 2023
Rating 3
Size 4,165 Kb
Views 8,096
Do you need developer help for Modern Login Box?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gigaleet (Gigaleet) Script Codes
Name
Pure CSS Hamburger Button
Modal Dialog
FlexBox Fixed Left Side Bar and Header Layout
CSS placeholder labels
Status Loader
A Pen by Gigaleet
Light Box
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!