meaz/Test_theme
Template
2
0
Fork 0
Code Issues Pull requests Projects 1 Releases Activity
Test_theme/beetroot_static/test.html

382 lines
9.1 KiB
HTML
Raw Normal View History

test
2023-06-15 17:39:32 +02:00
<!DOCTYPE html>
<html>
<head>
<title>Image Grid</title>
<style>
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
justify-content: center;
align-items: center;
gap: 10px;
justify-items: center;
}
.image-container {
max-width: 4rem;
}
.image-container img {
max-width: 100%;
height: auto;
}
.image-container p {
text-align: center;
margin: 0;
padding: 5px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="image-grid">
<div class="image-container">
<img src="image1.jpg">
<div><p>Title 1</p></div>
</div>
<div class="image-container">
<img src="image2.jpg">
<div><p>Title 2</p></div>
</div>
<div class="image-container">
<img src="image3.jpg">
<div><p>Title 3</p></div>
</div>
<div class="image-container">
<img src="image4.jpg">
<div><p>Title 4</p></div>
</div>
<div class="image-container">
<img src="image5.jpg">
<div><p>Title 5</p></div>
</div>
<div class="image-container">
<img src="image1.jpg">
<div><p>Title 1</p></div>
</div>
<div class="image-container">
<img src="image2.jpg">
<div><p>Title 2</p></div>
</div>
<div class="image-container">
<img src="image3.jpg">
<div><p>Title 3</p></div>
</div>
<div class="image-container">
<img src="image4.jpg">
<div><p>Title 4</p></div>
</div>
<div class="image-container">
<img src="image5.jpg">
<div><p>Title 5</p></div>
</div>
<div class="image-container">
<img src="image1.jpg">
<div><p>Title 1</p></div>
</div>
<div class="image-container">
<img src="image2.jpg">
<div><p>Title 2</p></div>
</div>
<div class="image-container">
<img src="image3.jpg">
<div><p>Title 3</p></div>
</div>
<div class="image-container">
<img src="image4.jpg">
<div><p>Title 4</p></div>
</div>
<div class="image-container">
<img src="image5.jpg">
<div><p>Title 5</p></div>
</div>
<div class="image-container">
<img src="image1.jpg">
<div><p>Title 1</p></div>
</div>
<div class="image-container">
<img src="image2.jpg">
<div><p>Title 2</p></div>
</div>
<div class="image-container">
<img src="image3.jpg">
<div><p>Title 3</p></div>
</div>
<div class="image-container">
<img src="image4.jpg">
<div><p>Title 4</p></div>
</div>
<div class="image-container">
<img src="image5.jpg">
<div><p>Title 5</p></div>
</div>
<div class="image-container">
<img src="image1.jpg">
<div><p>Title 1</p></div>
</div>
<div class="image-container">
<img src="image2.jpg">
<div><p>Title 2</p></div>
</div>
<div class="image-container">
<img src="image3.jpg">
<div><p>Title 3</p></div>
</div>
<div class="image-container">
<img src="image4.jpg">
<div><p>Title 4</p></div>
</div>
<div class="image-container">
<img src="image5.jpg">
<div><p>Title 5</p></div>
</div>
<div class="image-container">
<img src="image1.jpg">
<div><p>Title 1</p></div>
</div>
<div class="image-container">
<img src="image2.jpg">
<div><p>Title 2</p></div>
</div>
<div class="image-container">
<img src="image3.jpg">
<div><p>Title 3</p></div>
</div>
<div class="image-container">
<img src="image4.jpg">
<div><p>Title 4</p></div>
</div>
<div class="image-container">
<img src="image5.jpg">
<div><p>Title 5</p></div>
</div>
<div class="image-container">
<img src="image1.jpg">
<div><p>Title 1</p></div>
</div>
<div class="image-container">
<img src="image2.jpg">
<div><p>Title 2</p></div>
</div>
<div class="image-container">
<img src="image3.jpg">
<div><p>Title 3</p></div>
</div>
<div class="image-container">
<img src="image4.jpg">
<div><p>Title 4</p></div>
</div>
<div class="image-container">
<img src="image5.jpg">
<div><p>Title 5</p></div>
</div>
<div class="image-container">
<img src="image1.jpg">
<div><p>Title 1</p></div>
</div>
<div class="image-container">
<img src="image2.jpg">
<div><p>Title 2</p></div>
</div>
<div class="image-container">
<img src="image3.jpg">
<div><p>Title 3</p></div>
</div>
<div class="image-container">
<img src="image4.jpg">
<div><p>Title 4</p></div>
</div>
<div class="image-container">
<img src="image5.jpg">
<div><p>Title 5</p></div>
</div>
<div class="image-container">
<img src="image1.jpg">
<div><p>Title 1</p></div>
</div>
<div class="image-container">
<img src="image2.jpg">
<div><p>Title 2</p></div>
</div>
<div class="image-container">
<img src="image3.jpg">
<div><p>Title 3</p></div>
</div>
<div class="image-container">
<img src="image4.jpg">
<div><p>Title 4</p></div>
</div>
<div class="image-container">
<img src="image5.jpg">
<div><p>Title 5</p></div>
</div>
<div class="image-container">
<img src="image1.jpg">
<div><p>Title 1</p></div>
</div>
<div class="image-container">
<img src="image2.jpg">
<div><p>Title 2</p></div>
</div>
<div class="image-container">
<img src="image3.jpg">
<div><p>Title 3</p></div>
</div>
<div class="image-container">
<img src="image4.jpg">
<div><p>Title 4</p></div>
</div>
<div class="image-container">
<img src="image5.jpg">
<div><p>Title 5</p></div>
</div>
<div class="image-container">
<img src="image1.jpg">
<div><p>Title 1</p></div>
</div>
<div class="image-container">
<img src="image2.jpg">
<div><p>Title 2</p></div>
</div>
<div class="image-container">
<img src="image3.jpg">
<div><p>Title 3</p></div>
</div>
<div class="image-container">
<img src="image4.jpg">
<div><p>Title 4</p></div>
</div>
<div class="image-container">
<img src="image5.jpg">
<div><p>Title 5</p></div>
</div>
<div class="image-container">
<img src="image1.jpg">
<div><p>Title 1</p></div>
</div>
<div class="image-container">
<img src="image2.jpg">
<div><p>Title 2</p></div>
</div>
<div class="image-container">
<img src="image3.jpg">
<div><p>Title 3</p></div>
</div>
<div class="image-container">
<img src="image4.jpg">
<div><p>Title 4</p></div>
</div>
<div class="image-container">
<img src="image5.jpg">
<div><p>Title 5</p></div>
</div>
<div class="image-container">
<img src="image1.jpg">
<div><p>Title 1</p></div>
</div>
<div class="image-container">
<img src="image2.jpg">
<div><p>Title 2</p></div>
</div>
<div class="image-container">
<img src="image3.jpg">
<div><p>Title 3</p></div>
</div>
<div class="image-container">
<img src="image4.jpg">
<div><p>Title 4</p></div>
</div>
<div class="image-container">
<img src="image5.jpg">
<div><p>Title 5</p></div>
</div>
<div class="image-container">
<img src="image1.jpg">
<div><p>Title 1</p></div>
</div>
<div class="image-container">
<img src="image2.jpg">
<div><p>Title 2</p></div>
</div>
<div class="image-container">
<img src="image3.jpg">
<div><p>Title 3</p></div>
</div>
<div class="image-container">
<img src="image4.jpg">
<div><p>Title 4</p></div>
</div>
<div class="image-container">
<img src="image5.jpg">
<div><p>Title 5</p></div>
</div>
<div class="image-container">
<img src="image1.jpg">
<div><p>Title 1</p></div>
</div>
<div class="image-container">
<img src="image2.jpg">
<div><p>Title 2</p></div>
</div>
<div class="image-container">
<img src="image3.jpg">
<div><p>Title 3</p></div>
</div>
<div class="image-container">
<img src="image4.jpg">
<div><p>Title 4</p></div>
</div>
<div class="image-container">
<img src="image5.jpg">
<div><p>Title 5</p></div>
</div>
<div class="image-container">
<img src="image1.jpg">
<div><p>Title 1</p></div>
</div>
<div class="image-container">
<img src="image2.jpg">
<div><p>Title 2</p></div>
</div>
<div class="image-container">
<img src="image3.jpg">
<div><p>Title 3</p></div>
</div>
<div class="image-container">
<img src="image4.jpg">
<div><p>Title 4</p></div>
</div>
<div class="image-container">
<img src="image5.jpg">
<div><p>Title 5</p></div>
</div>
<div class="image-container">
<img src="image1.jpg">
<div><p>Title 1</p></div>
</div>
<div class="image-container">
<img src="image2.jpg">
<div><p>Title 2</p></div>
</div>
<div class="image-container">
<img src="image3.jpg">
<div><p>Title 3</p></div>
</div>
<div class="image-container">
<img src="image4.jpg">
<div><p>Title 4</p></div>
</div>
<div class="image-container">
<img src="image5.jpg">
<div><p>Title 5</p></div>
</div>
<div class="image-container">
<img src="image6.jpg">
<div><p>Title 6</p></div>
</div>
</div>
</body>
</html>
Reference in a new issue Copy permalink