Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 1 
<!DOCTYPE html>
2 
<!--
3 
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.2.0
4 
Version: 3.4
5 
Author: KeenThemes
6 
Website: http://www.keenthemes.com/
7 
Contact: support@keenthemes.com
8 
Follow: www.twitter.com/keenthemes
9 
Like: www.facebook.com/keenthemes
10 
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
11 
License: You must have a valid license purchased only from themeforest (the above link) in order to legally use the theme for your project.
12 
-->
13 
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
14 
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
15 
<!--[if !IE]><!-->
16 
<html lang="en">
17 
<!--<![endif]-->
18 
 
19 
<!-- Head BEGIN -->
20 
<head>
21 
  <meta charset="utf-8">
22 
  <title>Typography | Metronic Frontend</title>
23 
 
24 
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
25 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
26 
 
27 
  <meta content="Metronic Shop UI description" name="description">
28 
  <meta content="Metronic Shop UI keywords" name="keywords">
29 
  <meta content="keenthemes" name="author">
30 
 
31 
  <meta property="og:site_name" content="-CUSTOMER VALUE-">
32 
  <meta property="og:title" content="-CUSTOMER VALUE-">
33 
  <meta property="og:description" content="-CUSTOMER VALUE-">
34 
  <meta property="og:type" content="website">
35 
  <meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
36 
  <meta property="og:url" content="-CUSTOMER VALUE-">
37 
 
38 
  <link rel="shortcut icon" href="favicon.ico">
39 
 
40 
  <!-- Fonts START -->
41 
  <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|PT+Sans+Narrow|Source+Sans+Pro:200,300,400,600,700,900&amp;subset=all" rel="stylesheet" type="text/css">
42 
  <!-- Fonts END -->
43 
 
44 
  <!-- Global styles START -->          
45 
  <link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
46 
  <link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
47 
  <!-- Global styles END -->
48 
 
49 
  <!-- Page level plugin styles START -->
50 
  <link href="../../assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
51 
  <!-- Page level plugin styles END -->
52 
 
53 
  <!-- Theme styles START -->
54 
  <link href="../../assets/global/css/components.css" rel="stylesheet">
55 
  <link href="../../assets/global/css/plugins.css" rel="stylesheet">
56 
  <link href="../../assets/frontend/layout/css/style.css" rel="stylesheet">
57 
  <link href="../../assets/frontend/layout/css/style-responsive.css" rel="stylesheet">
58 
  <link href="../../assets/frontend/layout/css/themes/red.css" rel="stylesheet" id="style-color">
59 
  <link href="../../assets/frontend/layout/css/custom.css" rel="stylesheet">
60 
  <!-- Theme styles END -->
61 
</head>
62 
<!-- Head END -->
63 
 
64 
<!-- Body BEGIN -->
65 
<body class="corporate">
66 
    <!-- BEGIN STYLE CUSTOMIZER -->
67 
    <div class="color-panel hidden-sm">
68 
      <div class="color-mode-icons icon-color"></div>
69 
      <div class="color-mode-icons icon-color-close"></div>
70 
      <div class="color-mode">
71 
        <p>THEME COLOR</p>
72 
        <ul class="inline">
73 
          <li class="color-red current color-default" data-style="red"></li>
74 
          <li class="color-blue" data-style="blue"></li>
75 
          <li class="color-green" data-style="green"></li>
76 
          <li class="color-orange" data-style="orange"></li>
77 
          <li class="color-gray" data-style="gray"></li>
78 
          <li class="color-turquoise" data-style="turquoise"></li>
79 
        </ul>
80 
      </div>
81 
    </div>
82 
    <!-- END BEGIN STYLE CUSTOMIZER -->
83 
 
84 
    <!-- BEGIN TOP BAR -->
85 
    <div class="pre-header">
86 
        <div class="container">
87 
            <div class="row">
88 
                <!-- BEGIN TOP BAR LEFT PART -->
89 
                <div class="col-md-6 col-sm-6 additional-shop-info">
90 
                    <ul class="list-unstyled list-inline">
91 
                        <li><i class="fa fa-phone"></i><span>+1 456 6717</span></li>
92 
                        <li><i class="fa fa-envelope-o"></i><span>info@keenthemes.com</span></li>
93 
                    </ul>
94 
                </div>
95 
                <!-- END TOP BAR LEFT PART -->
96 
                <!-- BEGIN TOP BAR MENU -->
