-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
195 lines (167 loc) · 10.5 KB
/
index.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
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 ie-lt10 ie-lt9 ie-lt8 ie-lt7 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 ie-lt10 ie-lt9 ie-lt8 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 ie-lt10 ie-lt9 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 ie-lt10 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<title>Documentation template</title>
<meta name="author" content="Aitor Rodríguez - Front End Factory" />
<meta name="description" content="Documentation template created with HTML, CSS and ❤" />
<meta name="Copyright" content="MIT License - Copyright (c) 2017 Aitor Rodríguez" />
<!-- Third party CSS files -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="js/syntaxhighlighter/styles/shCore.css">
<link rel="stylesheet" type="text/css" href="js/syntaxhighlighter/styles/shThemeDefault.css">
<!-- Font -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/main.css">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="57x57" href="img/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="img/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="img/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header class="header">
<div class="container">
<h1 class="header-title">Documentation template</h1>
<p class="header-subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
</div>
<div class="absolute-top-left-logo">
<img src="./img/logo-big.png" alt="Logo DT" width="109" height="109" />
</div>
</header>
<div class="subheader">
<div class="container">
<h2 class="subheader-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
</div>
<div class="absolute-top-left-logo">
<img src="./img/logo-small.png" alt="Logo DT - Small" width="52" height="52" />
</div>
</div>
<div class="container wrapper">
<div class="content">
<div class="block">
<h1 class="block-title">Section One</h1>
<h2 class="block-subtitle" id="one_one">Subsection One</h2>
<p class="block-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel hendrerit urna. Nunc euismod faucibus urna, eu interdum tellus interdum sed. Proin ac augue ut odio dictum rhoncus eget quis ex. Vestibulum sed lectus purus. Mauris nisl augue, sagittis quis nisl suscipit, malesuada finibus purus. Proin at volutpat ante. Mauris ac magna ut augue facilisis feugiat. Proin mollis sem vel urna blandit sollicitudin.</p>
<p>Integer dignissim elit vel dui imperdiet euismod. Donec sagittis ante vel nunc sagittis iaculis. Aenean eros ante, placerat nec mi ut, dictum consequat purus. Mauris lacus leo, tempus quis facilisis eu, dictum non est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In nec sem nisl. Vivamus bibendum nibh turpis, ut luctus justo malesuada vel. Nunc consectetur suscipit sodales.</p>
<div class="example">
<div class="example-title">Example</div>
<div class="example-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div class="code">
<pre class="brush: css;">
.class-name {
position: relative;
padding: 20px 10px;
border: 1px solid red;
font-size: 11px;
}</pre>
</div>
</div>
<div class="block">
<h1 class="block-title">Section Two</h1>
<h2 class="block-subtitle" id="two_one">Subsection One</h2>
<p class="block-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Integer dignissim elit vel dui imperdiet euismod. Donec sagittis ante vel nunc sagittis iaculis. Aenean eros ante, placerat nec mi ut, dictum consequat purus. Mauris lacus leo, tempus quis facilisis eu, dictum non est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In nec sem nisl. Vivamus bibendum nibh turpis, ut luctus justo malesuada vel. Nunc consectetur suscipit sodales.</p>
<h2 class="block-subtitle" id="two_two">Subsection Two</h2>
<p>Integer dignissim elit vel dui imperdiet euismod. Donec sagittis ante vel nunc sagittis iaculis. Aenean eros ante, placerat nec mi ut, dictum consequat purus. Mauris lacus leo, tempus quis facilisis eu, dictum non est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In nec sem nisl. Vivamus bibendum nibh turpis, ut luctus justo malesuada vel. Nunc consectetur suscipit sodales.</p>
<div class="code">
<pre class="brush: css;">
.class-name { content: ""; }</pre>
</div>
<div class="note">
<p class="note-title note-important">Important note</p>
<p>Nunc euismod faucibus urna, eu interdum tellus interdum sed. Proin ac augue ut odio dictum rhoncus eget quis.</p>
</div>
<h2 class="block-subtitle" id="two_three">Subsection Three</h2>
<p class="block-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Integer dignissim elit vel dui imperdiet euismod. Donec sagittis ante vel nunc sagittis iaculis. Aenean eros ante, placerat nec mi ut, dictum consequat purus. Mauris lacus leo, tempus quis facilisis eu, dictum non est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In nec sem nisl. Vivamus bibendum nibh turpis, ut luctus justo malesuada vel. Nunc consectetur suscipit sodales.</p>
</div>
<div class="block">
<h1 class="block-title">Section Three</h1>
<div class="note">
<p class="note-title note-warning">Warning note</p>
<p>Nunc euismod faucibus urna, eu interdum tellus interdum sed. Proin ac augue ut odio dictum rhoncus eget quis.</p>
</div>
<h2 class="block-subtitle" id="three_one">Subsection One</h2>
<p class="block-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Integer dignissim elit vel dui imperdiet euismod. Donec sagittis ante vel nunc sagittis iaculis. Aenean eros ante, placerat nec mi ut, dictum consequat purus. Mauris lacus leo, tempus quis facilisis eu, dictum non est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In nec sem nisl. Vivamus bibendum nibh turpis, ut luctus justo malesuada vel. Nunc consectetur suscipit sodales.</p>
<h2 class="block-subtitle" id="three_two">Subsection Two</h2>
<p>Integer dignissim elit vel dui imperdiet euismod. Donec sagittis ante vel nunc sagittis iaculis. Aenean eros ante, placerat nec mi ut, dictum consequat purus. Mauris lacus leo, tempus quis facilisis eu, dictum non est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In nec sem nisl. Vivamus bibendum nibh turpis, ut luctus justo malesuada vel. Nunc consectetur suscipit sodales.</p>
</div>
</div>
<div class="sidebar">
<nav class="sidebar-menu">
<h3 class="sidebar-menu-title">Content</h3>
<ul>
<li class="sidebar-menu-section">
<h2 class="sidebar-menu-subtitle">Section One</h2>
<ul>
<li class="sidebar-menu-element"><a href="#one_one">Subsection one</a></li>
</ul>
</li>
<li class="sidebar-menu-section">
<h2 class="sidebar-menu-subtitle">Section Two</h2>
<ul>
<li class="sidebar-menu-element"><a href="#two_one">Subsection one</a></li>
<li class="sidebar-menu-element"><a href="#two_two">Subsection two</a></li>
<li class="sidebar-menu-element"><a href="#two_three">Subsection three</a></li>
</ul>
</li>
<li class="sidebar-menu-section">
<h2 class="sidebar-menu-subtitle">Section Three</h2>
<ul>
<li class="sidebar-menu-element"><a href="#three_one">Subsection one</a></li>
<li class="sidebar-menu-element"><a href="#three_two">Subsection two</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="clearfix"></div>
</div>
<footer class="footer">
<div class="footer-container">
Made with <span class="footer-heart">❤</span> in sunny Barcelona <div class="footer-author">© 2017 Aitor Rodríguez - <a href="http://www.frontendfactory.es" target="_blank">Front End Factory</a></div>
<div class="footer-logo">
<img src="./img/logo-footer.png" alt="Logo" width="38" height="38" />
</div>
</div>
</footer>
<!-- Third party JS files -->
<script src="js/jquery-3.2.0.min.js"></script>
<!-- Custom JS -->
<script src="js/main.js"></script>
<!-- Syntax Highlighter (http://alexgorbatchev.com/SyntaxHighlighter/) - Custom with languages you need. Don't remove Core -->
<script src="js/syntaxhighlighter/scripts/shCore.js"></script>
<script src="js/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script src="js/syntaxhighlighter/scripts/shBrushJScript.js"></script>
</body>
</html>