-
Couldn't load subscription status.
- Fork 1.6k
Added Interactive Galaxy & Stars Photo Gallery (HTML + CSS) #956
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
ItsMeAnanyaSrivastava
wants to merge
1
commit into
Ayushparikh-code:main
from
ItsMeAnanyaSrivastava:feature/galaxy-photo-gallery
Open
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
38 changes: 38 additions & 0 deletions
galaxy_photo_gallery/README.md
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| # 🪐 Interactive Galaxy & Stars Photo Gallery | ||
|
|
||
| A simple and responsive **photo gallery** created using **HTML and CSS only**. | ||
| This mini-project showcases stunning images of galaxies and stars with smooth hover animations and a clean grid-based layout. | ||
|
|
||
| --- | ||
|
|
||
| ## ✨ Features | ||
| - Responsive **CSS Grid** layout | ||
| - **Zoom and glow** hover animation effects | ||
| - Uses a **galaxy and space** theme | ||
| - Built entirely with **HTML and CSS (no JS)** | ||
|
|
||
| --- | ||
|
|
||
| ## 🚀 How to Run | ||
| 1. Open the folder `galaxy_photo_gallery/` | ||
| 2. Launch `index.html` in your browser | ||
|
|
||
| That’s it — the gallery will open locally! 💫 | ||
|
|
||
| --- | ||
|
|
||
| ## 🧱 Built With | ||
| - **HTML5** | ||
| - **CSS3** | ||
|
|
||
| --- | ||
|
|
||
| ## 📷 Image Credits | ||
| All images are sourced from [**Unsplash**](https://unsplash.com), a platform offering free high-quality photos. | ||
| Credits to the amazing photographers for their cosmic captures. 🌌 | ||
|
|
||
| --- | ||
|
|
||
| ## 👨💻 Contributed By | ||
| **[Ananya Srivastava](https://github.com/itsmeananyasrivastava)** | ||
| *Frontend Developer | Web Enthusiast | CSS Animation Lover* |
73 changes: 73 additions & 0 deletions
galaxy_photo_gallery/index.html
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | ||
| <title>Interactive Galaxy Photo Gallery</title> | ||
| <style> | ||
| body { | ||
| margin: 0; | ||
| font-family: 'Poppins', sans-serif; | ||
| background: radial-gradient(circle at center, #05010f 0%, #010005 100%); | ||
| color: #fff; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| min-height: 100vh; | ||
| padding: 40px 20px; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 2rem; | ||
| margin-bottom: 30px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .gallery { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | ||
| gap: 20px; | ||
| width: 100%; | ||
| max-width: 1200px; | ||
| } | ||
|
|
||
| .gallery img { | ||
| width: 100%; | ||
| height: 250px; | ||
| object-fit: cover; | ||
| border-radius: 15px; | ||
| transition: transform 0.5s ease, filter 0.5s ease, box-shadow 0.5s ease; | ||
| } | ||
|
|
||
| .gallery img:hover { | ||
| transform: scale(1.1); | ||
| filter: brightness(1.3) saturate(1.2); | ||
| box-shadow: 0 0 25px rgba(255, 255, 255, 0.3); | ||
| } | ||
|
|
||
| footer { | ||
| margin-top: 40px; | ||
| font-size: 0.9rem; | ||
| color: #aaa; | ||
| text-align: center; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <h1>🌌 Interactive Galaxy & Stars Photo Gallery</h1> | ||
|
|
||
| <div class="gallery"> | ||
| <img src="https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?auto=format&fit=crop&w=800&q=80" alt="Milky Way Galaxy" /> | ||
| <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=800&q=80" alt="Starry Sky" /> | ||
| <img src="https://images.unsplash.com/photo-1496307042754-b4aa456c4a2d?auto=format&fit=crop&w=800&q=80" alt="Nebula Galaxy" /> | ||
| <img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=800&q=80" alt="Deep Space" /> | ||
| <img src="https://images.unsplash.com/photo-1504196606672-aef5c9cefc92?auto=format&fit=crop&w=800&q=80" alt="Galaxy Swirls" /> | ||
| <img src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?auto=format&fit=crop&w=800&q=80" alt="Night Sky Stars" /> | ||
| <img src="https://images.unsplash.com/photo-1470104240373-bc1812eddc9f?auto=format&fit=crop&w=800&q=80" alt="Galaxy Clouds" /> | ||
| <img src="https://images.unsplash.com/photo-1524492412937-b28074a5d7da?auto=format&fit=crop&w=800&q=80" alt="Star Trail" /> | ||
| <img src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=800&q=80" alt="Galaxy Cluster" /> | ||
| </div> | ||
|
|
||
| <footer>© 2025 Galaxy Explorer — Made with HTML & CSS ✨</footer> | ||
| </body> | ||
| </html> |
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.