Git Product home page Git Product logo

animation-nation's Introduction

Sharpen your pencils, we're getting creative!

Animation Nation

Hello and welcome to Animation Nation, a ZTM project for Hacktoberfest! This site aims to showcase the creative talents of the ZTM community :)

Rules

The rules are simple. You have to:

  • Use HTML <divs> and CSS only! No JS, and no SVGs!
  • Have at least one animation in your work
  • Please make sure that the code is indeed your own, and not copied from someone else
  • That's it!

How to contribute

If you've never forked a repository or made a pull request before, we recommend making your first one over at https://github.com/zero-to-mastery/start-here-guidelines. That will count towards your total, and then you'll be ready to take on this challenge with your new GitHub skills!

A cool resource to learn about the fork workflow can also be found here - https://www.atlassian.com/git/tutorials/comparing-workflows/forking-workflow

Now, once you've forked this repo and got a local version up on your computer, follow these steps:

  1. In the Art directory (folder), create a directory named after yourself.
  2. Within this folder you just made, create two files, an HTML file, and a CSS file.
  3. Link your CSS file to your HTML file.
  4. Using only HTML and CSS (no <script> allowed!!), create a work of art! It can be as simple or as complex as you like, as long as it's animated in some way!
  5. Get a screen recording of your finished work, and make a gif! Try to crop it so that it looks good as a smallish (preferably squarish) image. Save this in your directory, together with your HTML and CSS files. Static screenshots are also acceptable.
    If you don't add a gif/screenshot, the website won't show your animation.
  6. Go to the root include.js. You will see an array of objects, each one represents a work of art that someone has created. Copy an example object and paste it at the end, filling it out with your art information and links:
let cards = [
  //  Add your card in this section
  {
    artName: 'Triangle',
    pageLink: './Art/Joy/triangle.html',
    imageLink: './Art/Joy/triangle.gif',
    author: 'Joy',
    githubLink: 'https://github.com/royranger'
  }
];

animation-nation's People

Contributors

sophiabrandt avatar dhaval1403 avatar mattcsmith avatar l-white avatar donmarvex avatar royranger avatar abdus avatar notankur avatar kennithnichol avatar shubhamai avatar mehul1011 avatar pedginald avatar yuwen-c avatar sami-almaradni avatar beaps avatar vipuljain08 avatar waynemacmavis avatar adiphoorn avatar harrisgomez avatar meet1103 avatar pdr-clv avatar confusionmatrix98 avatar sabina929 avatar yashraj2003e avatar sheefanaaz123 avatar thenewmona avatar rohanbobby01 avatar mawais54013 avatar jinalpatel17 avatar godnondsilva avatar

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.