97 
                <div class="col-md-6 col-sm-6 additional-nav">
98 
                    <ul class="list-unstyled list-inline pull-right">
99 
                        <li><a href="page-login.html">Log In</a></li>
100 
                        <li><a href="page-reg-page.html">Registration</a></li>
101 
                    </ul>
102 
                </div>
103 
                <!-- END TOP BAR MENU -->
104 
            </div>
105 
        </div>        
106 
    </div>
107 
    <!-- END TOP BAR -->
108 
    <!-- BEGIN HEADER -->
109 
    <div class="header">
110 
      <div class="container">
111 
        <a class="site-logo" href="index.html"><img src="../../assets/frontend/layout/img/logos/logo-corp-red.png" alt="Metronic FrontEnd"></a>
112 
 
113 
        <a href="javascript:void(0);" class="mobi-toggler"><i class="fa fa-bars"></i></a>
114 
 
115 
        <!-- BEGIN NAVIGATION -->
116 
        <div class="header-navigation pull-right font-transform-inherit">
117 
          <ul>
118 
            <li class="dropdown">
119 
              <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
120 
                Home
121 
 
122 
              </a>
123 
 
124 
              <ul class="dropdown-menu">
125 
                <li><a href="index.html">Home Default</a></li>
126 
                <li><a href="index-header-fix.html">Home with Header Fixed</a></li>
127 
                <li><a href="index-without-topbar.html">Home without Top Bar</a></li>
128 
              </ul>
129 
            </li>
130 
            <li class="dropdown dropdown-megamenu">
131 
              <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
132 
                Mega Menu
133 
 
134 
              </a>
135 
              <ul class="dropdown-menu">
136 
                <li>
137 
                  <div class="header-navigation-content">
138 
                    <div class="row">
139 
                      <div class="col-md-4 header-navigation-col">
140 
                        <h4>Footwear</h4>
141 
                        <ul>
142 
                          <li><a href="index.html">Astro Trainers</a></li>
143 
                          <li><a href="index.html">Basketball Shoes</a></li>
144 
                          <li><a href="index.html">Boots</a></li>
145 
                          <li><a href="index.html">Canvas Shoes</a></li>
146 
                          <li><a href="index.html">Football Boots</a></li>
147 
                          <li><a href="index.html">Golf Shoes</a></li>
148 
                          <li><a href="index.html">Hi Tops</a></li>
149 
                          <li><a href="index.html">Indoor Trainers</a></li>
150 
                        </ul>
151 
                      </div>
152 
                      <div class="col-md-4 header-navigation-col">
153 
                        <h4>Clothing</h4>
154 
                        <ul>
155 
                          <li><a href="index.html">Base Layer</a></li>
156 
                          <li><a href="index.html">Character</a></li>
157 
                          <li><a href="index.html">Chinos</a></li>
158 
                          <li><a href="index.html">Combats</a></li>
159 
                          <li><a href="index.html">Cricket Clothing</a></li>
160 
                          <li><a href="index.html">Fleeces</a></li>
161 
                          <li><a href="index.html">Gilets</a></li>
162 
                          <li><a href="index.html">Golf Tops</a></li>
163 
                        </ul>
164 
                      </div>
165 
                      <div class="col-md-4 header-navigation-col">
166 
                        <h4>Accessories</h4>
167 
                        <ul>
168 
                          <li><a href="index.html">Belts</a></li>
169 
                          <li><a href="index.html">Caps</a></li>
170 
                          <li><a href="index.html">Gloves</a></li>
171 
                        </ul>
172 
 
173 
                        <h4>Clearance</h4>
174 
                        <ul>
175 
                          <li><a href="index.html">Jackets</a></li>
176 
                          <li><a href="index.html">Bottoms</a></li>
177 
                        </ul>
178 
                      </div>
179 
                    </div>
180 
                  </div>
181 
                </li>
182 
              </ul>
183 
            </li>
184 
            <li class="dropdown">
185 
              <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
186 
                Pages
187 
 
188 
              </a>
189 
 
190 
              <ul class="dropdown-menu">
191 
                <li><a href="page-about.html">About Us</a></li>
192 
                <li><a href="page-services.html">Services</a></li>
193 
                <li><a href="page-prices.html">Prices</a></li>
194 
                <li><a href="page-faq.html">FAQ</a></li>
195 
                <li><a href="page-gallery.html">Gallery</a></li>
