Continuous register clean form with autoresize input
How do I make an continuous register clean form with autoresize input?
A clean register form like a continuous speech with autoresize input where insert our info to register ourselves.. What is a continuous register clean form with autoresize input? How do you make a continuous register clean form with autoresize input? This script and codes were developed by Robert Borghesi on 27 August 2022, Saturday.
Continuous register clean form with autoresize input - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Continuous register clean form with autoresize input </title> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="form_container"> <div class="title">Join us bro!</div> <form> <div class="name"> We want to know you! <br>My name is <input type="name" placeholder="Jony Ive" required data-autosize-input='{ "space": 0 }'>, my email is <input type="email" placeholder="[email protected]" required data-autosize-input='{ "space": 0 }'> and my amazing supersecret password is <input type="password" placeholder="ssssh!" required data-autosize-input='{ "space": 0 }'> </div> <button type="submit"> let's go! <i class="fa fa-angle-double-right"></i> </button> <div class="already">(If you are already one of us,<a href="#"> sign in.</a>)</div> </form>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://www.fakeyourbeauty.com/jquery.autosize.input.debug.js'></script>
</body>
</html>
Continuous register clean form with autoresize input - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Roboto:100,,300,400,700);
* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
}
html { height: 100%;
}
body { background: url("http://www.iltourdinibali.it/codepens/bluebg.jpg") no-repeat center center; background-size: cover; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; font-family: 'Roboto', sans-serif; border: 15px solid #e9f6ff; margin: 0; height: 100%;
}
.title { font-size: 40px; margin-bottom: 30px; color: #e9f6ff; font-weight: 300;
}
.form_container { width: 500px; position: fixed; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); left: 50%; top: 50%; color: #8dceff; font-size: 20px; font-weight: 100; text-align: center;
}
input { background: transparent; border: none; font-size: 20px; color: #e9f6ff; max-width: 350px; transition: width 0s; -webkit-transition: width 0s; border-bottom: dotted 2px #e9f6ff; font-family: 'Roboto', sans-serif; font-weight: 300;
}
input[type="name"] { width: 75px; min-width: 20px;
}
input[type="email"] { width: 234px; min-width: 20px;
}
input[type="password"] { width: 55px; min-width: 20px;
}
button { position: relative; padding: 8px 20px; margin-top: 20px; color: white; background: transparent; border: 0px; font-size: 20px; color: r #e9f6ff; font-weight: 100; cursor: pointer; font-family: 'Roboto', sans-serif; font-weight: 300;
}
.fa { position: relative; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s;
}
button:hover .fa { margin-left: 5px;
}
.already { font-size: 11.11111px;
}
a { text-decoration: none; color: #e9f6ff;
}
input:focus { outline: 0;
}
button:focus { outline: 0;
}
::-webkit-input-placeholder { color: #e9f6ff;
}
::-moz-placeholder { color: #e9f6ff;
}
/* firefox 19+ */
:-ms-input-placeholder { color: #e9f6ff;
}
/* ie */
input:-moz-placeholder { color: #e9f6ff;
}
input:focus::-webkit-input-placeholder { color: transparent;
}
input:focus:-moz-placeholder { color: transparent;
}
/* FF 4-18 */
input:focus::-moz-placeholder { color: transparent;
}
/* FF 19+ */
![Continuous register clean form with autoresize input - Script Codes](http://shots.codepen.io/dghez/pen/eKmop-512.jpg)
Developer | Robert Borghesi |
Username | dghez |
Uploaded | August 27, 2022 |
Rating | 3 |
Size | 3,549 Kb |
Views | 52,624 |
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 |
SlamDunk Parallax on MouseMove | 2,512 Kb |
Text-mask background moving on MouseMove - v2 | 3,050 Kb |
Gradient border on hover - Scorer of fifa world cup | 3,598 Kb |
Pure Css Loader - Square | 2,498 Kb |
Fullscreen slice hero slider | 9,370 Kb |
Opening animation from circular avatar | 5,977 Kb |
Pulse Avatar on click with TweenMax | 4,116 Kb |
Sorting with morphing content | 2,387 Kb |
Envato Remix Contest Challenge | 5,017 Kb |
Hover otating cards folder of OnePiece characters | 3,131 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 |
Weird glowy CSS3 game | Toneworm | 3,684 Kb |
Another brick in the wall | Fivera | 1,955 Kb |
Portfolio page | Bhavya_j | 2,804 Kb |
Text Looping Transition | Agelber | 5,619 Kb |
Countdown with Rings | Ewganoel | 2,490 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
Flip test | Madhes | 1,635 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
Experiment - SCSS SVG Background Image with Variables | See8ch | 3,270 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!