Inspirational Structure
Give students a clear idea of the course overview and objects, while also providing a bit of encouragement and support. With opportunities for images throughout, this layout will feel visually balanced rather than intimidating chunks of text. Plus, give them quick reference shortcuts to the resources they'll need throughout the semester.
Template Preview
Featured Widgets
Border
Call out a main idea, draw attention to learning objectives or any other content that needs to stand out.
Vocab Cards
More than just for vocab! Use these subtly-interactive cards to build on a standard list.
Side-by-Side
Display two horizontal containers that can contain any content.
Blockquote
Separate any block of text along with supportive quotes. Call out phrases from the text or just relevant inspiration.
Image Gallery
Break up large chunks of text or add some flair to your course shell with imagery.
<!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>Course Introduction</title>
</head>
<body>
<header class="header">
<img src="https://via.placeholder.com/1920X600" alt="Course Banner">
<div class="text-container">
<h1>Course Introduction</h1>
<p>Welcome to Writing 101! In this course, you’ll...</p>
</div>
</header>
<div id="content-wrapper">
<div class="content-body">
<h2>Welcome to [course name here]</h2>
<p>Writing is more than putting words on paper—it's about structuring thoughts in a coherent way to communicate effectively. In this course, you’ll...</p>
<div class="border">
<p>Key writing principles we'll explore include:
<ul>
<li>Building strong thesis...</li>
<li>Organizing ideas logically...</li>
</ul>
</p>
</div>
<h3>What You Will Learn</h3>
<p>Throughout this course, you will learn to write various types of essays, develop critical thinking, and use evidence to support your arguments. By the end...</p>
<dl class="vocab-cards">
<div class="vocab">
<dt>Thesis Development</dt>
<dd>You'll learn to create strong, arguable thesis statements that...</dd>
<ul>
<li class="caption">Practice writing thesis statements for different types...</li>
</ul>
</div>
<div class="vocab">
<dt>Organizing Ideas</dt>
<dd>Master the art of logically structuring your...</dd>
</div>
<div class="vocab">
<dt>Evidence & Support</dt>
<dd>Understand how to use evidence to back up your points and strengthen...</dd>
<ul>
<li class="caption">Cite credible sources to enhance your essays...</li>
</ul>
</div>
<div class="vocab">
<dt>Revising & Editing</dt>
<dd>Learn the importance of drafting, receiving feedback, and...</dd>
</div>
<div class="vocab">
<dt>Writing Styles</dt>
<dd>Discover different styles of writing, from...</dd>
<ul>
<li class="caption">Experiment with formal and informal styles...</li>
<li class="caption">Adapt your tone to different audiences...</li>
<li class="caption">Refine your writing style through feedback...</li>
</ul>
</div>
</dl>
<h4>And don't forget...</h4>
<p>Writing is a process that requires practice. Dedicate time to...</p>
</div>
<div class="content-body">
<h2>Some Inspiration as You Begin</h2>
<p>Writing can be challenging, but remember that...</p>
<div class="side-by-side">
<div class="side-by-side-item">
<img src="https://via.placeholder.com/300" alt="Inspiration Image" />
</div>
<div class="side-by-side-item">
<hr>
<blockquote class="text-center">"Commit yourself to..."
<br><br>
<span class="caption">– Albert...</span>
</blockquote>
<hr>
</div>
</div>
</div>
<div class="content-body">
<div class="image-gallery">
<div class="gallery-wrapper">
<div class="image-box">
<img src="https://picsum.photos/id/1018/400/200" alt="Gallery Image 1" />
</div>
<div class="image-box">
<img src="https://picsum.photos/id/1047/300/400" alt="Gallery Image 2" />
</div>
<div class="image-box">
<img src="https://picsum.photos/id/1059/500/300" alt="Gallery Image 3" />
</div>
<div class="image-box">
<img src="https://picsum.photos/id/119/500/300" alt="Gallery Image 4" />
</div>
<div class="image-box">
<img src="https://picsum.photos/id/143/800/200" alt="Gallery Image 5" />
</div>
</div>
</div>
</div>
</div>
<footer>
<div id="footer">
<p class="text-center toggle-footnotes">[Show Footnotes]</p>
<div class="footnotes">
<p>Remember, writing is a skill that...</p>
<ul>
<li>Review peer essays and provide constructive feedback...</li>
<li>Revise your drafts based on feedback received...</li>
</ul>
</div>
</div>
</footer>
</body>
</html>