{"id":38844361,"url":"https://github.com/nawazdevx/bitnova-crypto","last_synced_at":"2026-01-17T14:02:58.777Z","repository":{"id":330384586,"uuid":"1121489968","full_name":"nawazdevx/bitnova-crypto","owner":"nawazdevx","description":"An interactive crypto trading website created with HTML, CSS, and JavaScript, featuring responsive design, market tables, and smooth animations.","archived":false,"fork":false,"pushed_at":"2025-12-25T04:00:07.000Z","size":787,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-26T18:02:09.110Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://nawazdevx.github.io/bitnova-crypto/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nawazdevx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-23T04:42:27.000Z","updated_at":"2025-12-25T04:00:11.000Z","dependencies_parsed_at":"2025-12-26T18:02:11.509Z","dependency_job_id":null,"html_url":"https://github.com/nawazdevx/bitnova-crypto","commit_stats":null,"previous_names":["nawazdevx/bitnova-crypto"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/nawazdevx/bitnova-crypto","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nawazdevx%2Fbitnova-crypto","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nawazdevx%2Fbitnova-crypto/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nawazdevx%2Fbitnova-crypto/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nawazdevx%2Fbitnova-crypto/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nawazdevx","download_url":"https://codeload.github.com/nawazdevx/bitnova-crypto/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nawazdevx%2Fbitnova-crypto/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28509851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T13:38:16.342Z","status":"ssl_error","status_checked_at":"2026-01-17T13:37:44.060Z","response_time":85,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2026-01-17T14:02:58.691Z","updated_at":"2026-01-17T14:02:58.765Z","avatar_url":"https://github.com/nawazdevx.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BitNova - Crypto Platform\n\n**About Project:**  \nA 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.\n\n**What I learned:**  \nImplemented 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.\n\n**Personal Note:**  \nI started building HTML, CSS, and JavaScript projects in 2022.  \nAt that time, I focused on learning first and began uploading to GitHub recently.  \nNow I'm working with **React.js** and **Next.js**, and seeking opportunities as a **frontend** or **web developer**.\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003ch2\u003eProject More Details\u003c/h2\u003e\u003c/summary\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch4\u003eWhat's Inside\u003c/h4\u003e\u003c/summary\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eHero Section\u003c/strong\u003e - Full-width banner with call-to-action and platform introduction\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCrypto Trend Tabs\u003c/strong\u003e - Interactive tabs displaying trending cryptocurrencies across different categories (DeFi, BSC, NFT, Metaverse)\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eMarket Update Table\u003c/strong\u003e - Comprehensive data table with 8 cryptocurrencies showing rank, price, 24h changes, market cap, and 7-day charts\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eHow It Works Section\u003c/strong\u003e - Four-step instruction cards explaining the platform process from download to earning\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eAbout Section\u003c/strong\u003e - Platform features with checkmark list and detailed descriptions\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eMobile App Section\u003c/strong\u003e - App download links for Google Play and App Store with QR code banner\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eFavorite Toggle\u003c/strong\u003e - Star icons in market table to mark favorite cryptocurrencies\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eResponsive Navigation\u003c/strong\u003e - Mobile hamburger menu with smooth toggle animation\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSticky Header\u003c/strong\u003e - Fixed navigation that appears when scrolling past 300px\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eScroll Animations\u003c/strong\u003e - Sections fade and slide into view as users scroll down the page\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch4\u003eTechnologies Used\u003c/h4\u003e\u003c/summary\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eHTML5\u003c/strong\u003e - Semantic markup with proper document structure and accessibility attributes\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCSS3\u003c/strong\u003e - Modern styling with Grid, Flexbox, custom properties, keyframe animations, and responsive design\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eJavaScript (ES6)\u003c/strong\u003e - Vanilla JS for navigation toggle, scroll effects, and interactive elements\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eGoogle Fonts\u003c/strong\u003e - DM Sans font family for clean, professional typography\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eIonicons\u003c/strong\u003e - Icon library for UI elements and social media links\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCSS Custom Properties\u003c/strong\u003e - Variables for easy color scheme and theme customization\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eMedia Queries\u003c/strong\u003e - Responsive breakpoints for mobile to desktop (575px, 768px, 992px, 1200px)\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCSS Grid \u0026 Flexbox\u003c/strong\u003e - Modern layout techniques for responsive card grids and table structures\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch4\u003eProject Structure\u003c/h4\u003e\u003c/summary\u003e\n\u003cpre\u003e\nbitnova-crypto/\n│\n├── index.html                 # Main HTML with all sections and content\n│\n├── assets/\n│   ├── css/\n│   │   └── style.css         # All styles, animations, responsive design\n│   │\n│   ├── js/\n│   │   └── script.js         # Navigation, scroll effects, interactive features\n│   │\n│   └── images/               # Coin logos, banners, charts, icons\n│\n└── README.md                 # Project documentation\n\u003c/pre\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch4\u003eKey Features\u003c/h4\u003e\u003c/summary\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eFully Responsive Design\u003c/strong\u003e - Adapts seamlessly from 320px mobile screens to 1920px+ desktops\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eInteractive Crypto Tabs\u003c/strong\u003e - Switch between different cryptocurrency categories with smooth transitions\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eMarket Data Table\u003c/strong\u003e - Horizontal scrollable table with 8 coins showing live statistics and charts\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eFavorite Selection\u003c/strong\u003e - Click star icons to mark and highlight favorite cryptocurrencies\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSmooth Scroll Animations\u003c/strong\u003e - Section elements reveal with fade and slide effects as you scroll\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eMobile Hamburger Menu\u003c/strong\u003e - Three-line animated toggle with full-screen overlay navigation\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSticky Header Animation\u003c/strong\u003e - Header slides down smoothly after scrolling 300px\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eHover Effects\u003c/strong\u003e - Interactive buttons, links, and cards with transform animations\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eFour-Step Instructions\u003c/strong\u003e - Clear visual guide with rotating card animations on hover\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eApp Download Section\u003c/strong\u003e - Google Play and App Store badges with QR code display\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eProfessional Dark Theme\u003c/strong\u003e - Modern color scheme with high contrast and readability\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSEO Optimized\u003c/strong\u003e - Semantic HTML structure with proper meta tags and descriptions\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCross-Browser Compatible\u003c/strong\u003e - Works perfectly on Chrome, Firefox, Safari, Edge, and Opera\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eEasy Customization\u003c/strong\u003e - CSS variables make color and theme changes simple\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch4\u003eQuick Start\u003c/h4\u003e\u003c/summary\u003e\n\u003col\u003e\n\u003cli\u003e\n\u003cstrong\u003eClone the repository:\u003c/strong\u003e\n\u003cpre\u003e\u003ccode\u003egit clone https://github.com/nawazdevx/bitnova-crypto.git\u003c/code\u003e\u003c/pre\u003e\n\u003c/li\u003e\n\n\u003cli\u003e\n\u003cstrong\u003eOpen the project:\u003c/strong\u003e\n\u003cul\u003e\n\u003cli\u003eOpen \u003ccode\u003eindex.html\u003c/code\u003e directly in your browser\u003c/li\u003e\n\u003cli\u003eOr run a local server:\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cpre\u003e\u003ccode\u003epython -m http.server 3000\u003c/code\u003e\u003c/pre\u003e\nThen visit \u003ccode\u003ehttp://localhost:3000\u003c/code\u003e\n\u003c/li\u003e\n\n\u003cli\u003e\n\u003cstrong\u003eStart Customizing:\u003c/strong\u003e\n\u003cul\u003e\n\u003cli\u003eUpdate platform name and content in \u003ccode\u003eindex.html\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eChange colors in \u003ccode\u003estyle.css\u003c/code\u003e using CSS variables\u003c/li\u003e\n\u003cli\u003eReplace coin logos and images in \u003ccode\u003eassets/images/\u003c/code\u003e folder\u003c/li\u003e\n\u003cli\u003eModify market data and cryptocurrency information\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch4\u003eCustomization\u003c/h4\u003e\u003c/summary\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eText Content:\u003c/strong\u003e Edit directly in \u003ccode\u003eindex.html\u003c/code\u003e - update platform name, coin data, prices, and descriptions\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eColors:\u003c/strong\u003e Update CSS variables in \u003ccode\u003e:root\u003c/code\u003e selector at the top of \u003ccode\u003estyle.css\u003c/code\u003e\n\u003cpre\u003e\u003ccode\u003e:root {\n  --blue-crayola: hsl(222, 100%, 61%);      /* Main accent color */\n  --eerie-black-1: hsl(240, 5%, 8%);        /* Primary background */\n  --eerie-black-2: hsl(228, 9%, 10%);       /* Secondary background */\n}\u003c/code\u003e\u003c/pre\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eImages:\u003c/strong\u003e Replace files in \u003ccode\u003eassets/images/\u003c/code\u003e with your own coin logos and banners (maintain same filenames or update HTML references)\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eFonts:\u003c/strong\u003e Change Google Fonts link in HTML \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e section and update \u003ccode\u003e--ff-dm-sans\u003c/code\u003e variable in CSS\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eAnimations:\u003c/strong\u003e Modify scroll reveal timing in \u003ccode\u003escript.js\u003c/code\u003e - adjust \u003ccode\u003ewindow.innerHeight / 1.5\u003c/code\u003e for trigger point\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eMarket Data:\u003c/strong\u003e Update cryptocurrency information in the market table section of HTML\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eTab Categories:\u003c/strong\u003e Add or remove tab buttons and content in both trend and market sections\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eLayout:\u003c/strong\u003e Adjust Grid and Flexbox properties in CSS to reorganize sections and card layouts\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/details\u003e\n\n\u003c/details\u003e\n\n**License:**  \nThis project is licensed under the [MIT License](https://choosealicense.com/licenses/mit/).\n\n**Contact:**  \nConnect with me on [LinkedIn](https://www.linkedin.com/in/nawazdevx) or visit my [Portfolio](https://nawazdevx.vercel.app/).\n\n**Support:**  \nFound this helpful? Give it a ⭐ on GitHub! Thank you.\n\n\u003cbr /\u003e\n\n\u003cdiv\u003e\n\u003ch2\u003eProject Preview\u003c/h2\u003e\n\n\u003cp\u003e\n\u003cstrong\u003eYou can view the live project here ➜\u003c/strong\u003e\n\u003ca href=\"https://nawazdevx.github.io/bitnova-crypto/\" target=\"_blank\"\u003e\n\u003cstrong\u003eLive Demo\u003c/strong\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cimg src=\"./assets/images/readme-image.png\" alt=\"Desktop Demo\" /\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnawazdevx%2Fbitnova-crypto","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnawazdevx%2Fbitnova-crypto","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnawazdevx%2Fbitnova-crypto/lists"}