-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (131 loc) · 5.31 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
<!DOCTYPE html>
<html>
<head>
<title>Sandbox Playground</title>
<link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style/main.css">
<script src="lib/jquery-2.1.4.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1 class="title">Jquery & Bootstrap Sandbox</h1>
<div class="row row-centered">
<div class="col-sm-4 col-centered">
<button class="btn btn-primary btn-block hoverbutton" data-panelid="panel1">Hover over me!</button>
</div>
<div class="col-sm-4 col-centered">
<button class="btn btn-primary btn-block hoverbutton" data-panelid="panel2">Hover over me!</button>
</div>
<div class="col-sm-4 col-centered">
<button class="btn btn-primary btn-block hoverbutton" data-panelid="panel3">Hover over me!</button>
</div>
<div class="col-sm-4 col-centered">
<button class="btn btn-primary btn-block clickbutton" data-panelid="panel4">Click me!</button>
</div>
<div class="col-sm-4 col-centered">
<button class="btn btn-primary btn-block clickbutton" data-panelid="panel5">Click me!</button>
</div>
<div class="col-sm-4 col-centered">
<button class="btn btn-primary btn-block clickbutton" data-panelid="panel6">Click me!</button>
</div>
</div>
</div>
<div class="row row-centered">
<div class="col-sm-4 col-centered">
<div id="panel1" class="panel panel-primary">
<div class="panel-heading">Panel One</div>
<div class="panel-body">Silly Content</div>
</div>
</div>
<div class="col-sm-4 col-centered">
<div id="panel2" class="panel panel-primary">
<div class="panel-heading">Panel Two</div>
<div class="panel-body">Silly Content</div>
</div>
</div>
<div class="col-sm-4 col-centered">
<div id="panel3" class="panel panel-primary">
<div class="panel-heading">Panel Three</div>
<div class="panel-body">Silly Content</div>
</div>
</div>
<div class="col-sm-4 col-centered">
<div id="panel4" class="panel panel-primary">
<div class="panel-heading clickme">Panel Four</div>
<div class="panel-body">Look at me!</div>
</div>
</div>
<div class="col-sm-4 col-centered">
<div id="panel5" class="panel panel-primary">
<div class="panel-heading clickme">Panel Five</div>
<div class="panel-body">Look at me!</div>
</div>
</div>
<div class="col-sm-4 col-centered">
<div id="panel6" class="panel panel-primary">
<div class="panel-heading clickme">Panel Six</div>
<div class="panel-body">Look at me!</div>
</div>
</div>
<div class="tab-panels col-sm-4 col-centered">
<ul class="tabs">
<li rel="tab-panel1" class="active"># 1</li>
<li rel="tab-panel2"># 2</li>
<li rel="tab-panel3"># 3</li>
<li rel="tab-panel4"># 4</li>
</ul>
<div id="tab-panel1" class="tab-panel active">
Silly Content Goes Here #1<br/>
Silly Content Goes Here #1<br/>
Silly Content Goes Here #1<br/>
Silly Content Goes Here #1<br/>
Silly Content Goes Here #1<br/>
</div>
<div id="tab-panel2" class="tab-panel">
Something else #2<br/>
Something else #2<br/>
Something else #2<br/>
Something else #2<br/>
Something else #2<br/>
</div>
<div id="tab-panel3" class="tab-panel">
Oh noes! #3<br/>
Oh noes! #3<br/>
Oh noes! #3<br/>
Oh noes! #3<br/>
Oh noes! #3<br/>
</div>
<div id="tab-panel4" class="tab-panel">
Who What Were #4<br/>
Who What Were #4<br/>
Who What Were #4<br/>
Who What Were #4<br/>
Who What Were #4<br/>
</div>
</div>
</div>
<div class="mytitle">Slider Example
<div id="myslider">
<ul class="myslides">
<li class="myslide"><img src="img/cat1.jpg"/></li>
<li class="myslide"><img src="img/catday1.jpg"/></li>
<li class="myslide"><img src="img/cat2.jpg"/></li>
<li class="myslide"><img src="img/catday2.jpg"/></li>
<li class="myslide"><img src="img/cat3.jpg"/></li>
<li class="myslide"><img src="img/catday3.jpg"/></li>
<li class="myslide"><img src="img/cat4.jpg"/></li>
<li class="myslide"><img src="img/catday4.jpg"/></li>
<li class="myslide"><img src="img/cat5.jpg"/></li>
<li class="myslide"><img src="img/catday5.jpg"/></li>
<li class="myslide"><img src="img/cat6.jpg"/></li>
<li class="myslide"><img src="img/catday6.jpg"/></li>
<li class="myslide"><img src="img/cat1.jpg"/></li>
</ul>
</div>
</div>
</div>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>