forked from woof84/creates
-
Notifications
You must be signed in to change notification settings - Fork 2
/
elements.html
160 lines (155 loc) · 7.83 KB
/
elements.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
---
layout: page
---
<!--optional introduction with image-->
<!--
<section class="page-section">
<div class="container">
<div class="product-item">
<div class="product-item-title d-flex">
<div class="bg-faded p-5 d-flex mr-auto rounded">
<h2 class="section-heading mb-0">
<span class="section-heading-upper">C:</span>
<span class="section-heading-lower">Concept Map the Introduction</span>
</h2>
</div>
</div>
<img class="product-item-img mx-auto d-flex rounded img-fluid mb-3 mb-lg-0" src="{{ 'img/products-02.jpg' | absolute_url }}" alt="A croissant on a wooden platter is carried by someone's hand.">
<div class="product-item-description d-flex ml-auto">
<div class="bg-faded p-5 rounded">
<p class="mb-0">Devour a delicious croissant while similtaneously concept mapping the introduction.</p>
</div>
</div>
</div>
</div>
</section>
-->
<!-- Explain - the introductory/overview box -->
<section class="page-section">
<div class="container">
<div class="product-item">
<div class="product-item-title d-flex">
<div class="bg-faded p-5 d-flex mr-auto rounded"><!-- change to ml-auto to push right -->
<div class="section-heading mb-0">
<h2 class="mb-0">
<span class="section-heading-upper">Explain</span>
<span class="section-heading-lower">Explain this step</span>
</h2>
<div class="mt-2" style="text-transform: none">
<p>Describe the actions you take to succeed at this step. Emphasize why this step is important and useful.</p>
<h3>Steps</h3>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</li>
<li>Mercedem aut nummos unde unde extricat, amaras. Quis aute iure reprehenderit in voluptate velit esse.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</li>
</ol>
<h3>Rationale</h3>
<p>This might be a good place to reinforce the rationale and importance of this step. Mercedem aut nummos unde unde extricat, amaras. Quis aute iure reprehenderit in voluptate velit esse.</p>
</div>
</div>
</div>
</div>
<!-- an optional image/overview can be included here -->
<!--
<img class="product-item-img mx-auto d-flex rounded img-fluid mb-3 mb-lg-0" src="{{ 'img/placeholder.png' | absolute_url }}" alt="A placeholder image.">
-->
<!-- an optional text box to include below the image -->
<!--
<div class="product-item-description d-flex mr-auto">
<div class="bg-faded p-5 rounded">
<div class="mb-0">
<p>This is an optional box of text that you can include below the image if you want to.</p>
<p>Note that without the image, this will overlap with the text box above.</p>
</div>
</div>
</div>
-->
</div>
</div>
</section>
<!-- Demonstrate with a slideshow of annotated examples -->
<section class="page-section">
<div class="container">
<div class="product-item">
<div class="product-item-title d-flex">
<div class="bg-faded p-5 d-flex mr-auto rounded"><!-- change to ml-auto to push right -->
<h2 class="section-heading mb-0">
<span class="section-heading-upper">Demonstrate</span>
<span class="section-heading-lower">A slideshow with several examples</span>
</h2>
</div>
</div>
<!-- reveal slideshow -->
<embed src="https://uclalibrary.github.io/slides/tutorial-a-generic-tutorial.html#/" class="product-item-img mx-auto d-flex rounded img-fluid mb-3 mb-lg-0" style="min-width: 90%; min-height: 600px;" >
<!-- end reveal slideshow -->
<div class="product-item-description d-flex mr-auto">
<div class="bg-faded p-5 rounded">
<p class="mb-0">A responsive and accessible slideshow might be an interesting way to share a bunch of examples. Using something like reveal.js might help annotate examples to highlight key indicators of success. This box can include an overview of what is important in the slideshow.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Guide - the introductory/overview box -->
<section class="page-section">
<div class="container">
<div class="product-item">
<div class="product-item-title d-flex">
<div class="bg-faded p-5 d-flex mr-auto rounded"><!-- change to ml-auto to push right -->
<div class="section-heading mb-0">
<h2 class="mb-0">
<span class="section-heading-upper">Guide</span>
<span class="section-heading-lower">Provide tips & strategies</span>
</h2>
<div class="mt-2" style="text-transform: none">
<p>Offer tips and advice. Highlight common pitfalls and suggest strategies to avoid them. Link to additional resources for help and guidance. Quote experts (both learners and teachers), if that might be helpful.</p>
<blockquote>"A compelling quote that offers great advice." - a successful learner</blockquote>
<!-- todo:: find better css for quotes - ideally with a photo of person -->
<h3>Tips</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</li>
<li>Mercedem aut nummos unde unde extricat, amaras. Quis aute iure reprehenderit in voluptate velit esse.</li>
</ul>
</div>
</div>
</div>
</div>
<!-- an optional image/overview can be included here -->
<!-- an image that combines expert learner/teacher quote with visual illustration of tip could be powerful -->
<!--
<img class="product-item-img mx-auto d-flex rounded img-fluid mb-3 mb-lg-0" src="{{ 'img/placeholder.png' | absolute_url }}" alt="A placeholder image.">
-->
<!-- an optional text box to include below the image -->
<!--
<div class="product-item-description d-flex mr-auto">
<div class="bg-faded p-5 rounded">
<div class="mb-0">
<p>This is an optional box of text that you can include below the image if you want to.</p>
<p>Note that without the image, this will overlap with the text box above.</p>
</div>
</div>
</div>
-->
</div>
</div>
</section>
<!-- Enable - a final box that serves as an encouraging call to action -->
<section class="page-section">
<div class="container">
<div class="product-item">
<div class="product-item-title d-flex">
<div class="bg-faded p-5 d-flex mr-auto rounded"><!-- change to ml-auto to push right -->
<div class="section-heading mb-0">
<h2 class="mb-0">
<span class="section-heading-upper">Enable</span>
<span class="section-heading-lower">An encouraging call to action.</span>
</h2>
<div class="mt-2" style="text-transform: none">
<p>Summarize key things about this step. Give encouragement! Maybe a self-eval checklist?</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>