Welcome to the most spectacularly pink corner of the internet! This GitHub Pages site is a dazzling "Hello World" experience that celebrates everything pink with style, animations, and pure joy.
Visit the live site: https://[your-username].github.io/test-terco/
- 8-Color Animated Gradient Background - Flowing pink gradients that never stop mesmerizing
- Glass Morphism Card Design - Modern frosted glass effect with backdrop blur
- Rainbow Pink Text Animation - "Hello World" text cycles through gorgeous pink gradients
- Floating Particle System - Continuous stream of hearts, flowers, and pink emojis
- Dynamic Sparkles - Twinkling effects positioned around the main card
- Shimmer Overlay - Subtle light sweep animation across the card
- 🎉 Celebrate Pink Button - Creates a 30-particle explosion with screen flash effect
- ✨ More Sparkles Button - Adds 15 random sparkles across the interface
- 💫 Mouse Trail Hearts - Hearts follow your cursor as you move around
- 🕺 Dancing Emojis - Click the emoji hearts for surprise animations and particle bursts
- 🎭 Hover Effects - Smooth transitions and elevations on all interactive elements
- Fully Responsive Design - Beautiful on desktop, tablet, and mobile
- Modern CSS Features - Custom properties, backdrop filters, and advanced animations
- Performance Optimized - Efficient particle cleanup and animation management
- Cross-Browser Compatible - Works on all modern browsers with proper prefixes
- Accessibility Friendly - Proper contrast ratios and semantic HTML
The site features an extensive pink color palette:
- Deep Pink (
#ff1493) - For bold accents and primary elements - Hot Pink (
#ff69b4) - Main brand color and highlights - Light Pink (
#ffb6c1) - Soft backgrounds and gentle effects - Pink Blush (
#ffc0cb) - Subtle gradients and overlays - Rose Pink (
#ff91a4) - Mid-tone transitions - Magenta Pink (
#ff6b9d) - Dynamic gradient stops
- GitHub account
- Git installed on your machine
-
Clone the repository:
git clone https://github.com/[your-username]/test-terco.git cd test-terco -
Enable GitHub Pages:
- Go to your repository settings
- Scroll down to "Pages" section
- Select "Deploy from a branch"
- Choose "main" branch and "/ (root)" folder
- Click "Save"
-
Visit your site:
- Your site will be available at
https://[your-username].github.io/test-terco/ - It may take a few minutes for the first deployment
- Your site will be available at
Simply open index.html in your web browser to see the site locally!
test-terco/
├── index.html # Main HTML file with embedded CSS and JavaScript
├── scripts/ # Additional scripts directory
│ └── plantilla.md # Template file
├── .gitignore # Git ignore rules
└── README.md # This file
- Gradient Flow: 8-second infinite animation cycling through 8 different pink tones
- 400% Background Size: Creates smooth, seamless gradient transitions
- 9 Different Emoji Types: Hearts, flowers, kisses, bows, and more
- Randomized Properties: Size, duration, delay, and position for natural movement
- Automatic Cleanup: Particles are removed after 8 seconds to maintain performance
- Celebration Mode: 30-particle burst with screen flash and button text change
- Sparkle Generator: Creates 15 temporary sparkles with random positioning
- Mouse Trails: 8% chance per mouse movement to create a trailing heart
- HTML5 - Semantic structure and modern elements
- CSS3 - Advanced animations, gradients, and effects
- Flexbox layout
- CSS Grid for responsive design
- Custom keyframe animations
- Backdrop filters and glass morphism
- CSS custom properties
- Vanilla JavaScript - Interactive features and particle system
- DOM manipulation
- Event listeners
- Timers and intervals
- Dynamic element creation
Want to make it even more pink? Here are some ideas:
- Add More Particles: Increase the particle creation frequency in the
setInterval - New Emoji Types: Add more pink-themed emojis to the
particlesarray - Custom Animations: Create new keyframe animations for different effects
- Color Variations: Experiment with different pink shades in the gradient
- Sound Effects: Add audio feedback for button clicks and interactions
Feel free to contribute to make this even more spectacular! Some ideas:
- Add new animation effects
- Improve mobile responsiveness
- Add more interactive elements
- Create themed variations (purple paradise, blue bliss, etc.)
This project is open source and available under the MIT License.
- Inspired by the beauty of all things pink 🌸
- Built with love, creativity, and way too much enthusiasm for gradients
- Special thanks to everyone who appreciates the power of pink!
Made with 💖 and an unhealthy obsession with pink
Remember: Life is better in pink! 🌸✨💕