#e8e8e8
1.form { 2 --input-focus: #e74c3c; 3 --font-color: #fff; 4 --font-color-sub: #ccc; 5 --bg-color: #2c3e50; 6 --main-color: #e74c3c; 7 padding: 20px; 8 background: #34495e; 9 display: flex; 10 flex-direction: column; 11 align-items: flex-start; 12 justify-content: center; 13 gap: 20px; 14 border-radius: 10px; 15 height: 1000px; 16 border: 2px solid var(--main-color); 17 box-shadow: 4px 4px var(--main-color); 18} 19 20.title { 21 color: var(--font-color); 22 font-weight: 900; 23 font-size: 24px; 24 margin-bottom: 25px; 25} 26 27.title span { 28 color: var(--font-color-sub); 29 font-weight: 600; 30 font-size: 18px; 31} 32 33.input { 34 width: 300px; 35 height: 45px; 36 border-radius: 10px; 37 border: 2px solid var(--main-color); 38 background-color: var(--bg-color); 39 box-shadow: 4px 4px var(--main-color); 40 font-size: 16px; 41 font-weight: 600; 42 color: var(--font-color); 43 padding: 5px 10px; 44 outline: none; 45} 46 47.input::placeholder { 48 color: var(--font-color-sub); 49 opacity: 0.8; 50} 51 52.input:focus { 53 border: 2px solid var(--input-focus); 54} 55 56.login-with { 57 display: flex; 58 gap: 20px; 59} 60 61.button-log { 62 cursor: pointer; 63 width: 45px; 64 height: 45px; 65 border-radius: 100%; 66 border: 2px solid var(--main-color); 67 background-color: var(--bg-color); 68 box-shadow: 4px 4px var(--main-color); 69 color: var(--font-color); 70 font-size: 25px; 71 display: flex; 72 justify-content: center; 73 align-items: center; 74} 75 76.icon { 77 width: 24px; 78 height: 24px; 79 fill: var(--main-color); 80} 81 82.button-log:active, 83.button-confirm:active { 84 box-shadow: 0px 0px var(--main-color); 85 transform: translate(3px, 3px); 86} 87 88.button-confirm { 89 margin: 50px auto 0 auto; 90 width: 140px; 91 height: 45px; 92 border-radius: 10px; 93 border: 2px solid var(--main-color); 94 background-color: var(--bg-color); 95 box-shadow: 4px 4px var(--main-color); 96 font-size: 18px; 97 font-weight: 600; 98 color: var(--font-color); 99 cursor: pointer; 100}
ย
Comments
MIT License