386 views
CSSAdd prefixes
1.content { 2 width: 330px; 3 padding: 40px 30px; 4 background: #dde1e7; 5 border-radius: 10px; 6 box-shadow: -3px -3px 7px #ffffff73, 7 2px 2px 5px rgba(94,104,121,0.288); 8} 9 10.content .text { 11 font-size: 33px; 12 font-weight: 600; 13 margin-bottom: 35px; 14 color: #595959; 15} 16 17.field { 18 height: 50px; 19 width: 100%; 20 display: flex; 21 position: relative; 22} 23 24.field:nth-child(2) { 25 margin-top: 20px; 26} 27 28.field .input { 29 height: 100%; 30 width: 100%; 31 padding-left: 45px; 32 outline: none; 33 border: none; 34 font-size: 18px; 35 background: #dde1e7; 36 color: #595959; 37 border-radius: 25px; 38 box-shadow: inset 2px 2px 5px #BABECC, 39 inset -5px -5px 10px #ffffff73; 40} 41 42.field .input:focus { 43 box-shadow: inset 1px 1px 2px #BABECC, 44 inset -1px -1px 2px #ffffff73; 45} 46 47.field .span { 48 position: absolute; 49 color: #595959; 50 width: 50px; 51 line-height: 55px; 52} 53 54.field .label { 55 position: absolute; 56 top: 50%; 57 transform: translateY(-50%); 58 left: 45px; 59 pointer-events: none; 60 color: #666666; 61} 62 63.field .input:valid ~ label { 64 opacity: 0; 65} 66 67.forgot-pass { 68 text-align: left; 69 margin: 10px 0 10px 5px; 70} 71 72.forgot-pass a { 73 font-size: 16px; 74 color: #666666; 75 text-decoration: none; 76} 77 78.forgot-pass:hover a { 79 text-decoration: underline; 80} 81 82.button { 83 margin: 15px 0; 84 width: 100%; 85 height: 50px; 86 font-size: 18px; 87 line-height: 50px; 88 font-weight: 600; 89 background: #dde1e7; 90 border-radius: 25px; 91 border: none; 92 outline: none; 93 cursor: pointer; 94 color: #595959; 95 box-shadow: 2px 2px 5px #BABECC, 96 -5px -5px 10px #ffffff73; 97} 98 99.button:focus { 100 color: #3498db; 101 box-shadow: inset 2px 2px 5px #BABECC, 102 inset -5px -5px 10px #ffffff73; 103} 104 105.sign-up { 106 margin: 10px 0; 107 color: #595959; 108 font-size: 16px; 109} 110 111.sign-up a { 112 color: #3498db; 113 text-decoration: none; 114} 115 116.sign-up a:hover { 117 text-decoration: underline; 118}
HTML
1 <div class="content"> 2 <div class="text"> 3 Login 4 </div> 5 <form action="#"> 6 <div class="field"> 7 <input required="" type="text" class="input"> 8 <span class="span"><svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 512 512" y="0" x="0" height="20" width="50" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg"><g><path class="" data-original="#000000" fill="#595959" d="M256 0c-74.439 0-135 60.561-135 135s60.561 135 135 135 135-60.561 135-135S330.439 0 256 0zM423.966 358.195C387.006 320.667 338.009 300 286 300h-60c-52.008 0-101.006 20.667-137.966 58.195C51.255 395.539 31 444.833 31 497c0 8.284 6.716 15 15 15h420c8.284 0 15-6.716 15-15 0-52.167-20.255-101.461-57.034-138.805z"></path></g></svg></span> 9 <label class="label">Email or Phone</label> 10 </div> 11 <div class="field"> 12 <input required="" type="password" class="input"> 13 <span class="span"><svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 512 512" y="0" x="0" height="20" width="50" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg"><g><path class="" data-original="#000000" fill="#595959" d="M336 192h-16v-64C320 57.406 262.594 0 192 0S64 57.406 64 128v64H48c-26.453 0-48 21.523-48 48v224c0 26.477 21.547 48 48 48h288c26.453 0 48-21.523 48-48V240c0-26.477-21.547-48-48-48zm-229.332-64c0-47.063 38.27-85.332 85.332-85.332s85.332 38.27 85.332 85.332v64H106.668zm0 0"></path></g></svg></span> 14 <label class="label">Password</label> 15 </div> 16 <div class="forgot-pass"> 17 <a href="#">Forgot Password?</a> 18 </div> 19 <button class="button">Sign in</button> 20 <div class="sign-up"> 21 Not a member? 22 <a href="#">signup now</a> 23 </div> 24 </form> 25 </div>