Clean Grids
Provide some visual structure to your content with this template that leans into row- and column-based widgets. Include the weeks tasks in a table, provide key takeaways in card format, and offer supplemental video walkthroughs in a grid-like fashionl.
Template Preview
Featured Widgets
Table
Display tasks, due dates, and more in an organized and clear manner.
Vocab Cards
Not just for vocabulary! A versatile, interactive tile layout to display your content.
Video Gallery
Create a grid-like video gallery, with general information like title and video duration.
Callout
Invite students to explore more resources on any given topic.
<!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>Writing 101: Introduction</title>
</head>
<body>
<header class="header"> <img src="https://via.placeholder.com/1920X600" alt="">
<div class="text-container">
<h1>Writing 101: Introduction</h1>
<p>Welcome to Writing 101! In this course, you'll explore the...</p>
</div>
</header>
<div id="content-wrapper">
<div class="content-body">
<h2>Week 1: Getting Started</h2>
<p>This week, we'll dive into the essentials of academic writing. You'll...</p>
<h3>Weekly Agenda</h3>
<table class="display-lg">
<thead>
<tr>
<th>Task</th>
<th>Points</th>
<th>Deadline</th>
</tr>
</thead>
<tbody>
<tr>
<td>Read Chapter 1: The Writing Process</td>
<td>5</td>
<td>Sept 4</td>
</tr>
<tr>
<td>Complete Essay Outline Assignment</td>
<td>15</td>
<td>Sept 4</td>
</tr>
<tr>
<td>Participate in Discussion Forum</td>
<td>10</td>
<td>Sept 6</td>
</tr>
<tr>
<td>Submit Essay Draft</td>
<td>20</td>
<td>Sept 8</td>
</tr>
</tbody>
</table>
<h3>Key Points</h3>
<p>This week's focus is on the basics of essay writing. Pay attention to how...</p>
<p>Be sure to review the chapter thoroughly and complete all...</p>
<ul class="vocab-cards">
<li class="vocab">
<dt>Thesis Statement</dt>
<dd>A statement that presents the main argument or point of...</dd>
</li>
<li class="vocab">
<dt>Topic Sentence</dt>
<dd>The first sentence in a paragraph that introduces the...</dd>
</li>
<li class="vocab">
<dt>Evidence</dt>
<dd>Information, facts, or details that support the claims made in...</dd>
</li>
<li class="vocab">
<dt>Transition</dt>
<dd>Words or phrases used to link ideas and paragraphs together. Effective transitions help...</dd>
</li>
<li class="vocab">
<dt>Conclusion</dt>
<dd>The final paragraph of an essay that summarizes the main points and...</dd>
</li>
<li class="vocab">
<dt>Revision</dt>
<dd>The process of reviewing and making changes to a...</dd>
</li>
</ul>
</div>
<div class="content-body">
<h2>Additional Resources</h2>
<p>This section includes extra materials to enhance your understanding of...</p>
<div class="video-widget">
<div class="video-card">
<h3 class="font-size-h4">Introduction to Essay Writing</h3>
<hr>
<div class="card-content">
<p>(Video length: 4:00 minutes)</p>
<div class="media-container">
<div class="media-object">
<iframe src="https://www.youtube.com/embed/XzU8abGv9A4" title="YouTube video player?wmode=opaque" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen="" width="560" height="315" frameBorder="0"></iframe>
</div>
</div>
<a class="btn ext" href="https://www.youtube.com/embed/XzU8abGv9A4" target="_blank" rel="nonopener noopener">Watch on YouTube</a> </div>
</div>
<div class="video-card">
<h3 class="font-size-h4">Developing Strong Arguments</h3>
<hr>
<div class="card-content">
<p>(Video length: 3:20 minutes)</p>
<div class="media-container">
<div class="media-object">
<iframe src="https://www.youtube.com/embed/3FThZG38K6c" title="YouTube video player?wmode=opaque" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen="" width="560" height="315" frameBorder="0"></iframe>
</div>
</div>
<a class="btn ext" href="https://www.youtube.com/embed/3FThZG38K6c" target="_blank" rel="nonopener noopener">Watch on YouTube</a> </div>
</div>
<div class="video-card">
<h3 class="font-size-h4">Effective Editing Techniques</h3>
<hr>
<div class="card-content">
<p>(Video length: 5:00 minutes)</p>
<div class="media-container">
<div class="media-object">
<iframe src="https://www.youtube.com/embed/N0v99Ew0Z6Y" title="YouTube video player?wmode=opaque" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen="" width="560" height="315" frameBorder="0"></iframe>
</div>
</div>
<a class="btn ext" href="https://www.youtube.com/embed/N0v99Ew0Z6Y" target="_blank" rel="nonopener noopener">Watch on YouTube</a> </div>
</div>
</div>
<div class="call-out">
<p>Utilize these supplementary materials to further develop your...</p>
</div>
</div>
</div>
<footer>
<div id="footer">
<p class="text-center toggle-footnotes">[Show Footnotes]</p>
<div class="footnotes">
<p>Explore the various aspects of academic writing through our...</p>
<ul>
<li>Introduction to Writing...</li>
<li>Essay Structure Fundamentals...</li>
</ul>
</div>
</div>
</footer>
</body>
</html>