BitNova Crypto

About the Project: BitNova is a cryptocurrency trading platform UI built with HTML, CSS, and JavaScript. It showcases a clean, modern interface for buying, selling, and tracking digital assets — designed to demonstrate strong frontend skills in a real-world product style.

Key Highlights: Features a live-style market table with 8 coins, interactive trend cards, smooth scroll animations, and a fully responsive layout across all screen sizes.

Project Details

What's Inside

• Header & Navigation — Sticky header with mobile toggle and smooth scroll behavior.
• Hero Section — Bold headline, short description, and a call-to-action button.
• Trend Section — Tabbed crypto cards showing coin names, prices, and percentage changes.
• Market Section — Filterable table with 8 coins, price data, 7-day charts, and trade buttons.
• How It Works — Four-step instruction section explaining the trading process visually.
• About Section — Overview of BitNova's trading features with a visual banner.
• App Section — Mobile app promotion area with App Store and Google Play links.
• Footer — Multi-column footer with product links, services, support, and social icons.

Key Features

• Responsive Design — Fully optimized layout for mobile, tablet, and desktop screens.
• Sticky Header — Header changes style on scroll using JavaScript scroll detection.
• Mobile Navigation — Hamburger menu toggle with smooth open and close animation.
• Scroll Reveal Effect — Sections animate into view as the user scrolls down.
• Market Table — Coin rows with favorite toggle, price data, and hover-activated Trade button.
• Favorite Toggle — Users can mark coins as favorites with a star icon click.
• Tabbed Sections — Trend and Market sections include category filter tab navigation.
• CSS Animations — Smooth hover effects, card icon rotations, and button transitions.

Technologies Used

• HTML5 — Semantic structure with accessible roles and proper heading hierarchy.
• CSS3 — Custom properties, flexbox, grid, animations, and media queries.
• JavaScript (ES6) — Scroll effects, navbar toggle, header state, and favorite toggling.
• Google Fonts — DM Sans font loaded for clean, modern typography.
• Ionicons — Icon library used for UI icons including stars and social links.

Project Structure

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

Quick Start

1. Clone the repository:

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

  <li>
    <strong>Open the project:</strong>
    <ul>
      <li>Open <code>index.html</code> directly in your browser</li>
      <li>Or run a local server:</li>
    </ul>
    <pre><code>python -m http.server 3000</code></pre>
    Then visit <code>http://localhost:3000</code>
  </li>

  <li>
    <strong>Start Customizing:</strong>
    <ul>
      <li>Update coin names, prices, and percentage values in <code>index.html</code></li>
      <li>Change colors, fonts, and spacing using CSS variables in <code>style.css</code></li>
      <li>Add or remove market table rows for more coins in <code>index.html</code></li>
      <li>Replace coin logos and banner images inside <code>assets/images/</code></li>
      <li>Modify scroll and toggle behavior in <code>script.js</code></li>
    </ul>
  </li>
</ol>

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

Live project ➜ Live Demo