Css3 Transition
In this post i am sharing a beautiful OTP Verification HTML template free for my users. It is a two step process to verify website/app login in a authentic way by using OTP verification through registered mobile number.
Here first of all you have to Enter your Registered Mobile number which you have registered and then press the button send to get OTP. If your input number is correct & registered you will get a OTP at your end on that mobile number by message then put this OTP to next input field & submit to check OTP correct or not.
In other case if you have entered wrong number by mistake you can press go back button to enter a new number again to get OTP.
This is a very useful step and popular way to provide their user a secured & safe way to get login authentically & ya I forget to mention I have also used a beautiful background animation using SVG bubble using masking of SVG. You can also try this separately where ever you want to use. These SVG Bubble Animations are very smooth & works seamlessly with every browser.
Let take a look at code for this:
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Otp Veritication HTML template</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="bgImage"></div> <svg class="blobCont"> <image xlink:href="https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-0.3.5&s=e20bc3d490c974d9ea190e05c47962f5&auto=format&fit=crop&w=634&q=80" mask="url(#mask)" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" /> <defs> <filter id="gooey" height="130%"> <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /> </filter> </defs> <mask id="mask" x="0" y="0"> <g style="filter: url(#gooey)"> <circle class="blob" cx="10%" cy="10%" r="80" fill="white" stroke="white"/> <circle class="blob" cx="50%" cy="10%" r="40" fill="white" stroke="white"/> <circle class="blob" cx="17%" cy="15%" r="70" fill="white" stroke="white"/> <circle class="blob" cx="90%" cy="20%" r="120" fill="white" stroke="white"/> <circle class="blob" cx="30%" cy="25%" r="30" fill="white" stroke="white"/> <circle class="blob" cx="50%" cy="60%" r="80" fill="white" stroke="white"/> <circle class="blob" cx="70%" cy="90%" r="10" fill="white" stroke="white"/> <circle class="blob" cx="90%" cy="60%" r="90" fill="white" stroke="white"/> <circle class="blob" cx="30%" cy="90%" r="80" fill="white" stroke="white"/> <circle class="blob" cx="10%" cy="10%" r="80" fill="white" stroke="white"/> <circle class="blob" cx="50%" cy="10%" r="20" fill="white" stroke="white"/> <circle class="blob" cx="17%" cy="15%" r="70" fill="white" stroke="white"/> <circle class="blob" cx="40%" cy="20%" r="120" fill="white" stroke="white"/> <circle class="blob" cx="30%" cy="25%" r="30" fill="white" stroke="white"/> <circle class="blob" cx="80%" cy="60%" r="80" fill="white" stroke="white"/> <circle class="blob" cx="17%" cy="10%" r="100" fill="white" stroke="white"/> <circle class="blob" cx="40%" cy="60%" r="90" fill="white" stroke="white"/> <circle class="blob" cx="10%" cy="50%" r="80" fill="white" stroke="white"/> </g> </mask> </svg> <!-- partial:index.partial.html --> <!-- multistep form --> <form id="msform"> <!-- step 1 --> <fieldset> <h2 class="h2">SMS Validation</h2> <h3 class="h3">Enter your phone number below </h3> <!--<label>Name</label>--> <input type="text" name="cpass" placeholder="Enter mobile number" /> <input type="button" name="next" class="next action-button" value="Send" /> </fieldset> <!-- step 2 --> <fieldset> <h2 class="h2">We sent your code</h2> <h3 class="h3">Enter the confirmation code below</h3> <input type="text" name="twitter" placeholder="Enter confirmation code" /> <input type="button" name="go back" class="previous " value="Go back" /> <input type="button" name="Submit" class="next action-button" value="Submit" /> </fieldset> <!-- step 3 --> <fieldset> <h1 class="h1">Nice Job!</h1> <h3 class="h3">Your finished</h3> <input type="button" name="previous" class="next action-button" value="Close" /> </fieldset> </form> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <!-- jQuery easing plugin --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js" type="text/javascript"></script> <!-- partial --> <script src="./script.js"></script> </body> </html> |
SCSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 | /*custom font*/ @import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,700,600,300); $lbl-color: #ccc; $lbl-noFocus: #ccc; $top: #000; $btn-color: #ccc; /*basic reset*/ * {margin: 0; padding: 0;} html { height: 100%; /*Image only BG fallback*/ background: #fff; } body { font-family: 'Open Sans', sans-serif; } /*form styles*/ #msform { width: 500px; margin: 0px auto; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; min-height: 315px; border-radius: 10px; box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2); } #msform fieldset { background: #fff; border: 0 none; border-radius: 10px; /*box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);*/ padding: 20px 30px; font-family: 'Open Sans', sans-serif; box-sizing: border-box; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); //box-shadow: 0px 10px 15px rgba(0,0,0,0.2); } /*Hide all except first fieldset*/ #msform fieldset:not(:first-of-type) { display: none; font-family: 'Open Sans', sans-serif; } /*inputs*/ #msform input, #msform textarea { padding: 15px; border: 1px solid #ccc; border-radius: 8px; margin-bottom: 10px; width: 100%; box-sizing: border-box; font-family: 'Open Sans', sans-serif; color: #000; font-size: 13px; background: #fff; } /*buttons*/ #msform .action-button { width: 100px; background: #2FC877; font-weight: bold; color: white; border: 0 none; border-radius: 40px; cursor: pointer; padding: 10px 20px; margin: 10px 5px; } #msform .previous { width: 100px; background:#545153; font-weight: bold; color: white; border: 0 none; border-radius: 40px; cursor: pointer; padding: 10px 20px; margin: 10px 5px; } #msform .action-button:hover, #msform .action-button:focus { background:#52BA7E; } #msform .previous:hover, #msform .previous:focus { background:#353334; } /*headings*/ .h2 { font-family: 'Open Sans', sans-serif; font-weight: 800; font-size: 30px; color: #2C3E50; margin: 25px 0; } .h3 { font-family: 'Open Sans', sans-serif; font-weight: 400; font-style: italic; font-size: 15px; color: #666; margin-bottom: 20px; } .h1 { margin: 40px 0; font-weight:800; font-size:48px; font-family: 'Open Sans', sans-serif; color: #2FC877; } /*logo*/ .powered { padding-top:20px; margin-bottom: 10px; clear:both; font-family: 'Open Sans', sans-serif; font-weight: 700; font-style:italic; font-size:10px; color:#292929; } .logo { margin: 0 2px; width:40px; height:auto; } label { transition-property: top, opacity; transition-duration: 0.2s; // browsers (se8/9) that do not support placeholder // text on input will see labels on page load position: absolute; top: .5em; font-size: .75em; font-weight: bold; color: $lbl-color; padding-left: 1.333333em; opacity: 1; &.valid { // I'm using this class for server side validation in // PHP, but I am also using it as a hook for styling opacity: 1; top: $top; color: $lbl-noFocus !important; } &.hasValue { top: $top; opacity: 1; } &.noFocus { color: $lbl-noFocus !important; } &.hasFocus { color: $lbl-color !important; } } input, textarea, button { width: 100%; padding: 1.5em 1em .5em; border: none; font-size: 1em; border-radius: 2px; background: #f5f5f5; resize: none; } input { margin-bottom: .5em; } button { padding: 1em; width: 50%; opacity: 1; color: lighten($btn-color, 50%); text-shadow: 0px 1px 0px darken($btn-color, 50%); } body, .bgImage { margin: 0; height: 100%; width: 100%; overflow: hidden; } .bgImage { position: absolute; background-image: url(https://image.freepik.com/free-photo/abstract-blur-hotel-interior_74190-4973.jpg); background-size: cover; background-position: top; -webkit-filter: grayscale(70%); /* Safari 6.0 - 9.0 */ filter: grayscale(70%); z-index: -1; } .blobCont { position: absolute; width: 100vw; height: 100vh; } @for $i from 1 through 18 { $a: #{$i*90}; $b: #{$i*90+360}; .blob:nth-child(#{$i}) { animation: move#{$i} 20s infinite linear; } @keyframes move#{$i} { from { transform: rotate(#{$a}deg) translate(200px, 0.1px) rotate(-#{$a}deg); } to { transform: rotate(#{$b}deg) translate(200px, 0.1px) rotate(-#{$b}deg); } } } |
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | //jQuery time var current_fs, next_fs, previous_fs; //fieldsets var left, opacity, scale; //fieldset properties which we will animate var animating; //flag to prevent quick multi-click glitches $(".next").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); next_fs = $(this).parent().next(); //activate next step on progressbar using the index of next_fs //show the next fieldset next_fs.show(); //hide the current fieldset with style current_fs.animate({opacity: 0}, { step: function(now, mx) { //as the opacity of current_fs reduces to 0 - stored in "now" //1. scale current_fs down to 80% scale = 1 - (1 - now) * 0.2; //2. bring next_fs from the right(50%) left = (now * 50)+"%"; //3. increase opacity of next_fs to 1 as it moves in opacity = 1 - now; current_fs.css({'transform': 'scale('+scale+')'}); next_fs.css({'left': left, 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, //this comes from the custom easing plugin easing: 'easeInOutBack' }); }); $(".previous").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); previous_fs = $(this).parent().prev(); //de-activate current step on progressbar $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); //show the previous fieldset previous_fs.show(); //hide the current fieldset with style current_fs.animate({opacity: 0}, { step: function(now, mx) { //as the opacity of current_fs reduces to 0 - stored in "now" //1. scale previous_fs from 80% to 100% scale = 0.8 + (1 - now) * 0.2; //2. take current_fs to the right(50%) - from 0% left = ((1-now) * 50)+"%"; //3. increase opacity of previous_fs to 1 as it moves in opacity = 1 - now; current_fs.css({'left': left}); previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, //this comes from the custom easing plugin easing: 'easeInOutBack' }); }); $(".submit").click(function(){ return false; }) |
Hope you will like it & use it with your web application & website.
