fork-commit-merge / fork-commit-merge

Fork, Commit, Merge. A project designed to help you familiarize yourself with the open source contribution workflow on GitHub!

Home Page:https://forkcommitmerge.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Fork, Commit, Merge - Medium Issue 2 (CSS)

nikohoffren opened this issue · comments

Fork, Commit, Merge - Medium Issue 2 (CSS)

Create Fire Animation Using CSS

Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away!

Issue created by Avtech04.

How to get started:

Navigate to the tasks/css/medium/fire directory from the root of the project.
Open styles.css file and start implementing your solution!

Description:

Your task is to create a fire animation similar as in the video provided.

css-medium-fire-animation.mp4

In the directory, there are two files: index.html and styles.css. The index.html file contains all the necessary HTML for the fire animation. In styles.css there are some classes already filled for you, and some classes that are missing the styles.
Add all the necessary styles for these classes:

.fire-right .main-fire {
  /* TODO: Add the necessary styles here */
}

.fire-right .particle-fire {
  /* TODO: Add the necessary styles here */
}

.fire-left .main-fire {
  /* TODO: Add the necessary styles here */
}

.fire-left .particle-fire {
  /* TODO: Add the necessary styles here */
}

Note: You are only required to modify the styles.css file.

How to run:

If you are using VS Code and have for example Live Server extension, you can simply open index.html with the server and check how the animation looks. If it looks to be working as expected, you are ready to make a pull request!
If you do not have Live Server extension, you'll find information about installing and how to use it here.


Check out README.md for more instructions and how to make a pull request.

Feel free to ask any questions here if you have some problems!

Also, kindly give this project a star to enhance its visibility for new developers!

@nikohoffren can you please assign me, I want to do it.

@nikohoffren can you please assign me, I want to do it.

Go ahead! As it says on the description:
Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away!

@nikohoffren please review the PR #1288
Thank you