Simple Login

Developer
Thomas Hare
Size
3,015 Kb
Views
10,120
  1. Simple Login Previews
  2. Simple Login HTML Codes
  3. Simple Login CSS Codes

How do I make an simple login?

I wanted a more elegant way for users to login, with built-in registration. Also supports my Simple-Password jQuery plugin!. What is a simple login? How do you make a simple login? This script and codes were developed by Thomas Hare on 17 November 2022, Thursday.

Simple Login Previews
IQ Test

Simple Login - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Login</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div class="col-xs-12 col-sm-8 col-md-6 col-lg-5"> <form class="simple-login card"> <div class="row"> <span class="sl-title">Simple Login / Registration</span> </div> <div class="row"> <div class="input-group"> <input class="form-control" placeholder="email" type="email"> <span class="input-group-addon">verify</span> <span class="input-group-addon"> <input type="checkbox"> </span> </div> </div> <div class="row"> <div class="input-group"> <input class="form-control" placeholder="password" type="password"> <span class="input-group-addon">verify</span> <span class="input-group-btn"> <button class="show-password btn btn-txt" type="button"></button> </span> </div> </div> <div class="row"> <div class="text-right"> <span class="pull-left forgot-pass"> <a href="#">forgot password</a> </span> <input class="btn btn-primary" type="submit" value="login"> <input class="btn btn-primary" type="submit" value="register"> </div> </div> </form> </div> <div class="card col-xs-12 col-sm-4 col-md-6 col-lg-7 pull-right" id="description"> <p class="bg-success">Simple-Login Builds off of Bootstrap v4 alpha</p> <p>This form also uses my Simple-Passwords jQuery plugin for the show-password button.</p> <p>I created a new bootstrap button class called 'btn-txt' for optimal display of the Show-Password eye button.</p> <p>Add the following to your css to enable that class:</p> <code> .btn-txt {<br> &emsp;&emsp;background: none;<br> &emsp;&emsp;border: none;<br> &emsp;&emsp;box-shadow: none !important;<br> &emsp;&emsp;outline: none !important;<br> } </code> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='js/epnkrv.js'></script>
</body>
</html>

Simple Login - Script Codes CSS Codes

body { background-color: #444; font-family: 'Helvetica Neaue', sans-serif; min-width: 25rem;
}
.container-fluid { padding: 0;
}
.btn-txt { background: none; border: none; box-shadow: none !important; padding: 0 .75rem !important; outline: none !important;
}
.simple-login { background-color: #555; border: none; padding: 1rem;
}
.sl-title { color: #EEE; display: block; font-size: 1.5rem;
}
.simple-login .row { margin: 1.5rem 0;
}
.simple-login .btn-txt { color: #EEE;
}
.simple-login .forgot-pass { margin: 0rem 0.5rem 0 0.25rem;
}
.simple-login .forgot-pass a { color: #EEE;
}
#description { background-color: #333; color: #EEE; padding: 0.5rem;
}
.simple-login, #description { margin-top: 1rem;
}
code { display: inline-block; padding: 1rem;
}
Simple Login - Script Codes
Simple Login - Script Codes
Home Page Home
Developer Thomas Hare
Username tommyhare
Uploaded November 17, 2022
Rating 3
Size 3,015 Kb
Views 10,120
Do you need developer help for Simple Login?

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!

Thomas Hare (tommyhare) Script Codes
Name
Stock Card
Ashley Fitness
12 Column Grid Framework In 12 Lines of Code
Bootstrap Form Fun
The Initiator
Simple Passwords
Random Drawing
Slate v2
Table Classes
Space Ashley
Create amazing sales emails 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!