Login Screen
How do I make an login screen?
Just a small experiment with a login window. What is a login screen? How do you make a login screen? This script and codes were developed by Kdooley on 25 September 2022, Sunday.
Login Screen - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Login Screen</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">
<div class="login animated slideInDown"> <div class="topbar-login"> <div class="close"> <a href="#0"> <i class="fa fa-close"></i></a> </div> </div> <div class="login-header"> <i class="fa fa-asterisk logo"></i> <h1>Welcome</h1> <h3>Lets get you logged in!</h3> <hr /> </div> <div class="content"> <div class="input-group"> <label>Username</label> <input type="email" placeholder="[email protected]" required /> </div> <div class="input-group"> <label>Password</label> <input type="password" placeholder="#$%&^*!@" required /> </div> <div class="input-group"> <input class="login-btn" type="submit" value="Login" /> </div> </div>
</div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Login Screen - Script Codes CSS Codes
body { background-image: url(https://i.imgur.com/HgflTDf.jpg); background-size: cover; background-repeat: no-repeat; height: 100vh; font-family: "Lato","Helvetica",san-serif;
}
.wrapper { background-color: rgba(0, 0, 0, 0.8); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; min-height: 100%;
}
.login { width: 400px; height: 650px; background-color: rgba(255, 255, 255, 0.35); margin-left: auto; margin-right: auto; display: block; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.25); z-index: 1;
}
.topbar-login { position: relative; height: 25px; background-color: rgba(255, 255, 255, 0.55);
}
.close { float: right; margin-right: 5px; margin-top: 2px;
}
.close a { color: #0b7e61;
}
.login-header { text-align: center; color: white;
}
.login-header h1 { font-weight: 100; font-size: 3em;
}
.login-header h3 { font-weight: 300; margin-bottom: 35px;
}
.login-header hr { width: 90%; margin-bottom: 25px;
}
.login-header .logo { margin-top: 35px; font-size: 4em; border: 2px solid white; border-radius: 50%; padding: 15px;
}
.content { padding: 0px 15px 15px 15px;
}
.content .input-group:first-child { margin-bottom: 16px;
}
.content .input-group:last-child { margin-top: 40px;
}
.content .input-group label { display: block; width: 100%; padding: 6px 0px 6px 0px; -webkit-text-overflow: ellipsis; -moz-text-overflow: ellipsis; text-overflow: ellipsis; box-sizing: border-box; color: #cccccc;
}
.content .input-group input { display: block; width: 100%; height: 37px; font-size: 14px; font-width: 400; padding-left: 15px; padding-right: 15px; line-height: 37px; border: none; color: #555555; box-sizing: border-box; -webkit-appearance: none; /* Safari and Chrome */ -moz-appearance: none; /* Firefox */ appearance: none; -webkit-transition: all 0.3s; transition: all 0.3s;
}
.content .input-group input[type="submit"] { background: #14DBA9; color: white; text-transform: uppercase;
}
.content .input-group input[type="submit"]:hover { background: #12c497;
}
.content .input-group input[type="submit"]:active { background: #10ac85;
}
.content .input-group input::-webkit-input-placeholder { /* WebKit browsers */ font-family: inherit; font-style: normal; font-weight: normal; color: #A7A7A7;
}
.content .input-group input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ font-family: inherit; font-style: inherit; font-weight: inherit; color: #A7A7A7; opacity: 1;
}
.content .input-group input::-moz-placeholder { /* Mozilla Firefox 19+ */ font-family: inherit; font-style: inherit; font-weight: inherit; color: #A7A7A7; opacity: 1;
}
.user:before { content: '\f007'; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; position: relative; display: inline-block;
}
Login Screen - Script Codes JS Codes
$( ".login-btn" ).click(function() { $('.login').fadeOut('slow');
});
$(".wrapper" ).click(function() { $('.login').fadeIn(300);
});
![Login Screen - Script Codes](http://shots.codepen.io/kdooley89/pen/doLdqZ-512.jpg)
Developer | Kdooley |
Username | kdooley89 |
Uploaded | September 25, 2022 |
Rating | 3 |
Size | 4,227 Kb |
Views | 12,144 |
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!
Name | Size |
Color Swatches | 2,472 Kb |
DoorChampion Login Page | 3,747 Kb |
VSCO Emulation | 4,079 Kb |
Leadership Bio Buildout | 5,857 Kb |
Features Slider | 2,627 Kb |
Flat buttons for Eliassen.com | 1,737 Kb |
Listing-card-style | 3,573 Kb |
DevOps Submenu | 3,020 Kb |
VR-Download Page | 3,622 Kb |
Image-Slider in laptop screen | 2,469 Kb |
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!
Name | Username | Size |
RWD Conversion Practice | Jxqr97 | 2,743 Kb |
Css color for svg | Ademilter | 2,392 Kb |
Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
Wave Lines | Mikehobizal | 4,023 Kb |
Exploring css spinners | Akagr | 3,569 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Custom Select Element | Agrayson | 3,616 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!