forked from nguyenducviet1998tk/Avada-Project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
PagesSidebar.html
259 lines (253 loc) · 16 KB
/
PagesSidebar.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pages Sidebars</title>
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu|Fauna+One|Concert+One|Roboto+Slab|Alegreya+Sans" rel="stylesheet">
</head>
<body>
<div id="app">
<!--Header-->
<div id="header">
<div class="bg-white">
<div class="container">
<nav class="navbar">
<div class="navbar-hreader">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menutopmain" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand logo">Avad<span class="color-green-main">a <span class="span-bouble-dot">:</span></span></a>
</div>
<div class="collapse navbar-collapse" id="menutopmain">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Shortcodes</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Pages</a>
<ul class="dropdown-menu">
<li><a href="">About us</a></li>
<li><a href="">Services</a></li>
<li><a href="">Pricing</a></li>
<li><a href="PagesFAQ.html">FAQ</a></li>
<li><a href="">Side Navigation</a></li>
<li><a href="">Sidebar</a></li>
<li><a href="">Full Width</a></li>
<li><a href="">Third Level Nav</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!--End Header-->
<!--Header Content-->
<div class="header-content">
<div class="container">
<div class="pull-left"><h4>Sidebar</h4></div>
<div class="pull-right">
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pages</a></li>
<li class="active">Sidebar</li>
</ol>
</div>
</div>
</div>
<!--End Header Content-->
<!--Section-->
<div id="section">
<div class="container">
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 ">
<input type="text" class="form-control" value="Search...">
<div class="tab-kd">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Popular</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Recent</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"><i class="fa fa-comments fa-2x" class="icon" aria-hidden="true"></i></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/60x60" alt="...">
</a>
</div>
<div class="media-body">
<a href="">Nemo enim ipsam vol temtur magni dolores</a>
<p class="small">September 7 2012</p>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/60x60" alt="...">
</a>
</div>
<div class="media-body">
<a href="">Nemo enim ipsam vol temtur magni dolores</a>
<p class="small">September 7 2012</p>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/60x60" alt="...">
</a>
</div>
<div class="media-body">
<a href="">Nemo enim ipsam vol temtur magni dolores</a>
<p class="small">September 7 2012</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
<div class="panel panel-default panel-widget">
<div class="panel-heading"><a>Basic text widget</a></div>
<div class="panel-body">
<p class="small">Fugiat dapibus,tellus ac cursur commo do,mauris sit condime ntum nibh,uter sitse fermentum massa justo vitaes amet r quia consequuntur magni uns.</p>
</div>
</div>
<div class="panel panel-kd">
<div class="panel-heading">
<a href="">Happy Clients With Happy Words</a>
</div>
<div class="panel-body">
<div class="panel-mess">
"Pellentsque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas, et netus et malesuada fames ac turpis egestas.
Donec eu libero sit amet quam egestas semper."
</div>
<div class="user-cpn">
<i class="fa fa-user-secret fa-2x"></i>
<strong>Jon Doe,</strong><span class="small"> Company Inc</span>
</div>
</div>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
<div class="thumbnail thumbnail-kd">
<img src="http://placehold.it/1200x500" alt="...">
<div class="caption">
<h4>Lorem Ipsum Un Voluptas Sadips Nemis Sits Fugiat Dolores</h4>
<p class="small">At vero eos et accusamus et lusto odios un dignissimos ducimus qui blan ditils prasixer esentium voluptatum un del-eniti atqueste sites excep turiitate non providentsimils.Thank you very much for your letter which arrived a few days ago. It was lovely to hear from you. I am sorry, I haven’t written for you such along time because I studied hard to pass the final exam. </p>
<br>
<p class="small">At vero eos et accusamus et lusto <a href="">odios un dignissimos ducimus qui blan ditils </a> prasixer esentium voluptatum un del-eniti atqueste sites excep turiitate non providentsimils.Thank you very much for your letter which arrived a few days ago. It was lovely to hear from you. I am sorry, I haven’t written for you such along time because I studied hard to pass the final exam.</p>
<div class="media">
<div class="media-left">
</div>
<div class="media-body" class="col-lg-11">
<p>It is the beautiful concert I have ever taken part in with many people and the miracle of sound of piano. As you know, my pianist is Yiruma and in last concert I could not believe that he appeared in my eyes and gave me a big hug after his performance.</p>
</div>
</div>
<p class="small">How are you? I hear that you are going to travel with your family next week . I wish you will have a good time. Last weekend I went to the party arranged to congratulate Lan. She won competition in her office. That night we had a good time. The party was arranged at Lan's house. Her mother and sister helped to us to prepare interesting dinner. We want to make her surprised. There were many people to join this party and maybe you know some of them. After good meal, we talked and listened romantic songs and danced together. We had interesting and unforgetable night with friends. Ahh, Are you going to next Friday? Don't forget to send me some postcards from places where you will come.</p>
<p class="small">That photograph made me remember my old teacher who taught us high school. She is slim with along hair and blue eyes. Do you remember her? Our enghlish teacher, her name is Sara. I can’t forget that days when she played game with us in each class and we sang ‘ Anilmal song’ together. I also remember that She was very sad when our class didn’t do homework and we felt so guilty with her. Then we studied Enghlish hard to fix our mistakes and she was so happy. But now she doesn’t still teach Enghlish in Viet Nam. Ha - our classmates said she came back England with her husband. I hope she would come to Viet nam, I will meet her because I miss her so much. What about you? What do you think about her? Have you ever had the old teacher who made you unforgettable?</p>
<div class="media-botttom">By Crucio | Photoshop,Photography,Business,Corporate,Creative | 12 Comments</div>
</div>
</div>
</div>
</div>
</div>
<!--End Section-->
<!--Footer-->
<div id="footer">
<div class="footer-detail">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="panel">
<div class="panel-heading">
<a href="" class=" logo">Avad<span class="color-green-main">a <span class="span-bouble-dot">:</span></span></a>
</div>
<div class="panel-body">
<div class="footer-wel">Lorem ipsum ex vix illud nonummy, novum tation et his. At vix scriptaset patrioque scribentur, at pro fugit erts verterem molestiae, sed et vivendo ali Lorem ipsum ex vix illud nonummy, novum tation et his. At vix scripta patriopue scribentur...</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="panel">
<div class="panel-heading">
<h5>RECENT POSTS</h5>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">Voluptas Sadips Ipsums Dolors Untra</li>
<li class="list-group-item">Fugiats Lito Ultrices Ante Auctor</li>
<li class="list-group-item">Voluptas Sadips Ipsums Dolors Untra</li>
<li class="list-group-item">Fugiats Lito Ultrices Ante Auctor</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="panel">
<div class="panel-heading">
<h5>TWITTER</h5>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">@Crucio <span class="small"> I What an awesome theme! We love it, tons of options and great design, thank you! :D </span> 12 minutes ago</li>
<li class="list-group-item">@Crucio <span class="small"> you've got to check this one out, very cool looking! </span> 15 minutes ago</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="panel">
<div class="panel-heading">
<h5>FILCKS</h5>
</div>
<div class="panel-body">
<div class="row-bg-white">
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<p class="small pull-left">Copyright 2017 Avada | All Rights Reserved | Building by<span class="colo-light"> Hoang Kim Duc</span> | <span class="colo-light">ThemeFusion</span></p>
<div class="pull-right link-out">
<i data-toggle="tooltip" title="Facebook" class="fa fa-facebook"></i>
<i data-toggle="tooltip" title="Twitter" class="fa fa-twitter"></i>
<i data-toggle="tooltip" title="Google +" class="fa fa-google-plus"></i>
<i data-toggle="tooltip" title="Linkedin" class="fa fa-linkedin"></i>
</div>
</div>
</div>
</div>
<!--End Footer-->
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js.js"></script>
</body>
</html>