196 
                <li><a href="page-search-result.html">Search Result</a></li>
197 
                <li><a href="page-404.html">404</a></li>
198 
                <li><a href="page-500.html">500</a></li>
199 
                <li><a href="page-login.html">Login Page</a></li>
200 
                <li><a href="page-forgotton-password.html">Forget Password</a></li>
201 
                <li><a href="page-reg-page.html">Signup Page</a></li>
202 
                <li><a href="page-careers.html">Careers</a></li>
203 
                <li><a href="page-site-map.html">Site Map</a></li>
204 
                <li><a href="page-contacts.html">Contact</a></li>                
205 
              </ul>
206 
            </li>
207 
            <li class="dropdown active">
208 
              <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
209 
                Features
210 
 
211 
              </a>
212 
 
213 
              <ul class="dropdown-menu">
214 
                <li class="active"><a href="feature-typography.html">Typography</a></li>
215 
                <li><a href="feature-buttons.html">Buttons</a></li>
216 
                <li><a href="feature-forms.html">Forms</a></li>
217 
 
218 
                <li class="dropdown-submenu">
219 
                  <a href="index.html">Multi level <i class="fa fa-angle-right"></i></a>
220 
                  <ul class="dropdown-menu" role="menu">
221 
                    <li><a href="index.html">Second Level Link</a></li>
222 
                    <li><a href="index.html">Second Level Link</a></li>
223 
                    <li class="dropdown-submenu">
224 
                      <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
225 
                        Second Level Link
226 
                        <i class="fa fa-angle-right"></i>
227 
                      </a>
228 
                      <ul class="dropdown-menu">
229 
                        <li><a href="index.html">Third Level Link</a></li>
230 
                        <li><a href="index.html">Third Level Link</a></li>
231 
                        <li><a href="index.html">Third Level Link</a></li>
232 
                      </ul>
233 
                    </li>
234 
                  </ul>
235 
                </li>
236 
              </ul>
237 
            </li>
238 
            <li class="dropdown">
239 
              <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
240 
                Portfolio
241 
 
242 
              </a>
243 
 
244 
              <ul class="dropdown-menu">
245 
                <li><a href="portfolio-4.html">Portfolio 4</a></li>
246 
                <li><a href="portfolio-3.html">Portfolio 3</a></li>
247 
                <li><a href="portfolio-2.html">Portfolio 2</a></li>
248 
                <li><a href="portfolio-item.html">Portfolio Item</a></li>
249 
              </ul>
250 
            </li>
251 
            <li class="dropdown">
252 
              <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
253 
                Blog
254 
 
255 
              </a>
256 
 
257 
              <ul class="dropdown-menu">
258 
                <li><a href="blog.html">Blog Page</a></li>
259 
                <li><a href="blog-item.html">Blog Item</a></li>
260 
              </ul>
261 
            </li>
262 
            <li><a href="shop-index.html" target="_blank">E-Commerce</a></li>
263 
            <li><a href="onepage-index.html" target="_blank">One Page</a></li>
264 
            <li><a href="http://keenthemes.com/preview/metronic/theme/templates/admin" target="_blank">Admin theme</a></li>
265 
 
266 
            <!-- BEGIN TOP SEARCH -->
267 
            <li class="menu-search">
268 
              <span class="sep"></span>
269 
              <i class="fa fa-search search-btn"></i>
270 
              <div class="search-box">
271 
                <form action="#">
272 
                  <div class="input-group">
273 
                    <input type="text" placeholder="Search" class="form-control">
274 
                    <span class="input-group-btn">
275 
                      <button class="btn btn-primary" type="submit">Search</button>
276 
                    </span>
277 
                  </div>
278 
                </form>
279 
              </div>
280 
            </li>
281 
            <!-- END TOP SEARCH -->
282 
          </ul>
283 
        </div>
284 
        <!-- END NAVIGATION -->
285 
      </div>
286 
    </div>
287 
    <!-- Header END -->
288 
 
289 
    <div class="main">
290 
      <div class="container">
291 
        <ul class="breadcrumb">
292 
            <li><a href="index.html">Home</a></li>
293 
            <li><a href="#">Features</a></li>
294 
            <li class="active">Typography</li>
295 
        </ul>
296 
        <!-- BEGIN SIDEBAR & CONTENT -->
297 
        <div class="row margin-bottom-40">
298 
          <!-- BEGIN CONTENT -->
299 
          <div class="col-md-12 col-sm-12">
