#e8e8e8
1.card { 2 width: 300px; 3 height: 200px; 4 background: #252525; 5 border-radius: 8px; 6 box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; 7} 8 9.ups { 10 display: flex; 11} 12 13.screw1 { 14 display: flex; 15 color: black; 16 border: 1px solid black; 17 background-color: lightgrey; 18 height: 0.75em; 19 width: 0.75em; 20 margin: 0.5em; 21 border-radius: 50%; 22 align-items: center; 23 justify-content: center; 24} 25 26.screw2 { 27 display: flex; 28 color: black; 29 border: 1px solid black; 30 background-color: lightgrey; 31 height: 0.75em; 32 width: 0.7em; 33 margin-top: 0.5em; 34 margin-left: 15.8em; 35 border-radius: 50%; 36 align-items: center; 37 justify-content: center; 38} 39 40.downs { 41 display: flex; 42} 43 44.screw3 { 45 display: flex; 46 color: black; 47 border: 1px solid black; 48 background-color: lightgrey; 49 height: 0.75em; 50 width: 0.75em; 51 margin-top: -1.3em; 52 margin-left: 0.5em; 53 border-radius: 50%; 54 align-items: center; 55 justify-content: center; 56} 57 58.screw4 { 59 display: flex; 60 color: black; 61 border: 1px solid black; 62 background-color: lightgrey; 63 height: 0.75em; 64 width: 0.75em; 65 margin-top: -1.3em; 66 margin-left: 16.35em; 67 border-radius: 50%; 68 align-items: center; 69 justify-content: center; 70} 71 72.card1 { 73 width: 230px; 74 height: 115px; 75 margin-top: 0.5em; 76 margin-left: 2.18em; 77 background-color: #FFFDD0; 78 clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 10%); 79 border-radius: 5px; 80} 81 82.line1 { 83 position: relative; 84 width: 200px; 85 height: 1px; 86 background-color: black; 87 top: 1em; 88 left: 0.8em; 89} 90 91.line2 { 92 position: relative; 93 width: 200px; 94 height: 1px; 95 background-color: black; 96 top: 2em; 97 left: 0.8em; 98} 99 100.yl { 101 display: flex; 102 width: 228px; 103 height: 50px; 104 background-color: rgb(242, 188, 0); 105 margin-top: 2.5em; 106 margin-left: 0.06em; 107} 108 109.roll { 110 width: 8em; 111 height: 2em; 112 margin-left: 3em; 113 border-radius: 15px; 114 background-color: #171717; 115 display: flex; 116} 117 118.tape { 119 width: 3em; 120 height: 1.5em; 121 position: relative; 122 left: 0.9em; 123 background-color: #252525; 124} 125 126.s_wheel { 127 display: flex; 128 align-items: center; 129 justify-content: center; 130 position: relative; 131 top: 0.215em; 132 left: 0.15em; 133 width: 1.55em; 134 height: 1.55em; 135 border: 2px dashed #fff; 136 box-shadow: 0 0 0 4.4px #fff; 137 border-radius: 50%; 138 animation: 2s run infinite linear; 139} 140 141.window { 142 background-color: white; 143 width: auto; 144 height: 2em; 145} 146 147.e_wheel { 148 display: flex; 149 align-items: center; 150 justify-content: center; 151 position: relative; 152 top: 0.215em; 153 left: 1.7em; 154 width: 1.55em; 155 height: 1.55em; 156 border: 2px dashed #fff; 157 box-shadow: 0 0 0 4.4px #fff; 158 border-radius: 50%; 159 animation: 2s run infinite linear; 160} 161 162.num { 163 margin-left: 1.5em; 164 align-self: center; 165} 166 167.or { 168 display: flex; 169 width: 230px; 170 height: 18px; 171 background-color: rgb(241, 90, 37); 172 margin-top: 0.4em; 173 margin-left: 0em; 174 border-bottom-left-radius: 4px; 175 border-bottom-right-radius: 4px; 176 align-items: center; 177 justify-content: center; 178} 179 180.time { 181 font-size: 0.5em; 182} 183 184.card2_main { 185 filter: drop-shadow(4px 4px 14px rgba(0, 0, 0, 1)); 186} 187 188.card2 { 189 width: 150px; 190 height: 50px; 191 margin-top: 0em; 192 margin-left: 4.6em; 193 background-color: #252525; 194 clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%); 195} 196 197.screw5 { 198 position: relative; 199 display: flex; 200 color: black; 201 border: 1px solid black; 202 background-color: lightgrey; 203 height: 0.75em; 204 width: 0.75em; 205 left: 4.25em; 206 top: -0.5em; 207 border-radius: 50%; 208 align-items: center; 209 justify-content: center; 210} 211 212.c1 { 213 position: relative; 214 width: 0.5em; 215 height: 0.5em; 216 background-color: rgb(190, 190, 190); 217 border-radius: 50%; 218 left: 1.5em; 219 top: 2em; 220} 221 222.t1 { 223 position: relative; 224 width: 0.5em; 225 height: 0.5em; 226 background-color: rgb(190, 190, 190); 227 border-radius: 2px; 228 left: 3em; 229 top: 1em; 230} 231 232.t2 { 233 position: relative; 234 width: 0.5em; 235 height: 0.5em; 236 background-color: rgb(190, 190, 190); 237 border-radius: 2px; 238 left: 5.7em; 239 top: -0.2em; 240} 241 242.c2 { 243 position: relative; 244 width: 0.5em; 245 height: 0.5em; 246 background-color: rgb(190, 190, 190); 247 border-radius: 50%; 248 left: 7.2em; 249 top: -0.2em; 250} 251 252@keyframes run { 253 100% { 254 transform: rotate(360deg); 255 } 256}
1.3K views
1.3K views
Comments
MIT License