<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hypervisor Releases Grid</title>
<style>
/* Base Reset & Background Colors */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #f4f3e6; /* Light ivory/beige background */
font-family: Arial, sans-serif;
padding: 15px;
}
/* Top Navigation Link */
.homepage-link {
display: inline-block;
font-size: 1.35rem;
color: #000000;
text-decoration: none;
font-weight: 500;
margin-bottom: 10px;
}
.homepage-link:hover {
text-decoration: underline;
}
/* Subheading Text */
.subheading {
font-size: 1.05rem;
color: #000066; /* Specific dark blue color */
font-weight: bold;
margin-bottom: 20px;
}
/* Responsive 6-Column Grid Layout */
.game-grid {
display: grid;
grid-template-columns: repeat(6, 1fr); /* 6 equal columns */
gap: 12px; /* Spacing between covers */
width: 100%;
}
/* Game Item Container */
.game-card {
display: block;
text-decoration: none;
transition: transform 0.15s ease-in-out;
}
/* Image Styling with Drop Shadow */
.game-card img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4); /* Replicates the cover shadows */
}
.game-card:hover {
transform: translateY(-2px);
}
/* Responsive adjustments for smaller screens */
@media (max-width: 1200px) { .game-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .game-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .game-grid { grid-template-columns: repeat(2, 1fr); } }
</style>
</head>
<body>
<!-- Top Navigation -->
<a href="#" class="homepage-link"><<< Go back to homepage</a>
<!-- Section Subheading -->
<div class="subheading">All Hypervisor releases in the release date order (newest first):</div>
<!-- Main Content Image Grid -->
<div class="game-grid" id="grid">
<!-- Images will automatically generate here -->
</div>
<script>
// CHANGE THIS NUMBER to the exact total number of images you have in your folder
const totalImages = 25;
const grid = document.getElementById('grid');
// Automatically loops and creates the HTML for all your local images
for (let i = 1; i <= totalImages; i++) {
const card = document.createElement('a');
card.href = "#";
card.className = "game-card";
const img = document.createElement('img');
img.src = `${I}.png`; // Looks for 1.jpg, 2.jpg, etc. in the same folder
img.alt = `Game Cover ${i}`;
// Handles missing numbers seamlessly if an image fails to load
img.onerror = function() { card.remove(); };
card.appendChild(img);
grid.appendChild(card);
}
</script>
</body>
</html>