Minance — Crypto Exchange Landing Page

A fully responsive, production-quality cryptocurrency exchange landing page built with vanilla HTML, CSS, and JavaScript. Inspired by the Binance design system.

---

File Structure

Minance/
├── index.html      — Main HTML document
├── style.css       — All styles, animations, and responsive rules
├── script.js       — All interactivity and live data simulation
├── LICENSE         — MIT License
└── README.md       — This file

---

Features

Hero Section

• Typewriter effect cycling through asset categories (Typed.js)
• Animated orbital visualization — 5 coin tokens (BTC, ETH, BNB, SOL, XRP) orbiting a central Minance diamond, with floating price cards that update in real time
• Email signup form with toast validation
• Animated stats counter on scroll

Navigation

• Sticky navbar with yellow bottom border on scroll
• Active link indicator (yellow dot)
• Hamburger menu with slide-in drawer on mobile
• Dismissable announcement bar

Market Data

• Full-width infinite marquee ticker bar (12 pairs, pauses on hover)
• Market overview table — 8 rows with SVG sparkline charts
• Tab filter: All / Gainers / Losers / New Listings
• Sortable columns: Price, 24h Change, Market Cap

Trading Preview

• SVG candlestick chart (15 candles, green/red)
• Live-looking order book (5 sell + 5 buy rows with depth fill bars)
• Timeframe selector buttons

Earn Section

• 3 product cards: ETH Staking (24.5% APY), USDT Flexible (8.2%), BTC Dual (45%)

App Download

• SVG QR code, App Store + Google Play buttons
• CSS-built phone mockup with mini portfolio UI

Trust Section

• Animated number counters ($76B, 350M+, 0.1%)
• Security certification badges (SOC 2, ISO 27001, Proof of Reserves, SAFU)

News Section

• 3 article cards with category tags, dates, and real headlines

Footer

• 5-column link grid
• Social links (Twitter, Telegram, Discord, LinkedIn)
• Risk disclaimer

UI / UX Details

• Scroll progress bar (top of page)
• Back-to-top button (appears after 400px scroll)
• Toast notification system (success + error)
• AOS scroll-triggered section reveals
• All hover states transition at 150ms

---

Libraries Used

Library	Version	Purpose
AOS	2.3.1	Scroll-triggered animations
Typed.js	2.1.0	Hero typewriter text effect
IBM Plex Sans / Mono	—	Typography (Google Fonts)

No build tools, no framework, no bundler. Open index.html directly in any browser.

---

Design Tokens

All colors are defined as CSS custom properties in style.css:

--bg-primary:     #0B0E11   /* Deep site background */
--bg-secondary:   #1E2026   /* Cards, panels */
--bg-tertiary:    #2B2F36   /* Hover states */
--accent:         #F0B90B   /* Binance Yellow */
--accent-hover:   #D4A800
--text-primary:   #EAECEF
--text-secondary: #848E9C
--text-muted:     #5E6673
--green:          #0ECB81   /* Positive / price up */
--red:            #F6465D   /* Negative / price down */
--border:         #2B2F36

---

Responsive Breakpoints

Breakpoint	Layout changes
> 1200px	Full desktop — 2-column hero, 6-column footer
≤ 1200px	Hero right column slightly narrowed
≤ 1024px	Hero stacks, phone mockup hidden, 2-col grids
≤ 768px	Hamburger nav, 1-col grids, stacked form
≤ 480px	Reduced padding, 1-col stats

---

Getting Started

Open in browser

open index.html

Or drag index.html into any browser window.

Customization

Change accent color — update --accent and --accent-hover in :root inside style.css.

Update crypto prices — edit the liveData object and cryptoRows array at the top of script.js.

Add/remove ticker pairs — edit the tickerPairs array in script.js.

Swap fonts — replace the Google Fonts import URL in style.css and update --font-sans / --font-mono.

---

License

MIT — free to use, modify, and distribute. See LICENSE.