https://github.com/yashi-singh-1/day-45-lightbulb

The Light-Bulb component is an interactive web element built using HTML, SVG & CSS. It's features a light bulb graphic that changes appearance on hover, providing a visual effect of the bulb turning off.
https://github.com/yashi-singh-1/day-45-lightbulb

css css-transitions csstransition html html-css htmlcss interactive-design interactivedesign svg svg-css svg-design svgcss svgdesign ui-component ui-components uicomponent web-elements webelements

Last synced: 4 days ago
JSON representation

The Light-Bulb component is an interactive web element built using HTML, SVG & CSS. It's features a light bulb graphic that changes appearance on hover, providing a visual effect of the bulb turning off.

• Host: GitHub
• URL: https://github.com/yashi-singh-1/day-45-lightbulb
• Owner: Yashi-Singh-1
• Created: 2024-07-26T14:27:58.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-07-27T16:42:54.000Z (4 months ago)
• Last Synced: 2024-07-27T18:11:31.460Z (4 months ago)
• Topics: css, css-transitions, csstransition, html, html-css, htmlcss, interactive-design, interactivedesign, svg, svg-css, svg-design, svgcss, svgdesign, ui-component, ui-components, uicomponent, web-elements, webelements
• Language: HTML
• Homepage:
• Size: 67.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
LightBulb Challenge 


Challenge Description


The LightBulb component is an interactive UI element built with HTML, SVG, and CSS. It features a light bulb graphic that changes color from yellow to grey on hover, simulating the bulb turning off. Additionally, a glow effect fades when hovered, enhancing the visual experience. This component uses smooth CSS transitions for a polished and responsive design, suitable for enhancing web interfaces with interactive visuals.


Preview




Live Demo


Check out the live demo here.


Prerequisites




    
Basic HTML/CSS Knowledge.

    
SVG Knowledge.



Tools Used




    
VS Code (You can use any other code editor)

    
A modern web browser (Chrome, Firefox, Safari, or Edge).

    
Access to an internet connection for resource imports.



Contributing


If you'd like to contribute to this challenge:




    
Fork the repository on GitHub.

    
Clone your forked repository to your local machine:

    
git clone https://github.com/Yashi-Singh-1/Day-45-LightBulb.git

    
Create a new branch for your feature or bug fix:

    
git checkout -b feature-name

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

    
git commit -m 'Add new feature or fix'

    
Push your changes to your forked repository:

    
git push origin feature-name

    
Open a pull request to the main repository.

    
Ensure your pull request includes a detailed description of your changes.

    
Respond to any feedback or questions during the review process.



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