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>

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;
}