EslemOuederni/Code-Magic

An all in one developer styling tool for styling your web apps with CSS

🚀 About

Code Magic is a website where you can get simple CSS tricks to make your application elegant with just few clicks.

🧙‍♀️ Magic options available for you:

• Pic Text - Convert images to CSS art. Just upload and get CSS art with just one click.
• Gradient Text - Dual color gradient for your texts.
• Gradient Border - Get dual color gradient with desired radius.
• Gradient Background - Make your backgrounds stand out by applying gradient colors.
• Animations
  • Select one of the below options

    Skew

    Fade

    Spin

  • Set duration and speed for the animations
  • And boom
• Box Shadow - Cast a shadow on your element.
• Border Radius - Get desired border radius for your element.
• Text Shadow - Create a cool shadow for your text.
• Input Range - Style your range input type elements easily and quickly

⚒️ Languages / Tools

HTML

CSS

TypeScript

🧑🏾‍💻 Demo

Check out the website: Code Magic

👇🏽 Prerequisites

Before installation, please make sure you have already installed the following tools:

• Git
• NodeJs

👌🏾 What you have to do to contribute

• Read the rules
• Follow the installation Steps
• Follow the contributing Steps

🛠️ Installation Steps

1. Fork the project. Click on the icon in the top right to get started
2. Clone the project, you can use the following command:

git clone https://github.com/<your-github-username>/Code-Magic

3. Navigate to the project directory

cd Code-Magic

4. Install dependencies with npm install

npm install

npm install -g commitizen

5. Run the project

npm run dev

🥂 After making a change

1. Create a new branch

git checkout -b YourBranchName

2. Add it to staging area

NOTE: don't commit the package.json

git add <path to the file you worked on>

3. Commit your changes with

git cz

4. Push your changes

git push

👨‍👩‍👦 Community

Don't forget to join the discord community - Join us

👩🏽‍💻 Contributing

• Contributions make the open source community such an amazing place to learn, inspire, and create.
• Any contributions you make are greatly appreciated.
• Check out our contribution guidelines for more information.

🛡️ License

Code-Magic is licensed under the MIT License - see the LICENSE file for details.

💪🏽 Thanks to all Contributors

Thanks a lot for spending your time helping Code-Magic grow. Thanks a lot! Keep rocking🍻

🙏🏽 Support

This project needs a star️ from you. Don't forget to leave a star✨