Code Monkey home page Code Monkey logo

pokemon's Introduction

logo

In its ninth year, Hacktoberfest is a month-long celebration of open source software hosted by DigitalOcean. We welcome you to join open-source software enthusiasts, beginners, and the development community by contributing to open-source projects throughout the month of October. This can be accomplished in a variety of ways:

  • Prepare and share your project for collaboration
  • Contribute to the betterment of a project via pull requests
  • Organize an event
  • Mentor others
  • Donate directly to open source projects


Pokemon

series image

There is no doubt that we spent the majority of our youth watching anime, particularly Pokemon; we have seen and experienced it all. With Hacktoberfest 2022 approaching and me being one of the first people as maintainer, I decided to make this repository, which is essentially a very basic web-page that allows the user to browse and upload their favourite pokemons.

You can find all types characters on https://pokemon.gameinfo.io/

Contents of the Webpage

  1. index.html - Contains the content of the main/home page.
  2. index.css - Contains the styling given to the home page.
  3. about.html - Contains a little information about me.

What can you contribute?

Whether you are a rookie or a veteran, you can always offer something to a project. You may add your favourite character to the internet as a card in this project! Or perhaps you don't like the line you're reading right now and want to alter it. Sure! So why not?

How can you contribute?

To contribute in Hacktoberfest2022 , checkout the given link and win hactoberfest t-shirt ... https://hacktoberfest.digitalocean.com/

And That's It! Follow these steps to make your very first Pull request.

But what if i don't know how to add cards? :(

Everyone is not aware of every tool available in the world, no matter how simple or sophisticated it is. It's also not required to be familiar with every tool available. To add your own card, use the code below!

         <div class="card mb-3" style="max-width: 578px">
          <div class="row g-0">
            <div class="col-md-4">
              <img
                src="images/pikachu.png"
                class="img-fluid rounded-start"
                alt="..."
                data-aos="zoom-in"
                data-aos-duration="1000"
                data-aos-delay="60"
                style="width: 100%"
              />
            </div>
            <div class="col-md-8">
              <div class="card-body">
                <h5 class="card-title">Pokemon Name</h5>
                <p class="card-text">
                  Pokemon description
                </p>
                <p class="card-text electric">Pokemon Type</p>
              </div>
            </div>
          </div>
        </div>

Copy this code and paste it in the index.html file to make your changes. Try and test it on your own system and then create a Pull request. You can adjust height of image of character so that it will fit in card.

After this you just have to add correct class color to the pokemon type by changing the existing "yellow" to respective class color. For correct colors refer the same website.

Examples- image image image image

   .electric (Class name if the same color class doesn't exist) {
      background-color: yellow (Change the color here);
      width: 50%;
      border-radius: 5px;
      text-align: center;
  }

Congratulations!

Congratulation! You've just created your first pull request, and if it's merged, you may see it by clicking the link above!

If you did liked my repository or idea, please star the repository. Happy Learning :)

pokemon's People

Contributors

abbeyit avatar adeity21 avatar aditibendre avatar aishwarya-mali avatar ankitsmt211 avatar anshsinghsonkhia avatar arya2210 avatar ashutosh7i avatar avatar-10000 avatar devanshu2310 avatar dpavan369 avatar dsasaank-369 avatar ialexanderbrito avatar inorishizuka avatar ishani-1255 avatar ishgit avatar kaylakremer avatar m-samik avatar mitpancholi98 avatar muanra217 avatar pranauv-kumar1803 avatar pratt2762 avatar ptechofficial avatar rockhopper130 avatar siddharths7 avatar sivanandula avatar steven4869 avatar superguppi avatar utkarsh-190 avatar vaibhavraj-exe avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

pokemon's Issues

Improving overall user experience

Hi, I would like to make following changes!

-> Adding a small button on the bottom right corner which would re-direct user to the top of the page on click (as while exploring all the pokemon, the user may scroll down to bottom a long wayyy)

-> Adding a glowing/classic hover effect on these pokemon containers
-> improving the font scheme of the website

Screenshot (949)

I hope you will assign this issue to me.

image zoom

if moves click or hover the image then image zoom

Good first issue

Add a Pokemon card, you can find the steps to add in the Readme section.

Happy Learning :)

Improving the layout of home page!

Hi, I would like to make following changes to the home page!

-> Change these containers of pokemons to flex box type so that multiple pokemon can be viewed in a single row and would be screen adjustable
-> Adding few more pokemons to the list!

Screenshot (948)

pls let me know if i can include more changes/css effects!
I'm a newbie, I hope you will assign this issue to me! : )

Changing the background of the charac section

The current background of carac section is not good and I can change it to pattern or gradient background to make it more attractive.
So can I work on this under Hacktoberfest 2022.
Screenshot-
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.