300 
            <h1>Typography</h1>
301 
            <div class="content-page">
302 
              <div class="note note-success">
303 
                <h4 class="block">Metronic Admin (Framework) Features</h4>
304 
                <p>
305 
                  In the frontend theme you can use nearly all the features from <a href="http://keenthemes.com/preview/metronic_admin/" target="_blanl">Metronic Admin Theme</a>. First you will just need to include 2 below global css files:
306 
                  </p>
307 
                  <p>
308 
                  <code>../../assets/global/css/components.css</code><br>
309 
                  <code>../../assets/global/css/plugins.css</code>
310 
                </p>  
311 
                <p>
312 
                And selected plugin's css and js files accordingly.
313 
                </p>
314 
              </div>              
315 
 
316 
<div class="row">
317 
        <div class="col-md-8">
318 
          <div>
319 
            <!-- BEGIN GENERAL PORTLET-->
320 
            <div class="portlet">
321 
              <div class="portlet-title">
322 
                <div class="caption">
323 
                  <i class="fa fa-gift"></i>General
324 
                </div>
325 
                <div class="tools">
326 
                  <a class="collapse" href="javascript:;">
327 
                  </a>
328 
                  <a class="config" data-toggle="modal" href="#portlet-config">
329 
                  </a>
330 
                  <a class="reload" href="javascript:;">
331 
                  </a>
332 
                  <a class="remove" href="javascript:;">
333 
                  </a>
334 
                </div>
335 
              </div>
336 
              <div class="portlet-body">
337 
                <div class="row">
338 
                  <div class="col-md-6">
339 
                    <h3>Sample text with lead body</h3>
340 
                    <p class="lead">
341 
                       Lead body. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
342 
                    </p>
343 
                    <p>
344 
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla.
345 
                    </p>
346 
                    <p>
347 
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla.
348 
                    </p>
349 
                  </div>
350 
                  <div class="col-md-6">
351 
                    <h3>Sample text</h3>
352 
                    <p>
353 
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla.
354 
                    </p>
355 
                    <p>
356 
                       Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
357 
                    </p>
358 
                    <p>
359 
                       Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
360 
                    </p>
361 
                  </div>
362 
                </div>
363 
                <div class="row">
364 
                  <div class="col-md-6">
365 
                    <h3>Texts</h3>
366 
                    <p class="muted">
367 
                       Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
368 
                    </p>
369 
                    <p class="text-warning">
370 
                       Etiam porta sem malesuada magna mollis euismod.
371 
                    </p>
372 
                    <p class="text-error">
373 
                       Donec ullamcorper nulla non metus auctor fringilla.
374 
                    </p>
375 
                    <p class="text-info">
376 
                       Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
377 
                    </p>
378 
                    <p class="text-success">
379 
                       Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
380 
                    </p>
381 
                  </div>
382 
                  <div class="col-md-6">
383 
                    <h3>Headings</h3>
384 
                    <h1>h1. Heading 1</h1>
385 
                    <h2>h2. Heading 2</h2>
386 
                    <h3>h3. Heading 3</h3>
387 
                    <h4>h4. Heading 4</h4>
388 
                    <h5>h5. Heading 5</h5>
389 
                    <h6>h6. Heading 6</h6>
390 
                  </div>
391 
                </div>
392 
                <div class="row">
393 
                  <div class="col-md-6">
394 
                    <h3>Address</h3>
395 
                    <div class="well">
396 
                      <address>
397 
                      <strong>Loop, Inc.</strong><br>
398 
                      795 Park Ave, Suite 120<br>
399 
                      San Francisco, CA 94107<br>
400 
                      <abbr title="Phone">P:</abbr> (234) 145-1810 </address>
401 
                      <address>
402 
                      <strong>Full Name</strong><br>
403 
                      <a href="mailto:#">
404 
                         first.last@email.com
405 
                      </a>
406 
                      </address>
407 
                    </div>
408 
                  </div>
409 
                  <div class="col-md-6">
410 
                    <h3>Some more text here</h3>
411 
                    <p>
412 
                       Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
413 
                    </p>
414 
                    <p>
415 
                       Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
416 
                    </p>
417 
                  </div>
418 
                </div>
419 
              </div>
420 
            </div>
421 
          </div>
422 
          <!-- END GENERAL PORTLET-->
423 
          <div>
424 
            <!-- BEGIN BLOCKQUOTES PORTLET-->
425 
            <div class="portlet">
