web.snips-codes/index.html at master · imshines/web.snips-codes · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Snips Demo</title>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Lato;
        }

        .container {
            width: 80%;
            margin: auto;
            min-height: 100vh;
        }

        .container h2,
        .container h3 {
            text-align: center;
            margin-top: 10px;
        }

        .links {
            margin-top: 20px;
        }

        .links li {
            margin: 20px;
        }

        .footer {
            text-align: center;
            margin: 40px 0px;
        }
    </style>
</head>

<body>
    <section class="container">
        <header>
            <h2>Hello There! 👋</h2>
            <h3>
                These are the demos from <br /> <a target="_blank" href="https://www.instagram.com/web.snips">Instagram
                    -
                    web.snips</a> <br />
                <a href="https://www.mohankumar.me/web.snips-codes">Github - web.snips-codes</a>
            </h3>
        </header>
        <main class="links">
            <h4>Here are the links for the demo 👇</h4>
            <ul>
                <li>
                    <a target="_blank" href="./dropdown/index.html">Dropdown button </a>
                </li>
                <li>
                    <a target="_blank" href="./image-checkbox/index.html">Image Checkbox</a>
                </li>
                <li>
                    <a target="_blank" href="./full-gradient-animation/index.html">Full Gradient Animation</a>
                </li>
                <li>
                    <a target="_blank" href="./battery-animation/index.html">Battery Animation</a>
                </li>
                <li>
                    <a target="_blank" href="./nav-bar/index.html">Navbar FAB</a>
                </li>
                <li>
                    <a target="_blank" href="./ripple-btn/index.html">Ripple Button</a>
                </li>
                <li>
                    <a target="_blank" href="./selection-color-css/index.html">CSS Selection Color</a>
                </li>
                <li>
                    <a target="_blank" href="./spotify-style-button/index.html">Spotify Style Button</a>
                </li>
                <li>
                    <a target="_blank" href="./text-gradient/index.html">Text Gradient</a>
                </li>
                <li>
                    <a target="_blank" href="./pulse-animation/index.html">Pulse Animation</a>
                </li>
                <li>
                    <a target="_blank" href="./toggle-mode-css/index.html">Toggle Mode CSS</a>
                </li>
                <li>
                    <a target="_blank" href="./animated-loader-2/index.html">Animated Loader v2</a>
                </li>
                <li>
                    <a target="_blank" href="./animated-loader/index.html">Animated Loader</a>
                </li>
                <li>
                    <a target="_blank" href="./animated-ham/index.html">Animated Ham</a>
                </li>
                <li>
                    <a target="_blank" href="./gradient-cards/index.html">Gradient Cards</a>
                </li>
                <li>
                    <a target="_blank" href="./accordion/index.html">Accordion</a>
                </li>
                <li>
                    <a target="_blank" href="./toast-notification/index.html">Toast Animation</a>
                </li>
                <li>
                    <a target="_blank" href="./toggle-button/index.html">Toggle Button (sun / moon)</a>
                </li>
                <li>
                    <a target="_blank" href="./fill-animation/index.html">Fill Animation</a>
                </li>
            </ul>
        </main>
        <footer class="footer">
            <h4>Created by <a target="_blank" href="https://www.mohankumar.live">Mohan Kumar 👨‍💻</a> </h4><br />
            <h4>Instagram <a target="_blank" href="https://www.instagram.com/imshines">@imshines</a> </h4>
        </footer>
    </section>
</body>