A cutting-edge, military-themed tech education platform built with pure HTML & CSS
- About The Project
- Key Features
- Tech Stack
- Getting Started
- Folder Structure
- Pages Overview
- Design System
- Contributing
- License
- Contact & Credits
STRIKE (Strategic Training & Rapid Innovation Knowledge Engine) is an elite tactical training portal that transforms traditional tech education into an immersive, mission-driven experience. Presented by Coder Army, this platform showcases courses as tactical missions with difficulty rankings, detailed briefings, and a military command structure.
- 🎨 Immersive Design: Cinematic, tactical aesthetic inspired by military operations
- ⚡ Zero Dependencies: Pure HTML/CSS - no frameworks, no build tools, instant deployment
- 📱 Fully Responsive: Seamless experience across all devices
- ✨ Advanced CSS: Showcases modern CSS capabilities with animations, gradients, and effects
- 🚀 Performance: Lightning-fast load times with optimized assets
- Dynamic Hero Sections: Rotating background image sliders with smooth fade transitions
- Gradient Text Effects: Stunning white-to-cyan gradient typography
- Animated Badges: Pulsing, glowing badges with rotating borders
- Glassmorphism: Modern frosted glass effects with backdrop filters
- 3D Depth: Multi-layer shadows creating depth and dimension
- Floating Quick Nav: Numbered navigation with hover animations
- Infinite Carousel: Auto-scrolling feature categories
- Video Gallery: YouTube-integrated training footage
- Interactive Cards: Hover effects with transforms and glows
- Modal System: Contact forms and stat details
- Mobile-First Approach: Optimized for mobile, tablet, and desktop
- Hamburger Menu: Smooth mobile navigation
- Flexible Grids: Adaptive layouts for all screen sizes
- Touch-Friendly: Optimized for touch interactions
- CSS Animations: Keyframe animations for text, badges, and elements
- CSS Grid & Flexbox: Modern layout techniques
- CSS Variables: Consistent theming throughout
- Blend Modes: Creative color mixing effects
- Clip-path: Custom shapes and designs
| Category | Technologies |
|---|---|
| Frontend | HTML5, CSS3 |
| Fonts | Google Fonts (Orbitron, Roboto Mono) |
| Icons | Font Awesome 6.4.0 |
| Media | YouTube Embeds, Local Images |
| Design | Pure CSS (No preprocessors) |
- Zero JavaScript: All interactions are CSS-only
- No Build Tools: No webpack, no npm, no compilation
- No Frameworks: Pure, vanilla HTML & CSS
All you need is a modern web browser! No installations required.
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
-
Clone the repository
git clone https://github.com/neuralnerd01/strike-coderarmy
-
Navigate to the project directory
cd strike-coderarmy -
Open in browser
Option A: Double-click
index.htmlOption B: Use a local server (recommended for best experience)
# Python 3 python -m http.server 8000 # Python 2 python -m SimpleHTTPServer 8000 # PHP php -S localhost:8000 # Node.js (with http-server) npx http-server -p 8000 # VS Code Live Server # Install Live Server extension and click "Go Live"
-
Visit in browser
http://localhost:8000
STRIKE/
├── 📄 index.html # Homepage with hero slider & course grid
├── 📄 features-showcase.html # Feature showcase with 40+ CSS demonstrations
├── 📄 missions.html # Mission briefings (courses)
├── 📄 intel.html # About page with team profiles
├── 📄 contact.html # Contact form page
├── 📄 signin.html # Sign-in authentication page
├── 📄 signup.html # Sign-up registration page
├── 📄 pricing.html # Pricing plans page
│
├── 🎨 CSS Files/
│ ├── styles.css # Global styles & base layout
│ ├── home.css # Homepage-specific styles
│ ├── advanced-features.css # Feature showcase styles (5000+ lines)
│ ├── missions.css # Missions page styles
│ ├── intel.css # Intel page styles
│ ├── contact.css # Contact page styles
│ ├── auth.css # Authentication pages styles
│ ├── pricing.css # Pricing page styles
│ ├── features.css # Additional feature styles
│ ├── modal.css # Modal component styles
│ ├── stats-modal.css # Statistics modal styles
│ ├── footer.css # Footer component styles
│ └── loader.css # Loading animations
│
├── 🖼️ images/ # Image assets
│ ├── image1.jpg - image17.png # Background & hero images
│ ├── webdevelopmentimage.png # Course thumbnails
│ ├── htmlimage.png
│ ├── cssimage.png
│ ├── adityasir.jpeg # Team photos
│ ├── rohitbhainegi.jpeg
│ └── surajjhaji.jpg
│
├── 📄 README.md # This file
└── 📄 metadata.json # Project metadata
- Hero Section: Rotating background slider with 5 images (2-second intervals)
- Combat Stats: Interactive stat cards with modal popups
- Mission Roster: Course grid with difficulty ratings
- Training Journey: Roadmap visualization
- Tech Stack: Technology showcase
- Command Squad: Instructor profiles
- Testimonials: Student feedback
- FAQ: Frequently asked questions
- 40+ CSS Features: Comprehensive CSS capability demonstrations
- 10 Sections: Organized feature categories
- Infinite Carousel: Auto-scrolling feature cards
- Video Gallery: YouTube training footage
- Interactive Tabs: Course category navigation
- Tech Stack Display: Technology icons
- Timeline: 12-week syllabus visualization
- Mission Briefings: Detailed course descriptions
- Difficulty Ratings: Color-coded challenge levels
- Prerequisites: Required skills listed
- Duration: Time estimates for each mission
- Enhanced Text: Gradient-styled descriptions
- Philosophy: Platform mission statement
- Team Profiles: Instructor bios with photos
- Command Structure: Organizational layout
- Enhanced Visibility: Gradient text effects
- Contact Form: Name, email, message inputs
- Social Links: GitHub, LinkedIn, Twitter
- Location Info: Command center details
- Secure Channel: Themed messaging
- Sign In: User authentication form
- Sign Up: New user registration
- Styled Forms: Tactical-themed inputs
- Background: Custom imagery
- Pricing Plans: Multiple tier options
- Feature Comparison: Plan benefits
- Call-to-Action: Enrollment buttons
/* Primary Colors */
--color-bg: #0a0a0a; /* Deep Black */
--color-surface: #1a1a1a; /* Dark Gray */
--color-primary: #00ffc2; /* Cyan (Tactical) */
--color-secondary: #ffd700; /* Gold (Elite) */
/* Accent Colors */
--cyan-light: #00d4aa;
--cyan-dark: #00a882;
--gold-glow: rgba(255, 215, 0, 0.8);
--cyan-glow: rgba(0, 255, 194, 0.6);
/* Text Colors */
--color-text: #e0e0e0;
--color-text-muted: #888888;/* Headings */
--font-heading: 'Orbitron', sans-serif; /* Futuristic, tactical */
/* Body Text */
--font-mono: 'Roboto Mono', monospace; /* Code-like, technical */- Glow Effects: Multi-layer box-shadows with rgba colors
- Gradients: Linear & radial gradients for depth
- Animations: Smooth keyframe animations (2-4s duration)
- Transitions: 0.3s ease for interactive elements
- Backdrop Filters: 10px blur for glassmorphism
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated!
-
Fork the Project
# Click the 'Fork' button on GitHub -
Create your Feature Branch
git checkout -b feature/AmazingFeature
-
Commit your Changes
git commit -m 'Add some AmazingFeature' -
Push to the Branch
git push origin feature/AmazingFeature
-
Open a Pull Request
- Go to the repository on GitHub
- Click "Pull Requests" → "New Pull Request"
- Select your branch and submit
- ✅ Pure HTML/CSS only - No JavaScript frameworks
- ✅ Maintain tactical theme - Keep military/tech aesthetic
- ✅ Mobile responsive - Test on multiple screen sizes
- ✅ Browser compatible - Ensure cross-browser support
- ✅ Comment your code - Help others understand
- ✅ Follow naming conventions - Use existing patterns
- 🎨 New CSS animations or effects
- 📱 Mobile experience improvements
- 🌐 Accessibility enhancements
- 🎯 New page templates
- 📝 Documentation improvements
- 🐛 Bug fixes
- 🌍 Internationalization (i18n)
Distributed under the MIT License. See LICENSE file for more information.
MIT License
Copyright (c) 2025 neuralnerd01
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
neuralnerd01
- Coder Army - Platform presented by Coder Army
- Google Fonts - Orbitron & Roboto Mono typography
- Font Awesome - Icon library
- YouTube - Training video embeds
- Open Source Community - For inspiration and resources