426 
              <div class="portlet-title">
427 
                <div class="caption">
428 
                  <i class="fa fa-gift"></i>Blockquotes
429 
                </div>
430 
                <div class="tools">
431 
                  <a class="collapse" href="javascript:;">
432 
                  </a>
433 
                  <a class="config" data-toggle="modal" href="#portlet-config">
434 
                  </a>
435 
                  <a class="reload" href="javascript:;">
436 
                  </a>
437 
                  <a class="remove" href="javascript:;">
438 
                  </a>
439 
                </div>
440 
              </div>
441 
              <div class="portlet-body">
442 
                <h3></h3>
443 
                <blockquote>
444 
                  <p>
445 
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Duis mollis, est non commodo luctus, nisi erat porttitor ligula integer posuere erat a ante.
446 
                  </p>
447 
                </blockquote>
448 
                <blockquote>
449 
                  <p>
450 
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
451 
                  </p>
452 
                  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
453 
                </blockquote>
454 
                <div class="clearfix">
455 
                  <blockquote class="pull-right">
456 
                    <p>
457 
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
458 
                    </p>
459 
                    <small>Someone famous <cite title="Source Title">Source Title</cite></small>
460 
                  </blockquote>
461 
                </div>
462 
              </div>
463 
            </div>
464 
            <!-- END BLOCKQUOTES PORTLET-->
465 
          </div>
466 
          <!-- BEGIN WELLS PORTLET-->
467 
          <div>
468 
            <div class="portlet">
469 
              <div class="portlet-title">
470 
                <div class="caption">
471 
                  <i class="fa fa-gift"></i>Alignments
472 
                </div>
473 
                <div class="tools">
474 
                  <a class="collapse" href="javascript:;">
475 
                  </a>
476 
                  <a class="config" data-toggle="modal" href="#portlet-config">
477 
                  </a>
478 
                  <a class="reload" href="javascript:;">
479 
                  </a>
480 
                  <a class="remove" href="javascript:;">
481 
                  </a>
482 
                </div>
483 
              </div>
484 
              <div class="portlet-body">
485 
                <p class="text-left">
486 
                   Left aligned text.
487 
                </p>
488 
                <p class="text-center">
489 
                   Center aligned text.
490 
                </p>
491 
                <p class="text-right">
492 
                   Right aligned text.
493 
                </p>
494 
              </div>
495 
            </div>
496 
          </div>
497 
          <!-- END WELLS PORTLET-->
498 
          <!-- BEGIN WELLS PORTLET-->
499 
          <div>
500 
            <div class="portlet">
501 
              <div class="portlet-title">
502 
                <div class="caption">
503 
                  <i class="fa fa-gift"></i>Wells
504 
                </div>
505 
                <div class="tools">
506 
                  <a class="collapse" href="javascript:;">
507 
                  </a>
508 
                  <a class="config" data-toggle="modal" href="#portlet-config">
509 
                  </a>
510 
                  <a class="reload" href="javascript:;">
511 
                  </a>
512 
                  <a class="remove" href="javascript:;">
513 
                  </a>
514 
                </div>
515 
              </div>
516 
              <div class="portlet-body">
517 
                <div class="well">
518 
                  <h4>Default well</h4>
519 
                   Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.Integer molestie lorem at massa Integer molestie lorem at massa Integer molestie lorem at massa Integer molestie lorem at massa.
520 
                </div>
521 
                <div class="well well-large">
522 
                  <h4>Large Well</h4>
523 
                   Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Integer molestie lorem at massa Integer molestie lorem at massa Integer molestie lorem at massa
524 
                </div>
525 
              </div>
526 
            </div>
527 
          </div>
528 
          <!-- END WELLS PORTLET-->
529 
        </div>
530 
        <div class="col-md-4">
531 
          <!-- BEGIN UNORDERED LISTS PORTLET-->
532 
          <div class="portlet box red">
533 
            <div class="portlet-title">
534 
              <div class="caption">
535 
                <i class="fa fa-gift"></i>Unordered Lists
536 
              </div>
537 
              <div class="tools">
538 
                <a class="collapse" href="javascript:;">
539 
                </a>
540 
              </div>
541 
            </div>
542 
            <div class="portlet-body">
543 
              <ul>
544 
                <li>
545 
                   Lorem ipsum dolor sit amet
546 
                </li>
547 
                <li>
548 
                   Consectetur adipiscing elit
549 
                </li>
