🎯 STRIKE Platform - CSS Hackathon 2025

🚀 Live Demo

View Live Site 🌟

📸 Screenshots

Hero Section

Animated gradient background with floating geometric shapes

Interactive Components

CSS-only tabs, accordion, carousel, and modal

Mobile Responsive

Perfect mobile experience with hamburger menu

✨ Features

🎨 Pure CSS Interactivity (No JavaScript!)

• CSS-Only Accordion - FAQ section with smooth expand/collapse
• CSS-Only Carousel - Testimonials with radio button navigation
• CSS-Only Tabs - Course categories with seamless switching
• CSS-Only Modal - Course preview popup
• CSS-Only Hamburger Menu - Mobile navigation

🌟 Advanced Animations

• Animated Gradient Backgrounds - Multi-color shifting backgrounds
• Floating Geometric Shapes - 5 animated shapes with staggered delays
• 3D Card Transforms - Feature cards with perspective effects
• Glassmorphism Effects - Modern frosted glass aesthetics
• Text Reveal Animations - Staggered content appearance
• Data Packet Flying Animation - Creative course delivery visualization

📱 Responsive Excellence

• Mobile-First Design - Optimized for all devices
• Fluid Typography - clamp() functions for perfect scaling
• Touch-Friendly - Enhanced tap targets for mobile
• CSS-Only Hamburger - No JavaScript mobile menu
• Performance Optimized - GPU-accelerated transforms

⚡ Performance Features

• Will-Change Optimization - Proper animation performance hints
• Transform-Based Animations - GPU acceleration
• Reduced Motion Support - Accessibility-first approach
• High DPI Ready - Crisp on retina displays

🛠️ Technologies

• HTML5 - Semantic structure with modern elements
• CSS3 - Grid, Flexbox, Custom Properties, Advanced Selectors
• Google Fonts - Inter (body) + Poppins (headings)
• Pure CSS - Zero JavaScript dependencies

📦 Setup Instructions

Quick Start

1. Clone the repository

   git clone https://github.com/karanyede/strike.git
   cd strike

2. Open in browser

   # No build process required!
   open index.html
   # or
   python -m http.server 8000  # For local server

3. View in VS Code

   code .  # Open in VS Code

Development

• Live Server: Use VS Code Live Server extension
• Local Server: python -m http.server or npx serve
• No Build Tools: Pure HTML/CSS - ready to run!

🎨 Design Highlights

Color Palette

:root {
  --primary: #6366f1; /* Indigo */
  --secondary: #8b5cf6; /* Purple */
  --accent: #ec4899; /* Pink */
  --gradient-hero: linear-gradient(
    135deg, 
    #667eea 0%,
    #764ba2 50%,
    #f093fb 100%
  );
}

Key CSS Techniques

• Glassmorphism: backdrop-filter: blur(20px) with alpha backgrounds
• 3D Transforms: perspective, rotateX(), rotateY() for depth
• CSS Grid: repeat(auto-fit, minmax(320px, 1fr)) for responsive layouts
• Checkbox Hacks: :checked pseudo-class for interactivity
• Custom Properties: CSS variables for maintainable code

Animation Examples

/* Floating Shapes */
@keyframes float-1 {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-40px) rotate(180deg);
  }
}

/* 3D Card Hover */
.feature-card:hover {
  transform: translateY(-15px) rotateX(5deg) rotateY(2deg);
}

/* Gradient Background Shift */
.hero {
  background-size: 400% 400%;
  animation: gradient-bg-shift 10s ease infinite;
}

📱 Responsive Breakpoints

Device	Breakpoint	Layout
Mobile	320px - 767px	Single column, simplified animations
Tablet	768px - 1023px	Two columns, desktop nav
Desktop	1024px+	Three columns, full effects
Large	1280px+	Enhanced spacing
XL	1536px+	Maximum container width

🚀 Deployment

GitHub Pages

1. Push to GitHub

   git init
   git add .
   git commit -m "Initial commit: STRIKE Platform"
   git branch -M main
   git remote add origin https://github.com/your-username/strike-platform.git
   git push -u origin main

2. Enable GitHub Pages

   • Go to repository Settings
   • Scroll to Pages section
   • Select "Deploy from a branch"
   • Choose "main" branch
   • Your site will be available at: https://your-username.github.io/strike-platform

Netlify (Alternative)

1. Drag & Drop: Simply drag the project folder to Netlify
2. Git Integration: Connect your GitHub repo for auto-deployment

Vercel (Alternative)

npx vercel
# Follow prompts for deployment

🎯 Unique Differentiators

What Makes This Project Stand Out

1. Zero JavaScript Dependencies

   • All interactivity achieved with pure CSS
   • Faster loading and better performance
   • Works even with JavaScript disabled

2. Advanced CSS Techniques

   • Glassmorphism with backdrop-filter
   • 3D transforms with perspective
   • CSS-only carousel and accordion
   • Checkbox and radio button hacks

3. Performance Optimization

   • GPU-accelerated animations with transform
   • Proper will-change usage
   • Minimal reflows and repaints
   • Optimized for 60fps animations

4. Accessibility First

   • prefers-reduced-motion support
   • High contrast mode compatibility
   • Keyboard navigation support
   • Semantic HTML structure

5. Modern CSS Features

   • CSS Custom Properties (variables)
   • CSS Grid and Flexbox mastery
   • clamp() for fluid typography
   • Container queries (experimental)

🏆 Hackathon Submission Details

Project Stats

• Lines of CSS: ~2000+
• Interactive Components: 5 (Accordion, Carousel, Tabs, Modal, Menu)
• Animations: 15+ unique keyframe animations
• Responsive Breakpoints: 5 carefully crafted breakpoints
• Performance Score: 100/100 (Lighthouse)

Browser Support

• ✅ Chrome 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+
• ✅ Mobile browsers

Validation

• ✅ HTML5 Validator
• ✅ CSS3 Validator
• ✅ WAVE Accessibility
• ✅ Lighthouse Performance

📱 Social Media

Share your experience with STRIKE Platform:

• Twitter: Tweet about this project
• LinkedIn: Share on LinkedIn
• Dev.to: Write an article about the CSS techniques used

Recommended Hashtags

#CSS #WebDev #Hackathon2025 #PureCSS #NoJS #Responsive #Glassmorphism #Animation

🤝 Contributing

This is a hackathon project, but contributions are welcome!

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Google Fonts for beautiful typography
• CSS Grid and Flexbox for layout power
• CSS Transform for smooth animations
• Coder Army for the hackathon opportunity

📊 Performance Metrics

Metric	Score
Performance	100/100
Accessibility	98/100
Best Practices	100/100
SEO	95/100
First Contentful Paint	< 1.5s
Largest Contentful Paint	< 2.5s
Cumulative Layout Shift	< 0.1

---

Built with ❤️ and pure CSS for Coder Army CSS Hackathon 2025

"When CSS meets creativity, magic happens!"