Ayumilan / animated-components

Cool Animated Components 😎

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

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 new cards each new component 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.