Layouts
You may choose between three layout types.
One Column Layout
The One Column Layout is ideal for inner pages, meaning the pages that come after the module overview and contain the majority of the learning content. Its simple single-column design allows content to flow from top to bottom keeping the learner's focus on one item at a time. This layout is great for text heavy and information heavy sections.
<!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/@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="">
<div class="text-container">
<h1>Course Introduction</h1>
<p>In this course, we will delve into the principles of...</p>
</div>
</header>
<div id="content-wrapper">
<div class="content-body">
<h2>Welcome to [course name here]</h2>
<p>Throughout this course, you will learn how to develop your writing process, from initial brainstorming to...</p>
</div>
</div>
<footer>
<div id="footer">
<p class="text-center toggle-footnotes">[Show Footnotes]</p>
<div class="footnotes">
<p>As we progress, remember that...</p>
<ul>
<li>Engage in structured revision...</li>
<li>Practice editing for clarity and...</li>
</ul>
</div>
</div>
</footer>
</body>
</html>
Two Column Layout
The Two Column Layout is ideal for module overviews. In the larger left-column you can place primary content such as learning objectives, required readings, or homework. In the smaller right-column you can place supplementary content such as an assignments list, image gallery, or vocabulary list.
<!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/@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="">
<div class="text-container">
<h1>Course Introduction</h1>
<p>This course will cover essential writing skills that will...</p>
</div>
</header>
<div id="content-wrapper">
<div class="content-body">
<h2>Welcome to [course name here]</h2>
<p>In this course, you’ll explore various writing techniques designed to enhance your academic writing. From understanding the importance of...</p>
</div>
</div>
<div id="second-column">
<div class="content-body">
<h2>Assignments</h2>
<p>Each week, you’ll be assigned a series of tasks designed to build on the skills you’ve learned. These assignments will...</p>
</div>
</div>
<footer>
<div id="footer">
<p class="text-center toggle-footnotes">[Show Footnotes]</p>
<div class="footnotes">
<p>Remember that writing is a process. Be sure to allocate enough time for...</p>
<ul>
<li>Engage actively in...</li>
<li>Revise your drafts thoroughly before...</li>
</ul>
</div>
</div>
</footer>
</body>
</html>Three Section Layout
The Three Section Layout displays two columns with a full-width column underneath. This layout is a combination of both previous layouts and is ideal for overview modules when the overview content is more involved.
<!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/@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="">
<div class="text-container">
<h1>Course Introduction</h1>
<p>This introductory writing course will...</p>
</div>
</header>
<div id="content-wrapper">
<div class="content-body">
<h2>Welcome to [course name here]</h2>
<p>In this course, we’ll cover topics such as developing a strong thesis statement, organizing your...</p>
</div>
</div>
<div id="second-column">
<div class="content-body">
<h2>Assignments</h2>
<p>Each week, you’ll have assignments that build on previous lessons...</p>
</div>
</div>
<div id="third-column">
<div class="content-body">
<h2>Readings for this Week</h2>
<p>This week’s readings will introduce you to key writing principles, such as...</p>
</div>
</div>
<footer>
<div id="footer">
<p class="text-center toggle-footnotes">[Show Footnotes]</p>
<div class="footnotes">
<p>Writing is a recursive process. Remember to...</p>
<ul>
<li>Take time to review your peers' essays and provide...</li>
<li>Ensure each essay has a clear...</li>
</ul>
</div>
</div>
</footer>
</body>
</html>