1.card {
2  width: 300px;
3  height: 300px;
4  background-image: linear-gradient(to right bottom, #252324, #292728, #2d2c2d, #313031, #353535);
5  position: relative;
6  border-radius: 5px;
7  box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.307);
8}
9
10.top {
11  position: absolute;
12  width: 65%;
13  height: 37%;
14  top: 0;
15  left: 37px;
16  background-image: linear-gradient(to right bottom, #202020, #222222, #232323, #252525, #272727);
17  z-index: 500;
18  border-top: 4px solid #e8e8e8;
19  border-right: 3px solid #121212;
20  border-bottom: 3px solid #121212;
21  border-left: 3px solid #121212;
22  border-bottom-left-radius: 10px;
23  border-bottom-right-radius: 10px;
24}
25
26.plastic {
27  position: absolute;
28  top: 0;
29  right: 60px;
30  width: 60px;
31  background-color: black;
32  height: 100%;
33  z-index: 1000;
34  border-top: 25px solid white;
35}
36
37.bottom {
38  z-index: 1000;
39  position: absolute;
40  bottom: 1px;
41  right: 50%;
42  transform: translate(50%,0);
43  width: 75%;
44  height: 52%;
45  background-color: #ecebe0;
46  border-top-left-radius: 5px;
47  border-top-right-radius: 5px;
48  border-top: 3px solid #121212;
49  border-left: 3px solid #121212;
50  border-right: 3px solid #121212;
51  border-radius: 10px;
52}
53
54.metal {
55  z-index: 2000;
56  position: absolute;
57  top: -3px;
58  right: 0;
59  width: 77%;
60  height: 103%;
61  background-image: linear-gradient(to right bottom, #bdbdbd, #cacaca, #d7d7d7, #e5e5e5, #f2f2f2);
62  border-bottom-left-radius: 10px;
63  border-bottom-right-radius: 10px;
64  transition: transform 0.2s ease-in;
65  clip-path: polygon(0% 0%, 0% 100%, 60% 100%, 60% 18%, 85% 18%, 85% 93%, 25% 93%, 25% 100%, 100% 100%, 100% 0%);
66}
67
68.cuadro-metal {
69  position: absolute;
70  top: 15px;
71  right: 45px;
72  width: 40px;
73  transform: translate(50%,0);
74  height: 80px;
75  background-color: #252324;
76  z-index: 2000;
77  transition: transform 0.2s ease-in;
78  border-radius: 3px;
79}
80
81.card:hover .metal {
82  transform: translateX(-44px);
83}
84
85.card:hover .cuadro-metal {
86  transform: translateX(-30px);
87}
88
89.minicuadro1 {
90  bottom: 25px;
91  right: 12px;
92  position: absolute;
93  width: 17px;
94  height: 17px;
95  background-color: #d7d7d7;
96  border: 2px solid #191919;
97}
98
99.minicuadro2 {
100  bottom: 25px;
101  left: 12px;
102  position: absolute;
103  width: 17px;
104  height: 17px;
105  background-image: linear-gradient(to right bottom, #191919, #202020, #272727, #2e2e2e, #353535);
106  border: 2px solid #191919;
107}
108
109.yellow {
110  position: absolute;
111  bottom: 0;
112  width: 100%;
113  height: 23px;
114  background-color: rgb(255, 157, 0);
115}
116
117.line1 {
118  position: absolute;
119  bottom: 42px;
120  right: 61.5%;
121  transform: translate(50%,0);
122  width: 125px;
123  height: 2px;
124  background-color: rgb(192, 33, 33);
125}
126
127.line2 {
128  position: absolute;
129  bottom: 64px;
130  right: 50%;
131  transform: translate(50%,0);
132  width: 175px;
133  height: 2px;
134  background-color: rgb(192, 33, 33);
135  z-index: 2000;
136}
137
138.line3 {
139  position: absolute;
140  bottom: 86px;
141  right: 50%;
142  transform: translate(50%,0);
143  width: 175px;
144  height: 2px;
145  background-color: rgb(192, 33, 33);
146  z-index: 2000;
147}
148
149.line4 {
150  position: absolute;
151  bottom: 108px;
152  right: 50%;
153  transform: translate(50%,0);
154  width: 175px;
155  height: 2px;
156  background-color: rgb(192, 33, 33);
157  z-index: 2000;
158}
159
160.line5 {
161  position: absolute;
162  bottom: 130px;
163  right: 50%;
164  transform: translate(50%,0);
165  width: 175px;
166  height: 2px;
167  background-color: rgb(192, 33, 33);
168  z-index: 2000;
169}
170
171.index {
172  position: absolute;
173  bottom: 35px;
174  right: 62px;
175  font-size: 11px;
176  font-weight: bold;
177  text-transform: uppercase;
178  color: rgb(192, 33, 33);
179  z-index: 2000;
180}
181
182