vanilla-code-snippets/index.html at main · rifkyniyas/vanilla-code-snippets · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=PT+Sans&display=swap" rel="stylesheet">
    <!-- Custom css -->
    <link rel="stylesheet" href="./css/style.css">
    <!-- Favicon -->
    <link rel="shortcut icon" href="./images/logo.svg" type="image/x-icon">
    <title>Vanilla Code Snippets | Rifky Niyas</title>
</head>
<body class="col-md-2">
    <aside class="bg-picture">
        <p class="picture-credits">
            Photo by
            <a href="https://unsplash.com/@thissillygirlskitchen?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
                Dana DeVolk
            </a>
                on
            <a href="https://unsplash.com/s/photos/vanilla?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
                Unsplash
            </a>
        </p>
    </aside>
    <main class="main__section d-flex flex-col justify-around">

        <header>
            <div class="d-flex justify-center align-center">
                <a href="./">
                    <img src="./images/logo.svg" alt="vanilla-code-snippets-logo" class="logo">
                </a>
                <h1>Vanilla Code Snippets</h1>
            </div>
            <p class="intro-text">Building stuff using pure HTML, CSS and Vanilla JavaScript</p>
        </header>

        <section>
            <p class="quote">“I scream <br>
                You scream <br>
                We all have place for vanilla code <br>
                in our bloodstream”</p>
        </section>

        <article>
            <h2>Latest Snippets</h2>
            <section class="snippets">
                <!--Card-->
                <div class="snippet-container">
                    <img src="./images/demos/interactive-toggle-token-demo.png" alt="profile-image-overlay" class="snippet-demo">
                    <div class="snippet-overlay">
                        <h3>Interactive Toggle Token</h3>
                        <div>
                            <a href="./6-interactive-toggle-token/" class="overlay-link primary-link">
                                View Demo
                            </a>
                            <a href="https://github.com/MohammadRifky/vanilla-code-snippets/tree/main/6-interactive-toggle-token/" class="overlay-link secondary-link" target="_blank">
                                Source Code
                            </a>
                        </div>
                    </div>
                </div>
                <!--Card-->
                <div class="snippet-container">
                    <img src="./images/demos/real-time-text-area-validator.png" alt="profile-image-overlay" class="snippet-demo">
                    <div class="snippet-overlay">
                        <h3>Real Time Text Area Validaton</h3>
                        <div>
                            <a href="./5-real-time-text-area-validation/" class="overlay-link primary-link">
                                View Demo
                            </a>
                            <a href="https://github.com/MohammadRifky/vanilla-code-snippets/tree/main/5-real-time-text-area-validation" class="overlay-link secondary-link" target="_blank">
                                Source Code
                            </a>
                        </div>
                    </div>
                </div>
                <!--Card-->
                <div class="snippet-container">
                    <img src="./images/demos/digital-clock-demo.png" alt="profile-image-overlay" class="snippet-demo">
                    <div class="snippet-overlay">
                        <h3>Digital Clock</h3>
                        <div>
                            <a href="./4-digital-clock/" class="overlay-link primary-link">
                                View Demo
                            </a>
                            <a href="https://github.com/MohammadRifky/vanilla-code-snippets/tree/main/4-digital-clock" class="overlay-link secondary-link" target="_blank">
                                Source Code
                            </a>
                        </div>
                    </div>
                </div>

            </section>
        </article>

        <section>
            <a href="./snippets.html" class="button button-primary">
                View all snippets
            </a>
            <a href="https://github.com/MohammadRifky/vanilla-code-snippets"  class="button button-secondary" target="_blank">
                Visit Github Repository
            </a>
        </section>

        <footer>
            <div>
                <span>Made with <span class="heart">&hearts;</span> by </span>
                <a href="https://mohammadrifky.github.io/rifkyniyas/">Rifky Niyas</a>
            </div>
            <a href="https://mohammadrifky.github.io/rifkyniyas/" target="_blank">
                <img src="./images/rifky-icon.jpg" alt="rifky-avatar-icon" class="avatar-icon">
            </a>
        </footer>

    </main>

</body>
</html>