There is no doubt that most of our childhood and teenage was spent watching superhero fighting enormous villains, we have seen and experienced it all. HeroPedia is a thanks-giving repository for the Superhero Community ( for all the Otakus out there :) ) where literally anyone can contribute their favourite characters or browse them! A simple application for weebs, made using HTML, CSS, and JavaScript.
Website: HeroPedia
This respository is maintained by: Kaustubh Dixit, Rohan Kumar Singh, and Yash Lawaniya
Note: This repository is created with the sole intent of guiding beginners to their initial Open Source contributions.
There is always something to contribute to a project whether you are a Novice or a Veteran. In this project, you can add your favourite superhero(or villain) character as a card to the website! Or maybe you didn't like the line that you are reading right now and want to change it! Well, why not?
We appreciate all kinds of contributions from core-code contributions to non-code contributions like fixing the site, suggesting a feature, raising an issue, etc.
Contributing to HeroPedia is a cake-walk as long as you follow the below steps 😉
- Pick the character you want to contribute, and make sure it's not there on the site yet (Use the Search feature)
Fork
the repository- Download your favourite character's image and upload it to the
images
folder. Make sure you provide a valid name for your image file - Copy the Card template code given below & fill in the information as directed
- Note: Copy & paste the entire code as it is after filling in the details of the character!
<div class="card mb-3 card-bg my-4" style="max-width: 100%;">
<div class="row no-gutters">
<div class="col-md-4">
<!-- Replace image_name_here with the complete name (with extension) of the image you uploaded -->
<img src="./images/[image_name_here]" alt="[Character Name here]" height="390px" width="300px">
</div>
<div class="col-md-8">
<div class="card-body">
<h2 class="card-title">[Character Name]</h2>
<p class="card-text">
[Character Description 1 Here]
</p>
<p>
[Character Description 2 Here]
</p>
<hr>
<p>Contributed by- [Your name here]</p>
</div>
</div>
</div>
</div>
<!--Sample [Character Name] card end-->
<!--Add your card below this line -->
- Paste the edited template code into the
index.html
file just below the last added card ! Sync
your Fork & then create aPull Request
. If there are any conflicts with the main branch then resolve them first.
title: Name of the character added
description: Issue no: #[Issue no here] (for adding a new character it's #4)
- That's it, you have successfully contributed to HeroPedia. Your character will appear on the site within minutes of your PR getting merged 😄
- Star ⭐ the repository if you liked it!
Please refer to the Contributing Guide to know more about the guidelines & Code of Conduct.
For more information on licensing, please refer to the License
Do star the Decoder's HeroPedia repository ⭐