1.1K views
CSSAdd prefixes
1.form { 2 width: 290px; 3 height: 380px; 4 display: flex; 5 flex-direction: column; 6 border-radius: 15px; 7 background-color: white; 8 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 9 transition: .4s ease-in-out; 10} 11 12.form:hover { 13 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); 14 scale: 0.99; 15} 16 17.heading { 18 position: relative; 19 text-align: center; 20 color: black; 21 top: 3em; 22 font-weight: bold; 23} 24 25.check { 26 position: relative; 27 align-self: center; 28 top: 4em; 29} 30 31.input { 32 position: relative; 33 width: 2.5em; 34 height: 2.5em; 35 margin: 1em; 36 border-radius: 5px; 37 border: none; 38 outline: none; 39 background-color: rgb(235, 235, 235); 40 box-shadow: inset 3px 3px 6px #d1d1d1, 41 inset -3px -3px 6px #ffffff; 42 top: 6.5em; 43 left: 1.5em; 44 padding-left: 15px; 45 transition: .4s ease-in-out; 46} 47 48.input:hover { 49 box-shadow: inset 0px 0px 0px #d1d1d1, 50 inset 0px 0px 0px #ffffff; 51 background-color: lightgrey; 52} 53 54.input:focus { 55 box-shadow: inset 0px 0px 0px #d1d1d1, 56 inset 0px 0px 0px #ffffff; 57 background-color: lightgrey; 58} 59 60.btn1 { 61 position: relative; 62 top: 8.5em; 63 left: 2.4em; 64 width: 17em; 65 height: 3em; 66 border-radius: 5px; 67 border: none; 68 outline: none; 69 transition: .4s ease-in-out; 70 box-shadow: 1px 1px 3px #b5b5b5, 71 -1px -1px 3px #ffffff; 72} 73 74.btn1:active { 75 box-shadow: inset 3px 3px 6px #b5b5b5, 76 inset -3px -3px 6px #ffffff; 77} 78 79.btn2 { 80 position: relative; 81 top: 9.5em; 82 left: 2.4em; 83 width: 17em; 84 height: 3em; 85 border-radius: 5px; 86 border: none; 87 outline: none; 88 transition: .4s ease-in-out; 89 box-shadow: 1px 1px 3px #b5b5b5, 90 -1px -1px 3px #ffffff; 91} 92 93.btn2:active { 94 box-shadow: inset 3px 3px 6px #b5b5b5, 95 inset -3px -3px 6px #ffffff; 96}
HTML
1<form class="form"> 2 <p class="heading">Verify</p> 3 <svg class="check" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px" viewBox="0 0 60 60" xml:space="preserve"> <image id="image0" width="60" height="60" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAQAAACQ9RH5AAAABGdBTUEAALGPC/xhBQAAACBjSFJN 4AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ 5cwAACxMAAAsTAQCanBgAAAAHdElNRQfnAg0NDzN/r+StAAACR0lEQVRYw+3Yy2sTURTH8W+bNgVf 6aGhFaxNiAoJou3FVEUQE1yL031BEROjCnf4PLlxILZSGYncuiiC48AEKxghaNGiliAojiBWZNnNd 7xDza3pl77jyCyPzO8ubcT85wmUkG0qT539In+MwgoxQoUqDAKDn2kSNLlp3AGi4uDt9xWOUTK3xg 8hVU2wsIZSkxwnHHGKZOxHKfBe6rUqFGlTkPaVmKGn6iYao1ZyhK2zJfY0FZ9ldBzsbMKxZwZjn/e 95szGw6UsD5I0W6T+hBhjUjiF7bNInjz37Ruj3igGABjbtpIo3GIh30u4ww5wr3fwfJvNcFeznhBs 10YgXw70TYX2bY/ulkZhWfzfBbTdtrzjPFsvFI+T/L35jhp5q2owDs51VIVvHYDM9sa/LY8XdtKy1l 11FXfM8FVN2/X2ajctZxVXzPA5TZvHpfb6CFXxkerUWTOcY11LX9w0tc20inX2mmF4qG3upnNWrOKB 12hIXLPu3dF1x+kRWq6ysHpkjDl+7eQjatYoOCDIZF3006U0unVSxIWTgTsI3HNP3soSJkFaflMDwL 133OoHrph9YsPCJJ5466DyOGUHY3Epg2rWloUxnMjsNw7aw3AhMjwVhgW4HYm9FZaFQZ/bp6QeMRQe 14hhHehWKXGY7CAuSpW7MfKUZlAUqWdJ3DcbAAB3guZl9yKC4WYLfmT4muFtgVJwvQx7T2t0mnXK6J 15XlGGyAQvfNkaJ5JBmxnipubJ5HKDbJJsM0eY38QucSx5tJWTVHBwqDDZOzRNmn87fwDoyM4J2hRz 16NgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMy0wMi0xM1QxMzoxNTo1MCswMDowMKC8JaoAAAAldEVY 17dGRhdGU6bW9kaWZ5ADIwMjMtMDItMTNUMTM6MTU6NTArMDA6MDDR4Z0WAAAAKHRFWHRkYXRlOnRp 18bWVzdGFtcAAyMDIzLTAyLTEzVDEzOjE1OjUxKzAwOjAwIIO3fQAAAABJRU5ErkJggg=="></image> 19</svg> 20 <div class="box"> 21 <input class="input" type="password" maxlength="1"> 22 <input class="input" type="password" maxlength="1"> 23 <input class="input" type="password" maxlength="1"> 24 <input class="input" type="password" maxlength="1"> 25 </div> 26 <button class="btn1">Submit</button> 27 <button class="btn2">Back</button> 28</form>