Visual Overview
Keep things concise with this template, providing a brief topic overview, neatly arranged tasks & due dates, some relevant imagery, and a key quote from the text. Students will appreciate the direction, without being overwhelmed by information.
Template Preview
Featured Widgets
Table
Display tasks, due dates, and more in an organized and clear manner.
Blockquote
Separate any block of text with attention-grabbing key quotes
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@pimaonline/pimaonline-themepack/dist/css/themes/cards/styles.css">
<link rel="stylesheet" type="text/css" href="../css/custom.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js" defer></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@pimaonline/pimaonline-themepack/dist/js/scripts2.js" defer></script>
<title>Module One: Introduction</title>
</head>
<body>
<header class="header"> <img src="https://via.placeholder.com/1920X600" alt="">
<div class="text-container">
<h1>Module One: Introduction</h1>
<p>Welcome to the beginning of our exploration into fundamental concepts. This...</p>
</div>
</header>
<div id="content-wrapper">
<div class="content-body">
<h2 class="icon-bolt">Overview of Module</h2>
<p>In this module, we will delve into core concepts that form the basis...</p>
<p> Throughout this module, you'll be exposed to...</p>
<h2 class="icon-list">Learning Objectives</h2>
<p class="icon-lightbulb">In this section, we will outline the goals of this module. By the end, you should be able to:
<ul>
<li>Understand fundamental...</li>
<li>Apply theories to...</li>
<li>Participate in discussions and...</li>
</ul>
</p>
<table class="display-lg" cellpadding="5" cellspacing="0" width="100%">
<thead>
<tr>
<th scope="col">Activity</th>
<th scope="col">Location</th>
<th scope="col">Estimated Time</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="">Lecture</a></td>
<td>Online Platform</td>
<td>15 min</td>
</tr>
<tr>
<td><a href="">Reading</a></td>
<td>Course Text</td>
<td>45 min</td>
</tr>
<tr>
<td><a href="">Discussion Forum</a></td>
<td>Course Forum</td>
<td>30 min</td>
</tr>
<tr>
<td><a href="">Workshop</a></td>
<td>Interactive Lab</td>
<td>40 min</td>
</tr>
<tr>
<td><a href="">Assignment</a></td>
<td>Online Submission</td>
<td>25 min</td>
</tr>
<tr>
<th>Total Time</th>
<th></th>
<th>~3 hours 35 min</th>
</tr>
</tbody>
</table>
</div>
</div>
<div id="second-column">
<div class="content-body">
<div class="card-img"> <img src="https://via.placeholder.com/300" alt="" />
<figcaption class="caption">Figure 1.1: Visual representation of...</figcaption>
</div>
</div>
<div class="content-body">
<div class="card-img"> <img src="https://via.placeholder.com/300" alt="" />
<figcaption class="caption">Figure 1.2: Example of application. Here we see...</figcaption>
</div>
</div>
<div class="content-body">
<blockquote class="text-center">The best way to predict the future is...</blockquote>
</div>
</div>
<footer>
<div id="footer">
<p class="text-center toggle-footnotes">[Show Footnotes]</p>
<div class="footnotes">
<p>As we advance, remember that...</p>
<ul>
<li>Concepts explained in...</li>
<li>Examples and...</li>
</ul>
</div>
</div>
</footer>
</body>
</html>