Two columns layout. Step with navigation to launch another Topics with an image in the second column.
Class name:
ims-player-crossroad
HTML Code:
<table border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tbody>
<tr>
<td style="padding:10px 20px">
<h2>Turn your users into super users</h2>
<br />
<div class="ims-player-crossroad-item" onclick="inline_manual_player.activateTopic();">
<div class="ims-player-crossroad-first-col">
<img alt="" src="https://files-storage.inlinemanual.com/1c475844-d14d-43e1-9ecc-a87d8289a8b0.png" />
<p>2 minutes</p>
</div>
<div style="padding-top:6px">
<strong>Get started</strong>
<p>Lorem ipsum just a test for your herepsdea itgum rixt.</p>
</div>
</div>
<br />
<div class="ims-player-crossroad-item" onclick="inline_manual_player.activateTopic();">
<div class="ims-player-crossroad-first-col">
<img alt="" src="https://files-storage.inlinemanual.com/1c475844-d14d-43e1-9ecc-a87d8289a8b0.png" />
<p>2 minutes</p>
</div>
<div style="padding-top:6px">
<strong>Get started</strong>
<p>Lorem ipsum just a test for your herepsdea itgum rixt.</p>
</div>
</div>
<br />
<div class="ims-player-crossroad-item" onclick="inline_manual_player.activateTopic();">
<div class="ims-player-crossroad-first-col">
<img alt="" src="https://files-storage.inlinemanual.com/1c475844-d14d-43e1-9ecc-a87d8289a8b0.png" />
<p>2 minutes</p>
</div>
<div style="padding-top:6px">
<strong>Get started</strong>
<p>Lorem ipsum just a test for your herepsdea itgum rixt.</p>
</div>
</div>
<br />
</td>
<td style="background-color:#374388; padding:0; width:240px"><img alt="" height="293" src="https://files-storage.inlinemanual.com/6213183f-b85f-4144-9499-f3dae5bdbc3a.png" width="240" /></td>
</tr>
</tbody>
</table>
HTML
CSS Code:
.ims-player-crossroad .inmplayer-popover-content {
padding: 0;
}
.ims-player-crossroad .ims-player-crossroad-item {
cursor: pointer;
border: 1px solid #E4E4E4;
border-radius: 5px;
padding: 10px 0;
}
.ims-player-crossroad .ims-player-crossroad-item:after {
content: "";
display: table;
clear: both;
}
.ims-player-crossroad .ims-player-crossroad-item:hover {
box-shadow: 1px 1px 10px #c0c0c0;
}
.ims-player-crossroad .ims-player-crossroad-first-col {
width:100px;
float:left;padding: 0;
text-align: center;
border-right: 1px solid #c0c0c0;
margin-right:10px;
}
CSS