Card by naveenkumarr-onyx

1.card {
2  width: 300px;
3  background-color: #fff;
4  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
5  border-radius: 10px;
6  overflow: hidden;
7}
8
9.card:hover {
10  border-bottom: 5px solid violet;
11  transform: scale(1.2);
12  transition: 1s ease-in-out;
13}
14
15.header {
16  background-color: #333;
17  color: #fff;
18  padding: 20px;
19  text-align: center;
20  font-size: 18px;
21}
22
23.body {
24  padding: 20px;
25}
26
27.skill {
28  display: flex;
29  align-items: center;
30  margin-bottom: 20px;
31}
32
33.skill-name {
34  width: 120px;
35  font-size: 16px;
36}
37
38.html:hover {
39  color: blue;
40}
41
42.css:hover {
43  color: purple;
44}
45
46.js:hover {
47  color: red;
48}
49
50.skill-level {
51  width: 160px;
52  height: 10px;
53  background-color: #eee;
54  border-radius: 10px;
55  overflow: hidden;
56  margin-left: 20px;
57}
58
59.skill-percent {
60  background-color: #333;
61  height: 100%;
62}
63
64.skill-percent-number {
65  margin-left: 20px;
66  font-size: 16px;
67}
68