A sample Canvas front page using icons to link to course content

sample_icons.html

<div style="text-align: center;">
<div style="max-width: 700px; display: inline-block;">
	<div style="padding: 10px; display: inline-block; text-align: center;"><a href="LINK"><img src="http://mrskrummel.com/canvas/icons/blue/clipboard.png" width="110" height="110" /></a><br /><a href="LINK">Course Overview</a></div>
	<div style="padding: 10px; display: inline-block; text-align: center;"><a href="LINK"><img src="http://mrskrummel.com/canvas/icons/blue/pencil_ruler" width="110" height="110" /></a><br /><a href="LINK">Modules</a></div>
	<div style="padding: 10px; display: inline-block; text-align: center;"><a href="LINK"><img src="http://mrskrummel.com/canvas/icons/blue/resources.png" width="110" height="110" /></a><br /><a href="LINK">Resources</a></div>
	<div style="padding: 10px; display: inline-block; text-align: center;"><a href="LINK"><img src="http://mrskrummel.com/canvas/icons/blue/gear" width="110" height="110" /></a><br /><a href="LINK">LaTeX</a></div>
	<div style="padding: 10px; display: inline-block; text-align: center;"><a href="LINK"><img src="http://mrskrummel.com/canvas/icons/blue/magnify" width="110" height="110" /></a><br /><a href="LINK">IA Exploration</a></div>
	<div style="padding: 10px; display: inline-block; text-align: center;"><a href="LINK"><img src="http://mrskrummel.com/canvas/icons/blue/youtube" width="110" height="110" /></a><br /><a href="LINK">YouTube</a></div>
	<div style="padding: 10px; display: inline-block; text-align: center;"><a href="LINK"><img src="http://mrskrummel.com/canvas/icons/blue/woman" width="110" height="110" /></a><br /><a href="LINK">Ms. Krummel</a></div>
	<div style="padding: 10px; display: inline-block; text-align: center;"><a href="LINK"><img src="http://mrskrummel.com/canvas/icons/blue/zigzag" width="110" height="110" /></a><br /><a href="LINK">Memes</a></div>
</div>
</div>

<div style="margin-top: 18px; background-color: #053958; width: 100%; height: 12pt;">&nbsp;</div>
<div style="padding: 0px 16px 12px 16px; background-color: #f5f5f5; border: 1px solid #C7CDD1;">
<div style="text-align: center;">
<div style="max-width: 700px; display: inline-block;">
<h2><strong>How to be More Successful in Math:</strong></h2>
	<ol style="text-align: left;">
		<li style="margin-bottom: 4px;">Read through the upcoming lesson the night before class.</li>
		<li style="margin-bottom: 4px;">Practice focused note-taking. Process your notes within 24 hours of class. Review and summarize your notes within a few days.</li>
		<li style="margin-bottom: 4px;">Know your preferred learning style and adopt strategies that help you learn more effectively.</li>
		<li style="margin-bottom: 4px;">Try the homework ON YOUR OWN first. Then, check your answers and seek help if you need it.</li>
		<li style="margin-bottom: 4px;">Visit Ms. Krummel during office hours: Tuesdays and Thursdays 2:15-3:15.</li>
	</ol>
</div>
</div>
</div>
<div style="margin-bottom: 18px; background-color: #053958; width: 100%; height: 12pt;">&nbsp;</div>
<p>&nbsp;</p>