1 Star 1 Fork 3

lib_wiki/bootstrap-v4.0_demo

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
icons-pe7.html 64.08 KB
一键复制 编辑 原始数据 按行查看 历史
lib_wiki 提交于 2019-10-22 15:52 . Init commit
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="author" content="">
<!-- Title -->
<title>Neptune</title>
<!-- Vendor CSS -->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="vendor/themify-icons/themify-icons.css">
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="vendor/animate.css/animate.min.css">
<link rel="stylesheet" href="vendor/jscrollpane/jquery.jscrollpane.css">
<link rel="stylesheet" href="vendor/waves/waves.min.css">
<link rel="stylesheet" href="vendor/chartist/chartist.min.css">
<link rel="stylesheet" href="vendor/switchery/dist/switchery.min.css">
<link rel="stylesheet" href="vendor/pe7-icons/assets/Pe-icon-7-stroke.css">
<!-- Neptune CSS -->
<link rel="stylesheet" href="css/core.css">
<!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="large-sidebar fixed-sidebar fixed-header">
<div class="wrapper">
<!-- Preloader -->
<div class="preloader"></div>
<!-- Sidebar -->
<div class="site-sidebar-overlay"></div>
<div class="site-sidebar">
<a class="logo" href="index.html">
<span class="l-text">Neptune</span>
<span class="l-icon"></span>
</a>
<div class="custom-scroll custom-scroll-light">
<ul class="sidebar-menu">
<li class="menu-title m-t-0-5">Navigation</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-dashboard"></i></span>
<span class="s-text">Dashboard</span>
</a>
<ul>
<li><a href="index.html">Dashboard 1</a></li>
<li><a href="index2.html">Dashboard 2</a></li>
<li><a href="index3.html">Dashboard 3</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="tag tag-danger">7</span>
<span class="s-icon"><i class="ti-package"></i></span>
<span class="s-text">Widgets</span>
</a>
<ul>
<li><a href="widgets-blog.html">Blog</a></li>
<li><a href="widgets-social.html">Social</a></li>
<li><a href="widgets-ecommerce.html">Ecommerce</a></li>
<li><a href="widgets-navigation.html">Navigation</a></li>
<li><a href="widgets-headers.html">Headers</a></li>
<li><a href="widgets-footers.html">Footers</a></li>
<li><a href="widgets-tiles.html">Tiles</a></li>
<li><a href="widgets-modals.html">Modals</a></li>
</ul>
</li>
<li class="menu-title">Main</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="tag tag-purple">12</span>
<span class="s-icon"><i class="ti-paint-bucket"></i></span>
<span class="s-text">UI Kit</span>
</a>
<ul>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-dropdowns.html">Dropdowns</a></li>
<li><a href="ui-notifications.html">Notifications</a></li>
<li><a href="ui-cards.html">Cards</a></li>
<li><a href="ui-navs.html">Navs</a></li>
<li><a href="ui-progress.html">Progress</a></li>
<li><a href="ui-modal.html">Modal</a></li>
<li><a href="ui-carousel.html">Carousel</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-grid.html">Grid</a></li>
<li><a href="ui-other.html">Other</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-pencil-alt"></i></span>
<span class="s-text">Forms</span>
</a>
<ul>
<li><a href="forms-basic.html">Basic Elements</a></li>
<li><a href="forms-editors.html">Editors</a></li>
<li><a href="forms-plugins.html">Plugins</a></li>
<li><a href="forms-pickers.html">Form Pickers</a></li>
<li><a href="forms-masks.html">Form Masks</a></li>
<li><a href="forms-wizard.html">Form Wizard</a></li>
<li><a href="forms-xeditable.html">X-editable</a></li>
<li><a href="forms-upload.html">File Upload</a></li>
<li><a href="forms-typeahead.html">Typeahead</a></li>
<li><a href="forms-range-slider.html">Range Slider</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-menu-alt"></i></span>
<span class="s-text">Tables</span>
</a>
<ul>
<li><a href="tables-basic.html">Basic Tables</a></li>
<li><a href="tables-datatable.html">Data Tables</a></li>
<li><a href="tables-editable.html">Editable Tables</a></li>
<li><a href="tables-responsive.html">Responsive Tables</a></li>
<li><a href="tables-jsgrid.html">jsGrid Tables</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="tag tag-success">3</span>
<span class="s-icon"><i class="ti-gallery"></i></span>
<span class="s-text">Pages</span>
</a>
<ul>
<li><a href="pages-blank.html">Blank</a></li>
<li><a href="pages-403.html">Error 403</a></li>
<li><a href="pages-404.html">Error 404</a></li>
<li><a href="pages-500.html">Error 500</a></li>
<li><a href="pages-faq.html">FAQ</a></li>
<li><a href="pages-invoice.html">Invoice</a></li>
<li><a href="pages-profile.html">Profile</a></li>
<li><a href="pages-sign-in.html">Sign In</a></li>
<li><a href="pages-sign-in2.html">Sign In 2</a></li>
<li><a href="pages-reset-password.html">Reset Password</a></li>
<li><a href="pages-sign-up.html">Sign Up</a></li>
<li><a href="pages-contactform.html">Contact Form</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-view-grid"></i></span>
<span class="s-text">Apps</span>
</a>
<ul>
<li><a href="apps-inbox.html">Inbox</a></li>
<li><a href="apps-chat.html">Chat</a></li>
<li><a href="apps-contacts.html">Contacts</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-star"></i></span>
<span class="s-text">Icons</span>
</a>
<ul>
<li><a href="icons-fontawesome.html">Font Awesome</a></li>
<li><a href="icons-material.html">Material Design</a></li>
<li><a href="icons-themify.html">Themify Icons</a></li>
<li><a href="icons-weather.html">Weather Icons</a></li>
<li><a href="icons-ionicons.html">Ionicons</a></li>
<li><a href="icons-typicons.html">Typicons</a></li>
<li><a href="icons-pe7.html">Pe7 Icons</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-settings"></i></span>
<span class="s-text">Utilities</span>
</a>
<ul>
<li><a href="utilities-color.html">Color utilities</a></li>
<li><a href="utilities-border.html">Border utilities</a></li>
<li><a href="utilities-other.html">Other utilities</a></li>
</ul>
</li>
<li class="menu-title">More</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-location-arrow"></i></span>
<span class="s-text">Extra</span>
</a>
<ul>
<li><a href="extra-animations.html">Animations</a></li>
<li><a href="extra-comments.html">Comments</a></li>
<li><a href="extra-lightbox.html">Lightbox</a></li>
<li><a href="extra-nestable.html">Nestable</a></li>
<li><a href="extra-crop.html">Image Crop</a></li>
<li><a href="extra-loading-progress.html">Loading Progress</a></li>
<li><a href="extra-prices.html">Prices</a></li>
<li><a href="extra-timeline.html">Timeline</a></li>
<li><a href="extra-search.html">Search</a></li>
<li><a href="extra-scrollbar.html">Scroll Bar</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-new-window"></i></span>
<span class="s-text">Frontend</span>
</a>
<ul>
<li><a href="frontend.html">Frontend 1</a></li>
<li><a href="frontend2.html">Frontend 2</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="tag tag-info">6</span>
<span class="s-icon"><i class="ti-bar-chart-alt"></i></span>
<span class="s-text">Charts</span>
</a>
<ul>
<li><a href="charts-flot.html">Flot Chart</a></li>
<li><a href="charts-morris.html">Morris Chart</a></li>
<li><a href="charts-chartjs.html">Chart.js</a></li>
<li><a href="charts-peity.html">Peity Chart</a></li>
<li><a href="charts-sparkline.html">Sparkline Chart</a></li>
<li><a href="charts-chartist.html">Chartist Chart</a></li>
<li><a href="charts-easy.html">Easy Pie Chart</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-email"></i></span>
<span class="s-text">Email Templates</span>
</a>
<ul>
<li><a href="email-basic.html">Basic</a></li>
<li><a href="email-alert.html">Alert</a></li>
<li><a href="email-ecommerce.html">Ecommerce</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-location-pin"></i></span>
<span class="s-text">Maps</span>
</a>
<ul>
<li><a href="maps-vector.html">Vector Map</a></li>
<li><a href="maps-google.html">Google Map</a></li>
</ul>
</li>
<li>
<a href="calendar.html" class="waves-effect waves-light">
<span class="s-icon"><i class="ti-calendar"></i></span>
<span class="s-text">Calendar</span>
</a>
</li>
<li class="with-sub compact-hide">
<a href="javascript: void(0);" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-menu"></i></span>
<span class="s-text">Menu Levels</span>
</a>
<ul>
<li class="with-sub">
<a href="javascript: void(0);">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-text">Level 1</span>
</a>
<ul>
<li class="with-sub">
<a href="javascript: void(0);">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-text">Level 1.2</span>
</a>
<ul>
<li class="with-sub">
<a href="javascript: void(0);">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-text">Level 1.2.3</span>
</a>
<ul>
<li><a href="javascript: void(0);">Level 1.2.3.4</a></li>
<li><a href="javascript: void(0);">Level 1.2.3.4</a></li>
</ul>
</li>
<li><a href="javascript: void(0);">Level 1.2.3</a></li>
</ul>
</li>
<li><a href="javascript: void(0);">Level 1.2</a></li>
</ul>
</li>
<li><a href="javascript: void(0);">Level 1</a></li>
</ul>
</li>
<li class="menu-title compact-hide">Unique Visitors</li>
<li class="compact-hide">
<div id="sidebar-chart" class="chartist-animated chartist-light"></div>
</li>
<li class="menu-title compact-hide">Tags</li>
<li class="compact-hide">
<a href="javascript: void(0);" class="waves-effect waves-light">
<span class="s-icon"><i class="fa fa-circle-o text-danger"></i></span>
<span class="s-text">Ideas</span>
</a>
</li>
<li class="compact-hide">
<a href="javascript: void(0);" class="waves-effect waves-light">
<span class="s-icon"><i class="fa fa-circle-o text-warning"></i></span>
<span class="s-text">Projects</span>
</a>
</li>
<li class="compact-hide">
<a href="documentation.html" class="waves-effect waves-light">
<span class="s-icon"><i class="fa fa-circle-o text-primary"></i></span>
<span class="s-text">Documentation</span>
</a>
</li>
</ul>
</div>
</div>
<!-- Sidebar second -->
<div class="site-sidebar-second custom-scroll custom-scroll-dark">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab-1" role="tab">Chat</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-2" role="tab">Activity</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-3" role="tab">Todo</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-4" role="tab">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-1" role="tabpanel">
<div class="sidebar-chat animated fadeIn">
<div class="sidebar-group">
<h6>Favorites</h6>
<a class="text-black" href="#">
<span class="sc-status bg-success"></span>
<span class="sc-name">John Doe</span>
<span class="sc-writing"> typing...<i class="ti-pencil"></i></span>
</a>
<a class="text-black" href="#">
<span class="sc-status bg-success"></span>
<span class="sc-name">Vance Osborn</span>
</a>
<a class="text-black" href="#">
<span class="sc-status bg-danger"></span>
<span class="sc-name">Wolfe Stevie</span>
<span class="tag tag-primary">7</span>
</a>
<a class="text-black" href="#">
<span class="sc-status bg-warning"></span>
<span class="sc-name">Jonathan Mel</span>
</a>
<a class="text-black" href="#">
<span class="sc-status bg-secondary"></span>
<span class="sc-name">Carleton Josiah</span>
</a>
</div>
<div class="sidebar-group">
<h6>Work</h6>
<a class="text-black" href="#">
<span class="sc-status bg-secondary"></span>
<span class="sc-name">Larry Hal</span>
</a>
<a class="text-black" href="#">
<span class="sc-status bg-success"></span>
<span class="sc-name">Ron Carran</span>
<span class="sc-writing"> typing...<i class="ti-pencil"></i></span>
</a>
</div>
<div class="sidebar-group">
<h6>Social</h6>
<a class="text-black" href="#">
<span class="sc-status bg-success"></span>
<span class="sc-name">Lucius Skyler</span>
<span class="tag tag-primary">3</span>
</a>
<a class="text-black" href="#">
<span class="sc-status bg-danger"></span>
<span class="sc-name">Landon Graham</span>
</a>
</div>
</div>
<div class="sidebar-chat-window animated fadeIn">
<div class="scw-header clearfix">
<a class="text-grey pull-xs-left" href="#"><i class="ti-angle-left"></i> Back</a>
<div class="pull-xs-right">
<strong>Jonathan Mel</strong>
<div class="avatar box-32">
<img src="img/avatars/5.jpg" alt="">
<span class="status bg-success top right"></span>
</div>
</div>
</div>
<div class="scw-item">
<span>Hello!</span>
</div>
<div class="scw-item self">
<span>Meeting at 16:00 in the conference room. Remember?</span>
</div>
<div class="scw-item">
<span>No problem. Thank's for reminder!</span>
</div>
<div class="scw-item self">
<span>Prepare to be amazed.</span>
</div>
<div class="scw-item">
<span>Good. Can't wait!</span>
</div>
<div class="scw-form">
<form>
<input class="form-control" type="text" placeholder="Type...">
<button class="btn btn-secondary" type="button"><i class="ti-angle-right"></i></button>
</form>
</div>
</div>
</div>
<div class="tab-pane" id="tab-2" role="tabpanel">
<div class="sidebar-activity animated fadeIn">
<div class="notifications">
<div class="n-item">
<div class="media">
<div class="media-left">
<div class="avatar box-48">
<img class="b-a-radius-circle" src="img/avatars/1.jpg" alt="">
<span class="n-icon bg-danger"><i class="ti-pin-alt"></i></span>
</div>
</div>
<div class="media-body">
<div class="n-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">uploaded <a class="text-black" href="#">monthly report</a></div>
<div class="text-muted font-90">12 minutes ago</div>
</div>
</div>
</div>
<div class="n-item">
<div class="media">
<div class="media-left">
<div class="avatar box-48">
<img class="b-a-radius-circle" src="img/avatars/3.jpg" alt="">
<span class="n-icon bg-success"><i class="ti-comment"></i></span>
</div>
</div>
<div class="media-body">
<div class="n-text"><a class="text-black" href="#">Vance Osborn</a> <span class="text-muted">commented </span> <a class="text-black" href="#">Project</a></div>
<div class="n-comment m-y-0-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
<div class="text-muted font-90">3 hours ago</div>
</div>
</div>
</div>
<div class="n-item">
<div class="media">
<div class="media-left">
<div class="avatar box-48">
<img class="b-a-radius-circle" src="img/avatars/2.jpg" alt="">
<span class="n-icon bg-danger"><i class="ti-email"></i></span>
</div>
</div>
<div class="media-body">
<div class="n-text"><a class="text-black" href="#">Ron Carran</a> <span class="text-muted">send you files</span></div>
<div class="row row-sm m-y-0-5">
<div class="col-xs-4">
<img class="img-fluid" src="img/photos-1/1.jpg" alt="">
</div>
<div class="col-xs-4">
<img class="img-fluid" src="img/photos-1/2.jpg" alt="">
</div>
<div class="col-xs-4">
<img class="img-fluid" src="img/photos-1/3.jpg" alt="">
</div>
</div>
<div class="text-muted font-90">30 minutes ago</div>
</div>
</div>
</div>
<div class="n-item">
<div class="media">
<div class="media-left">
<div class="avatar box-48">
<img class="b-a-radius-circle" src="img/avatars/4.jpg" alt="">
<span class="n-icon bg-primary"><i class="ti-plus"></i></span>
</div>
</div>
<div class="media-body">
<div class="n-text"><a class="text-black" href="#">Larry Hal</a> <span class="text-muted">invited you to </span><a class="text-black" href="#">Project</a></div>
<div class="text-muted font-90">10:58</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-3" role="tabpanel">
<div class="sidebar-todo animated fadeIn">
<div class="sidebar-group">
<h6>Important</h6>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Mock up</span>
</label>
</div>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" checked>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Prototype iPhone</span>
</label>
</div>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Build final version</span>
</label>
</div>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Approval docs</span>
</label>
</div>
</div>
<div class="sidebar-group">
<h6>Secondary</h6>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" checked>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Website redesign</span>
</label>
</div>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" checked>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Skype call</span>
</label>
</div>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Blog post</span>
</label>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-4" role="tabpanel">
<div class="sidebar-settings animated fadeIn">
<div class="sidebar-group">
<h6>Main</h6>
<div class="ss-item">
<div class="text-truncate">Anyone can register</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9" checked></div>
</div>
<div class="ss-item">
<div class="text-truncate">Allow commenting</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9"></div>
</div>
<div class="ss-item">
<div class="text-truncate">Allow deleting</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9"></div>
</div>
</div>
<div class="sidebar-group">
<h6>Notificatiоns</h6>
<div class="ss-item">
<div class="text-truncate">Commits</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9"></div>
</div>
<div class="ss-item">
<div class="text-truncate">Messages</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9" checked></div>
</div>
</div>
<div class="sidebar-group">
<h6>Security</h6>
<div class="ss-item">
<div class="text-truncate">Daily backup</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9" checked></div>
</div>
<div class="ss-item">
<div class="text-truncate">API Access</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9" checked></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Template options -->
<div class="template-options custom-scroll custom-scroll-dark">
<div class="to-toggle"><i class="ti-settings"></i></div>
<div class="to-content">
<h6>Layouts</h6>
<div class="row m-b-2 text-xs-center">
<div class="col-xs-6 m-b-2">
<a href="index.html">
<img src="img/layouts/1.png" class="img-fluid">
</a>
<div class="text-muted">Default</div>
</div>
<div class="col-xs-6 m-b-2">
<label>
<input name="compact-sidebar" type="checkbox">
<div class="to-icon"><i class="ti-check"></i></div>
<img src="img/layouts/2.png" class="img-fluid">
</label>
<div class="text-muted">Compact Sidebar</div>
</div>
<div class="col-xs-6 m-b-2">
<label>
<input name="fixed-header" type="checkbox" checked>
<div class="to-icon"><i class="ti-check"></i></div>
<img src="img/layouts/3.png" class="img-fluid">
</label>
<div class="text-muted">Fixed Header</div>
</div>
<div class="col-xs-6 m-b-2">
<label>
<input name="boxed-wrapper" type="checkbox">
<div class="to-icon"><i class="ti-check"></i></div>
<img src="img/layouts/4.png" class="img-fluid">
</label>
<div class="text-muted">Boxed Wrapper</div>
</div>
</div>
<h6>Skins</h6>
<div class="row">
<div class="col-xs-3 m-b-2">
<label>
<input name="skin" value="skin-default" type="radio" checked>
<div class="to-icon"><i class="ti-check"></i></div>
<div class="to-skin">
<span class="skin-first bg-white"></span>
<span class="skin-second skin-dark-blue"></span>
<span class="skin-third bg-info"></span>
</div>
</label>
</div>
<div class="col-xs-3 m-b-2">
<label>
<input name="skin" value="skin-1" type="radio">
<div class="to-icon"><i class="ti-check"></i></div>
<div class="to-skin">
<span class="skin-first skin-dark-blue-2"></span>
<span class="skin-second bg-white"></span>
<span class="skin-third bg-danger"></span>
</div>
</label>
</div>
<div class="col-xs-3 m-b-2">
<label>
<input name="skin" value="skin-2" type="radio">
<div class="to-icon"><i class="ti-check"></i></div>
<div class="to-skin">
<span class="skin-first bg-white"></span>
<span class="skin-second bg-black"></span>
<span class="skin-third bg-success"></span>
</div>
</label>
</div>
<div class="col-xs-3 m-b-2">
<label>
<input name="skin" value="skin-3" type="radio">
<div class="to-icon"><i class="ti-check"></i></div>
<div class="to-skin">
<span class="skin-first bg-white"></span>
<span class="skin-second skin-grey"></span>
<span class="skin-third bg-purple"></span>
</div>
</label>
</div>
<div class="col-xs-3 m-b-2">
<label>
<input name="skin" value="skin-4" type="radio">
<div class="to-icon"><i class="ti-check"></i></div>
<div class="to-skin">
<span class="skin-first skin-dark-blue"></span>
<span class="skin-second skin-dark-blue-2"></span>
<span class="skin-third bg-warning"></span>
</div>
</label>
</div>
<div class="col-xs-3 m-b-2">
<label>
<input name="skin" value="skin-5" type="radio">
<div class="to-icon"><i class="ti-check"></i></div>
<div class="to-skin">
<span class="skin-first bg-primary"></span>
<span class="skin-second bg-white"></span>
<span class="skin-third bg-primary"></span>
</div>
</label>
</div>
</div>
</div>
</div>
<!-- Header -->
<div class="site-header">
<nav class="navbar navbar-light">
<ul class="nav navbar-nav">
<li class="nav-item m-r-1 hidden-lg-up">
<a class="nav-link collapse-button" href="#">
<i class="ti-menu"></i>
</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item dropdown">
<a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
<i class="ti-check"></i>
<span class="tag tag-success top">3</span>
</a>
<div class="dropdown-tasks dropdown-menu dropdown-menu-right animated slideInUp">
<div class="t-item">
<div class="m-b-0-5">
<a class="text-black" href="#">First Task</a>
<span class="pull-xs-right text-muted">75%</span>
</div>
<progress class="progress progress-danger progress-sm" value="75" max="100">100%</progress>
<span class="avatar box-32">
<img src="img/avatars/2.jpg" alt="">
</span>
<a class="text-black" href="#">John Doe</a>, <span class="text-muted">5 min ago</span>
</div>
<div class="t-item">
<div class="m-b-0-5">
<a class="text-black" href="#">Second Task</a>
<span class="pull-xs-right text-muted">40%</span>
</div>
<progress class="progress progress-purple progress-sm" value="40" max="100">100%</progress>
<span class="avatar box-32">
<img src="img/avatars/3.jpg" alt="">
</span>
<a class="text-black" href="#">John Doe</a>, <span class="text-muted">15:07</span>
</div>
<div class="t-item">
<div class="m-b-0-5">
<a class="text-black" href="#">Third Task</a>
<span class="pull-xs-right text-muted">100%</span>
</div>
<progress class="progress progress-warning progress-sm" value="100" max="100">100%</progress>
<span class="avatar box-32">
<img src="img/avatars/4.jpg" alt="">
</span>
<a class="text-black" href="#">John Doe</a>, <span class="text-muted">yesterday</span>
</div>
<div class="t-item">
<div class="m-b-0-5">
<a class="text-black" href="#">Fourth Task</a>
<span class="pull-xs-right text-muted">60%</span>
</div>
<progress class="progress progress-success progress-sm" value="60" max="100">100%</progress>
<span class="avatar box-32">
<img src="img/avatars/5.jpg" alt="">
</span>
<a class="text-black" href="#">John Doe</a>, <span class="text-muted">3 days ago</span>
</div>
<a class="t-item text-black text-xs-center" href="#">
<strong>View all tasks</strong>
</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
<i class="ti-bell"></i>
<span class="tag tag-danger top">12</span>
</a>
<div class="dropdown-messages dropdown-tasks dropdown-menu dropdown-menu-right animated slideInUp">
<div class="m-item">
<div class="mi-icon bg-info"><i class="ti-comment"></i></div>
<div class="mi-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">commented post</span> <a class="text-black" href="#">Lorem ipsum dolor</a></div>
<div class="mi-time">5 min ago</div>
</div>
<div class="m-item">
<div class="mi-icon bg-danger"><i class="ti-heart"></i></div>
<div class="mi-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">liked post</span> <a class="text-black" href="#">Lorem ipsum dolor</a></div>
<div class="mi-time">15:07</div>
</div>
<div class="m-item">
<div class="mi-icon bg-purple"><i class="ti-user"></i></div>
<div class="mi-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">followed</span> <a class="text-black" href="#">Kate Doe</a></div>
<div class="mi-time">yesterday</div>
</div>
<div class="m-item">
<div class="mi-icon bg-danger"><i class="ti-heart"></i></div>
<div class="mi-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">liked post</span> <a class="text-black" href="#">Lorem ipsum dolor</a></div>
<div class="mi-time">3 days ago</div>
</div>
<a class="t-item text-black text-xs-center" href="#">
<strong>View all notifications</strong>
</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="avatar box-32">
<img src="img/avatars/1.jpg" alt="">
</div>
</a>
<div class="dropdown-menu dropdown-menu-right animated flipInY">
<a class="dropdown-item" href="#">
<i class="ti-email m-r-0-5"></i> Inbox
</a>
<a class="dropdown-item" href="#">
<i class="ti-user m-r-0-5"></i> Profile
</a>
<a class="dropdown-item" href="#">
<i class="ti-settings m-r-0-5"></i> Settings
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="ti-help m-r-0-5"></i> Help</a>
<a class="dropdown-item" href="#"><i class="ti-power-off m-r-0-5"></i> Sign out</a>
</div>
</li>
<li class="nav-item hidden-md-up">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapse-1">
<i class="ti-more"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link site-sidebar-second-toggle" href="#" data-toggle="collapse">
<i class="ti-arrow-left"></i>
</a>
</li>
</ul>
<div class="navbar-toggleable-sm collapse" id="collapse-1">
<div class="header-form pull-md-left m-md-r-1">
<form>
<input type="text" class="form-control b-a" placeholder="Search for...">
<button type="submit" class="btn bg-white b-a-0">
<i class="ti-search"></i>
</button>
</form>
</div>
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">
Add
</a>
<div class="dropdown-menu animated flipInY">
<a class="dropdown-item" href="#">
Link
<span class="tag tag-primary">3</span>
</a>
<a class="dropdown-item" href="#">Another link</a>
<a class="dropdown-item" href="#">
Something else here
<span class="tag tag-success">7</span>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="site-content">
<!-- Content -->
<div class="content-area p-y-1">
<div class="container-fluid">
<h4>Pe7 Icons</h4>
<ol class="breadcrumb no-bg m-b-1">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Icons</a></li>
<li class="breadcrumb-item active">Pe7 Icons</li>
</ol>
<div class="box box-block bg-white">
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-album"></i> pe-7s-album
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-arc"></i>pe-7s-arc
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-back-2"></i>pe-7s-back-2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-bandaid"></i>pe-7s-bandaid
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-car"></i>pe-7s-car
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-diamond"></i>pe-7s-diamond
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-door-lock"></i>pe-7s-door-lock
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-eyedropper"></i>pe-7s-eyedropper
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-female"></i>pe-7s-female
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-gym"></i>pe-7s-gym
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-hammer"></i>pe-7s-hammer
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-headphones"></i>pe-7s-headphones
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-helm"></i>pe-7s-helm
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-hourglass"></i>pe-7s-hourglass
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-leaf"></i>pe-7s-leaf
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-magic-wand"></i>pe-7s-magic-wand
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-male"></i>pe-7s-male
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-map-2"></i>pe-7s-map-2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-next-2"></i>pe-7s-next-2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-paint-bucket"></i>pe-7s-paint-bucket
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-pendrive"></i>pe-7s-pendrive
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-photo"></i>pe-7s-photo
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-piggy"></i>pe-7s-piggy
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-plugin"></i>pe-7s-plugin
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-refresh-2"></i>pe-7s-refresh-2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-rocket"></i>pe-7s-rocket
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-settings"></i>pe-7s-settings
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-shield"></i>pe-7s-shield
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-smile"></i>pe-7s-smile
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-usb"></i>pe-7s-usb
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-vector"></i>pe-7s-vector
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-wine"></i>pe-7s-wine
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-cloud-upload"></i>pe-7s-cloud-upload
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-cash"></i>pe-7s-cash
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-close"></i>pe-7s-close
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-bluetooth"></i>pe-7s-bluetooth
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-cloud-download"></i>pe-7s-cloud-download
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-way"></i>pe-7s-way
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-close-circle"></i>pe-7s-close-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-id"></i>pe-7s-id
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-angle-up"></i>pe-7s-angle-up
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-wristwatch"></i>pe-7s-wristwatch
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-angle-up-circle"></i>pe-7s-angle-up-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-world"></i>pe-7s-world
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-angle-right"></i>pe-7s-angle-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-volume"></i>pe-7s-volume
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-angle-right-circle"></i>pe-7s-angle-right-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-users"></i>pe-7s-users
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-angle-left"></i>pe-7s-angle-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-user-female"></i>pe-7s-user-female
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-angle-left-circle"></i>pe-7s-angle-left-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-up-arrow"></i>pe-7s-up-arrow
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-angle-down"></i>pe-7s-angle-down
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-switch"></i>pe-7s-switch
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-angle-down-circle"></i>pe-7s-angle-down-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-scissors"></i>pe-7s-scissors
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-wallet"></i>pe-7s-wallet
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-safe"></i>pe-7s-safe
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-volume2"></i>pe-7s-volume2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-volume1"></i>pe-7s-volume1
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-voicemail"></i>pe-7s-voicemail
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-video"></i>pe-7s-video
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-user"></i>pe-7s-user
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-upload"></i>pe-7s-upload
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-unlock"></i>pe-7s-unlock
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-umbrella"></i>pe-7s-umbrella
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-trash"></i>pe-7s-trash
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-tools"></i>pe-7s-tools
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-timer"></i>pe-7s-timer
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-ticket"></i>pe-7s-ticket
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-target"></i>pe-7s-target
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-sun"></i>pe-7s-sun
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-study"></i>pe-7s-study
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-stopwatch"></i>pe-7s-stopwatch
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-star"></i>pe-7s-star
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-speaker"></i>pe-7s-speaker
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-signal"></i>pe-7s-signal
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-shuffle"></i>pe-7s-shuffle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-shopbag"></i>pe-7s-shopbag
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-share"></i>pe-7s-share
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-server"></i>pe-7s-server
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-search"></i>pe-7s-search
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-film"></i>pe-7s-film
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-science"></i>pe-7s-science
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-disk"></i>pe-7s-disk
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-ribbon"></i>pe-7s-ribbon
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-repeat"></i>pe-7s-repeat
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-refresh"></i>pe-7s-refresh
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-add-user"></i>pe-7s-add-user
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-refresh-cloud"></i>pe-7s-refresh-cloud
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-paperclip"></i>pe-7s-paperclip
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-radio"></i>pe-7s-radio
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-note2"></i>pe-7s-note2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-print"></i>pe-7s-print
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-network"></i>pe-7s-network
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-prev"></i>pe-7s-prev
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-mute"></i>pe-7s-mute
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-power"></i>pe-7s-power
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-medal"></i>pe-7s-medal
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-portfolio"></i>pe-7s-portfolio
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-like2"></i>pe-7s-like2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-plus"></i>pe-7s-plus
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-left-arrow"></i>pe-7s-left-arrow
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-play"></i>pe-7s-play
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-key"></i>pe-7s-key
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-plane"></i>pe-7s-plane
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-joy"></i>pe-7s-joy
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-photo-gallery"></i>pe-7s-photo-gallery
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-pin"></i>pe-7s-pin
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-phone"></i>pe-7s-phone
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-plug"></i>pe-7s-plug
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-pen"></i>pe-7s-pen
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-right-arrow"></i>pe-7s-right-arrow
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-paper-plane"></i>pe-7s-paper-plane
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-delete-user"></i>pe-7s-delete-user
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-paint"></i>pe-7s-paint
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-bottom-arrow"></i>pe-7s-bottom-arrow
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-notebook"></i>pe-7s-notebook
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-note"></i>pe-7s-note
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-next"></i>pe-7s-next
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-news-paper"></i>pe-7s-news-paper
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-musiclist"></i>pe-7s-musiclist
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-music"></i>pe-7s-music
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-mouse"></i>pe-7s-mouse
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-more"></i>pe-7s-more
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-moon"></i>pe-7s-moon
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-monitor"></i>pe-7s-monitor
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-micro"></i>pe-7s-micro
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-menu"></i>pe-7s-menu
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-map"></i>pe-7s-map
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-map-marker"></i>pe-7s-map-marker
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-mail"></i>pe-7s-mail
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-mail-open"></i>pe-7s-mail-open
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-mail-open-file"></i>pe-7s-mail-open-file
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-magnet"></i>pe-7s-magnet
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-loop"></i>pe-7s-loop
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-look"></i>pe-7s-look
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-lock"></i>pe-7s-lock
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-lintern"></i>pe-7s-lintern
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-link"></i>pe-7s-link
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-like"></i>pe-7s-like
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-light"></i>pe-7s-light
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-less"></i>pe-7s-less
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-keypad"></i>pe-7s-keypad
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-junk"></i>pe-7s-junk
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-info"></i>pe-7s-info
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-home"></i>pe-7s-home
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-help2"></i>pe-7s-help2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-help1"></i>pe-7s-help1
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-graph3"></i>pe-7s-graph3
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-graph2"></i>pe-7s-graph2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-graph1"></i>pe-7s-graph1
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-graph"></i>pe-7s-graph
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-global"></i>pe-7s-global
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-gleam"></i>pe-7s-gleam
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-glasses"></i>pe-7s-glasses
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-gift"></i>pe-7s-gift
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-folder"></i>pe-7s-folder
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-flag"></i>pe-7s-flag
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-filter"></i>pe-7s-filter
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-file"></i>pe-7s-file
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-expand1"></i>pe-7s-expand1
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-exapnd2"></i>pe-7s-exapnd2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-edit"></i>pe-7s-edit
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-drop"></i>pe-7s-drop
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-drawer"></i>pe-7s-drawer
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-download"></i>pe-7s-download
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-display2"></i>pe-7s-display2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-display1"></i>pe-7s-display1
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-diskette"></i>pe-7s-diskette
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-date"></i>pe-7s-date
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-cup"></i>pe-7s-cup
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-culture"></i>pe-7s-culture
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-crop"></i>pe-7s-crop
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-credit"></i>pe-7s-credit
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-copy-file"></i>pe-7s-copy-file
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-config"></i>pe-7s-config
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-compass"></i>pe-7s-compass
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-comment"></i>pe-7s-comment
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-coffee"></i>pe-7s-coffee
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-cloud"></i>pe-7s-cloud
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-clock"></i>pe-7s-clock
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-check"></i>pe-7s-check
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-chat"></i>pe-7s-chat
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-cart"></i>pe-7s-cart
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-camera"></i>pe-7s-camera
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-call"></i>pe-7s-call
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-calculator"></i>pe-7s-calculator
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-browser"></i>pe-7s-browser
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-box2"></i>pe-7s-box2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-box1"></i>pe-7s-box1
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-bookmarks"></i>pe-7s-bookmarks
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-bicycle"></i>pe-7s-bicycle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-bell"></i>pe-7s-bell
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-battery"></i>pe-7s-battery
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-ball"></i>pe-7s-ball
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-back"></i>pe-7s-back
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-attention"></i>pe-7s-attention
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-anchor"></i>pe-7s-anchor
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-albums"></i>pe-7s-albums
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-alarm"></i>pe-7s-alarm
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="pe-7s-airplay"></i>pe-7s-airplay
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container-fluid">
2016 © Neptune
</div>
</footer>
</div>
</div>
<!-- Vendor JS -->
<script type="text/javascript" src="vendor/jquery/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="vendor/tether/js/tether.min.js"></script>
<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="vendor/detectmobilebrowser/detectmobilebrowser.js"></script>
<script type="text/javascript" src="vendor/jscrollpane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="vendor/jscrollpane/mwheelIntent.js"></script>
<script type="text/javascript" src="vendor/jscrollpane/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="vendor/waves/waves.min.js"></script>
<script type="text/javascript" src="vendor/chartist/chartist.min.js"></script>
<script type="text/javascript" src="vendor/switchery/dist/switchery.min.js"></script>
<!-- Neptune JS -->
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
HTML
1
https://gitee.com/libwiki/bootstrap-v4.0_demo.git
git@gitee.com:libwiki/bootstrap-v4.0_demo.git
libwiki
bootstrap-v4.0_demo
bootstrap-v4.0_demo
master

搜索帮助

23e8dbc6 1850385 7e0993f3 1850385