AnimateItNow-GSSOC-25/index.html at main · Abhay-aps001/AnimateItNow-GSSOC-25 · 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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AnimateItNow</title>
  <meta name="description" content="A comprehensive collection of CSS animation templates and effects for web developers" />

  <!-- PWA Meta Tags -->
  <meta name="theme-color" content="#ff6b6b" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <meta name="apple-mobile-web-app-title" content="AnimateItNow" />
  <meta name="msapplication-TileImage" content="images/icons/icon-144x144.png" />
  <meta name="msapplication-TileColor" content="#ff6b6b" />

  <!-- PWA Manifest -->
  <link rel="manifest" href="manifest.json" />

  <!-- PWA Icons -->
  <link rel="icon" type="image/png" sizes="72x72" href="images/icons/icon-72x72.png" />
  <link rel="icon" type="image/png" sizes="96x96" href="images/icons/icon-96x96.png" />
  <link rel="icon" type="image/png" sizes="128x128" href="images/icons/icon-128x128.png" />
  <link rel="icon" type="image/png" sizes="144x144" href="images/icons/icon-144x144.png" />
  <link rel="icon" type="image/png" sizes="152x152" href="images/icons/icon-152x152.png" />
  <link rel="icon" type="image/png" sizes="192x192" href="images/icons/icon-192x192.png" />
  <link rel="icon" type="image/png" sizes="384x384" href="images/icons/icon-384x384.png" />
  <link rel="icon" type="image/png" sizes="512x512" href="images/icons/icon-512x512.png" />

  <!-- Apple Touch Icons -->
  <link rel="apple-touch-icon" sizes="152x152" href="images/icons/icon-152x152.png" />
  <link rel="apple-touch-icon" sizes="192x192" href="images/icons/icon-192x192.png" />

  <!-- Fallback icon -->
  <link rel="icon" type="image/png" href="images/logo.png" />

  <!-- styles & external resources -->
  <link rel="stylesheet" href="styles.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
</head>

<body>

  <!-- ProgressBar -->
  <div id="progress-bar"></div>
  <!-- ProgressBar Ends -->

  <!-- ───────── NAVBAR ───────── -->
  <nav class="navbar scroll-fade">
    <div class="nav-left">
      <img src="images/logo.png" alt="AnimateItNow Logo" class="logo" />
      <span class="site-name">Animate It Now</span>
    </div>

    <div class="nav-right">
      <ul class="nav-links">
        <li><a href="index.html" class="active">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="editor.html" target="blank">Editor</a></li>
        <li><a href="templates.html">Templates</a></li>
        <li><a href="contributors.html">Contributors</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="leaderboard.html">Leaderboard</a></li>  <!--leaderboard linkup> -->
        <!-- cursor toggle switch -->
        <li class="snakeList">
          <label class="switch" title="Toggle Snake Cursor">
            <input type="checkbox" id="cursorToggle">
            <span class="slider round"></span>
          </label>
          <span class="snakeLabel">Snake Cursor</span>
        </li>
        <!-- github icon -->
        <li>

          <a href="https://github.com/itsAnimation/AnimateItNow" target="_blank" rel="noopener noreferrer"
            aria-label="GitHub Repo" class="github-icon">
            <svg viewBox="0 0 16 16" width="24" height="24" fill="currentColor" aria-hidden="true">
              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
               0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52
               -.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2
               -3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.67
               7.67 0 018 4.91a7.6 7.6 0 012.01.27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51
               .56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01
               2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
            </svg>
          </a>
        </li>
        <li><button id="theme-toggle" class="ripple btn-press" aria-label="Toggle Theme">
              <i data-lucide="moon"></i>
            </button>

        </li>
      </ul>
    </div>
  </nav>

  <!-- ───────── HERO ───────── -->
  <header class="landing-section">
    <h1 class="fade-in" id="modify">Welcome to <span>AnimateItNow</span></h1>
    <h2 class="fade-in delay-1">
      A creative space where contributors build beautiful web components.
    </h2>
    <p class="fade-in delay-2">
      This project is a collaborative, open-source platform for sharing and
      discovering stunning web UI components. Join us to contribute, learn,
      and inspire others!
    </p>
    <a href="#faq" class="cta-btn bounce ripple btn-press"
   onclick="event.preventDefault(); const el = document.getElementById('faq'); window.scrollTo({ top: el.offsetTop - 70, behavior: 'smooth' });">
   Get Started
