Simple register

Developer
Maharajan
Size
2,505 Kb
Views
2,024
  1. Simple register Previews
  2. Simple register HTML Codes
  3. Simple register CSS Codes
  4. Simple register JS Codes

How do I make an simple register?

What is a simple register? How do you make a simple register? This script and codes were developed by Maharajan on 26 January 2023, Thursday.

Simple register Previews
IQ Test

Simple register - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>simple register</title> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="login-container">
<div class="loginContainer" > <div class="containerdetails"> <div class="newrow"> <i class="fa fa-user" aria-hidden="true"></i> <input type="text" placeholder="Username" /> </div> <div class="newrow"> <i class="fa fa-key" aria-hidden="true"></i> <input type="text" placeholder="Password" /> </div> <div class="newrow"> <button>Enter</button> </div> <div class="togglelogin register"> Register </div> </div> </div>
<div class="registerContainer"> <div class="containerdetails"> <div class="newrow"> <i class="fa fa-user" aria-hidden="true"></i> <input type="text" placeholder="Username" /> </div> <div class="newrow"> <i class="fa fa-key" aria-hidden="true"></i> <input type="text" placeholder="Password" /> </div> <div class="newrow"> <i class="fa fa-key" aria-hidden="true"></i> <input type="text" placeholder="Confirm password" /> </div> <div class="newrow"> <button>Register</button> </div> </div> <div class="togglelogin register"> Login </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple register - Script Codes CSS Codes

body, html { background: #00497e; width: 100%; height: 100%; display: inline-block;
overflow:hidden; font-family: sans-serif;
}
.login-container { width: 100%; height: 100%; position: relative; display: inline-block;
}
div.loginContainer,.registerContainer { width: 350px; height: 500px; background: #f3f3f3; margin-right: 20px; position: absolute; top: 20%; right: 0%; border-radius: 5px; display:inline-table; transition:all 1s ease; position:absolute; right: 0px; top: 20%; transform-style: preserve-3d;
}
div.loginContainer,.registerContainer { -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.rotatelogin div.loginContainer{ -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg);
}
.rotatelogin .registerContainer
{ -webkit-transform: rotateY(0); transform: rotateY(0);
}
.registerContainer
{
-webkit-transform: rotateY(-180deg); transform: rotateY(-180deg);
}
.containerdetails { display: table-cell; vertical-align: middle;
}
.newrow { width: 100%; position: relative;
}
.newrow i
{ position: absolute; left: 26px; top: 13px;
}
input[type="text"] { border: none; background: white; height: 40px; width: 81%; margin: 0px auto; display: block; border-radius: 5px; margin-bottom: 10px; padding-left: 40px;
}
button { border: none; background: green; padding: 10px 30px; margin: 0px auto; display: block; margin-top: 20px; border-radius: 5px; color: #fff; cursor: pointer; outline: none;
}
.togglelogin.register { position: absolute; bottom: 0px; background: red; width: 100%;
background: #006cbb; padding: 15px 0px; text-align: center; color: #fff; font-size: 20px; cursor:pointer; left:0px;
}

Simple register - Script Codes JS Codes

$(function() {
$('.togglelogin').on('click',function()
{
$('.login-container').toggleClass('rotatelogin');
}); });
Simple register - Script Codes
Simple register - Script Codes
Home Page Home
Developer Maharajan
Username mhrjnsa1
Uploaded January 26, 2023
Rating 3
Size 2,505 Kb
Views 2,024
Do you need developer help for Simple register?

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!

Maharajan (mhrjnsa1) Script Codes
Name
A Pen by maharajan
Notification
Sound waves
Hover input
Locator
Drop down options disable
Boom
Circle loader
Change background while click and hover
Text appearance
Create amazing marketing copy 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!