API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 13th, 2017
130
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.86 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3. <head>
  4. <meta charset="utf-8">
  5. </head>
  6. <title>Hello</title>
  7. <Script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  8. <script src="js/lib/jquery.validate.min.js"></script>
  9. <link rel="stylesheet" type="text/css" href="stylesheet/style.css">
  10.  
  11.  
  12. <!-- Responsive -->
  13. <link rel="stylesheet" type="text/css" href="stylesheet/responsive.css" media="screen">
  14. <!-- Reset -->
  15. <link rel="stylesheet" type="text/css" href="stylesheet/reset.css">
  16. <!-- Font -->
  17. <link rel="stylesheet" type="text/css" href="stylesheet/font.css">
  18. <style type="text/css">
  19.  
  20. body {
  21. background-color: green;
  22. }
  23. div.box{
  24. width: 300px;
  25. margin-top: 40vh;
  26. position: absolute;
  27. left: 36%;
  28. overflow: hidden;
  29. padding-right:20px;
  30.  
  31. }
  32. div.box > form > input[type=text],
  33. div.box > form > input[type=password],
  34. div.box > form > input[type=email] {
  35. opacity: 1;
  36. display: block;
  37. border:none;
  38. outline: none;
  39. width: 100%;
  40. padding: 10px;
  41. margin: 20px 0 0 0;
  42. border-radius: 4px;
  43.  
  44. }
  45. div.box > form > input[type=submit],
  46. div.box > form > input[type=button] {
  47. border: 0;
  48. outline: 0;
  49. padding: 13px 18px;
  50. margin: 40px 0 0 0;
  51. border-radius: 2px;
  52. font-weight: 600;
  53. cursor: pointer;
  54. float: right;
  55. background: #fff;
  56. color: #34495e;
  57. outline: none;
  58. margin-left: 20px;
  59. animation: bounce2 1.6s;
  60.  
  61. }
  62.  
  63. div.box > form > input[type=text] {
  64. animation: bounce 1s;
  65.  
  66. }
  67. div.box > form > input[type=password] {
  68. animation: bounce1 1.3s;
  69. }
  70.  
  71.  
  72. div.registration > form > input[type=text] {
  73. animation: bounce 1s;
  74.  
  75. }
  76. div.registration > form > input[type=password] {
  77. animation: bounce2 1.6s;
  78. }
  79. div.registration > form > input[type=email] {
  80. animation: bounce1 1.3s;
  81. }
  82.  
  83.  
  84. button.close{
  85. animation:bounce 1.6s;
  86. }
  87. @keyframes bounce {
  88. 0% { transform: translateY(-250px); opacity:0; }
  89. }
  90. @keyframes bounce1 {
  91. 0% {opacity: 0;}
  92. 40% { transform: translateY(-100px); opacity:0; }
  93. }
  94. @keyframes bounce2 {
  95. 0% {opacity: 0;}
  96. 70% { transform: translateY(-20px); opacity:0; }
  97. }
  98.  
  99. .registration{
  100. display: none;
  101.  
  102. }
  103. #registration label, #login label {
  104. color: white;
  105. padding: 9px 4px 4px 10px;
  106. display: block;
  107. background: #ab2323;
  108. border-radius: 3px;
  109. margin-top: 7px;
  110. font-size: 14px;
  111. font-family: bpg_nino_mtavruli_bold;
  112.  
  113. }
  114.  
  115. .centererer {
  116. height: 26px;
  117. width: 26px;
  118. position:relative;
  119. float: right;
  120. margin-bottom: 14px;
  121. }
  122.  
  123. .close {
  124. background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjJmMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  125. background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))), radial-gradient(#f2f2f2, #cccccc);
  126. background: -moz-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)), -moz-radial-gradient(#f2f2f2, #cccccc);
  127. background: -webkit-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)), -webkit-radial-gradient(#f2f2f2, #cccccc);
  128. background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)), radial-gradient(#f2f2f2, #cccccc);
  129. -moz-border-radius: 50px;
  130. -webkit-border-radius: 50px;
  131. border-radius: 50px;
  132. -moz-box-shadow: inset 0 1px 1px rgba(191, 191, 191, 0.75), 0 2px 1px rgba(0, 0, 0, 0.25);
  133. -webkit-box-shadow: inset 0 1px 1px rgba(191, 191, 191, 0.75), 0 2px 1px rgba(0, 0, 0, 0.25);
  134. box-shadow: inset 0 1px 1px rgba(191, 191, 191, 0.75), 0 2px 1px rgba(0, 0, 0, 0.25);
  135. text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  136. border: 2px solid #e6e6e6;
  137. color: #b3b3b3;
  138. height: 23px;
  139. width: 23px;
  140. position: absolute;
  141. top:0;
  142. bottom:0;
  143. right:0;
  144. left:0;
  145. margin: auto;
  146. text-indent: -9999px;
  147. text-decoration: none;
  148. }
  149. .close::after {
  150. content: "\2716";
  151. text-indent: 0;
  152. display: block;
  153. position: absolute;
  154. top: 1px;
  155. right: 4px;
  156. font-size: 12px;
  157. }
  158. .close:hover {
  159. color: #e6e6e6;
  160. background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzYjNiMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhjOGM4YyIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  161. background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))), radial-gradient(#b3b3b3, #8c8c8c);
  162. background: -moz-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)), -moz-radial-gradient(#b3b3b3, #8c8c8c);
  163. background: -webkit-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)), -webkit-radial-gradient(#b3b3b3, #8c8c8c);
  164. background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)), radial-gradient(#b3b3b3, #8c8c8c);
  165. text-shadow: 0 -1px 0 rgba(153, 153, 153, 0.5);
  166. cursor: pointer;
  167. }
  168. .close:active {
  169. background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjE1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOGM4YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  170. background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.15)), color-stop(100%, rgba(255, 255, 255, 0))), radial-gradient(#8c8c8c, #808080);
  171. background: -moz-linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)), -moz-radial-gradient(#8c8c8c, #808080);
  172. background: -webkit-linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)), -webkit-radial-gradient(#8c8c8c, #808080);
  173. background: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)), radial-gradient(#8c8c8c, #808080);
  174. text-shadow: 0 -1px 0 rgba(26, 26, 26, 0.5);
  175. cursor: pointer;
  176. }
  177.  
  178.  
  179. </style>
  180.  
  181.  
  182. </head>
  183. <div class="login box">
  184. <form action="2.html" id="login" method="post">
  185. <input type="text" name="email" id="email" placeholder="Email"/>
  186. <input type="password" name="password" type="password" id="password" placeholder="Password" />
  187. <input type="submit" value="Log in" />
  188. <input type="button" class="button_registration" value="registration"/>
  189. </form>
  190. </div>
  191. <div class="registration box">
  192. <div class="centererer">
  193. <button class="close">Close</button>
  194. </div>
  195. <form action="#" id="registration" name="registration" method="post">
  196.  
  197. <input type="text" name="username" placeholder="username"/>
  198. <input type="email" name="email" placeholder="email" />
  199. <input type="password" name="password" type="password" placeholder="password"/>
  200. <input type="submit" value="registration"/>
  201. </form>
  202.  
  203. <body>
  204.  
  205. <script>
  206. $( document ).ready(function() {
  207. $('.button_registration').click(function(){
  208. $('.login').fadeOut('slow', function(){
  209. $(".registration").fadeIn('slow');
  210. });
  211. });
  212. $('.close').click(function(){
  213. $('.registration').fadeOut('slow', function(){
  214. $(".login").fadeIn('slow');
  215. });
  216. });
  217. });
  218.  
  219. $(document).ready(function(){
  220.  
  221. // Validation
  222. $('#registration').validate({
  223. rules : {
  224. username : {
  225. required: true,
  226. maxlength: 12,
  227. minlength: 6
  228. },
  229. password : {
  230. required: true,
  231. maxlength: 48,
  232. minlength: 6
  233. },
  234. email : {
  235. required: true,
  236. email: true
  237. },
  238.  
  239. },
  240. messages : {
  241. username : {
  242. required : 'შეიყვანეთ ლოგინი',
  243. maxlength: 'მაქსიმალური სიმბოლოს რაოდენობა 12',
  244. minlength : 'მინიმალური სიმბოლოს რაოდენობა 6'
  245. },
  246. email : {
  247. required : 'შეიყვანეთ ელ-ფოსტა',
  248. },
  249. password : {
  250. required : 'შეიყვანეთ პაროლი',
  251. maxlength: 'მაქსიმალური სიმბოლოს რაოდენობა 48',
  252. minlength : 'მინიმალური სიმბოლოს რაოდენობა 6'
  253. },
  254.  
  255. },
  256. onfocusout: function (element) {
  257. jQuery(element).valid()
  258. }
  259. });// Validation END
  260.  
  261. });// Document ready END
  262.  
  263.  
  264.  
  265. $(document).ready(function(){
  266.  
  267. // Validation
  268. $('#login').validate({
  269. rules : {
  270. email : {
  271. required: true,
  272. maxlength: 12,
  273. minlength: 6
  274. },
  275. password : {
  276. required: true,
  277. maxlength: 48,
  278. minlength: 6
  279. },
  280.  
  281. },
  282. messages : {
  283. email : {
  284. required : 'შეიყვანეთ ლოგინი',
  285. maxlength: 'მაქსიმალური სიმბოლოს რაოდენობა 12',
  286. minlength : 'მინიმალური სიმბოლოს რაოდენობა 6'
  287. },
  288.  
  289. password : {
  290. required : 'შეიყვანეთ პაროლი',
  291. maxlength: 'მაქსიმალური სიმბოლოს რაოდენობა 48',
  292. minlength : 'მინიმალური სიმბოლოს რაოდენობა 6'
  293. },
  294.  
  295. },
  296. onfocusout: function (element) {
  297. jQuery(element).valid()
  298. }
  299. });// Validation END
  300.  
  301. });// Document ready END
  302.  
  303.  
  304.  
  305. </script>
  306.  
  307. </body>
  308. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!