Animated-Skill-Box/index.html 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
<!DOCTYPE html>
<html lang="en">
<!--[ Ashutosh Python ]-->

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Skill Box</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="container">
        <h3 style="color: rgb(3, 224, 253)">My Skills</h3>

        <div class="box">
            <p style="font-size: 25px; font-weight: bold; color: white">HTML</p>
            <div class="progress_bar_box">
                <div class="progress_bar">
                    <span class="line"></span>
                </div>
                <p class="increasing_percentage" style="color: white">0%</p>
                <div class="total_percentage" style="color: white">80%</div>
            </div>
        </div>

        <div class="box">
            <p style="font-size: 25px; font-weight: bold; color: white">CSS</p>
            <div class="progress_bar_box">
                <div class="progress_bar">
                    <span class="line"></span>
                </div>
                <p class="increasing_percentage" style="color: white">0%</p>
                <div class="total_percentage" style="color: white">50%</div>
            </div>
        </div>

        <div class="box">
            <p style="font-size: 25px; font-weight: bold; color: white">
                JAVASCRIPT
            </p>
            <div class="progress_bar_box">
                <div class="progress_bar">
                    <span class="line"></span>
                </div>
                <p class="increasing_percentage" style="color: white">0%</p>
                <div class="total_percentage" style="color: white">65%</div>
            </div>
        </div>

        <div class="box">
            <p style="font-size: 25px; font-weight: bold; color: white">PHP</p>
            <div class="progress_bar_box">
                <div class="progress_bar">
                    <span class="line"></span>
                </div>
                <p class="increasing_percentage" style="color: white">0%</p>
                <div class="total_percentage" style="color: white">40%</div>
            </div>
        </div>
    </div>
</body>

<script src="script.js"></script>

<!-- 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 -->
</html>