-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
269 lines (268 loc) · 13.2 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
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iaS / Whitesquare</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container wrap">
<div class="header_top">
<a href="/"><img src="images/logo.png" alt="Logo"></a>
<form action="#" class="form-inline form-search pull-right">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Go</button>
</span>
</div>
</form>
</div>
<nav class="navbar navbar-default">
<ul class="nav nav-pills nav-justified">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">PARTNERS</a></li>
<li><a href="#">CUSTOMERS</a></li>
<li class="active"><a href="#">PROJECTS</a></li>
<li><a href="#">CAREERS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<div class="header_bottom">
<h1>OUR PROJECTS</h1>
</div>
<div class="row">
<aside class="col-md-7 sidebar">
<ul class="list-group submenu">
<li class="list-group-item" role="tab" id="collapseListGroupHeading1">
<h4 class="panel-title">
<a class="" data-toggle="collapse" href="#collapseListGroup1" aria-expanded="true" aria-controls="collapseListGroup1">
LOREM IPSUM
</a>
</h4>
</li>
<div id="collapseListGroup1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading1" aria-expanded="false">
<ul class="list-group">
<li class="list-group-subitem"><a href="#">LOREM IPSUM SUBMENU 1</a></li>
<li class="list-group-subitem"><a href="#">LOREM IPSUM SUBMENU 2</a></li>
<li class="list-group-subitem"><a href="#">LOREM IPSUM SUBMENU 3</a></li>
<li class="list-group-subitem"><a href="#">LOREM IPSUM SUBMENU 4</a></li>
</ul>
</div>
<li class="list-group-item" role="tab" id="collapseListGroupHeading2">
<h4 class="panel-title">
<a class="" data-toggle="collapse" href="#collapseListGroup2" aria-expanded="true" aria-controls="collapseListGroup2">
DONEC TINCIDUNT LAOREET
</a>
</h4>
</li>
<div id="collapseListGroup2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading2" aria-expanded="false">
<ul class="list-group">
<li class="list-group-subitem"><a href="#">DONEC TINCIDUNT LAOREET SUBMENU 1</a></li>
<li class="list-group-subitem"><a href="#">DONEC TINCIDUNT LAOREET SUBMENU 2</a></li>
<li class="list-group-subitem"><a href="#">DONEC TINCIDUNT LAOREET SUBMENU 3</a></li>
<li class="list-group-subitem"><a href="#">DONEC TINCIDUNT LAOREET SUBMENU 4</a></li>
</ul>
</div>
<li class="list-group-item" role="tab" id="collapseListGroupHeading3">
<h4 class="panel-title">
<a class="" data-toggle="collapse" href="#collapseListGroup3" aria-expanded="true" aria-controls="collapseListGroup3">
VESTIBULUM ELIT
</a>
</h4>
</li>
<div id="collapseListGroup3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading3" aria-expanded="false">
<ul class="list-group">
<li class="list-group-subitem"><a href="#">VESTIBULUM ELIT SUBMENU 1</a></li>
<li class="list-group-subitem"><a href="#">VESTIBULUM ELIT SUBMENU 2</a></li>
<li class="list-group-subitem"><a href="#">VESTIBULUM ELIT SUBMENU 3</a></li>
<li class="list-group-subitem"><a href="#">VESTIBULUM ELIT SUBMENU 4</a></li>
</ul>
</div>
<li class="list-group-item" role="tab" id="collapseListGroupHeading4">
<h4 class="panel-title">
<a class="" data-toggle="collapse" href="#collapseListGroup4" aria-expanded="true" aria-controls="collapseListGroup4">
ETIAM PHARETRA
</a>
</h4>
</li>
<div id="collapseListGroup4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading4" aria-expanded="false">
<ul class="list-group">
<li class="list-group-subitem"><a href="#">ETIAM PHARETRA SUBMENU 1</a></li>
<li class="list-group-subitem"><a href="#">ETIAM PHARETRA SUBMENU 2</a></li>
<li class="list-group-subitem"><a href="#">ETIAM PHARETRA SUBMENU 3</a></li>
<li class="list-group-subitem"><a href="#">ETIAM PHARETRA SUBMENU 4</a></li>
</ul>
</div>
<li class="list-group-item" role="tab" id="collapseListGroupHeading5">
<h4 class="panel-title">
<a class="" data-toggle="collapse" href="#collapseListGroup5" aria-expanded="true" aria-controls="collapseListGroup5">
PHASELLUS PLACERAT
</a>
</h4>
</li>
<div id="collapseListGroup5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading5" aria-expanded="false">
<ul class="list-group">
<li class="list-group-subitem"><a href="#">PHASELLUS PLACERAT SUBMENU 1</a></li>
<li class="list-group-subitem"><a href="#">PHASELLUS PLACERAT SUBMENU 2</a></li>
<li class="list-group-subitem"><a href="#">PHASELLUS PLACERAT SUBMENU 3</a></li>
<li class="list-group-subitem"><a href="#">PHASELLUS PLACERAT SUBMENU 4</a></li>
</ul>
</div>
<li class="list-group-item" role="tab" id="collapseListGroupHeading6">
<h4 class="panel-title">
<a class="" data-toggle="collapse" href="#collapseListGroup6" aria-expanded="true" aria-controls="collapseListGroup6">
CRAS ET NISI NITAE ODIO
</a>
</h4>
</li>
<div id="collapseListGroup6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading6" aria-expanded="false">
<ul class="list-group">
<li class="list-group-subitem"><a href="#">CRAS ET NISI NITAE ODIO SUBMENU 1</a></li>
<li class="list-group-subitem"><a href="#">CRAS ET NISI NITAE ODIO SUBMENU 2</a></li>
<li class="list-group-subitem"><a href="#">CRAS ET NISI NITAE ODIO SUBMENU 3</a></li>
<li class="list-group-subitem"><a href="#">CRAS ET NISI NITAE ODIO SUBMENU 4</a></li>
</ul>
</div>
</ul>
<div class="panel panel-primary">
<div class="panel-heading">OUR OFFICES</div>
<div class="panel-body">
<img src="images/map.png" class="img-responsive center-block" alt="our offices"></img>
</div>
</div>
</aside>
<section class="col-md-17 content">
<div class="col-xs-24 first-block">
<div class="title">
LOREM IPSUM SUBMENU 2
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non neque ac sem accumsan rhoncus ut ut turpis. In hac habitasse platea dictumst. Proin eget nisi erat, et feugiat arcu. Duis semper porttitor lectus, ac pharetra erat imperdiet nec. Morbi interdum felis nulla. Aenean eros orci, pellentesque sed egestas vitae, auctor aliquam nisi. Nulla nec libero eget sem rutrum iaculis. Quisque in enim velit, at dignissim est. Nulla ullamcorper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat condimentum metus. Donec sodales aliquam orci id suscipit. Proin sed risus sit amet massa ultrices laoreet quis a erat. Aliquam et metus id erat vulputate egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="col-xs-24">
<div class="col-md-12 col-sm-12 col-xs-24">
<div class="pull-left">
<img src="images/about.png" alt="" class="thumbnail center-block img-responsive">
<p class="text-center pre-title">SCREENSHOT 1</p>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-24">
<div class="pull-right">
<img src="images/about.png" alt="" class="thumbnail center-block img-responsive">
<p class="text-center pre-title">SCREENSHOT 2</p>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-24">
<div class="pull-left">
<img src="images/about.png" alt="" class="thumbnail center-block img-responsive">
<p class="text-center pre-title">SCREENSHOT 3</p>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-24">
<div class="pull-right">
<img src="images/about.png" alt="" class="thumbnail center-block img-responsive">
<p class="text-center pre-title">SCREENSHOT 4</p>
</div>
</div>
</div>
<div class="col-xs-24">
<div class="title">
TECHNOLOGY
</div>
<p>
Donec vel orci purus, ut ornare orci. Aenean rutrum pellentesque quam. Quisque gravida adipiscing augue, eget commodo augue egestas varius. Integer volutpat, tellus porta tincidunt sodales, lacus est tempus odio, fringilla blandit tortor lectus ut sem. Pellentesque nec sem lacus, sit amet consequat neque. Etiam varius urna quis arcu cursus in consectetur dui tincidunt. Quisque arcu orci, lacinia eget pretium vel, iaculis pellentesque nibh. Etiam cursus lacus eget neque viverra vestibulum. Aliquam erat volutpat. Duis pulvinar tellus ut urna facilisis mollis. Maecenas ac pharetra dui. Pellentesque neque ante, luctus eget congue eget, rhoncus vel mauris. Duis nisi magna, aliquet a convallis non, venenatis at nisl. Nunc at quam eu magna malesuada dignissim. Duis bibendum iaculis felis, eu venenatis risus sodales non. In ligula mi, faucibus eu tristique sed, vulputate rutrum dolor.
</p>
</div>
<div class="col-xs-24">
<div class="title col-xs-24">
RELATED PROJECTS
</div>
<div class="caption col-xs-24">
<div class="col-sm-4 col-xs-12 first-el">
<img src="images/rp.png" class="thumbnail">
<span>Related project</span>
</div>
<div class="col-sm-4 col-xs-12 col-sm-offset-1">
<div class="pull-right">
<img src="images/rp.png" class="thumbnail">
<span>Related project</span>
</div>
</div>
<div class="col-sm-4 col-xs-12 col-sm-offset-1">
<div class="pull-right">
<img src="images/rp.png" class="thumbnail">
<span>Related project</span>
</div>
</div>
<div class="col-sm-4 col-xs-12 col-sm-offset-1">
<div class="pull-right">
<img src="images/rp.png" class="thumbnail">
<span>Related project</span>
</div>
</div>
<div class="col-sm-4 col-xs-12 col-sm-offset-1">
<div class="pull-right">
<img src="images/rp.png" class="thumbnail">
<span>Related project</span>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<footer>
<div class="container">
<div class="col-md-8 twit-feed">
<span>TWITTER FEED</span>
<time><a href="#">23 oct</a></time>
<p>
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug
</p>
</div>
<div class="col-md-4 sitemap">
<span>SITEMAP</span>
<div class="col-md-24">
<div class="col-md-12">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
</div>
<div class="col-md-12">
<a href="#">Partners</a>
<a href="#">Support</a>
<a href="#">Contact</a>
</div>
</div>
</div>
<div class="col-md-4 social">
<span>SOCIAL NETWORKS</span>
<a href="#" class="social-icon twitter"></a>
<a href="#" class="social-icon facebook"></a>
<a href="#" class="social-icon google-plus"></a>
<a href="#" class="social-icon-small vimeo"></a>
<a href="#" class="social-icon-small youtube"></a>
<a href="#" class="social-icon-small flickr"></a>
<a href="#" class="social-icon-small instagram"></a>
<a href="#" class="social-icon-small rss"></a>
</div>
<div class="col-md-8 footer-logo">
<a href="#" class="pull-right"><img src="images/footer-logo.png" alt="Logo"></a>
<p class="pull-right">
Copyright © 2012 Whitesquare. A <a href="#">pcklab</a> creation
</p>
</div>
</div>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/common.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</body>
</html>