Sign Up
How do I make an sign up?
You can see this in action at http://www.getstudiokit.com/.. What is a sign up? How do you make a sign up? This script and codes were developed by Casey Zumwalt on 07 November 2022, Monday.
Sign Up - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sign Up</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="sign-up"> <a href="" class="sign-up-button">Sign up for the beta</a> <div class="input-group"> <label for="">Enter your email address</label> <input type="text" /> <button>Sign Up</button> </div>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Sign Up - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { background: url(http://zmwlt.com/bucket/bg-big.jpg); font-family: 'Open Sans';
}
.wrapper { height: 80px; position: absolute; top: 50%; margin-top: -40px; width: 100%;
}
.sign-up { border: 2px solid white; height: 80px; margin: 0 auto; overflow: hidden; padding: 15px; position: relative; width: 350px; -webkit-backface-visibility: hidden; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
.sign-up.open { width: 450px;
}
.sign-up .sign-up-button { background: white; color: #27ae60; height: 100%; font-size: 1.3em; font-weight: 600; left: 0; line-height: 80px; position: absolute; text-align: center; text-decoration: none; top: 0; width: 100%; z-index: 999; -moz-transition: display 0.3s ease; -o-transition: display 0.3s ease; -webkit-transition: display 0.3s ease; transition: display 0.3s ease;
}
.sign-up .sign-up-button:hover { color: #41CC7D;
}
.sign-up .input-group { display: none;
}
.sign-up label { color: white; position: absolute; top: 27px; left: 16px; pointer-events: none; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.sign-up input { background: none; border: 0; color: white; height: 45px; width: -moz-calc(100% - 125px); width: -o-calc(100% - 125px); width: -webkit-calc(100% - 125px); width: calc(100% - 125px);
}
.sign-up input:focus { outline: 0; -moz-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0;
}
.sign-up button { background: white; border: 0; color: #27ae60; height: 45px; font-weight: 600; position: absolute; top: 15px; right: 15px; width: 120px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}
.sign-up button:hover { color: #41CC7D;
}
Sign Up - Script Codes JS Codes
$(document).ready(function(){ $('.sign-up-button').on('click', function(e){ e.preventDefault(); $(this).parent().addClass('open'); $(this).fadeOut(); $(this).siblings('.input-group').fadeIn(); $(this).siblings('.input-group').find('input').focus(); }); var label = $('.input-group label'), input = $('.input-group input'); input.on('focus', function(){ label.css('opacity',0.5); }); input.on('keyup', function(){ label.css('opacity',0); if( $(this).val().length == 0 ) { label.css('opacity',0.5); } }); input.on('blur', function(){ if( $(this).val().length == 0 ) { label.css('opacity', 1); } });
});
Developer | Casey Zumwalt |
Username | zumwalt |
Uploaded | November 07, 2022 |
Rating | 4.5 |
Size | 3,468 Kb |
Views | 20,240 |
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 |
Pure CSS Minimal Toggle Button | 3,315 Kb |
Slidey things | 3,011 Kb |
Interactive pixel logo | 87,218 Kb |
Pure CSS loading animation | 2,517 Kb |
Pulsing loader | 2,503 Kb |
Bobbing preloader | 2,825 Kb |
Swiftype Lower Third | 4,796 Kb |
Dom to image | 10,686 Kb |
Video tiles | 2,831 Kb |
Animate in bugs | 6,867 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 |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
CSS Heart Loaders | Nourabusoud | 2,161 Kb |
CSS Tooltips | Darylldoyle | 2,599 Kb |
Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
CSS3 Diamond | Rendro | 1,960 Kb |
Fellowship of the Ring | Aussieyang | 2,639 Kb |
A bit of elegance | Hackthevoid | 9,095 Kb |
Sort the Knowlege | Eprouver | 3,915 Kb |
A Pen by aleen42 | Aleen42 | 11,473 Kb |
Product item | Mymahesh11 | 2,256 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!