Animated-Skill-Box/style.css at main · codeaashu/Animated-Skill-Box · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
* {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1d1d1d;
}

.container {
    width: 500px;
    background-color: #2d2d2d;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 1px 1px 10px 2px rgb(8, 0, 8);
    border-style: solid;
    border-width: 2px;
    border-color: rgb(3, 224, 253);
}

.container h3 {
    font-size: 40px;
    text-align: center;
    margin-bottom: 20px;
}

.container .box {
    width: 100%;
    margin: 10px 0px;
}

.box .progress_bar_box {
    display: flex;
    align-items: center;
}

.box .progress_bar_box .progress_bar {
    width: 100%;
    height: 10px;
    background-color: #1e1e1e;
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}

.box .progress_bar_box .progress_bar .line {
    position: absolute;
    width: 0%;
    height: 100%;
    background-color: rgb(3, 224, 253);
    border-radius: 100px;
    transition: 0.2s;
}

.box .progress_bar_box .increasing_percentage {
    margin-left: 10px;
    font-size: 25px;
}

.box .progress_bar_box .total_percentage {
    display: none;
}

/* If you have any problem or work like college project, doubt... related html css javascript
                         (Web Development, Web Design) then remember the name ASHUTOSH PYTHON
                      share your query on instagram, email, and many more on my social handle
                                                                            Thank You! #Jayho */