Card by Praashoo7

#c7b29e

1/* Design Inspired by one of Stefan Devai's Design on Dribble */
2
3.main_wrapper {
4  display: flex;
5  align-items: center;
6  justify-content: center;
7  width: 30em;
8  height: 30em;
9}
10
11.main {
12  display: flex;
13  flex-direction: column;
14  align-items: center;
15  justify-content: center;
16  margin-top: 5em;
17}
18
19.antenna {
20  width: 5em;
21  height: 5em;
22  border-radius: 50%;
23  border: 2px solid black;
24  background-color: #f27405;
25  margin-bottom: -6em;
26  margin-left: 0em;
27  z-index: -1;
28}
29.antenna_shadow {
30  position: absolute;
31  background-color: transparent;
32  width: 50px;
33  height: 56px;
34  margin-left: 1.68em;
35  border-radius: 45%;
36  transform: rotate(140deg);
37  border: 4px solid transparent;
38  box-shadow: inset 0px 16px #a85103, inset 0px 16px 1px 1px #a85103;
39  -moz-box-shadow: inset 0px 16px #a85103, inset 0px 16px 1px 1px #a85103;
40}
41.antenna::after {
42  content: "";
43  position: absolute;
44  margin-top: -9.4em;
45  margin-left: 0.4em;
46  transform: rotate(-25deg);
47  width: 1em;
48  height: 0.5em;
49  border-radius: 50%;
50  background-color: #f69e50;
51}
52.antenna::before {
53  content: "";
54  position: absolute;
55  margin-top: 0.2em;
56  margin-left: 1.25em;
57  transform: rotate(-20deg);
58  width: 1.5em;
59  height: 0.8em;
60  border-radius: 50%;
61  background-color: #f69e50;
62}
63.a1 {
64  position: relative;
65  top: -102%;
66  left: -130%;
67  width: 12em;
68  height: 5.5em;
69  border-radius: 50px;
70  background-image: linear-gradient(
71    #171717,
72    #171717,
73    #353535,
74    #353535,
75    #171717
76  );
77  transform: rotate(-29deg);
78  clip-path: polygon(50% 0%, 49% 100%, 52% 100%);
79}
80.a1d {
81  position: relative;
82  top: -211%;
83  left: -35%;
84  transform: rotate(45deg);
85  width: 0.5em;
86  height: 0.5em;
87  border-radius: 50%;
88  border: 2px solid black;
89  background-color: #979797;
90  z-index: 99;
91}
92.a2 {
93  position: relative;
94  top: -210%;
95  left: -10%;
96  width: 12em;
97  height: 4em;
98  border-radius: 50px;
99  background-color: #171717;
100  background-image: linear-gradient(
101    #171717,
102    #171717,
103    #353535,
104    #353535,
105    #171717
106  );
107  margin-right: 5em;
108  clip-path: polygon(
109    47% 0,
110    47% 0,
111    34% 34%,
112    54% 25%,
113    32% 100%,
114    29% 96%,
115    49% 32%,
116    30% 38%
117  );
118  transform: rotate(-8deg);
119}
120.a2d {
121  position: relative;
122  top: -294%;
123  left: 94%;
124  width: 0.5em;
125  height: 0.5em;
126  border-radius: 50%;
127  border: 2px solid black;
128  background-color: #979797;
129  z-index: 99;
130}
131
132.notfound_text {
133  background-color: black;
134  padding-left: 0.3em;
135  padding-right: 0.3em;
136  font-size: 0.75em;
137  color: white;
138  letter-spacing: 0;
139  border-radius: 5px;
140  z-index: 10;
141}
142.tv {
143  width: 17em;
144  height: 9em;
145  margin-top: 3em;
146  border-radius: 15px;
147  background-color: #d36604;
148  display: flex;
149  justify-content: center;
150  border: 2px solid #1d0e01;
151  box-shadow: inset 0.2em 0.2em #e69635;
152}
153.tv::after {
154  content: "";
155  position: absolute;
156  width: 17em;
157  height: 9em;
158  border-radius: 15px;
159  background: repeating-radial-gradient(#d36604 0 0.0001%, #00000070 0 0.0002%)
160      50% 0/2500px 2500px,
161    repeating-conic-gradient(#d36604 0 0.0001%, #00000070 0 0.0002%) 60% 60%/2500px
162      2500px;
163  background-blend-mode: difference;
164  opacity: 0.09;
165}
166.curve_svg {
167  position: absolute;
168  margin-top: 0.25em;
169  margin-left: -0.25em;
170  height: 12px;
171  width: 12px;
172}
173.display_div {
174  display: flex;
175  align-items: center;
176  align-self: center;
177  justify-content: center;
178  border-radius: 15px;
179  box-shadow: 3.5px 3.5px 0px #e69635;
180}
181.screen_out {
182  width: auto;
183  height: auto;
184
185  border-radius: 10px;
186}
187.screen_out1 {
188  width: 11em;
189  height: 7.75em;
190  display: flex;
191  align-items: center;
192  justify-content: center;
193  border-radius: 10px;
194}
195.screen {
196  width: 13em;
197  height: 7.85em;
198  font-family: Montserrat;
199  border: 2px solid #1d0e01;
200  background: repeating-radial-gradient(#000 0 0.0001%, #ffffff 0 0.0002%) 50% 0/2500px
201      2500px,
202    repeating-conic-gradient(#000 0 0.0001%, #ffffff 0 0.0002%) 60% 60%/2500px
203      2500px;
204  background-blend-mode: difference;
205  animation: b 0.2s infinite alternate;
206  border-radius: 10px;
207  z-index: 99;
208  display: flex;
209  align-items: center;
210  justify-content: center;
211  font-weight: bold;
212  color: #252525;
213  letter-spacing: 0.15em;
214  text-align: center;
215}
216@keyframes b {
217  100% {
218    background-position: 50% 0, 60% 50%;
219  }
220}
221
222/* Another Error Screen to Use 
223
224.screen {
225  width: 13em;
226  height: 7.85em;
227  position: relative;
228  background: linear-gradient(to right, #002fc6 0%, #002bb2 14.2857142857%, #3a3a3a 14.2857142857%, #303030 28.5714285714%, #ff0afe 28.5714285714%, #f500f4 42.8571428571%, #6c6c6c 42.8571428571%, #626262 57.1428571429%, #0affd9 57.1428571429%, #00f5ce 71.4285714286%, #3a3a3a 71.4285714286%, #303030 85.7142857143%, white 85.7142857143%, #fafafa 100%);
229  border-radius: 10px;
230  border: 2px solid black;
231  z-index: 99;
232  display: flex;
233  align-items: center;
234  justify-content: center;
235  font-weight: bold;
236  color: #252525;
237  letter-spacing: 0.15em;
238  text-align: center;
239  overflow: hidden;
240}
241.screen:before, .screen:after {
242  content: "";
243  position: absolute;
244  left: 0;
245  z-index: 1;
246  width: 100%;
247}
248.screen:before {
249  top: 0;
250  height: 68.4782608696%;
251  background: linear-gradient(to right, white 0%, #fafafa 14.2857142857%, #ffe60a 14.2857142857%, #f5dc00 28.5714285714%, #0affd9 28.5714285714%, #00f5ce 42.8571428571%, #10ea00 42.8571428571%, #0ed600 57.1428571429%, #ff0afe 57.1428571429%, #f500f4 71.4285714286%, #ed0014 71.4285714286%, #d90012 85.7142857143%, #002fc6 85.7142857143%, #002bb2 100%);
252}
253.screen:after {
254  bottom: 0;
255  height: 21.7391304348%;
256  background: linear-gradient(to right, #006c6b 0%, #005857 16.6666666667%, white 16.6666666667%, #fafafa 33.3333333333%, #001b75 33.3333333333%, #001761 50%, #6c6c6c 50%, #626262 66.6666666667%, #929292 66.6666666667%, #888888 83.3333333333%, #3a3a3a 83.3333333333%, #303030 100%);
257}
258
259  */
260
261.lines {
262  display: flex;
263  column-gap: 0.1em;
264  align-self: flex-end;
265}
266.line1,
267.line3 {
268  width: 2px;
269  height: 0.5em;
270  background-color: black;
271  border-radius: 25px 25px 0px 0px;
272  margin-top: 0.5em;
273}
274.line2 {
275  flex-grow: 1;
276  width: 2px;
277  height: 1em;
278  background-color: black;
279  border-radius: 25px 25px 0px 0px;
280}
281
282.buttons_div {
283  width: 4.25em;
284  align-self: center;
285  height: 8em;
286  background-color: #e69635;
287  border: 2px solid #1d0e01;
288  padding: 0.6em;
289  border-radius: 10px;
290  display: flex;
291  align-items: center;
292  justify-content: center;
293  flex-direction: column;
294  row-gap: 0.75em;
295  box-shadow: 3px 3px 0px #e69635;
296}
297.b1 {
298  width: 1.65em;
299  height: 1.65em;
300  border-radius: 50%;
301  background-color: #7f5934;
302  border: 2px solid black;
303  box-shadow: inset 2px 2px 1px #b49577, -2px 0px #513721,
304    -2px 0px 0px 1px black;
305}
306.b1::before {
307  content: "";
308  position: absolute;
309  margin-top: 1em;
310  margin-left: 0.5em;
311  transform: rotate(47deg);
312  border-radius: 5px;
313  width: 0.1em;
314  height: 0.4em;
315  background-color: #000000;
316}
317.b1::after {
318  content: "";
319  position: absolute;
320  margin-top: 0.9em;
321  margin-left: 0.8em;
322  transform: rotate(47deg);
323  border-radius: 5px;
324  width: 0.1em;
325  height: 0.55em;
326  background-color: #000000;
327}
328.b1 div {
329  content: "";
330  position: absolute;
331  margin-top: -0.1em;
332  margin-left: 0.65em;
333  transform: rotate(45deg);
334  width: 0.15em;
335  height: 1.5em;
336  background-color: #000000;
337}
338.b2 {
339  width: 1.65em;
340  height: 1.65em;
341  border-radius: 50%;
342  background-color: #7f5934;
343  border: 2px solid black;
344  box-shadow: inset 2px 2px 1px #b49577, -2px 0px #513721,
345    -2px 0px 0px 1px black;
346}
347.b2::before {
348  content: "";
349  position: absolute;
350  margin-top: 1.05em;
351  margin-left: 0.8em;
352  transform: rotate(-45deg);
353  border-radius: 5px;
354  width: 0.15em;
355  height: 0.4em;
356  background-color: #000000;
357}
358.b2::after {
359  content: "";
360  position: absolute;
361  margin-top: -0.1em;
362  margin-left: 0.65em;
363  transform: rotate(-45deg);
364  width: 0.15em;
365  height: 1.5em;
366  background-color: #000000;
367}
368.speakers {
369  display: flex;
370  flex-direction: column;
371  row-gap: 0.5em;
372}
373.speakers .g1 {
374  display: flex;
375  column-gap: 0.25em;
376}
377.speakers .g1 .g11,
378.g12,
379.g13 {
380  width: 0.65em;
381  height: 0.65em;
382  border-radius: 50%;
383  background-color: #7f5934;
384  border: 2px solid black;
385  box-shadow: inset 1.25px 1.25px 1px #b49577;
386}
387.speakers .g {
388  width: auto;
389  height: 2px;
390  background-color: #171717;
391}
392
393.bottom {
394  width: 100%;
395  height: auto;
396  display: flex;
397  align-items: center;
398  justify-content: center;
399  column-gap: 8.7em;
400}
401.base1 {
402  height: 1em;
403  width: 2em;
404  border: 2px solid #171717;
405  background-color: #4d4d4d;
406  margin-top: -0.15em;
407  z-index: -1;
408}
409.base2 {
410  height: 1em;
411  width: 2em;
412  border: 2px solid #171717;
413  background-color: #4d4d4d;
414  margin-top: -0.15em;
415  z-index: -1;
416}
417.base3 {
418  position: absolute;
419  height: 0.15em;
420  width: 17.5em;
421  background-color: #171717;
422  margin-top: 0.8em;
423}
424
425.text_404 {
426  position: absolute;
427  display: flex;
428  flex-direction: row;
429  column-gap: 6em;
430  z-index: -5;
431  margin-bottom: 2em;
432  align-items: center;
433  justify-content: center;
434  opacity: 0.5;
435  font-family: Montserrat;
436}
437.text_4041 {
438  transform: scaleY(24.5) scaleX(9);
439}
440.text_4042 {
441  transform: scaleY(24.5) scaleX(9);
442}
443.text_4043 {
444  transform: scaleY(24.5) scaleX(9);
445}
446

/* Design Inspired by one of Stefan Devai's Design on Dribble */

.main_wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30em;
  height: 30em;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 5em;
}

.antenna {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 2px solid black;
  background-color: #f27405;
  margin-bottom: -6em;
  margin-left: 0em;
  z-index: -1;
}
.antenna_shadow {
  position: absolute;
  background-color: transparent;
  width: 50px;
  height: 56px;
  margin-left: 1.68em;
  border-radius: 45%;
  transform: rotate(140deg);
  border: 4px solid transparent;
  box-shadow: inset 0px 16px #a85103, inset 0px 16px 1px 1px #a85103;
  -moz-box-shadow: inset 0px 16px #a85103, inset 0px 16px 1px 1px #a85103;
}
.antenna::after {
  content: "";
  position: absolute;
  margin-top: -9.4em;
  margin-left: 0.4em;
  transform: rotate(-25deg);
  width: 1em;
  height: 0.5em;
  border-radius: 50%;
  background-color: #f69e50;
}
.antenna::before {
  content: "";
  position: absolute;
  margin-top: 0.2em;
  margin-left: 1.25em;
  transform: rotate(-20deg);
  width: 1.5em;
  height: 0.8em;
  border-radius: 50%;
  background-color: #f69e50;
}
.a1 {
  position: relative;
  top: -102%;
  left: -130%;
  width: 12em;
  height: 5.5em;
  border-radius: 50px;
  background-image: linear-gradient(
    #171717,
    #171717,
    #353535,
    #353535,
    #171717
  );
  transform: rotate(-29deg);
  clip-path: polygon(50% 0%, 49% 100%, 52% 100%);
}
.a1d {
  position: relative;
  top: -211%;
  left: -35%;
  transform: rotate(45deg);
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  border: 2px solid black;
  background-color: #979797;
  z-index: 99;
}
.a2 {
  position: relative;
  top: -210%;
  left: -10%;
  width: 12em;
  height: 4em;
  border-radius: 50px;
  background-color: #171717;
  background-image: linear-gradient(
    #171717,
    #171717,
    #353535,
    #353535,
    #171717
  );
  margin-right: 5em;
  clip-path: polygon(
    47% 0,
    47% 0,
    34% 34%,
    54% 25%,
    32% 100%,
    29% 96%,
    49% 32%,
    30% 38%
  );
  transform: rotate(-8deg);
}
.a2d {
  position: relative;
  top: -294%;
  left: 94%;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  border: 2px solid black;
  background-color: #979797;
  z-index: 99;
}

.notfound_text {
  background-color: black;
  padding-left: 0.3em;
  padding-right: 0.3em;
  font-size: 0.75em;
  color: white;
  letter-spacing: 0;
  border-radius: 5px;
  z-index: 10;
}
.tv {
  width: 17em;
  height: 9em;
  margin-top: 3em;
  border-radius: 15px;
  background-color: #d36604;
  display: flex;
  justify-content: center;
  border: 2px solid #1d0e01;
  box-shadow: inset 0.2em 0.2em #e69635;
}
.tv::after {
  content: "";
  position: absolute;
  width: 17em;
  height: 9em;
  border-radius: 15px;
  background: repeating-radial-gradient(#d36604 0 0.0001%, #00000070 0 0.0002%)
      50% 0/2500px 2500px,
    repeating-conic-gradient(#d36604 0 0.0001%, #00000070 0 0.0002%) 60% 60%/2500px
      2500px;
  background-blend-mode: difference;
  opacity: 0.09;
}
.curve_svg {
  position: absolute;
  margin-top: 0.25em;
  margin-left: -0.25em;
  height: 12px;
  width: 12px;
}
.display_div {
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  border-radius: 15px;
  box-shadow: 3.5px 3.5px 0px #e69635;
}
.screen_out {
  width: auto;
  height: auto;

  border-radius: 10px;
}
.screen_out1 {
  width: 11em;
  height: 7.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.screen {
  width: 13em;
  height: 7.85em;
  font-family: Montserrat;
  border: 2px solid #1d0e01;
  background: repeating-radial-gradient(#000 0 0.0001%, #ffffff 0 0.0002%) 50% 0/2500px
      2500px,
    repeating-conic-gradient(#000 0 0.0001%, #ffffff 0 0.0002%) 60% 60%/2500px
      2500px;
  background-blend-mode: difference;
  animation: b 0.2s infinite alternate;
  border-radius: 10px;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #252525;
  letter-spacing: 0.15em;
  text-align: center;
}
@keyframes b {
  100% {
    background-position: 50% 0, 60% 50%;
  }
}

/* Another Error Screen to Use 

.screen {
  width: 13em;
  height: 7.85em;
  position: relative;
  background: linear-gradient(to right, #002fc6 0%, #002bb2 14.2857142857%, #3a3a3a 14.2857142857%, #303030 28.5714285714%, #ff0afe 28.5714285714%, #f500f4 42.8571428571%, #6c6c6c 42.8571428571%, #626262 57.1428571429%, #0affd9 57.1428571429%, #00f5ce 71.4285714286%, #3a3a3a 71.4285714286%, #303030 85.7142857143%, white 85.7142857143%, #fafafa 100%);
  border-radius: 10px;
  border: 2px solid black;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #252525;
  letter-spacing: 0.15em;
  text-align: center;
  overflow: hidden;
}
.screen:before, .screen:after {
  content: "";
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
}
.screen:before {
  top: 0;
  height: 68.4782608696%;
  background: linear-gradient(to right, white 0%, #fafafa 14.2857142857%, #ffe60a 14.2857142857%, #f5dc00 28.5714285714%, #0affd9 28.5714285714%, #00f5ce 42.8571428571%, #10ea00 42.8571428571%, #0ed600 57.1428571429%, #ff0afe 57.1428571429%, #f500f4 71.4285714286%, #ed0014 71.4285714286%, #d90012 85.7142857143%, #002fc6 85.7142857143%, #002bb2 100%);
}
.screen:after {
  bottom: 0;
  height: 21.7391304348%;
  background: linear-gradient(to right, #006c6b 0%, #005857 16.6666666667%, white 16.6666666667%, #fafafa 33.3333333333%, #001b75 33.3333333333%, #001761 50%, #6c6c6c 50%, #626262 66.6666666667%, #929292 66.6666666667%, #888888 83.3333333333%, #3a3a3a 83.3333333333%, #303030 100%);
}

  */

.lines {
  display: flex;
  column-gap: 0.1em;
  align-self: flex-end;
}
.line1,
.line3 {
  width: 2px;
  height: 0.5em;
  background-color: black;
  border-radius: 25px 25px 0px 0px;
  margin-top: 0.5em;
}
.line2 {
  flex-grow: 1;
  width: 2px;
  height: 1em;
  background-color: black;
  border-radius: 25px 25px 0px 0px;
}

.buttons_div {
  width: 4.25em;
  align-self: center;
  height: 8em;
  background-color: #e69635;
  border: 2px solid #1d0e01;
  padding: 0.6em;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  row-gap: 0.75em;
  box-shadow: 3px 3px 0px #e69635;
}
.b1 {
  width: 1.65em;
  height: 1.65em;
  border-radius: 50%;
  background-color: #7f5934;
  border: 2px solid black;
  box-shadow: inset 2px 2px 1px #b49577, -2px 0px #513721,
    -2px 0px 0px 1px black;
}
.b1::before {
  content: "";
  position: absolute;
  margin-top: 1em;
  margin-left: 0.5em;
  transform: rotate(47deg);
  border-radius: 5px;
  width: 0.1em;
  height: 0.4em;
  background-color: #000000;
}
.b1::after {
  content: "";
  position: absolute;
  margin-top: 0.9em;
  margin-left: 0.8em;
  transform: rotate(47deg);
  border-radius: 5px;
  width: 0.1em;
  height: 0.55em;
  background-color: #000000;
}
.b1 div {
  content: "";
  position: absolute;
  margin-top: -0.1em;
  margin-left: 0.65em;
  transform: rotate(45deg);
  width: 0.15em;
  height: 1.5em;
  background-color: #000000;
}
.b2 {
  width: 1.65em;
  height: 1.65em;
  border-radius: 50%;
  background-color: #7f5934;
  border: 2px solid black;
  box-shadow: inset 2px 2px 1px #b49577, -2px 0px #513721,
    -2px 0px 0px 1px black;
}
.b2::before {
  content: "";
  position: absolute;
  margin-top: 1.05em;
  margin-left: 0.8em;
  transform: rotate(-45deg);
  border-radius: 5px;
  width: 0.15em;
  height: 0.4em;
  background-color: #000000;
}
.b2::after {
  content: "";
  position: absolute;
  margin-top: -0.1em;
  margin-left: 0.65em;
  transform: rotate(-45deg);
  width: 0.15em;
  height: 1.5em;
  background-color: #000000;
}
.speakers {
  display: flex;
  flex-direction: column;
  row-gap: 0.5em;
}
.speakers .g1 {
  display: flex;
  column-gap: 0.25em;
}
.speakers .g1 .g11,
.g12,
.g13 {
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background-color: #7f5934;
  border: 2px solid black;
  box-shadow: inset 1.25px 1.25px 1px #b49577;
}
.speakers .g {
  width: auto;
  height: 2px;
  background-color: #171717;
}

.bottom {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 8.7em;
}
.base1 {
  height: 1em;
  width: 2em;
  border: 2px solid #171717;
  background-color: #4d4d4d;
  margin-top: -0.15em;
  z-index: -1;
}
.base2 {
  height: 1em;
  width: 2em;
  border: 2px solid #171717;
  background-color: #4d4d4d;
  margin-top: -0.15em;
  z-index: -1;
}
.base3 {
  position: absolute;
  height: 0.15em;
  width: 17.5em;
  background-color: #171717;
  margin-top: 0.8em;
}

.text_404 {
  position: absolute;
  display: flex;
  flex-direction: row;
  column-gap: 6em;
  z-index: -5;
  margin-bottom: 2em;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  font-family: Montserrat;
}
.text_4041 {
  transform: scaleY(24.5) scaleX(9);
}
.text_4042 {
  transform: scaleY(24.5) scaleX(9);
}
.text_4043 {
  transform: scaleY(24.5) scaleX(9);
}

Toggle prefixes

2.4K views

Copy to Figma

2.4K views

Comments

No variations yet

MIT License

Copyright - 2024 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.