550 
                <li>
551 
                   Integer molestie lorem at massa
552 
                </li>
553 
                <li>
554 
                   Facilisis in pretium nisl aliquet
555 
                </li>
556 
                <li>
557 
                   Nulla volutpat aliquam velit
558 
                  <ul>
559 
                    <li>
560 
                       Phasellus iaculis neque
561 
                    </li>
562 
                    <li>
563 
                       Purus sodales ultricies
564 
                    </li>
565 
                    <li>
566 
                       Vestibulum laoreet porttitor sem
567 
                    </li>
568 
                    <li>
569 
                       Ac tristique libero volutpat at
570 
                    </li>
571 
                  </ul>
572 
                </li>
573 
                <li>
574 
                   Faucibus porta lacus fringilla vel
575 
                </li>
576 
                <li>
577 
                   Aenean sit amet erat nunc
578 
                </li>
579 
                <li>
580 
                   Eget porttitor lorem
581 
                </li>
582 
              </ul>
583 
            </div>
584 
          </div>
585 
          <!-- END UNORDERED LISTS PORTLET-->
586 
          <!-- BEGIN ORDERED LISTS PORTLET-->
587 
          <div class="portlet box blue">
588 
            <div class="portlet-title">
589 
              <div class="caption">
590 
                <i class="fa fa-gift"></i>Ordered Lists
591 
              </div>
592 
              <div class="tools">
593 
                <a class="collapse" href="javascript:;">
594 
                </a>
595 
              </div>
596 
            </div>
597 
            <div class="portlet-body">
598 
              <ol>
599 
                <li>
600 
                   Lorem ipsum dolor sit amet
601 
                </li>
602 
                <li>
603 
                   Consectetur adipiscing elit
604 
                </li>
605 
                <li>
606 
                   Integer molestie lorem at massa
607 
                </li>
608 
                <li>
609 
                   Facilisis in pretium nisl aliquet
610 
                </li>
611 
                <li>
612 
                   Nulla volutpat aliquam velit
613 
                </li>
614 
                <li>
615 
                   Faucibus porta lacus fringilla vel
616 
                </li>
617 
                <li>
618 
                   Aenean sit amet erat nunc
619 
                </li>
620 
                <li>
621 
                   Eget porttitor lorem
622 
                </li>
623 
              </ol>
624 
            </div>
625 
          </div>
626 
          <!-- END ORDERED LISTS PORTLET-->
627 
          <!-- BEGIN UNSTYLED LISTS PORTLET-->
628 
          <div class="portlet box yellow">
629 
            <div class="portlet-title">
630 
              <div class="caption">
631 
                <i class="fa fa-gift"></i>Unstyled Lists
632 
              </div>
633 
              <div class="tools">
634 
                <a class="collapse" href="javascript:;">
635 
                </a>
636 
              </div>
637 
            </div>
638 
            <div class="portlet-body">
639 
              <ul class="list-unstyled">
640 
                <li>
641 
                   Lorem ipsum dolor sit amet
642 
                </li>
643 
                <li>
644 
                   Consectetur adipiscing elit
645 
                </li>
646 
                <li>
647 
                   Integer molestie lorem at massa
648 
                </li>
649 
                <li>
650 
                   Facilisis in pretium nisl aliquet
651 
                </li>
652 
                <li>
653 
                   Nulla volutpat aliquam velit
654 
                  <ul>
655 
                    <li>
656 
                       Phasellus iaculis neque
657 
                    </li>
658 
                    <li>
659 
                       Purus sodales ultricies
660 
                    </li>
661 
                    <li>
662 
                       Vestibulum laoreet porttitor sem
663 
                    </li>
664 
                    <li>
665 
                       Ac tristique libero volutpat at
666 
                    </li>
667 
                  </ul>
668 
                </li>
669 
                <li>
670 
                   Faucibus porta lacus fringilla vel
671 
                </li>
672 
                <li>
673 
                   Aenean sit amet erat nunc
674 
                </li>
675 
                <li>
676 
                   Eget porttitor lorem
677 
                </li>
678 
              </ul>
679 
            </div>
680 
          </div>
681 
          <!-- END UNSTYLED LISTS PORTLET-->
682 
          <!-- BEGIN UNSTYLED LISTS PORTLET-->
683 
          <div class="portlet box red">
684 
            <div class="portlet-title">
685 
              <div class="caption">
686 
                <i class="fa fa-gift"></i>Inline List
