Login Screen

Developer
Kdooley
Size
4,227 Kb
Views
12,144
  1. Login Screen Previews
  2. Login Screen HTML Codes
  3. Login Screen CSS Codes
  4. Login Screen JS Codes

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 Previews
IQ Test

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
Login Screen - Script Codes
Home Page Home
Developer Kdooley
Username kdooley89
Uploaded September 25, 2022
Rating 3
Size 4,227 Kb
Views 12,144
Do you need developer help for Login Screen?

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!

Kdooley (kdooley89) Script Codes
Name
Listing-card-style
VR-Download Page
DoorChampion Login Page
Testimonials Compuware layout
Features Slider
VSCO Emulation
Flat buttons for Eliassen.com
Color Swatches
Careers-Section-Locations
Leadership Bio Buildout
Create amazing web content 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!