|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<style> |
|
|
html, body { |
|
|
margin:0; padding:0; |
|
|
width:100vw; height:100vh; |
|
|
display:flex; |
|
|
justify-content:center; |
|
|
align-items:flex-start; |
|
|
background:#000; |
|
|
overflow:hidden; |
|
|
} |
|
|
|
|
|
.grid-container { |
|
|
display: grid; |
|
|
width: 50vw; |
|
|
height: 50vh; |
|
|
grid-template-columns: 1fr 2fr 1fr 2fr; |
|
|
grid-template-rows: repeat(5, 1fr); |
|
|
gap: 0; |
|
|
|
|
|
} |
|
|
|
|
|
img, video { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
display: block; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="grid-container"> |
|
|
|
|
|
<img src="1.webp" alt="1"> |
|
|
<video src="1.mp4" autoplay loop muted></video> |
|
|
<img src="2.webp" alt="2"> |
|
|
<video src="2.mp4" autoplay loop muted></video> |
|
|
|
|
|
|
|
|
<img src="3.webp" alt="3"> |
|
|
<video src="3.mp4" autoplay loop muted></video> |
|
|
<img src="4.webp" alt="4"> |
|
|
<video src="4.mp4" autoplay loop muted></video> |
|
|
|
|
|
|
|
|
<img src="5.webp" alt="5"> |
|
|
<video src="5.mp4" autoplay loop muted></video> |
|
|
<img src="6.webp" alt="6"> |
|
|
<video src="6.mp4" autoplay loop muted></video> |
|
|
|
|
|
|
|
|
<img src="7.webp" alt="7"> |
|
|
<video src="7.mp4" autoplay loop muted></video> |
|
|
<img src="8.webp" alt="8"> |
|
|
<video src="8.mp4" autoplay loop muted></video> |
|
|
|
|
|
|
|
|
<img src="9.webp" alt="9"> |
|
|
<video src="9.mp4" autoplay loop muted></video> |
|
|
<img src="10.webp" alt="10"> |
|
|
<video src="10.mp4" autoplay loop muted></video> |
|
|
</div> |
|
|
|
|
|
</body> |
|
|
</html> |
|
|
|
