Spaces:
Running
Running
File size: 4,435 Bytes
5920e02 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
<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> |