Card by Praashoo7 made with CSS

#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}

.card {
  width: 300px;
  height: 200px;
  background: #252525;
  border-radius: 8px;
  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;
}

.ups {
  display: flex;
}

.screw1 {
  display: flex;
  color: black;
  border: 1px solid black;
  background-color: lightgrey;
  height: 0.75em;
  width: 0.75em;
  margin: 0.5em;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.screw2 {
  display: flex;
  color: black;
  border: 1px solid black;
  background-color: lightgrey;
  height: 0.75em;
  width: 0.7em;
  margin-top: 0.5em;
  margin-left: 15.8em;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.downs {
  display: flex;
}

.screw3 {
  display: flex;
  color: black;
  border: 1px solid black;
  background-color: lightgrey;
  height: 0.75em;
  width: 0.75em;
  margin-top: -1.3em;
  margin-left: 0.5em;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.screw4 {
  display: flex;
  color: black;
  border: 1px solid black;
  background-color: lightgrey;
  height: 0.75em;
  width: 0.75em;
  margin-top: -1.3em;
  margin-left: 16.35em;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.card1 {
  width: 230px;
  height: 115px;
  margin-top: 0.5em;
  margin-left: 2.18em;
  background-color: #FFFDD0;
  clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 10%);
  border-radius: 5px;
}

.line1 {
  position: relative;
  width: 200px;
  height: 1px;
  background-color: black;
  top: 1em;
  left: 0.8em;
}

.line2 {
  position: relative;
  width: 200px;
  height: 1px;
  background-color: black;
  top: 2em;
  left: 0.8em;
}

.yl {
  display: flex;
  width: 228px;
  height: 50px;
  background-color: rgb(242, 188, 0);
  margin-top: 2.5em;
  margin-left: 0.06em;
}

.roll {
  width: 8em;
  height: 2em;
  margin-left: 3em;
  border-radius: 15px;
  background-color: #171717;
  display: flex;
}

.tape {
  width: 3em;
  height: 1.5em;
  position: relative;
  left: 0.9em;
  background-color: #252525;
}

.s_wheel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0.215em;
  left: 0.15em;
  width: 1.55em;
  height: 1.55em;
  border: 2px dashed #fff;
  box-shadow: 0 0 0 4.4px #fff;
  border-radius: 50%;
  animation: 2s run infinite linear;
}

.window {
  background-color: white;
  width: auto;
  height: 2em;
}

.e_wheel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0.215em;
  left: 1.7em;
  width: 1.55em;
  height: 1.55em;
  border: 2px dashed #fff;
  box-shadow: 0 0 0 4.4px #fff;
  border-radius: 50%;
  animation: 2s run infinite linear;
}

.num {
  margin-left: 1.5em;
  align-self: center;
}

.or {
  display: flex;
  width: 230px;
  height: 18px;
  background-color: rgb(241, 90, 37);
  margin-top: 0.4em;
  margin-left: 0em;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  align-items: center;
  justify-content: center;
}

.time {
  font-size: 0.5em;
}

.card2_main {
  filter: drop-shadow(4px 4px 14px rgba(0, 0, 0, 1));
}

.card2 {
  width: 150px;
  height: 50px;
  margin-top: 0em;
  margin-left: 4.6em;
  background-color: #252525;
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}

.screw5 {
  position: relative;
  display: flex;
  color: black;
  border: 1px solid black;
  background-color: lightgrey;
  height: 0.75em;
  width: 0.75em;
  left: 4.25em;
  top: -0.5em;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.c1 {
  position: relative;
  width: 0.5em;
  height: 0.5em;
  background-color: rgb(190, 190, 190);
  border-radius: 50%;
  left: 1.5em;
  top: 2em;
}

.t1 {
  position: relative;
  width: 0.5em;
  height: 0.5em;
  background-color: rgb(190, 190, 190);
  border-radius: 2px;
  left: 3em;
  top: 1em;
}

.t2 {
  position: relative;
  width: 0.5em;
  height: 0.5em;
  background-color: rgb(190, 190, 190);
  border-radius: 2px;
  left: 5.7em;
  top: -0.2em;
}

.c2 {
  position: relative;
  width: 0.5em;
  height: 0.5em;
  background-color: rgb(190, 190, 190);
  border-radius: 50%;
  left: 7.2em;
  top: -0.2em;
}

@keyframes run {
  100% {
    transform: rotate(360deg);
  }
}

Toggle prefixes

1.3K views

Comments

No variations yet

MIT License

Copyright - 2023 Praashoo7 (Prashant) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.