</a>

  </header>

  <!-- ───────── MAIN ───────── -->
  <main>
    <!-- ─────── OUR SINGLE STATIC FAQ ─────── -->
    <section id="faq" class="faq-section info-section scroll-fade">
      <div class="faq-container">
        <h2 class="faq-title">Frequently Asked Questions</h2>
        <p class="faq-subtitle">Everything you need to know about AnimateItNow</p>

        <div class="faq-list">
          <!-- 01 -->
          <div class="faq-item glow-wrap">
            <div class="faq-question-header" onclick="toggleFAQ(this)">
              <h3>What is this project?</h3>
              <div class="faq-icon-static"><i class="fas fa-question"></i></div>
            </div>
            <div class="faq-answer-content">
              <p>AnimateItNow is an open-source platform that helps beginners learn web development by building and exploring simple animations using HTML, CSS, and JavaScript. It offers a collaborative space for contributors to create, improve, and share animation templates while gaining hands-on coding experience.</p>
            </div>
          </div>

          <!-- 02 -->
          <div class="faq-item glow-wrap">
            <div class="faq-question-header"onclick="toggleFAQ(this)">
              <h3>How to contribute?</h3>
              <div class="faq-icon-static"><i class="fas fa-code-branch"></i></div>
            </div>
            <div class="faq-answer-content">
              <p>
                <li>Fork this repository to your own GitHub account.</li>
                <li> Add your unique and creative web components or improvements.</li>
                <li>All skill levels are welcome — whether you're a beginner or a pro!</li>
                <li>Submit a Pull Request with a short description of your changes.</li>
                <li>Need ideas? Check out our Templates page for inspiration!</li>
              </p>
            </div>
          </div>

          <!-- 03 -->
          <div class="faq-item glow-wrap">
            <div class="faq-question-header"onclick="toggleFAQ(this)">
              <h3>Why open source?</h3>
              <div class="faq-icon-static"><i class="fas fa-users"></i></div>
            </div>
            <div class="faq-answer-content">
              <p>Open source is more than just code — it's about collaboration, learning, and community.
              It empowers developers from all backgrounds to contribute, share knowledge, and grow together. By working openly, we drive innovation, improve transparency, and build real-world solutions that benefit everyone.</p>
            </div>
          </div>

          <!-- 04 -->
          <div class="faq-item glow-wrap">
            <div class="faq-question-header"onclick="toggleFAQ(this)">
              <h3>HTML Basics</h3>
              <div class="faq-icon-static"><i class="fas fa-code"></i></div>
            </div>
            <div class="faq-answer-content">
              <p>Learning HTML, especially semantic HTML, is the foundation of web development. It helps you create structured and meaningful web pages that are not only easier to maintain but also accessible to all users, including those using screen readers. Semantic tags improve readability, and ensure that your websites follow modern best practices.</p>
            </div>
          </div>

          <!-- 05 -->
          <div class="faq-item glow-wrap">
            <div class="faq-question-header" onclick="toggleFAQ(this)">
              <h3>CSS Styling</h3>
              <div class="faq-icon-static"><i class="fas fa-paint-brush"></i></div>
            </div>
            <div class="faq-answer-content">
              <p>CSS is what brings your web pages to life. While HTML gives your site structure, CSS adds the design — colors, layouts, animations, responsiveness, and overall look and feel. It allows developers to create visually appealing and user-friendly websites that work well across different devices and screen sizes.</p>
            </div>
          </div>

          <!-- 06 -->
          <div class="faq-item glow-wrap">
            <div class="faq-question-header" onclick="toggleFAQ(this)">
              <h3>JavaScript Logic</h3>
              <div class="faq-icon-static"><i class="fas fa-microchip"></i></div>
            </div>
            <div class="faq-answer-content">
              <p>JavaScript is the programming language of the web. It adds interactivity and dynamic behavior to your web pages — like sliders, buttons that respond to clicks, form validation, animations, and real-time updates. Without JavaScript, a website would be static and unresponsive. It's essential for building modern, interactive user experiences..</p>
            </div>
          </div>

          <!-- 07 -->
          <div class="faq-item glow-wrap">
            <div class="faq-question-header" onclick="toggleFAQ(this)">
              <h3>Animations</h3>
              <div class="faq-icon-static"><i class="fas fa-wave-square"></i></div>
            </div>
            <div class="faq-answer-content">
              <p>Create smooth, engaging animations that not only delight users but also enhance usability and guide user interaction. Well-designed animations can make interfaces feel more responsive, intuitive, and modern.</p>
            </div>
          </div>

          <!-- 08 -->
          <div class="faq-item glow-wrap">
            <div class="faq-question-header" onclick="toggleFAQ(this)">
              <h3>Open Source Contributors</h3>
              <div class="faq-icon-static"><i class="fas fa-heart"></i></div>
            </div>
            <div class="faq-answer-content">
              <p>Join our welcoming community and collaborate on fun, creative, and impactful web development projects.
                Whether you're just starting out or an experienced dev, there's a place for you here!</p>
            </div>
          </div>

          <!-- 9 -->
          <div class="faq-item glow-wrap">
            <div class="faq-question-header" onclick="toggleFAQ(this)">
              <h3>Is AnimateItNow responsive on all devices?</h3>
              <div class="faq-icon-static"><i class="fa-solid fa-mobile-screen"></i></div>
            </div>
            <div class="faq-answer-content">
              <p>Absolutely! All components are designed with responsiveness in mind. Feel free to report issues if any
                component breaks on smaller screens.</p>
            </div>
          </div>


          <!-- 10 -->
          <div class="faq-item glow-wrap">
            <div class="faq-question-header" onclick="toggleFAQ(this)">
              <h3>How do I preview my changes locally?</h3>
              <div class="faq-icon-static"><i class="fas fa-desktop"></i></div>
            </div>
            <div class="faq-answer-content">
              <p>Open index.html in a browser or use VS Code's Live Server extension for live preview.</p>
            </div>
          </div>

        </div><!-- /faq-list -->
      </div><!-- /faq-container -->
    </section>
    <div id="page" class="site">
      <div class="container">
        <div class="testi">
          <div class="head">
            <h3>Testimonials</h3>
            <p>See What People are saying...</p>
          </div>
          <div class="body swiper">
            <ul class="swiper-wrapper">
              <li class="swiper-slide">
                <div class="wrapper">
                  <div class="thumbnail">
                    <img src="images/img1.jpg" alt="">
                  </div>
                  <div class="aside">
                    <p>AnimateItNow turned our static UI into something delightful. The ease of integration is mind-blowing</p>
                    <div class="name">
                      <h4>Priya Verma</h4>
                      <p>UI/UX Designer at PixelCraft</p>
                    </div>
                  </div>
                </div>
              </li>
              <li class="swiper-slide">
                <div class="wrapper">
                  <div class="thumbnail">
                    <img src="images/img2.jpg" alt="">
                  </div>
                  <div class="aside">
                    <p>It’s the fastest way I’ve ever added beautiful animations to a site. My clients love the results!</p>
                    <div class="name">
                      <h4>Rohan Malhotra</h4>
                      <p>Freelance Web Developer</p>
                    </div>
                  </div>
                </div>
              </li>
              <li class="swiper-slide">
                <div class="wrapper">
                  <div class="thumbnail">
                    <img src="images/img3.jpg" alt="">
                  </div>
                  <div class="aside">
                    <p>Animations were once a pain. Now with AnimateItNow, it feels like magic with every scroll!</p>
                    <div class="name">
                      <h4>Alisha Singh</h4>
                      <p>Frontend Engineer at DevNest</p>
                    </div>
                  </div>
                </div>
              </li>
              <li class="swiper-slide">
                <div class="wrapper">
                  <div class="thumbnail">
                    <img src="images/img4.jpg" alt="">
                  </div>
                  <div class="aside">
                    <p>The lightweight design and modularity of AnimateItNow makes it perfect for modern frontend teams.</p>
                    <div class="name">
                      <h4>David Kim</h4>
                      <p>Product Engineer at Innovix</p>
                    </div>
                  </div>
                </div>
              </li>
              <li class="swiper-slide">
                <div class="wrapper">
                  <div class="thumbnail">
                    <img src="images/img5.jpg" alt="">
                  </div>
                  <div class="aside">
                    <p>I use AnimateItNow in every prototype I deliver. It brings life to design without slowing things down.</p>
                    <div class="name">
                      <h4>Zoya Khan</h4>
                      <p>Creative Director at StudioZ</p>
                    </div>
                  </div>
                </div>
              </li>
              <li class="swiper-slide">
                <div class="wrapper">
                  <div class="thumbnail">
                    <img src="images/img6.jpg" alt="">
                  </div>
                  <div class="aside">
                    <p>It blends so seamlessly with Tailwind and modern frameworks. A must-have for every frontend dev!</p>
                    <div class="name">
                      <h4>Anuj Mehta</h4>
                      <p>Full Stack Developer</p>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <div class="swiper-pagination"></div>

            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
      const swiper = new Swiper('.swiper', {
        autoHeight: true,
        loop: true,

        // If we need pagination
        pagination: {
          el: '.swiper-pagination',
        },

        // Navigation arrows
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
    </script>
  </main>
  <!-- ───────── FOOTER ───────── -->
  <footer class="footer scroll-fade">
    <div class="footer-content">
      <div class="footer-left">
        <h2>AnimateItNow</h2>
        <p>Creating impactful web animations and templates for everyone.</p>
      </div>

      <div class="footer-right">
        <h4>Connect With Us</h4>
        <ul>
          <li class="github"><a href="https://github.com/itsAnimation/AnimateItNow" target="_blank"><i class="fab fa-github fa-beat"></i> GitHub</a></li>
          <li><a href="https://www.linkedin.com/in/anujshrivastava1/" target="_blank"><i class="fab fa-linkedin fa-beat"></i> LinkedIn</a></li>
          <!-- fa-beat class added in email for animation -->
          <li><a href="mailto:contact@animateitnow.com"><i class="fas fa-envelope fa-beat"></i> Email Us</a></li>
        </ul>
      </div>
    </div>

    <div class="footer-bottom">
      <p>© 2025 AnimateItNow. Made with ❤️ by <span class="highlight">Anuj</span> and Contributors.</p>
    </div>
  </footer>

  <div id="cursor-snake"></div>
  <script src="https://unpkg.com/lucide@latest"></script>

  <script src="script.js"></script>
  <!-- PWA Support -->
  <script src="pwa.js"></script>
</body>

</html>