Card Front 1
Interactive Webpage
Below is an example of a simple, interactive webpage for use in online courses. The idea was to integrate basic interactive elements in simple HTML pages to reside in institutions’ Learning Management System (Brightspace by Desire2Learn). This helps mitigate reliance on third-party interactive elements, and keeps all content in-house, using simple template packages of CSS, JavaScript, etc. The CSS templates can be easily altered for use in a variety of programs and courses. Due to the NDA nature of post-secondary courses, no real content is displayed in this example.
Try out a few different styles:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed orci porttitor, dapibus nisl et, ornare massa. Maecenas fringilla tellus quis orci tempor elementum. Etiam elementum purus id porta mollis. Mauris efficitur lobortis lacus ut volutpat. Maecenas ultrices justo ornare leo porttitor blandit. Fusce interdum tellus ipsum, et tristique tortor lobortis maximus. Cras vitae metus et risus lobortis tempor. Fusce sit amet enim ante. Nulla facilisi. Proin diam mauris, egestas sed posuere quis, pulvinar nec tortor. Nam cursus dolor id sodales ullamcorper. Nunc at turpis sit amet neque finibus finibus. Donec ut nulla tempus, varius ipsum a, pellentesque leo. Aliquam suscipit feugiat purus vulputate blandit.
Click on each Card to see the other side.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card Front 2
Sed sed orci porttitor, dapibus nisl et, ornare massa.
Card Front 3
Maecenas fringilla tellus quis orci tempor elementum.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed orci porttitor, dapibus nisl et, ornare massa. Maecenas fringilla tellus quis orci tempor elementum. Etiam elementum purus id porta mollis. Mauris efficitur lobortis lacus ut volutpat. Maecenas ultrices justo ornare leo porttitor blandit. Fusce interdum tellus ipsum, et tristique tortor lobortis maximus. Cras vitae metus et risus lobortis tempor.
Click to expand each item.
Accordion Object Heading 1
Ut in accumsan urna. Morbi nisi neque, sodales quis risus nec, egestas porttitor tellus. Maecenas mattis sit amet lectus vitae volutpat. Curabitur tortor mauris, mollis id lacus non, molestie eleifend mauris. Praesent cursus eu libero eu interdum. Nam risus est, dapibus sed hendrerit in, eleifend quis nisi. Curabitur dignissim nisl quam, et finibus quam lobortis nec. Vivamus eros quam, vehicula et rutrum sit amet, rhoncus nec quam. Sed nibh purus, varius a pellentesque non, dictum et odio. Morbi convallis, lorem quis laoreet ullamcorper, est elit maximus sem, eu suscipit dui tortor ut quam. Quisque a elit risus.
Accordion Object Heading 2
Maecenas a dolor ac ligula sagittis cursus. Sed in nulla eget dolor mattis pretium. Nullam non porttitor tellus, vitae dapibus leo. Vivamus scelerisque velit sit amet nunc vestibulum posuere. Aenean rhoncus quam ut egestas posuere. Donec volutpat risus tortor, id viverra massa molestie tempus. Nulla eget congue purus. Curabitur tellus lacus, fermentum vel felis non, volutpat malesuada purus. Ut accumsan, lacus sit amet gravida consequat, nisl justo ornare leo, feugiat bibendum felis elit vel quam. Phasellus in dignissim lorem, gravida fermentum elit. Nam quis mi dolor. Nunc laoreet fermentum porttitor. Maecenas pretium est nec lorem bibendum, ut molestie elit blandit. Proin facilisis finibus tellus, a hendrerit risus lacinia vitae. Ut eu ipsum nec ligula finibus elementum vel a elit.
Accordion Object Heading 3
Etiam vitae ligula sit amet libero feugiat rutrum id id risus. Nullam nec neque elit. Curabitur a nibh massa. Nunc auctor nunc ut suscipit iaculis. Sed dui odio, mollis in dolor ac, elementum vehicula ante. Mauris vestibulum enim sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ligula urna, luctus vel venenatis nec, commodo id ante. Suspendisse finibus orci a maximus aliquam. Etiam a elit ac sem maximus eleifend. Duis feugiat arcu et dolor cursus blandit. Integer luctus eros nec odio imperdiet, eget tincidunt lectus gravida. Sed lacinia, neque et vestibulum sagittis, leo diam pellentesque nibh, sed feugiat dolor neque a erat. Nulla quis elit diam. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed orci porttitor, dapibus nisl et, ornare massa. Maecenas fringilla tellus quis orci tempor elementum. Etiam elementum purus id porta mollis. Mauris efficitur lobortis lacus ut volutpat. Maecenas ultrices justo ornare leo porttitor blandit. Fusce interdum tellus ipsum, et tristique tortor lobortis maximus. Cras vitae metus et risus lobortis tempor.
Tab 1 Heading
Tab 2 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed orci porttitor, dapibus nisl et, ornare massa. Maecenas fringilla tellus quis orci tempor elementum. Etiam elementum purus id porta mollis. Mauris efficitur lobortis lacus ut volutpat. Maecenas ultrices justo ornare leo porttitor blandit. Fusce interdum tellus ipsum, et tristique tortor lobortis maximus. Cras vitae metus et risus lobortis tempor. Fusce sit amet enim ante. Nulla facilisi. Proin diam mauris, egestas sed posuere quis, pulvinar nec tortor. Nam cursus dolor id sodales ullamcorper. Nunc at turpis sit amet neque finibus finibus. Donec ut nulla tempus, varius ipsum a, pellentesque leo. Aliquam suscipit feugiat purus vulputate blandit.
Cras in congue massa, eget venenatis sem. Maecenas eget lorem congue eros ultrices tempus. Curabitur sed ipsum vitae ligula dictum accumsan. Donec mollis vehicula risus, eu bibendum mauris pulvinar ac. Morbi consequat, diam a feugiat ullamcorper, elit sapien vulputate lectus, vitae congue nisl mauris a nisi. Praesent tristique, augue posuere dignissim tristique, dui nisi ultricies lacus, nec egestas lorem leo sed velit. Phasellus finibus eu massa et imperdiet. Cras commodo ut mi eget pulvinar. Cras in venenatis tellus. Proin rutrum et est ac rhoncus. Suspendisse risus mi, pulvinar eu commodo a, efficitur eu mauris. Aliquam non erat eleifend, sagittis metus sit amet, pulvinar magna. Nulla luctus ornare laoreet. Integer dignissim feugiat elit, id malesuada orci finibus vitae. Fusce dignissim eros lectus.
Tab 1 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed orci porttitor, dapibus nisl et, ornare massa. Maecenas fringilla tellus quis orci tempor elementum. Etiam elementum purus id porta mollis. Mauris efficitur lobortis lacus ut volutpat. Maecenas ultrices justo ornare leo porttitor blandit. Fusce interdum tellus ipsum, et tristique tortor lobortis maximus. Cras vitae metus et risus lobortis tempor. Fusce sit amet enim ante. Nulla facilisi. Proin diam mauris, egestas sed posuere quis, pulvinar nec tortor. Nam cursus dolor id sodales ullamcorper. Nunc at turpis sit amet neque finibus finibus. Donec ut nulla tempus, varius ipsum a, pellentesque leo. Aliquam suscipit feugiat purus vulputate blandit.
Tab 2 Heading
Cras in congue massa, eget venenatis sem. Maecenas eget lorem congue eros ultrices tempus. Curabitur sed ipsum vitae ligula dictum accumsan. Donec mollis vehicula risus, eu bibendum mauris pulvinar ac. Morbi consequat, diam a feugiat ullamcorper, elit sapien vulputate lectus, vitae congue nisl mauris a nisi. Praesent tristique, augue posuere dignissim tristique, dui nisi ultricies lacus, nec egestas lorem leo sed velit. Phasellus finibus eu massa et imperdiet. Cras commodo ut mi eget pulvinar. Cras in venenatis tellus. Proin rutrum et est ac rhoncus. Suspendisse risus mi, pulvinar eu commodo a, efficitur eu mauris. Aliquam non erat eleifend, sagittis metus sit amet, pulvinar magna. Nulla luctus ornare laoreet. Integer dignissim feugiat elit, id malesuada orci finibus vitae. Fusce dignissim eros lectus.
Image Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed orci porttitor, dapibus nisl et, ornare massa. Maecenas fringilla tellus quis orci tempor elementum. Etiam elementum purus id porta mollis. Mauris efficitur lobortis lacus ut volutpat. Maecenas ultrices justo ornare leo porttitor blandit. Fusce interdum tellus ipsum, et tristique tortor lobortis maximus. Cras vitae metus et risus lobortis tempor. Fusce sit amet enim ante. Nulla facilisi. Proin diam mauris, egestas sed posuere quis, pulvinar nec tortor. Nam cursus dolor id sodales ullamcorper. Nunc at turpis sit amet neque finibus finibus. Donec ut nulla tempus, varius ipsum a, pellentesque leo. Aliquam suscipit feugiat purus vulputate blandit.
- Ordered List Item 1
- Ordered List Item 2
- Ordered List Item 3
Maecenas a dolor ac ligula sagittis cursus. Sed in nulla eget dolor mattis pretium. Nullam non porttitor tellus, vitae dapibus leo. Vivamus scelerisque velit sit amet nunc vestibulum posuere. Aenean rhoncus quam ut egestas posuere. Donec volutpat risus tortor, id viverra massa molestie tempus. Nulla eget congue purus. Curabitur tellus lacus, fermentum vel felis non, volutpat malesuada purus. Ut accumsan, lacus sit amet gravida consequat, nisl justo ornare leo, feugiat bibendum felis elit vel quam. Phasellus in dignissim lorem, gravida fermentum elit. Nam quis mi dolor. Nunc laoreet fermentum porttitor. Maecenas pretium est nec lorem bibendum, ut molestie elit blandit. Proin facilisis finibus tellus, a hendrerit risus lacinia vitae. Ut eu ipsum nec ligula finibus elementum vel a elit.
- Unordered List Item 1
- Unordered List Item 2
- Unordered List Item 3
Cras in congue massa, eget venenatis sem. Maecenas eget lorem congue eros ultrices tempus. Curabitur sed ipsum vitae ligula dictum accumsan. Donec mollis vehicula risus, eu bibendum mauris pulvinar ac. Morbi consequat, diam a feugiat ullamcorper, elit sapien vulputate lectus, vitae congue nisl mauris a nisi. Praesent tristique, augue posuere dignissim tristique, dui nisi ultricies lacus, nec egestas lorem leo sed velit. Phasellus finibus eu massa et imperdiet. Cras commodo ut mi eget pulvinar. Cras in venenatis tellus. Proin rutrum et est ac rhoncus. Suspendisse risus mi, pulvinar eu commodo a, efficitur eu mauris.
Ut in accumsan urna. Morbi nisi neque, sodales quis risus nec, egestas porttitor tellus. Maecenas mattis sit amet lectus vitae volutpat. Curabitur tortor mauris, mollis id lacus non, molestie eleifend mauris. Praesent cursus eu libero eu interdum. Nam risus est, dapibus sed hendrerit in, eleifend quis nisi. Curabitur dignissim nisl quam, et finibus quam lobortis nec. Vivamus eros quam, vehicula et rutrum sit amet, rhoncus nec quam. Sed nibh purus, varius a pellentesque non, dictum et odio. Morbi convallis, lorem quis laoreet ullamcorper, est elit maximus sem, eu suscipit dui tortor ut quam. Quisque a elit risus.
- Alpha List 1
- Alpha List 2
- Alpha List 3
Cras in congue massa, eget venenatis sem. Maecenas eget lorem congue eros ultrices tempus. Curabitur sed ipsum vitae ligula dictum accumsan. Donec mollis vehicula risus, eu bibendum mauris pulvinar ac. Morbi consequat, diam a feugiat ullamcorper, elit sapien vulputate lectus, vitae congue nisl mauris a nisi. Praesent tristique, augue posuere dignissim tristique, dui nisi ultricies lacus, nec egestas lorem leo sed velit. Phasellus finibus eu massa et imperdiet. Cras commodo ut mi eget pulvinar. Cras in venenatis tellus. Proin rutrum et est ac rhoncus. Suspendisse risus mi, pulvinar eu commodo a, efficitur eu mauris. Aliquam non erat eleifend, sagittis metus sit amet, pulvinar magna. Nulla luctus ornare laoreet. Integer dignissim feugiat elit, id malesuada orci finibus vitae. Fusce dignissim eros lectus.
Image Caption