Add Pi Network landing page HTML structure#36
Open
arifinahmad99-cloud wants to merge 1 commit intopi-apps:mainfrom
Open
Add Pi Network landing page HTML structure#36arifinahmad99-cloud wants to merge 1 commit intopi-apps:mainfrom
arifinahmad99-cloud wants to merge 1 commit intopi-apps:mainfrom
Conversation
This file contains the HTML structure and styling for the Pi Network landing page, including sections for the header, hero, stats, features, and footer.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This file contains the HTML structure and styling for the Pi Network landing page, including sections for the header, hero, stats, features, and footer.
Code Organization:
Clean Structure:
Organized CSS sections with clear comments (RESET & BASE, HEADER, HERO, 3D GRAPHICS, etc.)
Logical flow from top to bottom
Easy to maintain and modify
✨ Key Features:
3D Rotating Pi Coins:
Full 3D rotation with rotateY, rotateX, and translateZ
4 coins of different sizes (150px, 120px, 90px, 75px)
Shimmer effect that sweeps across each coin
Dynamic glow with random intensity
Realistic depth and lighting
Mobile Responsive Design:
Perfect layout for desktop (1400px)
Tablet optimization (1024px)
Phone responsive (768px)
Small phone support (480px)
Coins reposition and resize automatically
Navigation stacks vertically on mobile
Interactive Elements:
Smooth 3D parallax based on mouse movement
Animated counters for statistics (55M+, 230+, 10M+)
Scroll-triggered fade-in animations
Smooth scroll navigation
Hover effects on all cards
Professional Sections:
Clean header with navigation
Hero section with CTA buttons
Statistics grid (4 cards)
How It Works (4 steps)
Features grid (6 cards)
Professional disclaimer
Complete footer
Animations:
Logo pulse effect
Coin floating animation
Shimmer sweep effect
Mining indicator spinner
Network ripple effect