Form by sameer2malik
#e8e8e8
1.container { 2 display: flex; 3 width: 520px; 4 height: 500px; 5 max-width: 99%; 6 align-items: center; 7 justify-content: center; 8 position: relative; 9 overflow: hidden; 10 background-color: #ffffff25; 11 border-radius: 15px; 12 box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.03); 13 border: 0.1px solid rgba(128, 128, 128, 0.178); 14} 15 16.left { 17 width: 66%; 18 height: 100%; 19} 20 21.form { 22 display: flex; 23 flex-direction: column; 24 justify-content: center; 25 height: 100%; 26 width: 100%; 27 left: 0; 28 backdrop-filter: blur(20px); 29 position: relative; 30} 31 32.form::before { 33 position: absolute; 34 content: ""; 35 width: 40%; 36 height: 40%; 37 right: 1%; 38 z-index: -1; 39 background: radial-gradient( 40 circle, 41 rgb(194, 13, 170) 20%, 42 rgb(26, 186, 235) 60%, 43 44 rgb(26, 186, 235) 100% 45 ); 46 filter: blur(70px); 47 border-radius: 50%; 48} 49 50.right { 51 width: 34%; 52 height: 100%; 53} 54 55.img { 56 width: 100%; 57 height: 100%; 58} 59 60.container::after { 61 position: absolute; 62 content: ""; 63 width: 80%; 64 height: 80%; 65 right: -40%; 66 background: rgb(157, 173, 203); 67 background: radial-gradient( 68 circle, 69 rgba(157, 173, 203, 1) 61%, 70 rgba(99, 122, 159, 1) 100% 71 ); 72 border-radius: 50%; 73 z-index: -1; 74} 75 76.input, 77button { 78 background: rgba(253, 253, 253, 0); 79 outline: none; 80 border: 1px solid rgba(255, 0, 0, 0); 81 border-radius: 0.5rem; 82 padding: 10px; 83 margin: 10px auto; 84 width: 80%; 85 display: block; 86 color: #425981; 87 font-weight: 500; 88 font-size: 1.1em; 89} 90 91.input-block { 92 position: relative; 93} 94 95label { 96 position: absolute; 97 left: 15%; 98 top: 37%; 99 pointer-events: none; 100 color: gray; 101} 102 103.forgot { 104 display: block; 105 margin: 5px 0 10px 0; 106 margin-left: 35px; 107 color: #5e7eb6; 108 font-size: 0.9em; 109} 110 111.input:focus + label, 112.input:valid + label { 113 transform: translateY(-120%) scale(0.9); 114 transition: all 0.4s; 115} 116 117button { 118 background-color: #5e7eb6; 119 color: white; 120 font-size: medium; 121 box-shadow: 2px 4px 8px rgba(70, 70, 70, 0.178); 122} 123 124a { 125 color: #5e7eb6; 126} 127 128.input { 129 box-shadow: inset 4px 4px 4px rgba(165, 163, 163, 0.315), 130 4px 4px 4px rgba(218, 218, 218, 0.13); 131} 132
4.8K views
4.8K views
MIT License