sample_lesson.html

<h2 style="background-color: #053958; color: #fff; text-align: center;">Unit 1: Differentiation and Integration</h2>
<div style="padding: 2px 0px 16px 0px;">
<div style="padding: 12px 16px; background-color: #f5f5f5; border: 1px solid #C7CDD1;">
<h4><strong>Today's Agenda:</strong></h4>
<ol>
<li>Warm Up: XXX</li>
<li>XXX: Notes | Presentation</li>
<li>Extra Practice: Khan Academy</li>
</ol>
</div>
</div>
<h2 style="background-color: #1385a2; color: #fff; text-align: center;">Assignment</h2>
<div style="padding: 2px 0px 16px 0px;">
<div style="padding: 12px 16px; background-color: #f5f5f5; border: 1px solid #C7CDD1; min-height: 84px;">
<div>
<div style="width: 100px; float: left; display: inline-block;"><!-- The icon goes here. Adjust the px value to suit the needs 
        of your image -->
<img style="min-width: 80px; padding: 0px 12px 0px 0px;" src="https://docs.google.com/drawings/d/e/2PACX-1vQF59pFk3HtoMp8vGIlMgrm8hbUaZolH2QmwNDilm1jOLsnqnLF3NPyPEWpdlK-iOyGsLImHQRPZLx3/pub?w=432&amp;h=360" alt="hand.png" width="80" height="67" /></div>
<div style="margin-left: 100px;"><!-- This is the text content. Match the px value of the margin-left rule to the width of the icon content div.  -->
<ul>
<li>Process your notes</li>
<li>Unit 1 Packet #XXX | solutions</li>
<li>Composition Book: CTQ XXX</li>
</ul>
</div>
</div>
</div>
</div>
<p>&nbsp;</p>