Form by rahilansari261
#e8e8e8
1.form { 2 background-color: #15172b; 3 border-radius: 20px; 4 box-sizing: border-box; 5 height: 500px; 6 padding: 20px; 7 width: 320px; 8} 9 10.title { 11 color: #eee; 12 font-family: sans-serif; 13 font-size: 36px; 14 font-weight: 600; 15 margin-top: 30px; 16} 17 18.subtitle { 19 color: #eee; 20 font-family: sans-serif; 21 font-size: 16px; 22 font-weight: 600; 23 margin-top: 10px; 24} 25 26.input-container { 27 height: 50px; 28 position: relative; 29 width: 100%; 30} 31 32.ic1 { 33 margin-top: 40px; 34} 35 36.ic2 { 37 margin-top: 30px; 38} 39 40.input { 41 background-color: #303245; 42 border-radius: 12px; 43 border: 0; 44 box-sizing: border-box; 45 color: #eee; 46 font-size: 18px; 47 height: 100%; 48 outline: 0; 49 padding: 4px 20px 0; 50 width: 100%; 51} 52 53.cut { 54 background-color: #15172b; 55 border-radius: 10px; 56 height: 20px; 57 left: 20px; 58 position: absolute; 59 top: -20px; 60 transform: translateY(0); 61 transition: transform 200ms; 62 width: 76px; 63} 64 65.cut-short { 66 width: 50px; 67} 68 69.iLabel { 70 color: #65657b; 71 font-family: sans-serif; 72 left: 20px; 73 line-height: 14px; 74 pointer-events: none; 75 position: absolute; 76 transform-origin: 0 50%; 77 transition: transform 200ms, color 200ms; 78 top: 20px; 79} 80 81.input:focus ~ .cut { 82 transform: translateY(8px); 83} 84 85.input:focus ~ .iLabel { 86 transform: translateY(-30px) translateX(10px) scale(0.75); 87} 88 89.input:not(:focus) ~ .iLabel { 90 color: #808097; 91} 92 93.input:focus ~ .iLabel { 94 color: #dc2f55; 95} 96 97.submit { 98 background-color: #08d; 99 border-radius: 12px; 100 border: 0; 101 box-sizing: border-box; 102 color: #eee; 103 cursor: pointer; 104 font-size: 18px; 105 height: 50px; 106 margin-top: 38px; 107 text-align: center; 108 width: 100%; 109} 110 111.submit:active { 112 background-color: #06b; 113}
3.3K views
3.3K views
MIT License