3.9K views
1.singup { 2 color: #000; 3 text-transform: uppercase; 4 letter-spacing: 2px; 5 display: block; 6 font-weight: bold; 7 font-size: x-large; 8 margin-top: 1.5em; 9} 10 11.card { 12 display: flex; 13 justify-content: center; 14 align-items: center; 15 min-height: 350px; 16 width: 300px; 17 flex-direction: column; 18 gap: 35px; 19 border-radius: 15px; 20 background: #e3e3e3; 21 box-shadow: 16px 16px 32px #c8c8c8, 22 -16px -16px 32px #fefefe; 23 border-radius: 8px; 24} 25 26.inputBox, 27.inputBox1 { 28 position: relative; 29 width: 250px; 30} 31 32.inputBox input, 33.inputBox1 input { 34 width: 100%; 35 padding: 10px; 36 outline: none; 37 border: none; 38 color: #000; 39 font-size: 1em; 40 background: transparent; 41 border-left: 2px solid #000; 42 border-bottom: 2px solid #000; 43 transition: 0.1s; 44 border-bottom-left-radius: 8px; 45} 46 47.inputBox span, 48.inputBox1 span { 49 margin-top: 5px; 50 position: absolute; 51 left: 0; 52 transform: translateY(-4px); 53 margin-left: 10px; 54 padding: 10px; 55 pointer-events: none; 56 font-size: 12px; 57 color: #000; 58 text-transform: uppercase; 59 transition: 0.5s; 60 letter-spacing: 3px; 61 border-radius: 8px; 62} 63 64.inputBox input:valid~span, 65.inputBox input:focus~span { 66 transform: translateX(113px) translateY(-15px); 67 font-size: 0.8em; 68 padding: 5px 10px; 69 background: #000; 70 letter-spacing: 0.2em; 71 color: #fff; 72 border: 2px; 73} 74 75.inputBox1 input:valid~span, 76.inputBox1 input:focus~span { 77 transform: translateX(156px) translateY(-15px); 78 font-size: 0.8em; 79 padding: 5px 10px; 80 background: #000; 81 letter-spacing: 0.2em; 82 color: #fff; 83 border: 2px; 84} 85 86.inputBox input:valid, 87.inputBox input:focus, 88.inputBox1 input:valid, 89.inputBox1 input:focus { 90 border: 2px solid #000; 91 border-radius: 8px; 92} 93 94.enter { 95 height: 45px; 96 width: 100px; 97 border-radius: 5px; 98 border: 2px solid #000; 99 cursor: pointer; 100 background-color: transparent; 101 transition: 0.5s; 102 text-transform: uppercase; 103 font-size: 10px; 104 letter-spacing: 2px; 105 margin-bottom: 3em; 106} 107 108.enter:hover { 109 background-color: rgb(0, 0, 0); 110 color: white; 111}
JkHuger
JkHuger
MIT License