Spaces:
Running
Running
| <html><head><base href="https://vastgallery.art"><title>Vast Gallery - Infinite Canvas of Digital Art</title><style> | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| background-color: #f0f0f0; | |
| color: #333; | |
| } | |
| header { | |
| background-color: #fff; | |
| padding: 20px; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.1); | |
| } | |
| h1 { | |
| margin: 0; | |
| color: #4a4a4a; | |
| } | |
| nav { | |
| margin-top: 20px; | |
| } | |
| nav a { | |
| color: #4a4a4a; | |
| text-decoration: none; | |
| margin-right: 15px; | |
| } | |
| .gallery { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| padding: 20px; | |
| } | |
| .artwork { | |
| background-color: #fff; | |
| margin: 10px; | |
| padding: 15px; | |
| width: 300px; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.1); | |
| transition: transform 0.3s ease; | |
| } | |
| .artwork:hover { | |
| transform: scale(1.05); | |
| } | |
| .artwork img { | |
| width: 100%; | |
| height: auto; | |
| } | |
| .artwork h3 { | |
| margin: 10px 0; | |
| } | |
| .artwork p { | |
| color: #666; | |
| font-size: 0.9em; | |
| } | |
| footer { | |
| background-color: #333; | |
| color: #fff; | |
| text-align: center; | |
| padding: 20px; | |
| margin-top: 20px; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| </style></head><body> | |
| <header> | |
| <h1>Vast Gallery</h1> | |
| <nav> | |
| <a href="#featured">Featured</a> | |
| <a href="#explore">Explore</a> | |
| <a href="#artists">Artists</a> | |
| <a href="#about">About</a> | |
| <a href="https://vastgallery.art/vr">VR Experience</a> | |
| </nav> | |
| </header> | |
| <main class="gallery"> | |
| <div class="artwork floating"> | |
| <img src="quantum_landscape.jpg" alt="A swirling quantum landscape with fractals and abstract shapes, digital art" width="300" height="200"> | |
| <h3>Quantum Landscape</h3> | |
| <p>By: QuantumDreamer</p> | |
| </div> | |
| <div class="artwork floating" style="animation-delay: 2s;"> | |
| <img src="neural_network_portrait.jpg" alt="A portrait created by a neural network, showing a face merging with circuit patterns" width="300" height="200"> | |
| <h3>Neural Network Portrait</h3> | |
| <p>By: AIArtist2045</p> | |
| </div> | |
| <div class="artwork floating" style="animation-delay: 4s;"> | |
| <img src="fractal_city.jpg" alt="A city made entirely of fractals, with impossible architecture and glowing lines" width="300" height="200"> | |
| <h3>Fractal City</h3> | |
| <p>By: FractalArchitect</p> | |
| </div> | |
| </main> | |
| <footer> | |
| <p>Vast Gallery - Infinite Canvas of Digital Art</p> | |
| <p><a href="https://vastgallery.art/submit">Submit Your Artwork</a> | <a href="https://vastgallery.art/marketplace">NFT Marketplace</a></p> | |
| </footer> | |
| <script> | |
| // Dynamic loading of artworks | |
| window.addEventListener('scroll', function() { | |
| if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) { | |
| loadMoreArtworks(); | |
| } | |
| }); | |
| function loadMoreArtworks() { | |
| // Simulating API call to load more artworks | |
| const newArtworks = [ | |
| {title: "Cybernetic Dreamscape", artist: "NeonMindscaper", image: "cybernetic_dreamscape.jpg"}, | |
| {title: "Quantum Entanglement", artist: "ParticlePoet", image: "quantum_entanglement.jpg"}, | |
| {title: "Digital Ecosystem", artist: "BinaryBiologist", image: "digital_ecosystem.jpg"} | |
| ]; | |
| const gallery = document.querySelector('.gallery'); | |
| newArtworks.forEach(artwork => { | |
| const div = document.createElement('div'); | |
| div.className = 'artwork floating'; | |
| div.innerHTML = ` | |
| <img src="${artwork.image}" alt="${artwork.title} by ${artwork.artist}, digital artwork" width="300" height="200"> | |
| <h3>${artwork.title}</h3> | |
| <p>By: ${artwork.artist}</p> | |
| `; | |
| gallery.appendChild(div); | |
| }); | |
| } | |
| </script> | |
| </body></html> |