Ring Ring

Challenge Description

Create an animated ringing bell effect using HTML and CSS. The bell is positioned within a styled frame, with lines emanating from it in alternating directions. Each line animates to simulate a ringing effect, enhancing the visual appeal with different stroke colors. The frame itself features a subtle shadow and a distinct background color to complement the animation.

Preview

Live Demo

Check out the live demo here.

Credits

This project is inspired by the design from 100 Days CSS - Day 28, with modifications and enhancements to fit the challenge requirements.

Prerequisites

• HTML and CSS Basics
• SVG Basics
• Keyframes and Animations:
• Basic knowledge of CSS properties for colors, borders, shadows, and backgrounds to enhance visual design elements.

Tools Used

1. VS Code (You can use any other code editor)
2. A modern web browser (Chrome, Firefox, Safari, or Edge).
3. Access to an internet connection for resource imports.

Contributing

If you'd like to contribute to this project:

1. Fork the repository on GitHub.
2. Clone your forked repository to your local machine:

git clone https://github.com/Yashi-Singh-1/Day-28-Ring-Ring.git

3. Create a new branch for your feature or bug fix:

git checkout -b feature-name

4. Make your changes and commit them with a clear and concise message:

git commit -m 'Add new feature or fix'

5. Push your changes to your forked repository:

git push origin feature-name

6. Open a pull request to the main repository.
7. Ensure your pull request includes a detailed description of your changes.
8. Respond to any feedback or questions during the review process.

We welcome improvements, bug fixes, and additional features that can enhance this ring ring.