Skip to content

Latest commit

 

History

History
42 lines (27 loc) · 1.92 KB

Readme.md

File metadata and controls

42 lines (27 loc) · 1.92 KB

Purple-world! 🎡

Welcome to Spin it! – a fun and interactive web page featuring animated spinners that you can start and stop with just a click of a button.

Project Banner

📜 Overview

This project showcases a simple yet engaging web page where you can interact with spinning images. The main goal is to create an enjoyable user experience with minimal code, demonstrating the power of CSS animations and JavaScript interactivity.

🚀 Features

  • Responsive Design: The page is fully responsive, making it accessible on devices of all sizes, from desktop to mobile.
  • Interactive Spinner: Click the button to start or stop the spinner animation.
  • Custom Navigation: A beautifully styled navigation bar with hover effects.
  • Stylish Button: A gradient button that changes on hover, with smooth transition effects.

📂 File Structure

  • index.html: The main HTML file containing the structure of the web page.
  • style.css: The CSS file responsible for the page's styling, including animations and responsiveness.
  • spinner.png: The image used for the spinning effect.
  • bg.jpeg: The background image that adds visual appeal to the page.

🎨 Styles & Animations

  • The spinner images are animated using CSS keyframes, rotating 360 degrees continuously.
  • A toggle feature allows you to start and stop the spinner by clicking the button.
  • The navigation bar is styled with linear gradients and hover effects to enhance user interaction.

📱 Responsive Design

This project is built with responsiveness in mind, ensuring it looks great on all screen sizes:

  • For Mobile: Smaller image sizes, reduced button padding, and font adjustments.
  • For Desktop: Larger images, more padding, and enhanced visuals.

💡 How to Use

  1. Clone the repository: 
    git clone https://github.com/mahenoorsalat/Purple-world.git