Flip Cards

  1. In /_cms/blocks/xhtml/ of your website, create a new block, flipcards-css. You might find it easier to copy one of the existing blocks.

  2. In the html mode of the newly-created block, paste the following code:

    <link href="https://www.uwo.ca/web_standards/css/flipcards.css" rel="stylesheet" />
  3. Submit the changes.

  4. On the page where you'd like to create the flipcards, go to Edit > Outputs. In the list of regions, locate Extra Head Code.

  5. In the block line, link to flipcards-2017.css (Found in 2017 Design Master → css). Submit the changes.

  6. In the html mode of the page where you'd like the flipcards to go, paste the code below. Make adjustments to customize the card: replace the image path with the one you'd like to use, change the text in the <div class="back”>, etc

    <!--first flip card-->
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');" style="float: left;">
    <div class="flipper">
    <div class="front" style="background: url('http://communications.uwo.ca/comms-test/img/eng.png');">
    <p>Discovery Western</p>
    </div>
    <div class="back">
    <p>Discovery Western recently celebrated 25 years of sharing the fun and interesting sides of science, engineering and technology.</p>
    <a class="blue-box" href="http://www.google.com" style="width: 40%; float: right; margin-right: 10px;" target="_blank" title="blue-box example">More</a></div>
    </div>
    </div>
    <!--end of first flip card -->

Discovery Western

Discovery Western recently celebrated 25 years of sharing the fun and interesting sides of science, engineering and technology.

More