Jan Andrle
352632e5a5
[Commons:Picture of the day - Wikimedia Commons](https://commons.wikimedia.org/wiki/Commons:Picture_of_the_day)
28 lines
946 B
HTML
28 lines
946 B
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Bing Image Of The Day</title>
|
|
<style>
|
|
body{ display: flex; flex-flow: row nowrap;
|
|
width: 100vw; height: 100vh; overflow: hidden; margin: 0;
|
|
}
|
|
div{ position: relative; flex: 1; }
|
|
img{ height: 100%; width: 100%; object-fit: cover; }
|
|
.detail{ position: absolute; bottom: 0; left: 0; padding: .5rem 1rem;
|
|
max-width: 35ch;
|
|
text-align: center; background: rgba(0, 0, 0, .35); color: whitesmoke; }
|
|
.prev .detail{ left: initial; right: 0; }
|
|
@media screen and (max-aspect-ratio: 16/9){
|
|
.prev{display: none;}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="now"> <img src="now.jpg"> <div class="detail">::now::</div> </div>
|
|
<div class="prev"> <img src="prev.jpg"> <div class="detail">::prev::</div> </div>
|
|
</body>
|
|
</html>
|