File size: 1,475 Bytes
ed0f26a d8b7097 ed0f26a d8b7097 ed0f26a b7e6196 6efd7ed 6b06e0b 67c45ed 8924699 6efd7ed d8b7097 67c45ed ed0f26a 6b06e0b d8b7097 cd8ee0b d8b7097 09c4e38 d8b7097 5bc17b1 6b06e0b b7e6196 d8b7097 1482748 09c4e38 d8b7097 09c4e38 1482748 09c4e38 6b06e0b 54e39f8 6b06e0b b7e6196 09c4e38 d8b7097 1482748 d8b7097 09c4e38 54e39f8 7748ddd d8b7097 1482748 67c45ed 09c4e38 6efd7ed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.clock {
color: #73b66f;
font-size: 180px;
font-family: Stencil;
letter-spacing: 7px;
cursor: pointer;
transition: font-size 0.3s ease, letter-spacing 0.3s ease;
white-space: nowrap;
}
.menu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #262626;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-family: SF;
}
.menu h3 {
margin-bottom: 10px;
}
.settings {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 80%;
}
.color-options, .font-options, .toggle-options, .spacing-options {
margin: 0 20px;
}
.color-option, .font-option, .toggle-option {
padding: 10px;
cursor: pointer;
border-radius: 10px;
}
.color-option:hover, .font-option:hover, .toggle-option:hover {
background: #444;
}
button {
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
background: #555;
border: none;
color: white;
margin-top: 20px;
border-radius: 20px;
font-family: SF;
}
button:hover {
background: #777;
}
input[type="checkbox"] {
margin-right: 10px;
}
input[type="range"] {
width: 100%;
} |