overlay.html
<html>
<head>
<style>
body {
font-family:Futura;
}
table {
border-collapse:collapse;
}
td {
border-left:2px solid black;
border-right:2px solid black;
}
th {
padding-bottom:10px;
}
.file {
border-radius:10px;
width:100px;
height:50px;
line-height:50px;
color:white;
font-size:30px;
text-align:center;
box-shadow:10px 10px;
}
.blue {
background:#0099ff;
}
.green {
background:#00cc99;
}
.plus, .equals, .arrow {
font-size:50px;
vertical-align:middle;
text-align:center;
}
.plus, .equals {
margin:0px 50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>STREAM1</th>
<th></th>
<th>STREAM2</th>
<th></th>
<th>OVERLAYED</th>
</tr>
<tr>
<td></td>
<td rowspan="9"><div class="plus">+</div></td>
<td><div class="file green">FILE9</div></td>
<td rowspan="9"><div class="equals">=</div></td>
<td><div class="file green">FILE9</div></td>
</tr>
<tr>
<td><div class="file blue">FILE8</div></td>
<td></td>
<td><div class="file blue">FILE8</div></td>
</tr>
<tr>
<td><div class="file blue">FILE7</div></td>
<td><div class="file green">FILE7</div></td>
<td><div class="file green">FILE7</div></td>
</tr>
<tr>
<td><div class="file blue">FILE6</div></td>
<td><div class="file green">FILE6</div></td>
<td><div class="file green">FILE6</div></td>
</tr>
<tr>
<td><div class="file blue">FILE5</div></td>
<td></td>
<td><div class="file blue">FILE5</div></td>
</tr>
<tr>
<td><div class="file blue">FILE4</div></td>
<td></td>
<td><div class="file blue">FILE4</div></td>
</tr>
<tr>
<td><div class="file blue">FILE3</div></td>
<td><div class="file green">FILE3</div></td>
<td><div class="file green">FILE3</div></td>
</tr>
<tr>
<td><div class="file blue">FILE2</div></td>
<td></td>
<td><div class="file blue">FILE2</div></td>
</tr>
<tr>
<td><div class="file blue">FILE1</div></td>
<td></td>
<td><div class="file blue">FILE1</div></td>
</tr>
<tr>
<td><div class="arrow">⬇</div></td>
<td></td>
<td><div class="arrow">⬇</div></td>
<td></td>
<td><div class="arrow">⬇</div></td>
</tr>
</body>
</html>