Create a timeline in Canvas with easy code

Create a fun timeline

In this tutorial, we are exploring some fun code that will help us create a cool timeline for your Canvas pages. Check out the video for an explanation of the code on the page and follow along on the demo Canvas page:

https://canvas.instructure.com/courses/2560052/pages/timeline

Try this code in your Canvas course

<h2 class="border-round" style="background: linear-gradient(to right, #126369,#726779,#7681B3); padding: 20px 0 20px 35px;"><span style="font-size: 36pt;"><strong><span style="color: #ffffff;">Page subheading</span></strong></span></h2>
<p>Description Portland intelligentsia activated charcoal sustainable typewriter humblebrag sriracha leggings snackwave. Art party freegan ramps next level twee succulents glossier polaroid single-origin coffee green juice. Gentrify celiac skateboard listicle butcher locavore. Etsy kickstarter post-ironic, yuccie thundercats banjo blog deep.</p>
<hr style="border-top: 6px solid #8c8b8b; margin: 30px auto;" />
<div class="grid-row">
    <div class="col-md-4 col-xs-12" style="border-right: 3px solid #126369; padding-right: 30px; margin-bottom: 30px; text-align: right;">
        <h3 style="color: #126369;"><span style="font-family: 'arial black', 'avant garde';"><strong><span style="font-size: 72pt;">1985</span></strong></span></h3>
        <h4><span style="font-size: 24pt;">Lorem ipsum dolor</span></h4>
        <p>Portland intelligentsia activated charcoal sustainable typewriter humblebrag sriracha leggings snackwave.</p>
    </div>
    <div class="col-md-8 col-xs-12" style="border-left: 3px solid #126369; padding-left: 30px; margin-bottom: 30px;">
        <div><img style="float: left; margin-right: 25px;" src="/courses/2560052/files/182626421/preview" alt="research quote" width="200" height="267" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/2560052/files/182626421" data-api-returntype="File" />
            <p>Portland intelligentsia activated charcoal sustainable typewriter humblebrag sriracha leggings snackwave. Art party freegan ramps next level twee succulents glossier polaroid single-origin coffee green juice. Gentrify celiac skateboard listicle butcher locavore. Etsy kickstarter post-ironic, yuccie thundercats banjo blog deep.</p>
            <p>Activated charcoal everyday carry 3 wolf moon, tattooed raw denim small batch heirloom chartreuse taiyaki. Freegan small batch chartreuse, tote bag intelligentsia palo santo polaroid flannel letterpress vape cliche. Man braid kitsch activated charcoal craft beer tattooed cold-pressed. Polaroid kinfolk 8-bit, tumeric tousled tumblr green juice.</p>
        </div>
    </div>
</div>
<hr style="background-image: linear-gradient(180deg, #fff, #E7E9EB); height: 33px; border: none; margin: 10px 0 30px;" />
<div class="grid-row">
    <div class="col-md-4 col-xs-12" style="border-right: 3px solid #726779; padding-right: 30px; margin-bottom: 30px; text-align: right;">
        <h3 style="color: #726779;"><span style="font-family: 'arial black', 'avant garde';"><strong><span style="font-size: 72pt;">1999</span></strong></span></h3>
        <h4><span style="font-size: 24pt;">Lorem ipsum dolor</span></h4>
        <p>Portland intelligentsia activated charcoal sustainable typewriter humblebrag sriracha leggings snackwave.</p>
    </div>
    <div class="col-md-8 col-xs-12" style="border-left: 3px solid #726779; padding-left: 30px; margin-bottom: 30px;">
        <div><img style="float: left; margin-right: 25px;" src="/courses/2560052/files/182626421/preview" alt="research quote" width="200" height="267" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/2560052/files/182626421" data-api-returntype="File" />
            <p>Portland intelligentsia activated charcoal sustainable typewriter humblebrag sriracha leggings snackwave. Art party freegan ramps next level twee succulents glossier polaroid single-origin coffee green juice. Gentrify celiac skateboard listicle butcher locavore. Etsy kickstarter post-ironic, yuccie thundercats banjo blog deep.</p>
            <p>Activated charcoal everyday carry 3 wolf moon, tattooed raw denim small batch heirloom chartreuse taiyaki. Freegan small batch chartreuse, tote bag intelligentsia palo santo polaroid flannel letterpress vape cliche. Man braid kitsch activated charcoal craft beer tattooed cold-pressed. Polaroid kinfolk 8-bit, tumeric tousled tumblr green juice.</p>
        </div>
    </div>
</div>
<hr style="background-image: linear-gradient(180deg, #fff, #E7E9EB); height: 33px; border: none; margin: 10px 0 30px;" />
<div class="grid-row">
    <div class="col-md-4 col-xs-12" style="border-right: 3px solid #7681B3; padding-right: 30px; margin-bottom: 30px; text-align: right;">
        <h3 style="color: #7681b3;"><span style="font-family: 'arial black', 'avant garde';"><strong><span style="font-size: 72pt;">2006</span></strong></span></h3>
        <h4><span style="font-size: 24pt;">Lorem ipsum dolor</span></h4>
        <p>Portland intelligentsia activated charcoal sustainable typewriter humblebrag sriracha leggings snackwave.</p>
    </div>
    <div class="col-md-8 col-xs-12" style="border-left: 3px solid #7681B3; padding-left: 30px; margin-bottom: 30px;">
        <div><img style="float: left; margin-right: 25px;" src="/courses/2560052/files/182626421/preview" alt="research quote" width="200" height="267" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/2560052/files/182626421" data-api-returntype="File" />
            <p>Portland intelligentsia activated charcoal sustainable typewriter humblebrag sriracha leggings snackwave. Art party freegan ramps next level twee succulents glossier polaroid single-origin coffee green juice. Gentrify celiac skateboard listicle butcher locavore. Etsy kickstarter post-ironic, yuccie thundercats banjo blog deep.</p>
            <p>Activated charcoal everyday carry 3 wolf moon, tattooed raw denim small batch heirloom chartreuse taiyaki. Freegan small batch chartreuse, tote bag intelligentsia palo santo polaroid flannel letterpress vape cliche. Man braid kitsch activated charcoal craft beer tattooed cold-pressed. Polaroid kinfolk 8-bit, tumeric tousled tumblr green juice.</p>
        </div>
    </div>
</div>
<hr style="background-image: linear-gradient(180deg, #fff, #E7E9EB); height: 33px; border: none; margin: 10px 0 30px;" />

---

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow us on social media

Twitter: https://twitter.com/HowToCanvas

Instagram: https://www.instagram.com/HowToCanvas

Facebook: https://www.facebook.com/HowToCanvas