mydailycode/index.html at master · SajadHamidGada/mydailycode · 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="index.css">
    <title>Daily Code</title>
</head>

<body>

    <header class="header">
        <h1>daily pure css</h1>
    </header>

    <main class="main-body">

        <!-- Bouncing Loader  -->
        <section class="card">
            <h1>Bouncing Loader</h1>
            <main class="card-body">
                <!-- Main Bouncing Loader code  , Starts here  -->
                <div class="bouncing-loader"></div>
                <div class="bouncing-loader"></div>
                <div class="bouncing-loader"></div>
                <!-- Main Bouncing Loader code , Ends here   -->
            </main>
        </section>

        <!-- Sound Beat Loader -->
        <section class="card">
            <h1>Sound Beat Loader </h1>
            <main class="card-body">
                <!-- Sound Beat Loader code  , Starts here  -->
                <div class="sound"></div>
                <div class="sound"></div>
                <div class="sound"></div>
                <div class="sound"></div>
                <div class="sound"></div>
                <div class="sound"></div>
                <div class="sound"></div>
                <div class="sound"></div>
                <!-- Sound Beat Loader code , Ends here   -->
            </main>
        </section>

        <!-- Donut Spinner -->
        <section class="card">
            <h1>Donut Spinner</h1>
            <main class="card-body">
                <!-- Main Donut spinner code  , Starts here  -->
                <div class="donut-spinner"></div>
                <!-- Main Donut spinner code , Ends here   -->
            </main>
        </section>

        <!--  Text Hover Underline   -->
        <section class="card">
            <h1> Text Hover Underline </h1>
            <main class="card-body">
                <!--Text Hover Underline code  , Starts here  -->
                <p class="text-hover-underline">Hover Over this Text</p>
                <!--Text Hover Underline code , Ends here   -->
            </main>
        </section>

        <!--  Button Color Hover   -->
        <section class="card">
            <h1> Button Color Hover </h1>
            <main class="card-body">
                <!--  Button Color Hover code  , Starts here  -->
                <a class="btn-1">
                    <span>Hover Over this inner Box</span>
                </a>
                <!--  Button Color Hover code , Ends here   -->
            </main>
        </section>

        <!--  Button 3D Effect   -->
        <section class="card">
            <h1> Button 3D Effect </h1>
            <main class="card-body">
                <!--  Button 3D Effect code  , Starts here  -->
                <a class="btn-2" title="Hover Over this inner Box">
                    Hover Over this inner Box
                </a>
                <!--  Button 3D Effect code , Ends here   -->
            </main>
        </section>

        <!--  Button Text Hover   -->
        <section class="card">
            <h1> Button Text Hover </h1>
            <main class="card-body">
                <!--  Button Text Hover code  , Starts here  -->
                <a class="btn-3"></a>
                <!--  Button Text Hover code , Ends here   -->
            </main>
        </section>

        <!-- Progress Bar -->
        <section class="card">
            <h1>Progress Bar </h1>
            <main class="card-body">
                <!-- Progress Bar code  , Starts here  -->
                <div class="progress-bar-wrapper">
                    <div class="progress-bar-1"></div>
                </div>
                <!-- Progress Bar code , Ends here   -->
            </main>
        </section>

        <!-- Toggle Switch -->
        <section class="card">
            <h1>Toggle Switch </h1>
            <main class="card-body">
                <!-- Toggle Switch code  , Starts here  -->
                <input type="checkbox" id="switchCheck-1" class="offscreen-checkbox-1" />
                <label for="switchCheck-1" class="switch-check-1"></label>
                <!-- Toggle Switch code , Ends here   -->
            </main>
        </section>

        <!-- Search box hover -->
        <section class="card">
            <h1>Search Box Hover </h1>
            <main class="card-body">
                <!-- Search box hover code  , Starts here  -->
                <div class="search-box">
                    <input type="text" class="search-txt" placeholder="Type here" />
                    <a class="search-btn"></a>
                </div>
                <!-- Search box hover code , Ends here   -->
            </main>
        </section>


    </main>
</body>

</html>