-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·219 lines (219 loc) · 14 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
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sticky Banner</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="con" class="container">
<div class="row">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">The Site</a>
</div>
</div>
</nav>
</div>
<div class="row">
<div class="col-md-8">
<div class="page-header">
<h1>Duis nec vehicula tellus. Nulla.</h1>
</div>
<div class="page-content">
<div class="page-image">
<img src="http://placehold.it/1028x468" class="img-responsive">
</div>
<p>Morbi fringilla nunc vel purus aliquam blandit. Nam ut euismod nisi, vel ullamcorper purus. Vivamus
justo sem, iaculis ac mattis id, facilisis ornare neque. Fusce ornare, orci id porta ullamcorper,
velit mauris volutpat leo, eu pulvinar velit tellus quis urna. Duis quis elit at sapien scelerisque
tempus. Nunc hendrerit dolor et luctus vulputate. Donec id sem sit amet mauris fermentum elementum
sed at lacus.</p>
<p>Quisque tincidunt metus nec dignissim malesuada. Integer quis ex dolor. Nunc diam dui, tempus eget
massa id, bibendum luctus purus. Integer finibus interdum elementum. Nullam nec vulputate dolor.
Vivamus sodales eu odio vitae efficitur. Integer in est id leo bibendum suscipit gravida in felis.
In id rutrum est.</p>
<p>Aliquam venenatis turpis ac tortor egestas, eu hendrerit turpis ultrices. Phasellus rutrum aliquam
lacus. Donec nec tortor at arcu sollicitudin viverra sed eget mi. Vestibulum elementum, felis in
vehicula vestibulum, nibh nibh venenatis neque, et pellentesque diam urna sit amet nulla. Sed in
purus sed libero iaculis commodo eget nec mauris. Morbi est lacus, dapibus et gravida sit amet,
iaculis ac erat. Morbi gravida faucibus enim ut tempus. Etiam gravida purus dolor. Cras sagittis,
mauris id venenatis pulvinar, mi erat convallis nisl, id feugiat magna nibh non elit. Suspendisse
potenti. Sed gravida pharetra vulputate.</p>
<p>
<img src="http://placehold.it/300x250" class="pull-left">
Maecenas mauris diam, pellentesque quis interdum ultrices, dictum aliquam quam. Suspendisse sed
fermentum ante, quis auctor magna. Mauris ornare risus at consectetur dapibus. Etiam ac ultricies
arcu. Suspendisse vulputate porttitor lacus sed pulvinar. Ut egestas, ipsum sit amet posuere
vulputate, orci arcu dignissim urna, eu venenatis est eros eget nulla. Aliquam faucibus purus at
lectus dignissim, eu consectetur magna pellentesque. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed varius velit et
tellus ornare, et ultrices nulla dapibus. Vivamus quis finibus nibh, sed ultrices tortor.
</p>
<p>Suspendisse lobortis urna eget metus facilisis consectetur. Donec fermentum et sem nec commodo. Morbi
imperdiet, dolor vitae rutrum dictum, elit lacus blandit tellus, eu suscipit lorem tortor sed diam.
Sed porta blandit erat eget mattis. Pellentesque nisi tortor, tempus non aliquet nec, luctus ut
enim. Praesent accumsan leo viverra risus dignissim, a euismod nibh tempus. Etiam at malesuada
lectus, a venenatis turpis. Proin nunc nibh, placerat non elit non, luctus pellentesque urna. Ut
pulvinar tincidunt cursus.</p>
<p>Pellentesque at euismod sem. Sed vel finibus dui. Aenean in blandit elit. In urna risus, sodales sed
dolor id, semper sagittis libero. Mauris ullamcorper facilisis congue. Donec elementum, leo et
ullamcorper dignissim, nisl odio elementum odio, sed euismod ex est sit amet nisi. Cras magna elit,
porttitor et augue ac, commodo ullamcorper enim. Nulla ullamcorper feugiat maximus. Nulla lacinia
nibh ac semper rutrum. Donec vulputate ex ut est luctus, in pharetra nibh imperdiet. Phasellus
dictum ante eget ultricies viverra. Ut sodales ac justo tempor vestibulum.</p>
<p>Aliquam lacinia elit est, vitae dictum erat sollicitudin in. Nullam convallis vehicula ipsum et
tempor. Curabitur feugiat neque ac dui venenatis, vitae accumsan lectus cursus. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Donec nec sem varius, tincidunt nisi ac,
mollis lectus. Nullam luctus congue neque, id tincidunt justo ultrices non. Pellentesque
sollicitudin ipsum eu nunc aliquet, nec egestas orci porttitor. Etiam vel leo non libero ultricies
tempor nec a enim.</p>
<div class="ads"><img src="http://placehold.it/320x100" class="center-block"></div>
</div>
</div>
<div class="col-md-4">
<div class="ads"><img src="http://placehold.it/300x250"></div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
Ad Vegan Excepteur Butcher
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
3 Wolf Moon Officia Aute
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
<div class="ads" id="the-target"><img src="http://placehold.it/300x600"></div>
</div>
</div>
<!-- <hr> -->
<div class="jumbotron">
<div class="container">
<p>Quisque ullamcorper porttitor nisi, in volutpat mauris. Vivamus interdum, tellus in vulputate facilisis,
massa ipsum consequat ligula, in auctor dui sem pulvinar lorem. Nam vitae vulputate mauris. Morbi at
quam tempus felis ornare pellentesque. Sed viverra purus eget mattis maximus</p>
</div>
</div>
<hr>
<div class="ads"><img src="http://placehold.it/728x90" class="center-block"></div>
<hr>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/242x200">
<div class="caption">
<h3>Viverra Tellus</h3>
<p>Mauris interdum augue vitae urna dictum, id tincidunt mauris vulputate. Ut dolor justo, porta ut
ligula eu, convallis faucibus neque. Ut sit amet efficitur nunc, nec fringilla ipsum.</p>
<p>Pellentesque eget tellus et sapien varius porta. Etiam ac cursus magna, vitae fringilla ante.
Mauris molestie dignissim lacus vel placerat. Sed at leo lacinia, tincidunt ex quis, semper
nisl. Nullam luctus arcu at est malesuada ornare. Aenean volutpat mi hendrerit iaculis
auctor.</p>
<p><a href="#" class="btn btn-primary" role="button">Detail</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/242x200">
<div class="caption">
<h3>Viverra Tellus</h3>
<p>Mauris interdum augue vitae urna dictum, id tincidunt mauris vulputate. Ut dolor justo, porta ut
ligula eu, convallis faucibus neque. Ut sit amet efficitur nunc, nec fringilla ipsum.</p>
<p>Pellentesque eget tellus et sapien varius porta. Etiam ac cursus magna, vitae fringilla ante.
Mauris molestie dignissim lacus vel placerat. Sed at leo lacinia, tincidunt ex quis, semper
nisl. Nullam luctus arcu at est malesuada ornare. Aenean volutpat mi hendrerit iaculis
auctor.</p>
<p><a href="#" class="btn btn-primary" role="button">Detail</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/242x200">
<div class="caption">
<h3>Viverra Tellus</h3>
<p>Mauris interdum augue vitae urna dictum, id tincidunt mauris vulputate. Ut dolor justo, porta ut
ligula eu, convallis faucibus neque. Ut sit amet efficitur nunc, nec fringilla ipsum.</p>
<p>Pellentesque eget tellus et sapien varius porta. Etiam ac cursus magna, vitae fringilla ante.
Mauris molestie dignissim lacus vel placerat. Sed at leo lacinia, tincidunt ex quis, semper
nisl. Nullam luctus arcu at est malesuada ornare. Aenean volutpat mi hendrerit iaculis
auctor.</p>
<p><a href="#" class="btn btn-primary" role="button">Detail</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/242x200">
<div class="caption">
<h3>Viverra Tellus</h3>
<p>Mauris interdum augue vitae urna dictum, id tincidunt mauris vulputate. Ut dolor justo, porta ut
ligula eu, convallis faucibus neque. Ut sit amet efficitur nunc, nec fringilla ipsum.</p>
<p>Pellentesque eget tellus et sapien varius porta. Etiam ac cursus magna, vitae fringilla ante.
Mauris molestie dignissim lacus vel placerat. Sed at leo lacinia, tincidunt ex quis, semper
nisl. Nullam luctus arcu at est malesuada ornare. Aenean volutpat mi hendrerit iaculis
auctor.</p>
<p><a href="#" class="btn btn-primary" role="button">Detail</a></p>
</div>
</div>
</div>
</div>
<hr>
<footer>
<div class="container text-center">
<p class="text-muted">© The Site</p>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="main.js"></script>
<script>
$(function () {
$('.collapse').collapse()
});
</script>
</body>
</html>