- 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.
- 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" />
- Submit the changes.
- On the page where you'd like to create the flipcards, go to Edit > Outputs. In the list of regions, locate Extra Head Code.
- In the block line, link to flipcards-2017.css (Found in 2017 Design Master → css). Submit the changes.
- 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="front" style="background: url('http://communications.uwo.ca/comms-test/img/eng.png');">
<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>
<!--end of first flip card -->
Discovery Western recently celebrated 25 years of sharing the fun and interesting sides of science, engineering and technology.More