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 |
A Pen by Kdooley | 4,873 Kb |
Features Slider | 2,627 Kb |
Flat buttons for Eliassen.com | 1,737 Kb |
DoorChampion Login Page | 3,747 Kb |
MobileDev App Page | 3,814 Kb |
Listing-card-style | 3,573 Kb |
Image-Slider in laptop screen | 2,469 Kb |
DevOps Submenu | 3,020 Kb |
Fixed-Background-Panels | 2,446 Kb |
VSCO Emulation | 4,079 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 |
TinFoil Boats | Chandralil | 4,577 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
Donut Chart example - MorrisJS | Capelo | 2,385 Kb |
Menubar compass mixin | Michaelparenteau | 4,925 Kb |
Fading gradient button | Insprd | 1,713 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
Blockquote design | Sjmcpherson | 1,863 Kb |
Font stack | Adrianjacob | 1,868 Kb |
CSS Grid Overlay | Cliffpyles | 3,090 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!