Cool Animated Components 😎

Create animated components using HTML, CSS, JS and get them featured here

Latest Announcements 📢

🔴 As we have a lot of people willing to contribute and fewer issues, please make sure you work on the task assigned to you within 5 days (or inform the maintainers that you are still working on it, by commenting on the issue itself)

🔴 If we do not receive any updates from your end then we will have to assign the task to another willing contributor.

🔴 If you come across an issue that has been open for a while but has no updates from the assigned person, you may comment on it to get assigned to the issue.

🔴 Issues which have the unassigned label can be worked on. You can comment on thees issues and get assigned to them.

🔴 Some issues can be worked upon by multiple people so if you see the unassigned label there you may comment on it

Contribution Guidelines

• Create a new folder with the name of your component
  eg. If you are creating a Navbar Component then name your folder Navbar

• Add the html, css, js files in that folder (Don't add your component code to the index.html)
  eg. If you are creating a Navbar then name your files Navbar.html, Navbar.js, Navbar.css

• Link the html file of your component to the link on the card created at index.html file.

• Create a new card for every new component that you make.

• Please take a look at the sample component to understand the folder structure better.

• You can contribute to as many components as you like. You can add cool animated components of your own by creating an issue!

NOTE: Please do NOT create a pull request unless the issue has been assigned to you else the pull request will be marked invalid

Folder Structure

1. Create a new folder with the name of your component
2. Add your files to your newly created folder with the proper naming convention as specified above
3. In the index.html file add a comment stating your component name
4. Below the comment create a new card. The code for the card is as below:
   

<!--     Sample Component (Replace the name with your component name  -->

      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title text-dark">Name of your component</h5>
          <p class="card-text">Add information about your navbar with contributors name.</p>
          <a href="/animated-components/YOUR-FOLDER-NAME/YOUR-HTML-FILE.html" class="card-link text-warning"><strong>Demo</strong></a>
        </div>
      </div>

5. Make sure you add the above code to the main index.html file present in the root and NOT YOUR newly created html file.
6. Please make sure you add the correct href to the card component. Use the format given below.

 href="/animated-components/YOUR-FOLDER-NAME/YOUR-HTML-FILE.html"

How to Contribute?

• Take a look at the existing issues or create your own Issues
• Wait for the issue to be assigned to you after which you can start working on it.
• Fork the Repository and create a branch for the issue you are working on.
• Read the Code of Conduct
• Create a Pull Request which will be reviewed by the maintainers and suggestions would be added to improve it (if needed)
• Describe what your codeblock / function does in the PR.
• Having difficulty in contributing? Read the Contribution Guide for a detailed explanation.