687 
              </div>
688 
              <div class="tools">
689 
                <a class="collapse" href="javascript:;">
690 
                </a>
691 
              </div>
692 
            </div>
693 
            <div class="portlet-body">
694 
              <ul class="list-inline">
695 
                <li>
696 
                   1. Lorem
697 
                </li>
698 
                <li>
699 
                   2. Phasellus
700 
                </li>
701 
                <li>
702 
                   3. Nulla
703 
                </li>
704 
              </ul>
705 
            </div>
706 
          </div>
707 
          <!-- END UNSTYLED LISTS PORTLET-->
708 
          <!-- BEGIN DESCRIPTION LISTS PORTLET-->
709 
          <div class="portlet box purple">
710 
            <div class="portlet-title">
711 
              <div class="caption">
712 
                <i class="fa fa-gift"></i>Description Lists
713 
              </div>
714 
              <div class="tools">
715 
                <a class="collapse" href="javascript:;">
716 
                </a>
717 
              </div>
718 
            </div>
719 
            <div class="portlet-body">
720 
              <dl>
721 
                <dt>Description lists</dt>
722 
                <dd>A description list is perfect for defining terms.</dd>
723 
                <dt>Euismod</dt>
724 
                <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
725 
                <dd>Donec id elit non mi porta gravida at eget metus.</dd>
726 
                <dt>Malesuada porta</dt>
727 
                <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
728 
              </dl>
729 
            </div>
730 
          </div>
731 
          <!-- END DESCRIPTION LISTS PORTLET-->
732 
          <!-- BEGIN DESCRIPTION LISTS PORTLET-->
733 
          <div class="portlet box blue">
734 
            <div class="portlet-title">
735 
              <div class="caption">
736 
                <i class="fa fa-gift"></i>Text States
737 
              </div>
738 
              <div class="tools">
739 
                <a class="collapse" href="javascript:;">
740 
                </a>
741 
              </div>
742 
            </div>
743 
            <div class="portlet-body">
744 
              <p class="text-muted">
745 
                 Muted text here
746 
              </p>
747 
              <p class="text-primary">
748 
                 Primary text here
749 
              </p>
750 
              <p class="text-success">
751 
                 Success text here
752 
              </p>
753 
              <p class="text-info">
754 
                 Info text here
755 
              </p>
756 
              <p class="text-warning">
757 
                 Warning text here
758 
              </p>
759 
              <p class="text-danger">
760 
                 Danger text here
761 
              </p>
762 
            </div>
763 
          </div>
764 
          <!-- END DESCRIPTION LISTS PORTLET-->
765 
        </div>
766 
      </div>
767 
            </div>
768 
          </div>
769 
          <!-- END CONTENT -->
770 
        </div>
771 
        <!-- END SIDEBAR & CONTENT -->
772 
      </div>
773 
    </div>
774 
 
775 
    <!-- BEGIN PRE-FOOTER -->
776 
    <div class="pre-footer">
777 
      <div class="container">
778 
        <div class="row">
779 
          <!-- BEGIN BOTTOM ABOUT BLOCK -->
780 
          <div class="col-md-4 col-sm-6 pre-footer-col">
781 
            <h2>About us</h2>
782 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam sit nonummy nibh euismod tincidunt ut laoreet dolore magna aliquarm erat sit volutpat.</p>
783 
 
784 
            <div class="photo-stream">
785 
              <h2>Photos Stream</h2>
786 
              <ul class="list-unstyled">
787 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img5-small.jpg"></a></li>
788 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img1.jpg"></a></li>
789 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img4-large.jpg"></a></li>
790 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img6.jpg"></a></li>
791 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img3.jpg"></a></li>
792 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img2-large.jpg"></a></li>
793 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img2.jpg"></a></li>
794 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img5.jpg"></a></li>
795 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img5-small.jpg"></a></li>
796 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img1.jpg"></a></li>
797 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img4-large.jpg"></a></li>
798 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img6.jpg"></a></li>
799 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img3.jpg"></a></li>
800 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img2-large.jpg"></a></li>
801 
                <li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img2.jpg"></a></li>
802 
              </ul>                    
803 
            </div>
804 
          </div>
805 
          <!-- END BOTTOM ABOUT BLOCK -->
806 
 
807 
          <!-- BEGIN BOTTOM CONTACTS -->
808 
          <div class="col-md-4 col-sm-6 pre-footer-col">
