Login Process

Developer
Joseph Victory
Size
2,291 Kb
Views
36,432
  1. Login Process Previews
  2. Login Process HTML Codes
  3. Login Process CSS Codes
  4. Login Process JS Codes

How do I make an login process?

Fade in and out login form with autofocus. Press enter to continue :). What is a login process? How do you make a login process? This script and codes were developed by Joseph Victory on 20 August 2022, Saturday.

Login Process Previews
IQ Test

Login Process - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Login Process</title> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="user what visible"> What is your Username? <input type="text" class="focus" />
</div>
<div class="pass what"> What is your Password? <input type="password" class="cool" />
</div>
<p class="info">Press enter continue.</p>
<!-- inspired by momentum plugin for chrome --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Login Process - Script Codes CSS Codes

body{
font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", Helvetica, Arial, sans-serif; background:black;
}
.what{ text-align: center;
line-height: 1;
padding: 0;
margin: 0;
color: #fff;
letter-spacing: -5px;
font-size: 60px;
font-weight: lighter; margin-top:10%;
}
input{ width: 17em;
border-bottom-width: 2px;
font-weight: bold;
margin: 0 auto;
display: block;
background: 0;
border: 0;
border-bottom: 3px solid #fff;
color: #fff;
outline: none;
text-align: center; height:130px; font-size:40px;
}
.pass{ display:none;
}
.info{ color:rgb(32, 32, 32); text-align:center; font-size:20px; text-transform:uppercase;
}

Login Process - Script Codes JS Codes

$(document).ready(function(){ $('.focus').focus(); $(document).keypress(function(e) { if(e.which == 13) { var user = $('.user'); var pass = $('.pass');	$('.focus').focus(); if(user.hasClass('visible')){ user.removeClass('visible').fadeOut(function(){ pass.addClass('visible').fadeIn(function(){ $('.cool').focus(); }); }); }else if(pass.hasClass('visible')){ pass.removeClass('visible').fadeOut(function(){ user.addClass('visible').fadeIn(function(){ $('.focus').focus(); }); }); } }
});
});
Login Process - Script Codes
Login Process - Script Codes
Home Page Home
Developer Joseph Victory
Username j-w-v
Uploaded August 20, 2022
Rating 4.5
Size 2,291 Kb
Views 36,432
Do you need developer help for Login Process?

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!

Joseph Victory (j-w-v) Script Codes
Name
Portfolio Opening Page
Faded Title
Social Share
Login Form
Portfolio Home Page
Fading Navigation Bar
Instagram User Profile
Pricing Tables
Loading Animation
Blog Post Using Vertical Rhythm
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!