scriptbox

<!DOCTYPE html> <html lang="en"> <head><title>Portlets | UI</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpoint" content="width=device-width, initial-scale=1.0"> <link href="images/icons/favicon.ico" rel="shortcut icon">  <link type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,400,700,800"> <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300"> <link type="text/css" rel="stylesheet" href="vendors/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"> <link type="text/css" rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css"> <link type="text/css" rel="stylesheet" href="vendors/bootstrap/css/bootstrap.min.css">  <link type="text/css" rel="stylesheet" href="vendors/animate.css/animate.css"> <link type="text/css" rel="stylesheet" href="vendors/jquery-pace/pace.css">  <link type="text/css" rel="stylesheet" href="css/style.css"> <link type="text/css" rel="stylesheet" href="css/style-mango.css" id="theme-style"> <link type="text/css" rel="stylesheet" href="css/vendors.css"> <link type="text/css" rel="stylesheet" href="css/themes/default.css" id="color-style"> <link type="text/css" rel="stylesheet" href="css/style-responsive.css"> <link rel="shortcut icon" href="http://www.next-themes.com/mango/code/images/favicon.ico"> </head> <body> <div> <div id="template-setting"><a href="#" data-toggle="dropdown" class="btn-template-setting"><i class="fa fa-tint"></i></a> <div class="content-template-setting"><h4 class="block-heading">Theme Colors</h4> <ul class="color-theme list-unstyled list-inline"> <li data-style="red" data-hover="tooltip" title="Red" class="red"></li> <li data-style="orange" data-hover="tooltip" title="Orange" class="orange"></li> <li data-style="green" data-hover="tooltip" title="Green" class="green"></li> <li data-style="yellow" data-hover="tooltip" title="Yellow" class="yellow"></li> <li data-style="blue" data-hover="tooltip" title="Blue" class="blue"></li> <li data-style="violet" data-hover="tooltip" title="Violet" class="violet"></li> <li data-style="pink" data-hover="tooltip" title="Pink" class="pink"></li> <li data-style="grey" data-hover="tooltip" title="Grey" class="grey"></li> <li data-style="default" data-hover="tooltip" title="Dark" class="dark"></li> <li data-style="white" data-hover="tooltip" title="White" class="white"></li> </ul> </div> </div> <a id="totop" href="#"><i class="fa fa-angle-up"></i></a> <div id="wrapper"> <nav id="topbar" role="navigation" style="margin-bottom: 0;" class="navbar navbar-default navbar-static-top"> <div class="navbar-header"> <button type="button" data-toggle="collapse" data-target=".sidebar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a id="logo" href="index.html" class="navbar-brand">Odin</a></div> <div class="topbar-main"><a id="menu-toggle" href="#" class="btn hidden-xs"><i class="fa fa-bars"></i></a> <form id="topbar-search" action="#" method="" class="hidden-sm hidden-xs"> <div class="input-icon right"><a href="#"><i class="fa fa-search"></i></a><input type="text" placeholder="Search here..." class="form-control"/> </div> </form> <ul class="nav navbar-top-links navbar-right"> <li class="dropdown"><a data-toggle="dropdown" href="#" class="dropdown-toggle"><i class="fa fa-bell fa-fw"></i><span class="badge badge-yellow">3</span></a> <ul class="dropdown-menu dropdown-alerts animated bounceInDown"> <li><a href="#"><span class="label label-blue"><i class="fa fa-comment fa-fw"></i></span>New Comment<span class="pull-right text-muted small">4 minutes ago</span></a></li> <li><a href="#"><span class="label label-violet"><i class="fa fa-twitter fa-fw"></i></span>3 New Followers<span class="pull-right text-muted small">12 minutes ago</span></a></li> <li><a href="#"><span class="label label-pink"><i class="fa fa-envelope fa-fw"></i></span>Message Sent<span class="pull-right text-muted small">15 minutes ago</span></a></li> <li><a href="#"><span class="label label-green"><i class="fa fa-tasks fa-fw"></i></span>New Task<span class="pull-right text-muted small">18 minutes ago</span></a></li> <li><a href="#"><span class="label label-yellow"><i class="fa fa-upload fa-fw"></i></span>Server Rebooted<span class="pull-right text-muted small">19 minutes ago</span></a></li> <li><a href="#" class="text-right">See all alerts</a></li> </ul> </li> <li class="dropdown"><a data-toggle="dropdown" href="#" class="dropdown-toggle"><i class="fa fa-envelope fa-fw"></i><span class="badge badge-green">7</span></a> <ul class="dropdown-menu dropdown-messages animated bounceInUp"> <li><a href="#"><span class="avatar"><img src="http://lorempixel.com/128/128/people/9/" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">Jessica</span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a> </li> <li><a href="#"><span class="avatar"><img src="http://lorempixel.com/128/128/people/9/" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">John Smith<span class="label label-blue pull-right">New</span></span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a></li> <li><a href="#"><span class="avatar"><img src="http://lorempixel.com/128/128/people/9/" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">John Doe<span class="label label-orange pull-right">10 min</span></span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a></li> <li><a href="#"><span class="avatar"><img src="http://lorempixel.com/128/128/people/9/" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">John Smith</span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a> </li> <li><a href="#">Read all messages</a></li> </ul> </li> <li class="dropdown"><a data-toggle="dropdown" href="#" class="dropdown-toggle"><i class="fa fa-tasks fa-fw"></i><span class="badge badge-blue">8</span></a> <ul class="dropdown-menu dropdown-tasks animated bounceInDown"> <li><a href="#"><span class="task-item">Fix the HTML code<small class="pull-right text-muted">40% Complete </small></span> <div class="progress progress-sm"> <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;" class="progress-bar progress-bar-orange"><span class="sr-only">40% Complete (success)</span></div> </div> </a></li> <li><a href="#"><span class="task-item">Make a wordpress theme<small class="pull-right text-muted">60% Complete </small></span> <div class="progress progress-sm"> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;" class="progress-bar progress-bar-blue"><span class="sr-only">60% Complete (success)</span></div> </div> </a></li> <li><a href="#"><span class="task-item">Convert PSD to HTML<small class="pull-right text-muted">55% Complete </small></span> <div class="progress progress-sm"> <div role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%;" class="progress-bar progress-bar-green"><span class="sr-only">55% Complete (success)</span></div> </div> </a></li> <li><a href="#"><span class="task-item">Convert HTML to Wordpress<small class="pull-right text-muted">78% Complete </small></span> <div class="progress progress-sm"> <div role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%;" class="progress-bar progress-bar-yellow"><span class="sr-only">78% Complete (success)</span></div> </div> </a></li> <li><a href="#">See all tasks</a></li> </ul> </li> <li class="dropdown hi"><a data-toggle="dropdown" href="#" class="dropdown-toggle"><img src="http://lorempixel.com/128/128/people/9/" alt="" class="img-responsive img-circle"/>  Jessica  <span class="caret"></span></a> <ul class="dropdown-menu dropdown-user pull-right animated bounceInLeft"> <li> <div class="navbar-content"> <div class="row"> <div class="col-md-5 col-xs-5"><img src="http://lorempixel.com/128/128/people/9/" alt="" class="img-responsive img-circle"/> <p class="text-center mtm"><a href="#" class="change-avatar"> <small>Change Avatar</small> </a></p> </div> <div class="col-md-7 col-xs-5"><span>Jessica</span> <p class="text-muted small">example@mail.com</p> <div class="divider"></div> <a href="#" class="btn btn-primary btn-sm">View Profile</a></div> </div> </div> <div class="navbar-footer"> <div class="navbar-footer-content"> <div class="row"> <div class="col-md-6 col-xs-6"><a href="#" class="btn btn-default btn-sm">Change Password</a></div> <div class="col-md-6 col-xs-6"><a href="page-lock-screen.html" class="btn btn-default btn-sm pull-right">Sign Out</a></div> </div> </div> </div> </li> </ul> </li> </ul> </div> </nav>  <div id="modal-config" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button> <h4 class="modal-title">Modal title</h4></div> <div class="modal-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend et nisl eget porta. Curabitur elementum sem molestie nisl varius, eget tempus odio molestie. Nunc vehicula sem arcu, eu pulvinar neque cursus ac. Aliquam ultricies lobortis magna et aliquam. Vestibulum egestas eu urna sed ultricies. Nullam pulvinar dolor vitae quam dictum condimentum. Integer a sodales elit, eu pulvinar leo. Nunc nec aliquam nisi, a mollis neque. Ut vel felis quis tellus hendrerit placerat. Vivamus vel nisl non magna feugiat dignissim sed ut nibh. Nulla elementum, est a pretium hendrerit, arcu risus luctus augue, mattis aliquet orci ligula eget massa. Sed ut ultricies felis.</p></div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-default">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>  <nav id="sidebar" role="navigation" class="navbar-default navbar-static-side"> <div class="sidebar-collapse menu-scroll"> <ul id="side-menu" class="nav"> <li class="clock"><strong id="get-date"></strong> <div class="digital-clock"> <div id="getHours" class="get-time"></div> <span>:</span> <div id="getMinutes" class="get-time"></div> <span>:</span> <div id="getSeconds" class="get-time"></div> </div> </li> <li class="sidebar-heading"><h4>Main Menu</h4></li> <li><a href="index.html"><i class="fa fa-home fa-fw"></i>  Dashboard<span class="fa arrow"></span><span class="badge btn-primary">3</span></a> <ul class="nav nav-second-level"> <li><a href="index.html">General</a></li> <li><a href="dashboard-shopping.html">Shopping Dashboard</a></li> <li><a href="dashboard-blog.html">Blog Dashboard</a></li> </ul> </li> <li><a href="#"><i class="fa fa-laptop fa-fw"></i>  Layouts<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li><a href="layout-left-sidebar.html">Left Sidebar</a></li> <li><a href="layout-right-sidebar.html">Right Sidebar</a></li> <li><a href="layout-boxed.html">Boxed Layout</a></li> </ul> </li> <li class="active"><a href="#"><i class="fa fa-bookmark fa-fw"></i>  UI Elements<span class="fa arrow"></span></a> <ul class="nav nav-second-level in"> <li><a href="ui-general.html">General</a></li> <li><a href="ui-buttons.html">Buttons</a></li> <li><a href="ui-typography.html">Typography</a></li> <li><a href="ui-modals.html">Modals</a></li> <li><a href="ui-tabs-accordions-navs.html">Tabs, Accordions & Navs</a></li> <li><a href="ui-sliders.html">Sliders</a></li> <li><a href="ui-nestable-list.html">Nestable List</a></li> <li><a href="ui-icons.html">Icons</a></li> <li class="active"><a href="ui-portlets.html">Portlets</a></li> </ul> </li> <li><a href="#"><i class="fa fa-edit fa-fw"></i>  Forms<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li><a href="form-layouts.html">Form Layouts</a></li> <li><a href="form-components.html">Form Components</a></li> <li><a href="form-validation.html">Form Validation</a></li> <li><a href="form-multiple-file-upload.html">Multiple File Upload</a></li> <li><a href="form-dropzone-file-upload.html">Dropzone File Upload</a></li> </ul> </li> <li><a href="#"><i class="fa fa-th-list fa-fw"></i>  Tables<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li><a href="table-basic.html">Basic Tables</a></li> <li><a href="table-responsive.html">Responsive Tables</a></li> <li><a href="table-editable.html">Editable Tables</a></li> <li><a href="table-advanced.html">Advanced Tables</a></li> </ul> </li> <li><a href="#"><i class="fa fa-file-o fa-fw"></i>  Pages<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li><a href="page-signin.html">Sign In</a></li> <li><a href="page-signup.html">Sign Up</a></li> <li><a href="page-lock-screen.html">Lock Screen</a></li> <li><a href="page-invoice.html">Invoice</a></li> <li><a href="page-pricing-table.html">Pricing Tables</a></li> <li><a href="page-fullcalendar.html">Full Calendar</a></li> <li><a href="page-blank.html">Blank</a></li> <li><a href="page-404.html">404 Page</a></li> <li><a href="page-500.html">500 Page</a></li> <li><a href="javascript:void(0)" title="FullScreen" class="btn-fullscreen">Full Screen</a> </li> </ul> </li> <li><a href="#"><i class="fa fa-sitemap fa-fw"></i>  Multi-Level Dropdown<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li><a href="#">Second Level Item</a></li> <li><a href="#">Second Level Item</a></li> <li><a href="#">Third Level<span class="fa arrow"></span></a> <ul class="nav nav-third-level"> <li><a href="#">Third Level Item</a></li> <li><a href="#">Third Level Item</a></li> <li><a href="#">Third Level Item</a></li> <li><a href="#">Third Level Item</a></li> </ul> </li> </ul> </li> <li class="sidebar-heading"><h4>Extras</h4></li> <li><a href="charts.html"><i class="fa fa-bar-chart-o fa-fw"></i>  Charts</a></li> <li><a href="transitions.html"><i class="fa fa-eye fa-fw"></i>  Transitions</a></li> </ul> </div> </nav>  <div id="page-wrapper"> <div class="page-header-breadcrumb"> <div class="page-heading hidden-xs"><h1 class="page-title">Portlets</h1></div> <ol class="breadcrumb page-breadcrumb"> <li><i class="fa fa-home"></i> <a href="index.html">Home</a>  <i class="fa fa-angle-right"></i>  </li> <li><a href="#">UI</a>  <i class="fa fa-angle-right"></i>  </li> <li class="active">Portlets</li> </ol> </div>  <div class="page-content"> <div class="row"> <div class="col-lg-4"> <div class="portlet portlet-pink"> <div class="portlet-header"> <div class="caption">Default</div> <div class="tools"><i class="fa fa-chevron-up"></i><i data-toggle="modal" data-target="#modal-config" class="fa fa-cog"></i><i class="fa fa-refresh"></i><i class="fa fa-times"></i></div> </div> <div class="portlet-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt nulla elit, at sollicitudin ipsum mattis quis. Vivamus vitae diam at libero fringilla condimentum. Vestibulum laoreet nulla ut neque eleifend, ut hendrerit felis mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam congue, risus ac tincidunt ultrices, nunc enim consectetur purus, vitae faucibus dolor turpis ut justo. Duis id feugiat sem, ac commodo nisi. Curabitur tincidunt volutpat nisi id ullamcorper.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt nulla elit, at sollicitudin ipsum mattis quis. Vivamus vitae diam at libero fringilla condimentum. Vestibulum laoreet nulla ut neque eleifend, ut hendrerit felis mollis.</p></div> </div> </div> <div class="col-lg-4"> <div class="portlet color portlet-primary"> <div class="portlet-header"> <div class="caption">Colors</div> <div class="actions"><a href="#" class="btn btn-white btn-sm"><i class="fa fa-edit"></i>  Edit</a>  <div class="btn-group"><a href="#" data-toggle="dropdown" class="btn btn-sm btn-white"><i class="fa fa-user"></i>  User  <i class="fa fa-angle-down"></i></a> <ul class="dropdown-menu pull-right"> <li><a href="#"><i class="fa fa-pencil"></i>  Edit</a></li> <li><a href="#"><i class="fa fa-trash-o"></i>  Delete</a></li> <li><a href="#"><i class="fa fa-refresh"></i>  Update</a></li> </ul> </div> </div> </div> <div class="portlet-body"><p>Pellentesque augue dui, tempus nec consequat bibendum, facilisis non nulla. Aliquam ac mollis libero, vel mattis ligula. Aenean viverra metus ligula, ut rhoncus tortor vulputate vitae. Quisque rhoncus tempus dignissim. Curabitur nisl augue, gravida in dignissim sed, imperdiet vitae nibh.</p> <p>Aliquam ac mollis libero, vel mattis ligula. Pellentesque augue dui, tempus nec consequat bibendum, facilisis non nulla. Aliquam ac mollis libero, vel mattis ligula. Aenean viverra metus ligula Pellentesque augue dui, tempus nec consequat bibendum, facilisis non nulla. Aliquam ac mollis libero, vel mattis ligula. Aenean viverra metus ligula, ut rhoncus tortor vulputate vitae. Quisque rhoncus tempus dignissim. Curabitur nisl augue, gravida in dignissim sed, imperdiet vitae nibh.</p> </div> </div> </div> <div class="col-lg-4"> <div class="portlet portlet-yellow"> <div class="portlet-header"> <div class="caption">Scroll</div> <div class="tools"><i class="fa fa-chevron-up"></i><i data-toggle="modal" data-target="#modal-config" class="fa fa-cog"></i><i class="fa fa-refresh"></i><i class="fa fa-times"></i></div> </div> <div class="portlet-body"> <div class="portlet-scroll"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt nulla elit, at sollicitudin ipsum mattis quis. Vivamus vitae diam at libero fringilla condimentum. Vestibulum laoreet nulla ut neque eleifend, ut hendrerit felis mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam congue, risus ac tincidunt ultrices, nunc enim consectetur purus, vitae faucibus dolor turpis ut justo. Duis id feugiat sem, ac commodo nisi. Curabitur tincidunt volutpat nisi id ullamcorper.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt nulla elit, at sollicitudin ipsum mattis quis. Vivamus vitae diam at libero fringilla condimentum. Vestibulum laoreet nulla ut neque eleifend, ut hendrerit felis mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam congue, risus ac tincidunt ultrices, nunc enim consectetur purus, vitae faucibus dolor turpis ut justo. Duis id feugiat sem, ac commodo nisi. Curabitur tincidunt volutpat nisi id ullamcorper.</p> <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam congue, risus ac tincidunt ultrices, nunc enim consectetur purus, vitae faucibus dolor turpis ut justo. Duis id feugiat sem, ac commodo nisi. Curabitur tincidunt volutpat nisi id ullamcorper.</p></div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-6"> <div class="portlet portlet-blue tabbable"> <div class="portlet-header"> <div class="caption">Tabs</div> </div> <div class="portlet-body"> <div class="tabbable portlet-tabs"> <ul class="nav nav-tabs"> <li><a href="#portlet-tab3" data-toggle="tab">Tab 3</a></li> <li><a href="#portlet-tab2" data-toggle="tab">Tab 2</a></li> <li class="active"><a href="#portlet-tab1" data-toggle="tab">Tab 1</a></li> </ul> <div class="tab-content"> <div id="portlet-tab1" class="tab-pane fade in active"><p>Maecenas nec justo non neque vulputate gravida id ac risus. Aliquam dictum est non mattis condimentum. Sed tincidunt laoreet elit eu cursus. Etiam venenatis libero aliquet magna rhoncus blandit. Mauris sed sapien vitae magna imperdiet rutrum et eget quam.</p> <p>Maecenas nec justo non neque vulputate gravida id ac risus. Aliquam dictum est non mattis condimentum. Sed tincidunt laoreet elit eu cursus. Etiam venenatis libero aliquet magna rhoncus blandit. Mauris sed sapien vitae magna imperdiet rutrum et eget quam.</p></div> <div id="portlet-tab2" class="tab-pane fade"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo.</p> <p>Maecenas nec justo non neque vulputate gravida id ac risus. Aliquam dictum est non mattis condimentum. Sed tincidunt laoreet elit eu cursus. Etiam venenatis libero aliquet magna rhoncus blandit. Mauris sed sapien vitae magna imperdiet rutrum et eget quam.</p></div> <div id="portlet-tab3" class="tab-pane fade"><p>Ut wisi enim ad btn-smm veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> <p>Maecenas nec justo non neque vulputate gravida id ac risus. Aliquam dictum est non mattis condimentum. Sed tincidunt laoreet elit eu cursus. Etiam venenatis libero aliquet magna rhoncus blandit. Mauris sed sapien vitae magna imperdiet rutrum et eget quam.</p></div> </div> </div> </div> </div> </div> <div class="col-lg-6"> <div class="portlet portlet-violet"> <div class="portlet-header"> <div class="caption">Paginations</div> <ul class="pagination pagination-sm"> <li><a href="#"><i class="fa fa-angle-left"></i></a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#"><i class="fa fa-angle-right"></i></a></li> </ul> </div> <div class="portlet-body"><p>Pellentesque augue dui, tempus nec consequat bibendum, facilisis non nulla. Aliquam ac mollis libero, vel mattis ligula. Aenean viverra metus ligula, ut rhoncus tortor vulputate vitae. Quisque rhoncus tempus dignissim. Curabitur nisl augue, gravida in dignissim sed, imperdiet vitae nibh.Maecenas nec justo non neque vulputate gravida id ac risus. Aliquam dictum est non mattis condimentum. Sed tincidunt laoreet elit eu cursus. Etiam venenatis libero aliquet magna rhoncus blandit. Mauris sed sapien vitae magna imperdiet rutrum et eget quam.</p></div> </div> </div> </div> <div class="row"> <div class="col-md-4 sortable column"> <div class="portlet portlet-orange"> <div class="portlet-header"> <div class="caption">Portlet</div> <div class="actions"><a href="#" class="btn btn-sm btn-white"><i class="fa fa-edit"></i>  Edit</a> <a href="#" class="btn btn-sm btn-white"><i class="fa fa-user"></i>  User</a></div> </div> <div class="portlet-body"><p>Pellentesque augue dui, tempus nec consequat bibendum, facilisis non nulla. Aliquam ac mollis libero, vel mattis ligula. Aenean viverra metus ligula, ut rhoncus tortor vulputate vitae. Quisque rhoncus tempus dignissim. Curabitur nisl augue, gravida in dignissim sed, imperdiet vitae nibh.</p></div> </div> <div class="portlet portlet-green"> <div class="portlet-header"> <div class="caption">Portlet</div> <div class="actions"><a href="#" class="btn btn-sm btn-white"><i class="fa fa-edit"></i>  Edit</a> <a href="#" class="btn btn-sm btn-white"><i class="fa fa-user"></i>  User</a></div> </div> <div class="portlet-body"><p>Pellentesque augue dui, tempus nec consequat bibendum, facilisis non nulla. Aliquam ac mollis libero, vel mattis ligula. Aenean viverra metus ligula, ut rhoncus tortor vulputate vitae. Quisque rhoncus tempus dignissim. Curabitur nisl augue, gravida in dignissim sed, imperdiet vitae nibh.</p></div> </div> </div> <div class="col-md-4 sortable column"> <div class="portlet portlet-yellow"> <div class="portlet-header"> <div class="caption">Portlet</div> <div class="actions"><a href="#" class="btn btn-sm btn-white"><i class="fa fa-edit"></i>  Edit</a> <a href="#" class="btn btn-sm btn-white"><i class="fa fa-user"></i>  User</a></div> </div> <div class="portlet-body"><p>Pellentesque augue dui, tempus nec consequat bibendum, facilisis non nulla. Aliquam ac mollis libero, vel mattis ligula. Aenean viverra metus ligula, ut rhoncus tortor vulputate vitae. Quisque rhoncus tempus dignissim. Curabitur nisl augue, gravida in dignissim sed, imperdiet vitae nibh.</p></div> </div> <div class="portlet portlet-blue"> <div class="portlet-header"> <div class="caption">Portlet</div> <div class="actions"><a href="#" class="btn btn-sm btn-white"><i class="fa fa-edit"></i>  Edit</a> <a href="#" class="btn btn-sm btn-white"><i class="fa fa-user"></i>  User</a></div> </div> <div class="portlet-body"><p>Pellentesque augue dui, tempus nec consequat bibendum, facilisis non nulla. Aliquam ac mollis libero, vel mattis ligula. Aenean viverra metus ligula, ut rhoncus tortor vulputate vitae. Quisque rhoncus tempus dignissim. Curabitur nisl augue, gravida in dignissim sed, imperdiet vitae nibh.</p></div> </div> </div> <div class="col-md-4 sortable column"> <div class="portlet portlet-pink"> <div class="portlet-header"> <div class="caption">Portlet</div> <div class="actions"><a href="#" class="btn btn-sm btn-white"><i class="fa fa-edit"></i>  Edit</a> <a href="#" class="btn btn-sm btn-white"><i class="fa fa-user"></i>  User</a></div> </div> <div class="portlet-body"><p>Pellentesque augue dui, tempus nec consequat bibendum, facilisis non nulla. Aliquam ac mollis libero, vel mattis ligula. Aenean viverra metus ligula, ut rhoncus tortor vulputate vitae. Quisque rhoncus tempus dignissim. Curabitur nisl augue, gravida in dignissim sed, imperdiet vitae nibh.</p></div> </div> <div class="portlet portlet-violet"> <div class="portlet-header"> <div class="caption">Portlet</div> <div class="actions"><a href="#" class="btn btn-sm btn-white"><i class="fa fa-edit"></i>  Edit</a> <a href="#" class="btn btn-sm btn-white"><i class="fa fa-user"></i>  User</a></div> </div> <div class="portlet-body"><p>Pellentesque augue dui, tempus nec consequat bibendum, facilisis non nulla. Aliquam ac mollis libero, vel mattis ligula. Aenean viverra metus ligula, ut rhoncus tortor vulputate vitae. Quisque rhoncus tempus dignissim. Curabitur nisl augue, gravida in dignissim sed, imperdiet vitae nibh.</p></div> </div> </div> </div> </div>  <div class="page-footer"> <div class="copyright">2014 © Odin - The Ultimate Responsive Admin Template.</div> </div> </div> </div> </div> <script src="js/jquery-1.9.1.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/jquery-ui.js"></script>  <script src="vendors/bootstrap/js/bootstrap.min.js"></script> <script src="vendors/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script> <script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <script src="vendors/metisMenu/jquery.metisMenu.js"></script> <script src="vendors/slimScroll/jquery.slimscroll.js"></script> <script src="vendors/jquery-cookie/jquery.cookie.js"></script> <script src="js/jquery.menu.js"></script> <script src="vendors/jquery-pace/pace.min.js"></script>  <script src="js/ui-portlets.js"></script>  <script src="js/app.js"></script> <script src="js/main.js"></script> <script src="js/holder.js"></script> <script type="text/javascript">(function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '../../../www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-145464-11', 'next-themes.com'); ga('send', 'pageview'); </script> </body> </html>