809 
            <h2>Our Contacts</h2>
810 
            <address class="margin-bottom-40">
811 
              35, Lorem Lis Street, Park Ave<br>
812 
              California, US<br>
813 
              Phone: 300 323 3456<br>
814 
              Fax: 300 323 1456<br>
815 
              Email: <a href="mailto:info@metronic.com">info@metronic.com</a><br>
816 
              Skype: <a href="skype:metronic">metronic</a>
817 
            </address>
818 
 
819 
            <div class="pre-footer-subscribe-box pre-footer-subscribe-box-vertical">
820 
              <h2>Newsletter</h2>
821 
              <p>Subscribe to our newsletter and stay up to date with the latest news and deals!</p>
822 
              <form action="#">
823 
                <div class="input-group">
824 
                  <input type="text" placeholder="youremail@mail.com" class="form-control">
825 
                  <span class="input-group-btn">
826 
                    <button class="btn btn-primary" type="submit">Subscribe</button>
827 
                  </span>
828 
                </div>
829 
              </form>
830 
            </div>
831 
          </div>
832 
          <!-- END BOTTOM CONTACTS -->
833 
 
834 
          <!-- BEGIN TWITTER BLOCK -->
835 
          <div class="col-md-4 col-sm-6 pre-footer-col">
836 
            <h2 class="margin-bottom-0">Latest Tweets</h2>
837 
            <a class="twitter-timeline" href="https://twitter.com/twitterapi" data-tweet-limit="2" data-theme="dark" data-link-color="#57C8EB" data-widget-id="455411516829736961" data-chrome="noheader nofooter noscrollbar noborders transparent">Loading tweets by @keenthemes...</a>
838 
          </div>
839 
          <!-- END TWITTER BLOCK -->
840 
        </div>
841 
      </div>
842 
    </div>
843 
    <!-- END PRE-FOOTER -->
844 
 
845 
    <!-- BEGIN FOOTER -->
846 
    <div class="footer">
847 
      <div class="container">
848 
        <div class="row">
849 
          <!-- BEGIN COPYRIGHT -->
850 
          <div class="col-md-6 col-sm-6 padding-top-10">
851 
            2014 © Metronic Shop UI. ALL Rights Reserved. <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a>
852 
          </div>
853 
          <!-- END COPYRIGHT -->
854 
          <!-- BEGIN PAYMENTS -->
855 
          <div class="col-md-6 col-sm-6">
856 
            <ul class="social-footer list-unstyled list-inline pull-right">
857 
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
858 
              <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
859 
              <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
860 
              <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
861 
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
862 
              <li><a href="#"><i class="fa fa-skype"></i></a></li>
863 
              <li><a href="#"><i class="fa fa-github"></i></a></li>
864 
              <li><a href="#"><i class="fa fa-youtube"></i></a></li>
865 
              <li><a href="#"><i class="fa fa-dropbox"></i></a></li>
866 
            </ul>  
867 
          </div>
868 
          <!-- END PAYMENTS -->
869 
        </div>
870 
      </div>
871 
    </div>
872 
    <!-- END FOOTER -->
873 
 
874 
    <!-- Load javascripts at bottom, this will reduce page load time -->
875 
    <!-- BEGIN CORE PLUGINS (REQUIRED FOR ALL PAGES) -->
876 
    <!--[if lt IE 9]>
877 
    <script src="../../assets/global/plugins/respond.min.js"></script>
878 
    <![endif]-->
879 
    <script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
880 
    <script src="../../assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
881 
    <script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>      
882 
    <script src="../../assets/frontend/layout/scripts/back-to-top.js" type="text/javascript"></script>
883 
    <!-- END CORE PLUGINS -->
884 
 
885 
    <!-- BEGIN PAGE LEVEL JAVASCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) -->
886 
    <script src="../../assets/global/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script><!-- pop up -->
887 
    <script src="../../assets/global/scripts/metronic.js" type="text/javascript"></script>
888 
    <script src="../../assets/frontend/layout/scripts/layout.js" type="text/javascript"></script>
889 
    <script type="text/javascript">
890 
        jQuery(document).ready(function() {
891 
            Metronic.init(); // init global framework features
892 
            Layout.init();
893 
            Layout.initTwitter();
894 
        });
895 
    </script>
896 
    <!-- END PAGE LEVEL JAVASCRIPTS -->
897 
</body>
898 
<!-- END BODY -->
899 
</html>