Cool Animated Components 😎

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

Latest Announcements 📢

🔴 The PRs made in this repo will not be considered for the official hacktoberfest (conducted by digitalocean).

🔴 You can still contribute to this repo to participate in PCCoE Hacktoberfest and win exciting prizes.

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">
        <div class="box">
          <div class="content">
            <h2>Add your component number (Ex : 13)</h2>
            <h3>Name of your component</h3>
            <p>
              Describe your component in 12-15 words.
            </p>
            <a
              href="https://github.com/PCCoE-Hacktoberfest-21/animated-components/blob/main/animated-components/YOUR-FOLDER-NAME/YOUR-HTML-FILE.html"
              target="_blank"
              >Live Demo</a>
          </div>
        </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="https://github.com/PCCoE-Hacktoberfest-21/animated-components/blob/main/animated-components/YOUR-FOLDER-NAME/YOUR-HTML-FILE.html"

7. Describe your components in not more than 12-15 words.You may look at previous cards descriptions to get an idea on how it is supposed to be written. Place your description in the following

   tag

<p>Describe your component in 12-15 words.</p>

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.