Ricochet MC is a complete, production-ready HTML website template designed specifically for Minecraft servers. Built with modern CSS, Tailwind, and vanilla JavaScript, it delivers a polished, distinctive look with glossy buttons, bloom effects, and glassmorphism—without the generic “AI-generated” aesthetic. Fully responsive and mobile-first, it works beautifully on phones, tablets, and desktops.
├── index.html
├── store.html
├── rules.html
├── faq.html
├── news.html
├── leaderboards.html
├── staff.html
├── vote.html
├── apply.html
├── css/
│ ├── main.css
│ └── components.css
├── js/
│ ├── main.js
│ └── faq.js
├── assets/
├── server.js
├── package.json
└── PRODUCT-DESCRIPTION.md
Key Features
- 9 full pages — Everything a Minecraft server website needs
- Glossy glass design — Buttons, cards, and panels with depth and shine
- Bloom & glow effects — Subtle accents that make CTAs and hover states pop
- Mobile-first responsive — Stacks cleanly on small screens, expands on desktop
- Zero build step — HTML, CSS, and JS only. Drop in, customize, and deploy
- Node.js demo server — Run locally with npm start
- Semantic HTML — Accessible and SEO-friendly structure
Included Pages
| Page | Description |
|---|---|
| Home | Hero with server IP + copy button, live status indicator, player count, feature cards, status widget, news preview |
| Store | Tabbed shop (Ranks, Cosmetics, Bundles, Donate), product cards, trust badges |
| Rules | Categorized rules (Gameplay, Chat, Building, PvP) with warning styling |
| FAQ | Searchable accordion with expand/collapse |
| News | Featured post, article grid, pagination |
| Leaderboards | Tabs for PvP, Economy, Survival, Top Donors; top 3 podium, sortable tables |
| Staff | Staff cards, support ticket form (name, email, category, message) |
| Vote | Vote site cards with rewards, cooldown timer placeholder |
| Apply | Staff application form with requirements list |
Design System
- Typography: Syne (headings) + DM Sans (body) — geometric, gaming-adjacent
- Colors: Deep charcoal base (#0f0f12), emerald accent (#10b981), cyan highlights (#06b6d4)
- Components: Glossy primary buttons, outline glass secondary, ghost buttons, glass cards with hover lift, styled inputs/selects/textareas
- Effects: Radial gradient orbs in hero, status pulse animation, backdrop blur on glass panels
- Responsive breakpoints: Mobile (default), 768px (tablet), 1024px (desktop), 1280px (large)
Components Included
- Sticky header with glass background
- Nav dropdown (Community: Discord, Forums)
- Mobile hamburger menu → full-screen slide overlay
- Copy-to-clipboard (server IP)
- Tab pills (Store categories, Leaderboard types)
- FAQ accordion with search
- Glass cards, primary/secondary/ghost buttons
- Inputs, selects, textareas with focus glow
- Footer with multi-column links and social icons
Tech Stack
- HTML5 — Semantic markup
- Tailwind CSS 3.x (CDN) — Layout, spacing, utility classes
- Custom CSS — Variables, glossy/glass/bloom styles
- Vanilla JavaScript — Mobile menu, IP copy, tabs, FAQ accordion
- Node.js (optional) — Static file server for local demo
File Structure
Ricochet MC/├── index.html
├── store.html
├── rules.html
├── faq.html
├── news.html
├── leaderboards.html
├── staff.html
├── vote.html
├── apply.html
├── css/
│ ├── main.css
│ └── components.css
├── js/
│ ├── main.js
│ └── faq.js
├── assets/
├── server.js
├── package.json
└── PRODUCT-DESCRIPTION.md
Getting Started
- Extract the template to your project folder
- Edit HTML files to replace placeholder text (IP, server name, links)
- Update Discord, forum, and social links in header/footer
- Add your images to assets/ and update references
- Run locally: npm start → open http://localhost:3000
- Deploy to any static host (Netlify, Vercel, GitHub Pages, cPanel, etc.)
Customization
- Colors: Edit CSS variables in css/main.css
root) - Fonts: Swap Syne/DM Sans in Google Fonts import and Tailwind config
- Content: All placeholder text is server-specific (no Lorem ipsum)
- Store: Connect product pages to your payment provider (Tebex, etc.)
- Leaderboards: Replace table data with your API or backend
Browser Support
- Modern browsers (Chrome, Firefox, Safari, Edge)
- backdrop-filter used for glass effect — ~95% support
- Graceful degradation on older browsers
License & Credits
- Template designed for Minecraft server use
- Fonts: Google Fonts (Syne, DM Sans, JetBrains Mono)
- Tailwind CSS: MIT License
- Not affiliated with Mojang/Microsoft
