PipilikaX is a space, astronaut, astronomy related informational responsive web design project that delivers educational content and real-time space data in an engaging, interactive format. I design the project for learning and practice purpose with HTML5, CSS3 and JavaScript ES6 and DOM manipulation.
- Animated starfield hero section (Canvas API).
- "About PipilikaX" intro section.
- Visual solar system lineup.
- NASA Image of the Day with live API and description.
- PipilikaX carousel engine: showcases modules or tools.
- Live ISS Tracker: real-time map using iframe.
- Adventure Parallax Section with a Mars-style image.
- "Learn More" call-to-action gallery.
- Custom cursor animation and scroll-to-top button.
- Responsive card layout using CSS Grid.
- Blog cards with thumbnail, summary, and Read More link.
- Full-width hero image.
- Blog title, author, date, body content.
- Navigation and styled share buttons.
- Mission statement repeated from home.
- Meet the Team: Grid of styled member profiles with hover social links.
- Contact form with name, email, and message.
- Embedded satellite map iframe.
- Fully responsive design.
- Full-width animated starfield background.
- Floating astronaut graphic.
- Large
404with "Lost in Space" message. - Button to return home.
- HTML5
- CSS3 (Flexbox, Grid, Animations)
- JavaScript (Vanilla, Canvas API)
- Responsive Design Principles
- External APIs and Iframes
-
Clone the repository:
git clone https://github.com/azharanowar/pipilikaX.git cd pipilikaX -
Open
index.htmlusing any live server or drag it into your browser.
Store all screenshots in a
/screenshots/folder and link them like below:
Open-source for exploration and educational purposes.
Developed with ❤️ by Azhar Anowar
Feedback and contributions are welcome. Submit an issue or PR!
🛰️ “Explore the cosmos—one scroll at a time.”