-
Notifications
You must be signed in to change notification settings - Fork 23
/
Copy pathbootstrap.html
243 lines (222 loc) · 18.3 KB
/
bootstrap.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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>visualNav + Bootstrap demo</title>
<link rel="stylesheet" href="demo/bootstrap.min.css">
<link rel="stylesheet" href="css/demo.css">
<style>
/*** Bootstrap demo ***/
/* Make the content div have enough padding at the top so
the inner-content appears below the bootstrap nav bar */
.content {
margin: 0 75px;
padding: 50px 0 0 0;
}
</style>
<script src="demo/modernizr-2.6.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="js/jquery.easing.1.2.js"></script>
<script src="js/jquery.visualNav.js"></script>
<script>
$(function(){
$('.navbar').visualNav({
selectedClass : 'active'
});
});
</script>
</head>
<body class="bootstrap">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Bootstrap menu with visualNav applied -->
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="divider-vertical"></li>
<li class="external"><a href="https://github.com/Mottie/visualNav">Github</a></li>
<li class="external"><a href="https://github.com/Mottie/visualNav/archive/master.zip">Download</a></li>
<li class="divider-vertical"></li>
<li class="external external-horiz">
Demos: (
<a href="index.html" title="Vertical">V</a>|
<a href="horizontal.html" title="Horizontal">H</a> |
<a href="horiz-vert.html" title="Horizontal/Vertical">H/V</a>|
<a href="stepper.html" title="Section stepper">Step</a>|
<a class="current" href="bootstrap.html" title="Twitter Bootstrap">Boot</a> )
</li>
</ul>
</div>
</nav>
<!-- main contents -->
<section>
<article id="home" class="content">
<div class="inner-content">
<header>
<h2>Home</h2>
</header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae sem nec urna interdum tempor vitae quis dolor. Nulla congue, turpis vitae dapibus gravida, purus turpis ornare nibh, sed ornare augue nulla ut mi. Maecenas ligula ante, fermentum ut imperdiet viverra, tristique in risus. Fusce interdum magna et felis aliquam pulvinar. <br>
<span class="right">
<img src="images/home.jpg" height="300" alt="scenery"><br>
<a class="test-link" href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=732">Image: prozac1 / FreeDigitalPhotos.net</a>
</span>
<p>Suspendisse nec dui quam. Donec in nibh urna. Donec blandit consequat augue vitae sollicitudin. Nunc ultrices, urna sed cursus adipiscing, dolor elit blandit metus, at lacinia velit ante et nibh. Etiam eget erat felis. Sed ornare, tellus a aliquet dapibus, ante risus suscipit velit, et faucibus purus sem ut leo.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum in diam metus. Morbi libero risus, adipiscing eu convallis quis, mattis in libero. Cras lobortis, sem sit amet aliquet hendrerit, nulla leo tempus urna, eu aliquam purus massa eget elit. Sed cursus tristique neque, ac commodo sapien imperdiet nec.</p><p>Fusce tincidunt, sapien in dignissim porta, leo velit egestas lorem, ac mattis lorem sapien a magna. Nam ut purus nisi. Maecenas viverra est et nisl aliquam in imperdiet tellus pulvinar.</p><p>Phasellus non pellentesque diam. Sed ac urna vel ligula tempus mollis consequat vitae sapien. Curabitur diam sem, vulputate eu viverra et, consequat sit amet tortor. Integer tempor commodo urna, quis hendrerit velit tincidunt ac. Cras pretium hendrerit odio ac facilisis. Curabitur vestibulum condimentum nulla, eget tincidunt quam porta sit amet. Proin nec nisl a odio semper vehicula.</p>
<br>
<nav class="links">
<a href="#home" class="visualNav">Home</a> |
<a href="#work" class="visualNav">Work</a> |
<a href="#blog" class="visualNav">Blog</a> |
<a href="#projects" class="visualNav">Projects</a> |
<a href="#about" class="visualNav">About</a> |
<a href="#contact" class="visualNav">Contact</a>
</nav>
</div>
</article>
<article id="work" class="content">
<div class="inner-content">
<header>
<h2>Work</h2>
</header>
<span class="left">
<img src="images/icon1.png" height="60" alt="suitcase"> Donec iaculis, est nec feugiat tristique, elit nibh blandit elit, a malesuada sem mauris sit amet justo. Maecenas nisl libero, rhoncus eu sodales eget, viverra in urna. Cras in commodo felis. Curabitur dapibus tempus urna vitae fringilla. Nunc urna mi, iaculis id elementum et, placerat ut diam. Etiam tristique ligula vel arcu cursus rhoncus. Maecenas eget risus lobortis lacus aliquet condimentum.
</span>
<br><br>
<span class="left">
<img src="images/icon2.png" height="60" alt="education"> Donec iaculis, est nec feugiat tristique, elit nibh blandit elit, a malesuada sem mauris sit amet justo. Maecenas nisl libero, rhoncus eu sodales eget, viverra in urna. Cras in commodo felis. Curabitur dapibus tempus urna vitae fringilla. Nunc urna mi, iaculis id elementum et, placerat ut diam. Etiam tristique ligula vel arcu cursus rhoncus. Maecenas eget risus lobortis lacus aliquet condimentum.
</span>
<br><br>
<span class="left">
<img src="images/icon3.png" height="60" alt="book"> Donec iaculis, est nec feugiat tristique, elit nibh blandit elit, a malesuada sem mauris sit amet justo. Maecenas nisl libero, rhoncus eu sodales eget, viverra in urna. Cras in commodo felis. Curabitur dapibus tempus urna vitae fringilla. Nunc urna mi, iaculis id elementum et, placerat ut diam. Etiam tristique ligula vel arcu cursus rhoncus. Maecenas eget risus lobortis lacus aliquet condimentum.
</span>
<br><br>
<nav class="links">
<a href="#home" class="visualNav">Home</a> |
<a href="#work" class="visualNav">Work</a> |
<a href="#blog" class="visualNav">Blog</a> |
<a href="#projects" class="visualNav">Projects</a> |
<a href="#about" class="visualNav">About</a> |
<a href="#contact" class="visualNav">Contact</a>
</nav>
</div>
</article>
<article id="blog" class="content">
<div class="inner-content">
<header>
<h2>Blog</h2>
</header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae sem nec urna interdum tempor vitae quis dolor. Nulla congue, turpis vitae dapibus gravida, purus turpis ornare nibh, sed ornare augue nulla ut mi. Maecenas ligula ante, fermentum ut imperdiet viverra, tristique in risus. Fusce interdum magna et felis aliquam pulvinar. <br>
<span class="right">
<img src="images/blog.jpg" height="200" alt="scenery"><br>
<a class="test-link" href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=732">Image: prozac1 / FreeDigitalPhotos.net</a>
</span>
<p>Suspendisse nec dui quam. Donec in nibh urna. Donec blandit consequat augue vitae sollicitudin. Nunc ultrices, urna sed cursus adipiscing, dolor elit blandit metus, at lacinia velit ante et nibh. Etiam eget erat felis. Sed ornare, tellus a aliquet dapibus, ante risus suscipit velit, et faucibus purus sem ut leo.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum in diam metus. Morbi libero risus, adipiscing eu convallis quis, mattis in libero. Cras lobortis, sem sit amet aliquet hendrerit, nulla leo tempus urna, eu aliquam purus massa eget elit. Sed cursus tristique neque, ac commodo sapien imperdiet nec.</p><p>Fusce tincidunt, sapien in dignissim porta, leo velit egestas lorem, ac mattis lorem sapien a magna. Nam ut purus nisi. Maecenas viverra est et nisl aliquam in imperdiet tellus pulvinar.</p><p>Phasellus non pellentesque diam. Sed ac urna vel ligula tempus mollis consequat vitae sapien. Curabitur diam sem, vulputate eu viverra et, consequat sit amet tortor. Integer tempor commodo urna, quis hendrerit velit tincidunt ac. Cras pretium hendrerit odio ac facilisis. Curabitur vestibulum condimentum nulla, eget tincidunt quam porta sit amet. Proin nec nisl a odio semper vehicula.</p>
<br>
<nav class="links">
<a href="#home" class="visualNav">Home</a> |
<a href="#work" class="visualNav">Work</a> |
<a href="#blog" class="visualNav">Blog</a> |
<a href="#projects" class="visualNav">Projects</a> |
<a href="#about" class="visualNav">About</a> |
<a href="#contact" class="visualNav">Contact</a>
</nav>
</div>
</article>
<article id="projects" class="content">
<div class="inner-content">
<header>
<h2>Projects</h2>
</header>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit rhoncus purus at varius. Cras feugiat, ante ac lobortis aliquet, felis velit vestibulum quam, dignissim condimentum neque orci quis lorem. Cras sapien velit, commodo quis laoreet ut, facilisis vitae metus. Vivamus eget neque vel ligula hendrerit ullamcorper id semper diam.</li>
<li>Fusce luctus dolor eu felis malesuada nec pellentesque mauris dictum. In hac habitasse platea dictumst. Ut mollis dictum nulla, eget lobortis tortor vehicula eget. Pellentesque placerat commodo metus, at aliquet diam auctor mollis.</li>
<li>Aliquam varius, neque sed tempus iaculis, velit ligula ultrices felis, sit amet semper sapien augue sit amet sapien. Mauris viverra leo ac mauris auctor id consequat massa fringilla.</li>
<li>Nulla sed magna quam, vitae convallis lacus. Ut et purus erat, consectetur convallis lectus. Sed rhoncus adipiscing condimentum. In porttitor est sed tellus vestibulum vitae venenatis metus tempor. Mauris vehicula hendrerit dictum. Nullam eget nulla et arcu porta convallis. Praesent porttitor congue libero ut bibendum. Sed vel arcu diam. Proin eleifend dui eu quam ullamcorper sed eleifend nisi pellentesque.</li>
<li>Vivamus elementum porta ligula quis molestie. Nunc eget dolor velit, sed ultrices justo. Integer urna tortor, porttitor blandit feugiat sed, sodales sed nulla. Quisque sed lacus arcu. Vestibulum vel sapien at felis fermentum ultricies. Nullam imperdiet massa at urna vulputate pretium. Nam quis est velit, at vehicula sapien. Praesent nec quam ligula, sed ultrices dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
<li>Fusce molestie eros sed augue feugiat fermentum. Donec hendrerit varius nibh, non tincidunt erat condimentum eu. In et imperdiet est. Duis malesuada facilisis nunc quis congue. Donec nec enim et tellus pretium porta. Phasellus condimentum risus quis mauris faucibus nec adipiscing erat eleifend. Suspendisse urna arcu, rutrum sit amet pretium eu, posuere sed ligula. Aliquam vel tempor felis.</li>
<li>Suspendisse potenti. Maecenas et augue at nisi eleifend aliquam. Quisque et diam leo, eget feugiat neque. Nulla viverra vehicula augue, luctus fringilla felis lacinia non. Nulla non sapien vel justo tempor pharetra.</li>
<li>Donec iaculis, est nec feugiat tristique, elit nibh blandit elit, a malesuada sem mauris sit amet justo. Maecenas nisl libero, rhoncus eu sodales eget, viverra in urna. Cras in commodo felis. Curabitur dapibus tempus urna vitae fringilla. Nunc urna mi, iaculis id elementum et, placerat ut diam. Etiam tristique ligula vel arcu cursus rhoncus. Maecenas eget risus lobortis lacus aliquet condimentum. Mauris ultrices, tellus a congue euismod, augue enim volutpat sapien, facilisis vehicula ipsum nisl non dolor.</li>
<li>Quisque vitae dui tellus, convallis ullamcorper justo. Fusce vitae lectus purus, eget semper sapien. Nulla imperdiet tellus ut dolor ultrices ultrices nec egestas ipsum. Suspendisse ultricies, turpis a egestas posuere, libero ligula pretium nisl, ut auctor libero urna in tortor.</li>
<li>Sed cursus, lacus pharetra pellentesque aliquam, felis erat tristique ante, eget sodales est erat pulvinar elit. Nam felis tellus, luctus eu pharetra eu, vulputate lacinia ligula. Nam arcu enim, interdum eget mollis ut, vulputate sit amet mi. Nam massa neque, mattis id porta sit amet, viverra id lacus. Nam ultricies pellentesque urna cursus pretium. Donec libero justo, interdum vel ornare et, luctus malesuada diam. Curabitur fringilla magna quis mauris gravida et vulputate massa ultrices. Aliquam erat volutpat. Etiam nec ante sit amet lorem fringilla iaculis eget a orci. Nulla in nulla tortor.</li>
</ol>
<nav class="links">
<a href="#home" class="visualNav">Home</a> |
<a href="#work" class="visualNav">Work</a> |
<a href="#blog" class="visualNav">Blog</a> |
<a href="#projects" class="visualNav">Projects</a> |
<a href="#about" class="visualNav">About</a> |
<a href="#contact" class="visualNav">Contact</a>
</nav>
</div>
</article>
<article id="about" class="content">
<div class="inner-content">
<header>
<h2>About</h2>
</header>
Fusce molestie eros sed augue feugiat fermentum. Donec hendrerit varius nibh, non tincidunt erat condimentum eu. In et imperdiet est. Duis malesuada facilisis nunc quis congue. Donec nec enim et tellus pretium porta. Phasellus condimentum risus quis mauris faucibus nec adipiscing erat eleifend. Suspendisse urna arcu, rutrum sit amet pretium eu, posuere sed ligula. Aliquam vel tempor felis. Suspendisse potenti. Maecenas et augue at nisi eleifend aliquam. Quisque et diam leo, eget feugiat neque. Nulla viverra vehicula augue, luctus fringilla felis lacinia non. Nulla non sapien vel justo tempor pharetra.
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum in diam metus. Morbi libero risus, adipiscing eu convallis quis, mattis in libero. Cras lobortis, sem sit amet aliquet hendrerit, nulla leo tempus urna, eu aliquam purus massa eget elit. Sed cursus tristique neque, ac commodo sapien imperdiet nec.</p><p>Fusce tincidunt, sapien in dignissim porta, leo velit egestas lorem, ac mattis lorem sapien a magna. Nam ut purus nisi. Maecenas viverra est et nisl aliquam in imperdiet tellus pulvinar.</p><p>Phasellus non pellentesque diam. Sed ac urna vel ligula tempus mollis consequat vitae sapien. Curabitur diam sem, vulputate eu viverra et, consequat sit amet tortor. Integer tempor commodo urna, quis hendrerit velit tincidunt ac. Cras pretium hendrerit odio ac facilisis. Curabitur vestibulum condimentum nulla, eget tincidunt quam porta sit amet. Proin nec nisl a odio semper vehicula.</p>
<p>Sed cursus, lacus pharetra pellentesque aliquam, felis erat tristique ante, eget sodales est erat pulvinar elit. Nam felis tellus, luctus eu pharetra eu, vulputate lacinia ligula. Nam arcu enim, interdum eget mollis ut, vulputate sit amet mi. Nam massa neque, mattis id porta sit amet, viverra id lacus. Nam ultricies pellentesque urna cursus pretium. Donec libero justo, interdum vel ornare et, luctus malesuada diam. Curabitur fringilla magna quis mauris gravida et vulputate massa ultrices. Aliquam erat volutpat. Etiam nec ante sit amet lorem fringilla iaculis eget a orci. Nulla in nulla tortor.</p>
<p>Sed cursus, lacus pharetra pellentesque aliquam, felis erat tristique ante, eget sodales est erat pulvinar elit. Nam felis tellus, luctus eu pharetra eu, vulputate lacinia ligula. Nam arcu enim, interdum eget mollis ut, vulputate sit amet mi. Nam massa neque, mattis id porta sit amet, viverra id lacus. Nam ultricies pellentesque urna cursus pretium. Donec libero justo, interdum vel ornare et, luctus malesuada diam. Curabitur fringilla magna quis mauris gravida et vulputate massa ultrices. Aliquam erat volutpat. Etiam nec ante sit amet lorem fringilla iaculis eget a orci. Nulla in nulla tortor.</p>
<p>Sed cursus, lacus pharetra pellentesque aliquam, felis erat tristique ante, eget sodales est erat pulvinar elit. Nam felis tellus, luctus eu pharetra eu, vulputate lacinia ligula. Nam arcu enim, interdum eget mollis ut, vulputate sit amet mi. Nam massa neque, mattis id porta sit amet, viverra id lacus. Nam ultricies pellentesque urna cursus pretium. Donec libero justo, interdum vel ornare et, luctus malesuada diam. Curabitur fringilla magna quis mauris gravida et vulputate massa ultrices. Aliquam erat volutpat. Etiam nec ante sit amet lorem fringilla iaculis eget a orci. Nulla in nulla tortor.</p>
<nav class="links">
<a href="#home" class="visualNav">Home</a> |
<a href="#work" class="visualNav">Work</a> |
<a href="#blog" class="visualNav">Blog</a> |
<a href="#projects" class="visualNav">Projects</a> |
<a href="#about" class="visualNav">About</a> |
<a href="#contact" class="visualNav">Contact</a>
</nav>
</div>
</article>
<article id="contact" class="content">
<div class="inner-content">
<header>
<h2>Contact</h2>
</header>
<span class="left">
<img src="images/icon4.png" height="50" alt="phone"> Maecenas et augue at nisi eleifend aliquam: [email protected]
</span>
<br><br>
<span class="left">
<img src="images/icon2.png" height="50" alt="suitcase"> Donec iaculis, est nec feugiat tristique, elit nibh blandit elit, a malesuada sem mauris sit amet justo.
</span>
<br><br>
<span class="left">
<img src="images/icon4.png" height="50" alt="phone"> Maecenas et augue at nisi eleifend aliquam: [email protected]
</span>
<br><br>
<span class="left">
<img src="images/icon2.png" height="50" alt="suitcase"> Donec iaculis, est nec feugiat tristique, elit nibh blandit elit, a malesuada sem mauris sit amet justo.
</span>
<br>
<nav class="links">
<a href="#home" class="visualNav">Home</a> |
<a href="#work" class="visualNav">Work</a> |
<a href="#blog" class="visualNav">Blog</a> |
<a href="#projects" class="visualNav">Projects</a> |
<a href="#about" class="visualNav">About</a> |
<a href="#contact" class="visualNav">Contact</a>
</nav>
</div>
</article>
</section>
<!-- end contents -->
<footer id="footer" class="content">
<p>Images & icons sources: www.freedigitalphotos.net & www.bestfreeicons.com</p>
</footer>
</body>
</html>