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

An interactive crypto trading website created with HTML, CSS, and JavaScript, featuring responsive design, market tables, and smooth animations.
https://github.com/nawazdevx/bitnova-crypto

crypto cryptocurrency frontend-project html-css-javascript-project landing-page modern-website portfolio-projects practice-project responsive-websites web-design web-design-and-development website

Last synced: about 2 months ago
JSON representation

An interactive crypto trading website created with HTML, CSS, and JavaScript, featuring responsive design, market tables, and smooth animations.

• Host: GitHub
• URL: https://github.com/nawazdevx/bitnova-crypto
• Owner: nawazdevx
• License: mit
• Created: 2025-12-23T04:42:27.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2025-12-25T04:00:07.000Z (2 months ago)
• Last Synced: 2025-12-26T18:02:09.110Z (2 months ago)
• Topics: crypto, cryptocurrency, frontend-project, html-css-javascript-project, landing-page, modern-website, portfolio-projects, practice-project, responsive-websites, web-design, web-design-and-development, website
• Language: HTML
• Homepage: https://nawazdevx.github.io/bitnova-crypto/
• Size: 769 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 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





Clone the repository:

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





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





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](https://choosealicense.com/licenses/mit/).

**Contact:**  

Connect with me on [LinkedIn](https://www.linkedin.com/in/nawazdevx) or visit my [Portfolio](https://nawazdevx.vercel.app/).

**Support:**  

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






Project Preview




You can view the live project here ➜



Live Demo