58 lines
1.5 KiB
HTML
58 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<header>
|
|
<title>Galerie</title>
|
|
</header>
|
|
<body>
|
|
<style>
|
|
|
|
body {
|
|
background-color: black;
|
|
}
|
|
img {
|
|
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
|
|
filter: grayscale(100%);
|
|
}
|
|
img:hover {
|
|
filter: none;
|
|
-webkit-filter: none;
|
|
}
|
|
.images {
|
|
-webkit-column-count: 3; /* Chrome, Safari, Opera */
|
|
-moz-column-count: 3; /* Firefox */
|
|
column-count: 3;
|
|
column-gap: 40px;
|
|
}
|
|
@media only screen and (max-width: 1000px) {
|
|
.images {
|
|
-webkit-column-count: 2; /* Chrome, Safari, Opera */
|
|
-moz-column-count: 2; /* Firefox */
|
|
column-count: 2;
|
|
column-gap: 40px;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 500) {
|
|
.images {
|
|
-webkit-column-count: 1; /* Chrome, Safari, Opera */
|
|
-moz-column-count: 1; /* Firefox */
|
|
column-count: 1;
|
|
column-gap: 40px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="images">
|
|
<p><img src="assets1/1.png"></p>
|
|
<p><img src="assets1/2.png"></p>
|
|
<p><img src="assets1/3.png"></p>
|
|
<p><img src="assets1/4.png"></p>
|
|
<p><img src="assets1/5.png"></p>
|
|
<p><img src="assets1/6.png"></p>
|
|
<p><img src="assets1/7.png"></p>
|
|
<p><img src="assets1/8.png"></p>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|