-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy path07_elements.html
175 lines (174 loc) · 5.79 KB
/
07_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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../assets/thirdpartylib/bootstrap-4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/thirdpartylib/fontawesome-free-5.9.0-web/css/all.min.css">
<link rel="stylesheet" href="../assets/css/styles.min.css">
<link rel="stylesheet" href="../assets/css/custom.css">
<script src="../assets/thirdpartylib/jquery/jquery-3.3.1.slim.min.js" defer></script>
<script src="../assets/thirdpartylib/popper-js/popper.min.js" defer></script>
<script src="../assets/thirdpartylib/bootstrap-4.3.1/js/bootstrap.min.js" defer></script>
<script src="../assets/js/scripts.min.js" defer></script>
<title>Elements Page</title>
</head>
<body><main>
<div class="container-fluid">
<div class="row">
<div class="col-12 banner-img"><img src="../assets/img/banner_02.jpg" alt=""></div>
<div class="col-sm-10 offset-sm-1">
<!-- DO NOT EDIT CODE ABOVE THIS LINE -->
<h1>Elements Page</h1>
<p>This page includes samples of some commonly used page elements.</p>
<p>You can copy one, or more, of the specific elements from this page and paste them into other pages. By combining elements, you can create new layouts for your courses.</p>
<h2>Copying Elements</h2>
<p>To copy any of the following elements, please select everything between "start copy" and "end copy" for the specific element, then copy and paste into the HTML Editor.</p>
<p><strong>To copy Elements onto a different page please make sure the page is in 'Edit HTML' mode.</strong></p>
<h3>Ordered List: Large Number</h3>
<p class="small">Ordered List: Large Number: start copy</p>
<ol class="large-number">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
<p class="small">Ordered List: Large Number: end copy</p>
<h3>Ordered List: Slim Number</h3>
<p class="small">Ordered List: Slim Number: start copy</p>
<ol class="large-number-slim">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
<p class="small">Ordered List: Slim Number: end copy</p>
<h3>Ordered List: Leading Zero</h3>
<p class="small">Ordered List: Leading Zero: start copy</p>
<ol class="large-number-zero">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
<p class="small">Ordered List: Leading Zero: end copy</p>
<h3>Ordered List: Alphabox</h3>
<p class="small">Ordered List: Alphabox: start copy</p>
<ol class="box-alpha">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
<p class="small">Ordered List: Alphabox: end copy</p>
<h3>Unordered List: Checks</h3>
<p class="small">Unordered List: Checks: start copy</p>
<ul class="check-icon">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<p class="small">Unordered List: Checks: end copy</p>
<h3>Lead text (.lead)</h3>
<p class="small">Lead text: start copy</p>
<p class="lead">Lead text can be used to begin a topic and would draw learner attention to a critical point, or could be an attention catching fact.</p>
<p class="small">Lead text: end copy</p>
<h3>Blockquote</h3>
<p class="small">Blockquote: start copy</p>
<blockquote>
<p>The blockquote element represents a section that is quoted from another source.</p>
<footer>Blockquote footer text <cite>Citation: Source title</cite></footer></blockquote>
<p class="small">Blockquote: end copy</p>
<h3>Jumbotron</h3>
<p class="small">Jumbotron: start copy</p>
<div class="jumbotron">
<p>This is a jumbotron. It can be used to call out important content that needs to stand apart from main body text on a page.</p>
</div>
<p class="small">Jumbotron: end copy</p>
<h3>Standard Callout</h3>
<p class="small">Standard Callout: start copy</p>
<div class="card card-standard">
<div class="card-body">
<p>A callout box can be used to draw attention to important information on the page.</p>
</div>
</div>
<p class="small">Standard Callout: end copy</p>
<h3>Icon Callout</h3>
<p class="small">Icon Callout: start copy</p>
<div class="card card-graphic">
<div class="card-body">
<div class="card-icon"><i class="fas fa-info-circle"></i></div>
<div class="card-text">
<p>Callout boxes can be used to present recurring information throughout the course. To change the decorative icon, click on the icon, click the down arrow next to the plus in the toolbar, choose Attributes, and change the Class name to another <a href="https://fontawesome.com/v5/search?m=free" target="_blank" rel="noopener">Font Awesome icon</a> name (for example, change <strong>fas fa-info-circle</strong> to <strong>fas fa-question-circle</strong>).</p>
</div>
</div>
</div>
<p class="small">Icon Callout: end copy</p>
<h3>Table</h3>
<p class="small">Table: start copy</p>
<div class="table-responsive">
<table class="table table-bordered"><caption>Sample Table Caption</caption>
<thead>
<tr>
<th scope="col">Table Head 1</th>
<th scope="col">Table Head 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>Row 1 Cell 1</p>
</td>
<td>
<p>Row 1 Cell 2</p>
</td>
</tr>
<tr>
<td>
<p>Row 2 Cell 1</p>
</td>
<td>
<p>Row 2 Cell 2</p>
</td>
</tr>
<tr>
<td>
<p>Row 3 Cell 1</p>
</td>
<td>
<p>Row 3 Cell 2</p>
</td>
</tr>
</tbody>
</table>
</div>
<p class="small">Table: end copy</p>
<h3>Two Column Panels</h3>
<p class="small">Two Column Panels: start copy</p>
<div class="two-col-panels">
<div class="row">
<div class="col-sm card bg-light">
<div class="card-body">
<h4>Panel 1</h4>
<p>Add panel content here.</p>
</div>
</div>
<div class="col-sm card bg-light">
<div class="card-body">
<h4>Panel 2</h4>
<p>Add panel content here.</p>
</div>
</div>
</div>
</div>
<p class="small">Two Column Panels: end copy</p>
<!-- DO NOT EDIT CODE BELOW THIS LINE -->
</div>
<div class="col-12"><footer>
<p><img src="../assets/img/logo.png" alt="" /></p>
</footer></div>
</div>
</div>
</main></body>
</html>