BitNova - Crypto Platform

About Project:
A responsive cryptocurrency trading platform showcasing market trends, coin listings, and trading features. Built with semantic HTML5, modern CSS Grid and Flexbox layouts, and vanilla JavaScript for interactive elements including mobile navigation, scroll animations, and favorite coin selection. Features a professional dark theme with smooth transitions and a complete market data table.

What I learned:
Implemented CSS custom properties for consistent theming, created responsive data tables with horizontal scrolling, built tabbed navigation systems, and developed scroll-triggered animations for section reveals using JavaScript intersection techniques.

Personal Note:
I started building HTML, CSS, and JavaScript projects in 2022.
At that time, I focused on learning first and began uploading to GitHub recently.
Now I'm working with React.js and Next.js, and seeking opportunities as a frontend or web developer.

Project More Details

What's Inside

• Hero Section - Full-width banner with call-to-action and platform introduction
• Crypto Trend Tabs - Interactive tabs displaying trending cryptocurrencies across different categories (DeFi, BSC, NFT, Metaverse)
• Market Update Table - Comprehensive data table with 8 cryptocurrencies showing rank, price, 24h changes, market cap, and 7-day charts
• How It Works Section - Four-step instruction cards explaining the platform process from download to earning
• About Section - Platform features with checkmark list and detailed descriptions
• Mobile App Section - App download links for Google Play and App Store with QR code banner
• Favorite Toggle - Star icons in market table to mark favorite cryptocurrencies
• Responsive Navigation - Mobile hamburger menu with smooth toggle animation
• Sticky Header - Fixed navigation that appears when scrolling past 300px
• Scroll Animations - Sections fade and slide into view as users scroll down the page

Technologies Used

• HTML5 - Semantic markup with proper document structure and accessibility attributes
• CSS3 - Modern styling with Grid, Flexbox, custom properties, keyframe animations, and responsive design
• JavaScript (ES6) - Vanilla JS for navigation toggle, scroll effects, and interactive elements
• Google Fonts - DM Sans font family for clean, professional typography
• Ionicons - Icon library for UI elements and social media links
• CSS Custom Properties - Variables for easy color scheme and theme customization
• Media Queries - Responsive breakpoints for mobile to desktop (575px, 768px, 992px, 1200px)
• CSS Grid & Flexbox - Modern layout techniques for responsive card grids and table structures

Project Structure

bitnova-crypto/
│
├── index.html                 # Main HTML with all sections and content
│
├── assets/
│   ├── css/
│   │   └── style.css         # All styles, animations, responsive design
│   │
│   ├── js/
│   │   └── script.js         # Navigation, scroll effects, interactive features
│   │
│   └── images/               # Coin logos, banners, charts, icons
│
└── README.md                 # Project documentation

Key Features

• Fully Responsive Design - Adapts seamlessly from 320px mobile screens to 1920px+ desktops
• Interactive Crypto Tabs - Switch between different cryptocurrency categories with smooth transitions
• Market Data Table - Horizontal scrollable table with 8 coins showing live statistics and charts
• Favorite Selection - Click star icons to mark and highlight favorite cryptocurrencies
• Smooth Scroll Animations - Section elements reveal with fade and slide effects as you scroll
• Mobile Hamburger Menu - Three-line animated toggle with full-screen overlay navigation
• Sticky Header Animation - Header slides down smoothly after scrolling 300px
• Hover Effects - Interactive buttons, links, and cards with transform animations
• Four-Step Instructions - Clear visual guide with rotating card animations on hover
• App Download Section - Google Play and App Store badges with QR code display
• Professional Dark Theme - Modern color scheme with high contrast and readability
• SEO Optimized - Semantic HTML structure with proper meta tags and descriptions
• Cross-Browser Compatible - Works perfectly on Chrome, Firefox, Safari, Edge, and Opera
• Easy Customization - CSS variables make color and theme changes simple

Quick Start

1. Clone the repository:

   git clone https://github.com/nawazdevx/bitnova-crypto.git

2. Open the project:
   • Open index.html directly in your browser
   • Or run a local server:

   python -m http.server 3000

   Then visit http://localhost:3000

3. Start Customizing:
   • Update platform name and content in index.html
   • Change colors in style.css using CSS variables
   • Replace coin logos and images in assets/images/ folder
   • Modify market data and cryptocurrency information

Customization

• Text Content: Edit directly in index.html - update platform name, coin data, prices, and descriptions
• Colors: Update CSS variables in :root selector at the top of style.css

  :root {
    --blue-crayola: hsl(222, 100%, 61%);      /* Main accent color */
    --eerie-black-1: hsl(240, 5%, 8%);        /* Primary background */
    --eerie-black-2: hsl(228, 9%, 10%);       /* Secondary background */
  }

• Images: Replace files in assets/images/ with your own coin logos and banners (maintain same filenames or update HTML references)
• Fonts: Change Google Fonts link in HTML <head> section and update --ff-dm-sans variable in CSS
• Animations: Modify scroll reveal timing in script.js - adjust window.innerHeight / 1.5 for trigger point
• Market Data: Update cryptocurrency information in the market table section of HTML
• Tab Categories: Add or remove tab buttons and content in both trend and market sections
• Layout: Adjust Grid and Flexbox properties in CSS to reorganize sections and card layouts

License:
This project is licensed under the MIT License.

Contact:
Connect with me on LinkedIn or visit my Portfolio.

Support:
Found this helpful? Give it a ⭐ on GitHub! Thank you.

Project Preview

You can view the live project here ➜ Live Demo