/
Structure_and_Columns.html
244 lines (178 loc) · 11.7 KB
/
Structure_and_Columns.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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!--
#####################################################################
LAKER Version 1.2 – http://www.lakercompendium.com
#####################################################################
#####################################################################
This is a dossier file.
#####################################################################
#####################################################################
#####################################################################
-->
<!DOCTYPE html>
<html xmlns:csi="http://www.massimocorner.com/libraries/csi/" lang="de">
<head>
<!--
############################################################################
META information ###########################################################
############################################################################
-->
<meta charset="utf-8">
<!--Prevent pinch to zoom on iOS devices-->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<!--Allow saving as a web app on the home screen on iOS Devices (doesn't apply in Baker)-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--If the page is saved as a web app, the statusbar will be black-translucent (doesn't apply in Baker)-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!--Prevent phone number detection on iOS devices-->
<meta name="format-detection" content="telephone=no" />
<!--Title. The content of the title is displayed on the loading screen on iOS devices-->
<title>Dossier 3 • Structure & columns</title>
<!--
############################################################################
Stylesheets ################################################################
############################################################################
-->
<!--Loading the main style sheet-->
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
<!--Loading the dossier specific css-->
<link href="styles/dossiers/03.css" rel="stylesheet" type="text/css" />
<!--
############################################################################
Javascripts ################################################################
############################################################################
-->
<script src="js/Hyphenator.js" type="text/javascript"></script>
<script src="js/jquery-1.5.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/tmt_core.js"></script>
<script type="text/javascript" src="js/tmt_net.js"></script>
<script type="text/javascript" src="js/tmt_csi.js"></script>
<script type="text/javascript" src="js/article-nav.js"></script>
<!--Mandatory JavaScripts (Uncomment if not used to speed up performance)
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script src="js/jquery.touchSwipe-1.2.1.js" type="text/javascript"></script>
-->
</head>
<body>
<!--
############################################################################
"Table of content" in navigation bar #######################################
############################################################################
-->
<div class="nav-bar">
<div class="nav-bar-container">
<a href="#Inhaltsverzeichnis" class="nav-button toc"><div class="toc-label">Inhaltsverzeichnis</div>
<div class="toc-list">
<!--Include "Table of content" from external file-->
<div id="includeTOC" csi:src="inc/toc.html"></div>
</div><!--Div toc-list-->
</a>
</div><!--Div nav-bar-container-->
</div><!--Div nav-bar-->
<!--
############################################################################
End "Table of content" in navigation bar ###################################
############################################################################
-->
<!--
############################################################################
Start dossier navigation in navigation bar #################################
############################################################################
-->
<!--Include the small logo and the cover link-->
<div id="includeLogoAndCoverlink" csi:src="inc/logo-coverlink.html"></div>
<!--Link to the next dossier.-->
<a href="Maps.html" class="nav-button next">
<div class="nav-button-text">Next Dossier</div>
</a>
<!--Link to the previous dossier-->
<a href="Interactivity.html" class="nav-button prev">
<div class="nav-button-text">Previous Dossier</div>
</a>
<!--Implementing the Dossier-Number-->
<div id="dossier-number" class="dossier-number"><p>03</p></div>
<!--Navigation bar edges-->
<div class="edge-left"></div>
<div class="edge-right"></div>
<!--
############################################################################
End dossier navigation in navigation bar ###################################
############################################################################
-->
<!--Enable text hyphenation with Hyphenator.js-->
<div class="hyphenate">
<!--
############################################################################
Start content ##############################################################
############################################################################
-->
<!--Dossier start image-->
<div class="dossier-start-bg">
<!--(if you want to place something on top of the picture, place it here-->
</div><!-- Div dossier-start-bg-->
<!--Arrow which indicates the start of the text-->
<div class="dossier-headline-arrow"><img src="images/dossier-headline-arrow.png" /></div>
<!--"content-element" ensures, that content is placed within the right margins-->
<div class="content-element">
<!--Starting Headline-->
<div class="starting-headline">
<h1>Structure & Columns</h1>
</div><!--Div starting headline-->
</div><!--Div content element-->
<!--"content-element" ensures, that content is placed within the right margins-->
<div class="content-element">
<!--Main content-->
<div class="small-column float-right">
<p>Class: <br />
"small-column float-right"<br />
Integer eu elit massa. Morbi vestibulum lacus a quam sagittis pulvinar tristique arcu posuere. Aliquam sollicitudin risus risus, at semper neque.</p>
</div><!--small-column float-right-->
<div class="large-column float-left">
<p>Class: "large-column float-left"<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas velit tortor, ullamcorper id laoreet vel, ultricies ut lorem. Curabitur porta orci ut lacus vestibulum porttitor. Suspendisse potenti. Donec sodales ante eu dui molestie euismod ultricies nisl sollicitudin. Phasellus eget mauris eu velit mollis consectetur a in elit. Pellentesque eu lorem nunc. Integer eu elit massa. Morbi vestibulum lacus a quam sagittis pulvinar tristique arcu posuere. Aliquam sollicitudin risus risus, at semper neque. Aliquam rhoncus rhoncus ultrices. Aliquam erat volutpat. Aenean in nibh vitae leo placerat viverra. Pellentesque non sapien ac orci fermentum molestie in vitae purus. Cras lacinia turpis nec orci blandit adipiscing. Morbi tempor commodo leo, quis scelerisque risus pretium quis. Cras suscipit magna eget tortor sagittis fringilla. Praesent arcu justo, ultrices eu interdum nec, ornare aliquam urna. Vivamus cursus posuere erat id faucibus.</p>
<br />
</div><!--large-column float-left-->
<!--Align text block on the right-->
<div class="large-column float-right">
<h1>Pellentesque vitae elit et enim tristique porta porttitor at dolor</h1>
</div><!--Div large-column float-right-->
<!--Small-Column left-->
<div class="small-column float-left">
<p>Class: "small-column float-left"<br />Ut scelerisque cursus leo, id consectetur est semper a.</p>
</div><!-- Div small-column float-left-->
<div class="large-column float-right">
<p>Class: "large-column float-right"<br />Aliquam fermentum nibh quis risus placerat ultrices. Nulla congue lacus sed ligula commodo tincidunt. Aliquam erat volutpat. Nunc porta, velit non gravida pharetra, nisl dolor ultricies urna, at feugiat est nunc in mi. Fusce sagittis felis quis magna aliquam nec venenatis libero sodales. Fusce lacus metus, scelerisque at cursus in, sollicitudin et urna. Praesent in sodales nisl. Pellentesque ut dolor eget velit scelerisque faucibus quis hendrerit magna. Phasellus malesuada malesuada arcu, consequat pharetra odio bibendum ac. Curabitur sodales cursus eros luctus mattis. Quisque iaculis, quam eget egestas vestibulum, purus tellus ultrices elit, id dictum quam nisl in augue. Sed non mauris at sapien suscipit condimentum sed id leo. Maecenas vitae arcu lectus. Pellentesque pulvinar suscipit quam, sit amet lacinia nibh aliquam eget. Vivamus ornare ligula eget metus aliquet nec vehicula sapien suscipit. Ut scelerisque cursus leo, id consectetur est semper a.</p>
<br /><br />
</div><!--Div large-column float-right-->
<div class="full-column">
<h1>Class: "full-column" – <br />This headline uses the whole page width.</h1>
</div><!--Div full-column-->
<div class="medium-column float-left">
<p>Class: "medium-column float-left"<br />
Morbi semper ultrices porta. Aenean dignissim, sapien eget sodales mollis, massa urna malesuada elit, sit amet vulputate justo augue in massa. Praesent mattis accumsan blandit. Mauris nec enim ante. Sed fringilla interdum eros, nec lacinia turpis iaculis vel. Vestibulum leo ipsum, consequat a dignissim sit amet, egestas in urna. Donec nisl velit, pulvinar id ullamcorper vitae, imperdiet et leo. Donec ultricies cursus varius. Pellentesque elit arcu, pulvinar in fermentum non, faucibus eu quam. Suspendisse mollis aliquam sagittis. Vestibulum pellentesque accumsan arcu, vitae mattis tellus luctus id. Vivamus sed condimentum leo.</p>
</div><!--Div medium-column float-left-->
<div class="medium-column float-right">
<p>Class: "medium-column float-right"<br /> Aliquam fermentum nibh quis risus placerat ultrices. Nulla congue lacus sed ligula commodo tincidunt. Aliquam erat volutpat. Nunc porta, velit non gravida pharetra, nisl dolor ultricies urna, at feugiat est nunc in mi. Fusce sagittis felis quis magna aliquam nec venenatis libero sodales. Fusce lacus metus, scelerisque at cursus in, sollicitudin et urna. Praesent in sodales nisl. Pellentesque ut dolor eget velit scelerisque faucibus quis hendrerit magna. Phasellus malesuada malesuada arcu, consequat pharetra odio bibendum ac. Curabitur sodales cursus eros luctus mattis. Quisque iaculis, quam eget egestas vestibulum, purus tellus ultrices elit, id dictum quam nisl in augue. Sed non mauris at sapien suscipit condimentum sed id leo. Maecenas vitae arcu lectus. Pellentesque pulvinar suscipit quam, sit amet lacinia nibh aliquam eget. Vivamus ornare ligula eget metus aliquet nec vehicula sapien suscipit. Ut scelerisque cursus leo, id consectetur est semper a.</p>
</div><!--Div medium-column float-left-->
</div><!--Div content-element-->
<!--
############################################################################
End of content #############################################################
############################################################################
-->
</div><!--Div hyphenate-->
<!--
############################################################################
Start Footer ###############################################################
############################################################################
-->
<!--Include footer data from inc/footer.html-->
<div class="footer">
<div id="includeFooter" csi:src="inc/footer.html"></div>
</div><!--Div footer-->
<!--
############################################################################
End Footer #################################################################
############################################################################
-->
</body>
</html>