-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtabs.html
45 lines (36 loc) · 2.3 KB
/
tabs.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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="author" content="Mark Boulton Design" />
<meta name="description" content="UCL Homepage" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
<title>UCL Design Language</title>
<link href="./css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<script src="./js/jquery.js"></script>
<script src="./js/ucl.js"></script>
<!--[if IE]><link href="./css/ie.css" rel="stylesheet" /><![endif]-->
<!--[if lt IE 8]><link href="./css/ie-old.css" rel="stylesheet" /><![endif]-->
<!--[if lte IE 8]><script src="./js/html5.js"></script><![endif]-->
</head>
<body id="tabs-view"><div class="tabbed">
<ul class="tabs clearfix">
<li><a href="#tab-1">Tab one</a></li>
<li><a href="#tab-2">Tab two</a></li>
<li><a href="#tab-3">Tab three</a></li>
</ul>
<div id="tab-1">
<h3>Tab 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec</p>
</div>
<div id="tab-2">
<h3>Tab 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec</p>
</div>
<div id="tab-3">
<h3>Tab 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula content-mainbibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio.</p>
</div>
</div>
</body>
</html>