├── .gitattributes ├── index.html ├── style.css ├── toothless-dragon.gif └── toothy.jpg /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | First Registration Form 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |
16 |

Sign Up

17 |
18 |
19 | 20 | 21 |
22 | 23 |
24 | 25 | 26 |
27 | 28 |
29 | 30 | 31 |
32 |

Short-term password loss? We got your back!!

33 |
34 |
35 | 36 | 37 |
38 |
39 | 40 | 41 |
42 |
43 | 44 | 69 | 70 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Poppins); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | font-family: 'Poppins', sans-serif; 7 | box-sizing: border-box; 8 | } 9 | 10 | 11 | .container{ 12 | width: 100%; 13 | height: 100vh; 14 | background-image: url(toothless-dragon.gif); 15 | background-position: center; 16 | background-size:auto; 17 | position: relative; 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | overflow: hidden; 22 | } 23 | 24 | .Box{ 25 | position: relative; 26 | width: 370px; 27 | height: 450px; 28 | border-radius: 40px; 29 | backdrop-filter: blur(15px); 30 | overflow: hidden; 31 | 32 | } 33 | .Box::before{ 34 | content: ''; 35 | position: absolute; 36 | top: -50%; 37 | left: -50%; 38 | width: 370px; 39 | height: 450px; 40 | background: linear-gradient(60deg,transparent,#ffffff); 41 | transform-origin: bottom right; 42 | animation: animate 6s linear infinite; 43 | 44 | } 45 | .Box::after{ 46 | content: ''; 47 | position: absolute; 48 | top: -50%; 49 | left: -50%; 50 | width: 370px; 51 | height: 450px; 52 | background: linear-gradient(60deg,transparent,#ffffff); 53 | transform-origin: bottom right; 54 | animation: animate 6s linear infinite; 55 | animation-delay: -3s; 56 | } 57 | @keyframes animate{ 58 | 0%{ 59 | transform: rotate(0deg); 60 | } 61 | 100%{ 62 | transform: rotate(360deg); 63 | } 64 | } 65 | form_frame{ 66 | position: absolute; 67 | inset: 2px; 68 | border-radius: 40px; 69 | border: 2px solid; 70 | background-image: url(toothless-dragon.gif); 71 | z-index: 10; 72 | background-position: center; 73 | } 74 | form{ 75 | position: absolute; 76 | inset: 0px; 77 | border-radius: 40px; 78 | border: px solid; 79 | backdrop-filter: blur(15px); 80 | justify-content: space-around; 81 | align-items: center; 82 | text-align: center; 83 | padding: 90px 0; 84 | display: flex; 85 | flex-direction: column; 86 | } 87 | form h1{ 88 | font-size: 30px; 89 | margin-top: -10px; 90 | text-align: center; 91 | color:aliceblue; 92 | } 93 | 94 | 95 | .input-field{ 96 | display: flex; 97 | justify-content: center; 98 | text-align: center; 99 | align-items: center; 100 | margin: 30px 0; 101 | width: 310px; 102 | border-bottom: 2px solid #ffffff; 103 | max-height: 65px; 104 | transition: max-height 0.5s; 105 | overflow: hidden; 106 | } 107 | input{ 108 | width: 100%; 109 | height: 45px; 110 | background: transparent; 111 | border: none; 112 | outline: none; 113 | padding: 0 20px 0 5px; 114 | color: #ffffff; 115 | font-size: 16px; 116 | } 117 | input::placeholder{ 118 | color: #ffffff; 119 | } 120 | 121 | .input-field i{ 122 | margin-left: 15px; 123 | color: chartreuse; 124 | } 125 | 126 | form p{ 127 | text-align: left; 128 | font-size: 13px; 129 | } 130 | 131 | .btn-field{ 132 | width: 90%; 133 | display: flex; 134 | margin-top: 40px; 135 | justify-content: space-between; 136 | } 137 | .btn-field button{ 138 | flex-basis: 48%; 139 | background: chartreuse; 140 | height: 60px; 141 | color: rgb(255, 255, 255); 142 | outline: 0; 143 | border-radius: 30px; 144 | border: 0; 145 | cursor: pointer; 146 | transition: background 1s; 147 | } 148 | 149 | .input-group{ 150 | height: 350px; 151 | } 152 | 153 | .btn-field button.disable{ 154 | background: #ffffff; 155 | color: chartreuse; 156 | } -------------------------------------------------------------------------------- /toothless-dragon.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/S-Hasanuddin/toothless-registration-html-css/0068f30d93f644a7c293711b0653ad474a08fb8e/toothless-dragon.gif -------------------------------------------------------------------------------- /toothy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/S-Hasanuddin/toothless-registration-html-css/0068f30d93f644a7c293711b0653ad474a08fb8e/toothy.jpg --------------------------------------------------------------------------------