Skip to content

Instantly share code, notes, and snippets.

@woodwardtw

woodwardtw/canvas-layout.html

Created September 8, 2021 15:13
Show Gist options
  • Save woodwardtw/8b4ea2cbeabbe636c14275680115a689 to your computer and use it in GitHub Desktop.
Save woodwardtw/8b4ea2cbeabbe636c14275680115a689 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
canvas-layout.html
<div class="kl_flex_columns_wrapper" style="margin-bottom: 30px;">
<div class="kl_flex_column">
<div class="kl_flex_columns_wrapper">
<div class="kl_flex_column"><img id="1445356" style="border-radius: 10px;" src="https://middlebury.instructure.com/courses/9255/files/1445356/preview" alt="One of your favorite teachers.jpg" data-api-endpoint="https://middlebury.instructure.com/api/v1/courses/9255/files/1445356" data-api-returntype="File" /></div>
<div class="kl_flex_column">
<h2 style="border-bottom: 1px solid #efefef;">Title</h2>
<h3>Date</h3>
</div>
</div>
</div>
<div class="kl_flex_column">
<div class="kl_flex_columns_wrapper">
<div class="kl_flex_column"><img id="1445356" style="border-radius: 10px;" src="https://middlebury.instructure.com/courses/9255/files/1445356/preview" alt="One of your favorite teachers.jpg" data-api-endpoint="https://middlebury.instructure.com/api/v1/courses/9255/files/1445356" data-api-returntype="File" /></div>
<div class="kl_flex_column">
<h2 style="border-bottom: 1px solid #efefef;">Title</h2>
<h3>Date</h3>
</div>
</div>
</div>
</div>
<div class="kl_flex_columns_wrapper" style="margin-bottom: 30px;">
<div class="kl_flex_column">
<div class="kl_flex_columns_wrapper">
<div class="kl_flex_column"><img id="1445356" style="border-radius: 10px;" src="https://middlebury.instructure.com/courses/9255/files/1445356/preview" alt="One of your favorite teachers.jpg" data-api-endpoint="https://middlebury.instructure.com/api/v1/courses/9255/files/1445356" data-api-returntype="File" /></div>
<div class="kl_flex_column">
<h2 style="border-bottom: 1px solid #efefef;">Title</h2>
<h3>Date</h3>
</div>
</div>
</div>
<div class="kl_flex_column">
<div class="kl_flex_columns_wrapper">
<div class="kl_flex_column"><img id="1445356" style="border-radius: 10px;" src="https://middlebury.instructure.com/courses/9255/files/1445356/preview" alt="One of your favorite teachers.jpg" data-api-endpoint="https://middlebury.instructure.com/api/v1/courses/9255/files/1445356" data-api-returntype="File" /></div>
<div class="kl_flex_column">
<h2 style="border-bottom: 1px solid #efefef;">Title</h2>
<h3>Date</h3>
</div>
</div>
</div>
</div>
<div class="kl_flex_columns_wrapper" style="margin-bottom: 30px;">
<div class="kl_flex_column">
<div class="kl_flex_columns_wrapper">
<div class="kl_flex_column"><img id="1445356" style="border-radius: 10px;" src="https://middlebury.instructure.com/courses/9255/files/1445356/preview" alt="One of your favorite teachers.jpg" data-api-endpoint="https://middlebury.instructure.com/api/v1/courses/9255/files/1445356" data-api-returntype="File" /></div>
<div class="kl_flex_column">
<h2 style="border-bottom: 1px solid #efefef;">Title</h2>
<h3>Date</h3>
</div>
</div>
</div>
<div class="kl_flex_column">
<div class="kl_flex_columns_wrapper">
<div class="kl_flex_column"><img id="1445356" style="border-radius: 10px;" src="https://middlebury.instructure.com/courses/9255/files/1445356/preview" alt="One of your favorite teachers.jpg" data-api-endpoint="https://middlebury.instructure.com/api/v1/courses/9255/files/1445356" data-api-returntype="File" /></div>
<div class="kl_flex_column">
<h2 style="border-bottom: 1px solid #efefef;">Title</h2>
<h3>Date</h3>
</div>
</div>
</div>
</div>
<div class="kl_flex_columns_wrapper" style="margin-bottom: 30px;">
<div class="kl_flex_column">
<div class="kl_flex_columns_wrapper">
<div class="kl_flex_column"><img id="1445356" style="border-radius: 10px;" src="https://middlebury.instructure.com/courses/9255/files/1445356/preview" alt="One of your favorite teachers.jpg" data-api-endpoint="https://middlebury.instructure.com/api/v1/courses/9255/files/1445356" data-api-returntype="File" /></div>
<div class="kl_flex_column">
<h2 style="border-bottom: 1px solid #efefef;">Title</h2>
<h3>Date</h3>
</div>
</div>
</div>
<div class="kl_flex_column">
<div class="kl_flex_columns_wrapper">
<div class="kl_flex_column"><img id="1445356" style="border-radius: 10px;" src="https://middlebury.instructure.com/courses/9255/files/1445356/preview" alt="One of your favorite teachers.jpg" data-api-endpoint="https://middlebury.instructure.com/api/v1/courses/9255/files/1445356" data-api-returntype="File" /></div>
<div class="kl_flex_column">
<h2 style="border-bottom: 1px solid #efefef;">Title</h2>
<h3>Date</h3>
</div>
</div>
</div>
</div>
<div class="kl_flex_columns_wrapper" style="margin-bottom: 30px;">
<div class="kl_flex_column">
<div class="kl_flex_columns_wrapper">
<div class="kl_flex_column"><img id="1445356" style="border-radius: 10px;" src="https://middlebury.instructure.com/courses/9255/files/1445356/preview" alt="One of your favorite teachers.jpg" data-api-endpoint="https://middlebury.instructure.com/api/v1/courses/9255/files/1445356" data-api-returntype="File" /></div>
<div class="kl_flex_column">
<h2 style="border-bottom: 1px solid #efefef;">Title</h2>
<h3>Date</h3>
</div>
</div>
</div>
<div class="kl_flex_column">
<div class="kl_flex_columns_wrapper">
<div class="kl_flex_column"><img id="1445356" style="border-radius: 10px;" src="https://middlebury.instructure.com/courses/9255/files/1445356/preview" alt="One of your favorite teachers.jpg" data-api-endpoint="https://middlebury.instructure.com/api/v1/courses/9255/files/1445356" data-api-returntype="File" /></div>
<div class="kl_flex_column">
<h2 style="border-bottom: 1px solid #efefef;">Title</h2>
<h3>Date</h3>
</div>
</div>
</div>
</div>
<div class="kl_flex_columns_wrapper" style="margin-bottom: 30px;">
<div class="kl_flex_column">
<div class="kl_flex_columns_wrapper">
<div class="kl_flex_column"><img id="1445356" style="border-radius: 10px;" src="https://middlebury.instructure.com/courses/9255/files/1445356/preview" alt="One of your favorite teachers.jpg" data-api-endpoint="https://middlebury.instructure.com/api/v1/courses/9255/files/1445356" data-api-returntype="File" /></div>
<div class="kl_flex_column">
<h2 style="border-bottom: 1px solid #efefef;">Title</h2>
<h3>Date</h3>
</div>
</div>
</div>
<div class="kl_flex_column">
<div class="kl_flex_columns_wrapper">
<div class="kl_flex_column"><img id="1445356" style="border-radius: 10px;" src="https://middlebury.instructure.com/courses/9255/files/1445356/preview" alt="One of your favorite teachers.jpg" data-api-endpoint="https://middlebury.instructure.com/api/v1/courses/9255/files/1445356" data-api-returntype="File" /></div>
<div class="kl_flex_column">
<h2 style="border-bottom: 1px solid #efefef;">Title</h2>
<h3>Date</h3>
</div>
</div>
</div>
</div>
<div class="kl_flex_columns_wrapper" style="margin-bottom: 30px;">
<div class="kl_flex_column">
<div class="kl_flex_columns_wrapper">
<div class="kl_flex_column"><img id="1445356" style="border-radius: 10px;" src="https://middlebury.instructure.com/courses/9255/files/1445356/preview" alt="One of your favorite teachers.jpg" data-api-endpoint="https://middlebury.instructure.com/api/v1/courses/9255/files/1445356" data-api-returntype="File" /></div>
<div class="kl_flex_column">
<h2 style="border-bottom: 1px solid #efefef;">Title</h2>
<h3>Date</h3>
</div>
</div>
</div>
<div class="kl_flex_column">
<div class="kl_flex_columns_wrapper">
<div class="kl_flex_column"><img id="1445356" style="border-radius: 10px;" src="https://middlebury.instructure.com/courses/9255/files/1445356/preview" alt="One of your favorite teachers.jpg" data-api-endpoint="https://middlebury.instructure.com/api/v1/courses/9255/files/1445356" data-api-returntype="File" /></div>
<div class="kl_flex_column">
<h2 style="border-bottom: 1px solid #efefef;">Title</h2>
<h3>Date</h3>
</div>
</div>
</div>
</div>
<p>&nbsp;</p>
<div class="bs-container">
<div class="bs-row">
<div class="bs-col-md">
<p>Content a</p>
</div>
<div class="bs-col-md">
<p>Content b</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<div class="kl_flex_columns_wrapper">
<div class="kl_flex_column">
<h4>Module 0</h4>
<p class="">Dates</p>
</div>
<div class="kl_flex_column">
<h4>Module 1</h4>
<p class="">Dates</p>
</div>
</div>
<p>&nbsp;</p>
<div class="kl_flex_columns_wrapper">
<div class="kl_flex_column">
<h4>Module 2</h4>
<p class="">Dates</p>
</div>
<div class="kl_flex_column">
<h4>Module 3</h4>
<p class="">Dates</p>
</div>
</div>
<p>&nbsp;</p>
<div class="kl_flex_columns_wrapper">
<div class="kl_flex_column">
<h4>Module 4</h4>
<p class="">Dates</p>
</div>
<div class="kl_flex_column">
<h4>Module 5</h4>
<p class="">Dates</p>
</div>
</div>
<p>&nbsp;</p>
<div class="kl_flex_columns_wrapper">
<div class="kl_flex_column">
<h4>Module 6</h4>
<p class="">Dates</p>
</div>
<div class="kl_flex_column">
<h4>Module 7</h4>
<p class="">Dates</p>
</div>
</div>
<p>&nbsp;</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment