60 lines
1.2 KiB
HTML
60 lines
1.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<style>
|
||
|
|
body{padding:0;margin:0;}
|
||
|
|
.grid-container {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: auto auto auto;
|
||
|
|
gap: 1px;
|
||
|
|
background-color: #113344;
|
||
|
|
padding: 1px;
|
||
|
|
height:100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container > div {
|
||
|
|
background-color: rgba(255, 255, 255, 0.8);
|
||
|
|
color: #113344;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 20vh;
|
||
|
|
line-height: 33vh;
|
||
|
|
}
|
||
|
|
.grid-container > div.item5 {
|
||
|
|
background-color: rgba(255, 255, 255, 0.8);
|
||
|
|
color: #222222;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight:bold;
|
||
|
|
line-height: 5vh;
|
||
|
|
position:relative;
|
||
|
|
}
|
||
|
|
.grid-container > div.item5 span {
|
||
|
|
position:absolute;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, 0);
|
||
|
|
width:100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container > div:hover {
|
||
|
|
background-color: #113344;
|
||
|
|
color: yellow;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="grid-container">
|
||
|
|
<div class="item1">↖</div>
|
||
|
|
<div class="item2">↑</div>
|
||
|
|
<div class="item3">↗</div>
|
||
|
|
<div class="item4">←</div>
|
||
|
|
<div class="item5"><span><br />hold <kbd>Ctrl+Shift</kbd><br />and click<br />in appropriate area<br />of any window</span></div>
|
||
|
|
<div class="item6">→</div>
|
||
|
|
<div class="item7">↙</div>
|
||
|
|
<div class="item8">↓</div>
|
||
|
|
<div class="item8">↘</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
|