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