#e8e8e8
1.main { 2 position: relative; 3 display: flex; 4 flex-direction: column; 5 background-color: #240046; 6 max-height: 420px; 7 overflow: hidden; 8 border-radius: 12px; 9 box-shadow: 7px 7px 10px 3px #24004628; 10} 11 12.form { 13 display: flex; 14 flex-direction: column; 15 gap: 14px; 16 padding: 24px; 17} 18 19/*checkbox to switch from sign up to login*/ 20#chk { 21 display: none; 22} 23 24/*Login*/ 25.login { 26 position: relative; 27 width: 100%; 28 height: 100%; 29} 30 31.login label { 32 margin: 25% 0 5%; 33} 34 35label { 36 color: #fff; 37 font-size: 2rem; 38 justify-content: center; 39 display: flex; 40 font-weight: bold; 41 cursor: pointer; 42 transition: .5s ease-in-out; 43} 44 45.input { 46 width: 100%; 47 height: 40px; 48 background: #e0dede; 49 padding: 10px; 50 border: none; 51 outline: none; 52 border-radius: 4px; 53} 54 55/*Register*/ 56.register { 57 background: #eee; 58 border-radius: 60% / 10%; 59 transform: translateY(5%); 60 transition: .8s ease-in-out; 61} 62 63.register label { 64 color: #573b8a; 65 transform: scale(.6); 66} 67 68#chk:checked ~ .register { 69 transform: translateY(-60%); 70} 71 72#chk:checked ~ .register label { 73 transform: scale(1); 74 margin: 10% 0 5%; 75} 76 77#chk:checked ~ .login label { 78 transform: scale(.6); 79 margin: 5% 0 5%; 80} 81/*Button*/ 82.form button { 83 width: 85%; 84 height: 40px; 85 margin: 12px auto 10%; 86 color: #fff; 87 background: #573b8a; 88 font-size: 1rem; 89 font-weight: bold; 90 border: none; 91 border-radius: 4px; 92 cursor: pointer; 93 transition: .2s ease-in; 94} 95 96.form button:hover { 97 background-color: #6d44b8; 98}
21K views
21K views
Comments
MIT License