|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
|
|
<style> |
|
|
.grid-container { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(5, auto); |
|
|
grid-template-rows: repeat(2, auto); |
|
|
gap: 20px; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
margin: 50px; |
|
|
} |
|
|
|
|
|
.item { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
.item img { |
|
|
flex: 1; |
|
|
max-width: 100%; |
|
|
height: auto; |
|
|
} |
|
|
|
|
|
.item video { |
|
|
flex: 2; |
|
|
max-width: 100%; |
|
|
height: auto; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="grid-container"> |
|
|
<div class="item"> |
|
|
<img src="1.webp" alt="1"> |
|
|
<video src="1.mp4" autoplay loop muted></video> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<img src="2.webp" alt="2"> |
|
|
<video src="2.mp4" autoplay loop muted></video> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<img src="3.webp" alt="3"> |
|
|
<video src="3.mp4" autoplay loop muted></video> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<img src="4.webp" alt="4"> |
|
|
<video src="4.mp4" autoplay loop muted></video> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<img src="5.webp" alt="5"> |
|
|
<video src="5.mp4" autoplay loop muted></video> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<img src="6.webp" alt="6"> |
|
|
<video src="6.mp4" autoplay loop muted></video> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<img src="7.webp" alt="7"> |
|
|
<video src="7.mp4" autoplay loop muted></video> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<img src="8.webp" alt="8"> |
|
|
<video src="8.mp4" autoplay loop muted></video> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<img src="9.webp" alt="9"> |
|
|
<video src="9.mp4" autoplay loop muted></video> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<img src="10.webp" alt="10"> |
|
|
<video src="10.mp4" autoplay loop muted></video> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</body> |
|
|
</html> |
|
|
|
