D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
vitalityhealth
/
www
/
testaa
/
superadmin
/
Filename :
index55.html
back
Copy
<!doctype html><html class="landing simple-sticky-header-enabled" data-style-switcher-options="{'changeLogo': false, 'colorPrimary': '#0088cc', 'colorSecondary': '#0169fe', 'colorTertiary': '#005AEF', 'colorQuaternary': '#383f48'}"> <head> <!-- Basic --> <meta charset="UTF-8"> <title>Landing | Porto Admin - Responsive HTML5 Template</title> <meta name="keywords" content="HTML5 Admin Template"> <meta name="description" content="Porto Admin - Responsive HTML5 Template"> <meta name="author" content="okler.net"> <!-- Mobile Metas --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- Web Fonts --> <link href="../../../css-1?family=Poppins:300,400,500,600,700,800%7COpen+Sans:400,700,800" rel="stylesheet" type="text/css"> <!-- Vendor CSS --> <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="vendor/animate/animate.compat.css"> <link rel="stylesheet" href="vendor/font-awesome/css/all.min.css"> <link rel="stylesheet" href="vendor/boxicons/css/boxicons.min.css"> <link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css"> <link rel="stylesheet" href="vendor/bootstrap-datepicker/css/bootstrap-datepicker3.css"> <!-- Specific Page Vendor CSS --> <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.css"> <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.css"> <!-- Theme CSS --> <link rel="stylesheet" href="css/theme.css"> <!-- Landing Page CSS --> <link rel="stylesheet" href="css/landing.css"> <!-- Theme Custom CSS --> <link rel="stylesheet" href="css/custom.css"> <!-- Head Libs --> <script src="vendor/modernizr/modernizr.js"></script> <script src="master/style-switcher/style.switcher.localstorage.js"></script> </head> <body class="alternative-font-4 loading-overlay-showing" data-plugin-page-transition="" data-loading-overlay="" data-plugin-options="{'hideDelay': 100}"> <div class="loading-overlay"> <div class="bounce-loader"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div> </div> <div class="body"> <header id="header" class="header header-nav-links header-nav-menu header-transparent" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': false, 'stickyEnableOnMobile': true, 'stickyStartAt': 70, 'stickyChangeLogo': false, 'stickyHeaderContainerHeight': 70}"> <div class="header-body border-top-0 bg-dark box-shadow-none"> <div class="header-container container h-100"> <div class="header-row h-100"> <div class="header-column"> <div class="header-row"> <div class="header-logo"> <a href="#" class="goto-top"><img alt="Porto" width="102" height="45" data-sticky-width="82" data-sticky-height="36" data-sticky-top="0" src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500}" data-original="img/logo-light.png"></a> </div> </div> </div> <div class="header-column justify-content-end"> <div class="header-row"> <button class="btn header-btn-collapse-nav d-lg-none order-3 mt-0 ms-3 me-0" data-bs-toggle="collapse" data-bs-target=".header-nav"> <i class="fas fa-bars"></i> </button> <!-- start: header nav menu --> <div class="header-nav header-nav-links header-nav-light-text header-nav-dropdowns-dark collapse"> <div class="header-nav-main header-nav-main-mobile-dark header-nav-main-effect-1 header-nav-main-sub-effect-1"> <nav> <ul class="nav nav-pills" id="mainNav"> <li> <a class="nav-link" href="#demos" data-hash="" data-hash-offset="120"> Demos </a> </li> <li class="dropdown"> <a class="nav-link dropdown-toggle" href="#"> Layouts </a> <ul class="dropdown-menu"> <li> <a class="nav-link" href="index.html"> Landing Page </a> </li> <li> <a class="nav-link" href="layouts-default.html"> Default </a> </li> <li> <a class="nav-link" href="layouts-modern.html"> Modern </a> </li> <li class="dropdown-submenu"> <a class="nav-link"> Boxed </a> <ul class="dropdown-menu"> <li> <a class="nav-link" href="layouts-boxed.html"> Static Header </a> </li> <li> <a class="nav-link" href="layouts-boxed-fixed-header.html"> Fixed Header </a> </li> </ul> </li> <li class="dropdown-submenu"> <a class="nav-link"> Horizontal Menu Header </a> <ul class="dropdown-menu"> <li> <a class="nav-link" href="layouts-header-menu.html"> Pills </a> </li> <li> <a class="nav-link" href="layouts-header-menu-stripe.html"> Stripe </a> </li> <li> <a class="nav-link" href="layouts-header-menu-top-line.html"> Top Line </a> </li> </ul> </li> <li> <a class="nav-link" href="layouts-dark.html"> Dark </a> </li> <li> <a class="nav-link" href="layouts-dark-header.html"> Dark Header </a> </li> <li> <a class="nav-link" href="layouts-two-navigations.html"> Two Navigations </a> </li> <li class="dropdown-submenu"> <a class="nav-link"> Tab Navigation </a> <ul class="dropdown-menu"> <li> <a class="nav-link" href="layouts-tab-navigation-dark.html"> Tab Navigation Dark </a> </li> <li> <a class="nav-link" href="layouts-tab-navigation.html"> Tab Navigation Light </a> </li> <li> <a class="nav-link" href="layouts-tab-navigation-boxed.html"> Tab Navigation Boxed </a> </li> </ul> </li> <li> <a class="nav-link" href="layouts-light-sidebar.html"> Light Sidebar </a> </li> <li> <a class="nav-link" href="layouts-left-sidebar-collapsed.html"> Left Sidebar Collapsed </a> </li> <li> <a class="nav-link" href="layouts-left-sidebar-scroll.html"> Left Sidebar Scroll </a> </li> <li class="dropdown-submenu"> <a class="nav-link"> Left Sidebar Big Icons </a> <ul class="dropdown-menu"> <li> <a class="nav-link" href="layouts-left-sidebar-big-icons.html"> Left Sidebar Big Icons Dark </a> </li> <li> <a class="nav-link" href="layouts-left-sidebar-big-icons-light.html"> Left Sidebar Big Icons Light </a> </li> </ul> </li> <li class="dropdown-submenu"> <a class="nav-link"> Left Sidebar Panel </a> <ul class="dropdown-menu"> <li> <a class="nav-link" href="layouts-left-sidebar-panel.html"> Left Sidebar Panel Dark </a> </li> <li> <a class="nav-link" href="layouts-left-sidebar-panel-light.html"> Left Sidebar Panel Light </a> </li> </ul> </li> <li class="dropdown-submenu"> <a class="nav-link"> Left Sidebar Sizes </a> <ul class="dropdown-menu"> <li> <a class="nav-link" href="layouts-sidebar-sizes-xs.html"> Left Sidebar XS </a> </li> <li> <a class="nav-link" href="layouts-sidebar-sizes-sm.html"> Left Sidebar SM </a> </li> <li> <a class="nav-link" href="layouts-sidebar-sizes-md.html"> Left Sidebar MD </a> </li> </ul> </li> <li> <a class="nav-link" href="layouts-square-borders.html"> Square Borders </a> </li> </ul> </li> <li class="dropdown"> <a class="nav-link dropdown-toggle" href="#"> Pages </a> <ul class="dropdown-menu"> <li> <a class="nav-link" href="pages-signup.html"> Sign Up </a> </li> <li> <a class="nav-link" href="pages-signin.html"> Sign In </a> </li> <li> <a class="nav-link" href="pages-recover-password.html"> Recover Password </a> </li> <li> <a class="nav-link" href="pages-lock-screen.html"> Locked Screen </a> </li> <li> <a class="nav-link" href="pages-user-profile.html"> User Profile </a> </li> <li> <a class="nav-link" href="pages-session-timeout.html"> Session Timeout </a> </li> <li> <a class="nav-link" href="pages-calendar.html"> Calendar </a> </li> <li> <a class="nav-link" href="pages-timeline.html"> Timeline </a> </li> <li> <a class="nav-link" href="pages-media-gallery.html"> Media Gallery </a> </li> <li> <a class="nav-link" href="pages-invoice.html"> Invoice </a> </li> <li> <a class="nav-link" href="pages-blank.html"> Blank Page </a> </li> <li> <a class="nav-link" href="pages-404.html"> 404 </a> </li> <li> <a class="nav-link" href="pages-500.html"> 500 </a> </li> <li> <a class="nav-link" href="pages-log-viewer.html"> Log Viewer </a> </li> <li> <a class="nav-link" href="pages-search-results.html"> Search Results </a> </li> </ul> </li> <li class="dropdown dropdown-mega"> <a class="nav-link dropdown-toggle" href="#">UI Elements</a> <ul class="dropdown-menu"> <li> <div class="dropdown-mega-content"> <div class="row"> <div class="col-lg-3"> <ul class="dropdown-mega-sub-nav"> <li> <a class="nav-link" href="ui-elements-typography.html"> Typography </a> </li> <li> <a class="nav-link" href="#"> Icons <span class="mega-sub-nav-toggle toggled float-end" data-toggle="collapse" data-target=".mega-sub-nav-sub-menu-1"></span> </a> <ul class="dropdown-mega-sub-nav mega-sub-nav-sub-menu-1 collapse in"> <li> <a class="nav-link" href="ui-elements-icons-elusive.html"> Elusive </a> </li> <li> <a class="nav-link" href="ui-elements-icons-font-awesome.html"> Font Awesome </a> </li> <li> <a class="nav-link" href="ui-elements-icons-line-icons.html"> Line Icons </a> </li> <li> <a class="nav-link" href="ui-elements-icons-meteocons.html"> Meteocons </a> </li> <li> <a class="nav-link" href="ui-elements-icons-box-icons.html"> Box Icons </a> </li> </ul> </li> <li> <a class="nav-link" href="ui-elements-tabs.html"> Tabs </a> </li> <li> <a class="nav-link" href="ui-elements-cards.html"> Cards </a> </li> </ul> </div> <div class="col-lg-3"> <ul class="dropdown-mega-sub-nav"> <li> <a class="nav-link" href="ui-elements-widgets.html"> Widgets </a> </li> <li> <a class="nav-link" href="ui-elements-portlets.html"> Portlets </a> </li> <li> <a class="nav-link" href="ui-elements-buttons.html"> Buttons </a> </li> <li> <a class="nav-link" href="ui-elements-alerts.html"> Alerts </a> </li> <li> <a class="nav-link" href="ui-elements-notifications.html"> Notifications </a> </li> <li> <a class="nav-link" href="ui-elements-modals.html"> Modals </a> </li> <li> <a class="nav-link" href="ui-elements-lightbox.html"> Lightbox </a> </li> <li> <a class="nav-link" href="ui-elements-progressbars.html"> Progress Bars </a> </li> </ul> </div> <div class="col-lg-3"> <ul class="dropdown-mega-sub-nav"> <li> <a class="nav-link" href="ui-elements-sliders.html"> Sliders </a> </li> <li> <a class="nav-link" href="ui-elements-carousels.html"> Carousels </a> </li> <li> <a class="nav-link" href="ui-elements-accordions.html"> Accordions </a> </li> <li> <a class="nav-link" href="ui-elements-toggles.html"> Toggles </a> </li> <li> <a class="nav-link" href="ui-elements-nestable.html"> Nestable </a> </li> <li> <a class="nav-link" href="ui-elements-tree-view.html"> Tree View </a> </li> <li> <a class="nav-link" href="ui-elements-scrollable.html"> Scrollable </a> </li> <li> <a class="nav-link" href="ui-elements-grid-system.html"> Grid System </a> </li> </ul> </div> <div class="col-lg-3"> <ul class="dropdown-mega-sub-nav"> <li> <a class="nav-link" href="ui-elements-charts.html"> Charts </a> </li> <li> <a class="nav-link" href="#"> Animations <span class="mega-sub-nav-toggle toggled float-end" data-toggle="collapse" data-target=".mega-sub-nav-sub-menu-2"></span> </a> <ul class="dropdown-mega-sub-nav mega-sub-nav-sub-menu-2 collapse"> <li> <a class="nav-link" href="ui-elements-animations-appear.html"> Appear </a> </li> <li> <a class="nav-link" href="ui-elements-animations-hover.html"> Hover </a> </li> </ul> </li> <li> <a class="nav-link" href="#"> Loading <span class="mega-sub-nav-toggle toggled float-end" data-toggle="collapse" data-target=".mega-sub-nav-sub-menu-3"></span> </a> <ul class="dropdown-mega-sub-nav mega-sub-nav-sub-menu-3 collapse"> <li> <a class="nav-link" href="ui-elements-loading-overlay.html"> Overlay </a> </li> <li> <a class="nav-link" href="ui-elements-loading-progress.html"> Progress </a> </li> </ul> </li> <li> <a class="nav-link" href="ui-elements-extra.html"> Extra </a> </li> </ul> </div> </div> </div> </li> </ul> </li> <li class="dropdown"> <a class="nav-link dropdown-toggle" href="#"> Apps </a> <ul class="dropdown-menu"> <li> <a class="nav-link" href="ecommerce-dashboard.html"> eCommerce </a> </li> <li> <a class="nav-link" href="mailbox-folder.html"> Mailbox </a> </li> </ul> </li> </ul> </nav> </div> </div> <!-- end: header nav menu --> <a href="https://themeforest.net/item/porto-admin-responsive-html5-template/8539472" class="btn btn-gradient btn-modern btn-rounded text-3 ms-4 d-none d-sm-block">BUY PORTO ADMIN NOW!</a> </div> </div> </div> </div> </div> </header> <div role="main" class="main"> <section class="section section-concept section-no-border section-dark section-angled section-angled-reverse border-top-0 pt-5 m-0" id="section-concept" style="background-size: cover; background-position: center; animation-duration: 750ms; animation-delay: 300ms; animation-fill-mode: forwards;" data-plugin-lazyload="" data-plugin-options="{'threshold': 500}" data-original="img/landing/header_bg.jpg"> <div class="section-angled-layer-bottom bg-light" style="padding: 8rem 0;"></div> <div class="container pt-5 mt-lg-5"> <div class="row align-items-center pt-3"> <div class="col-lg-5 mb-5"> <h5 class="text-primary font-weight-bold mb-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-duration="750">PORTO ADMIN HTML5 TEMPLATE</h5> <h1 class="font-weight-bold text-color-light text-13 line-height-2 mt-0 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" data-appear-animation-duration="750">The Best Admin Template<span class="appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="600" data-appear-animation-duration="800"><span class="d-inline-block text-primary highlighted-word highlighted-word-rotate highlighted-word-animation-1 alternative-font-3 font-weight-bold text-1 ms-2">ever</span></span></h1> <p class="custom-font-size-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="900" data-appear-animation-duration="750">Porto Admin is simply the best choice for your new project. The template is several years among the most popular in the world.<a href="#intro" data-hash="" data-hash-offset="120" class="text-color-light font-weight-semibold text-1 d-block">VIEW MORE <i class="fa fa-long-arrow-alt-right ms-1"></i></a></p> <p class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1200" data-appear-animation-duration="750"> <a href="https://getbootstrap.com/" target="_blank"> <img src="img/bs5-updated.png" class="img-fluid mt-2" alt="Bootstrap 5" width="200"> </a> </p> <div id="popup-content-1" class="dialog dialog-lg zoom-anim-dialog rounded p-3 mfp-hide mfp-close-out"> <div class="embed-responsive embed-responsive-4by3"> <video width="100%" height="100%" autoplay="" muted="" loop="" controls=""> <source src="video/presentation.mp4?r=2" type="video/mp4"> </video> </div> </div> </div> <div class="col-lg-6 offset-lg-1 mb-5 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="1200" data-appear-animation-duration="750"> <div class="border-width-10 border-color-light clearfix border border-radius"> <video class="float-start" width="100%" height="100%" autoplay="" muted="" loop=""> <source src="video/presentation.mp4?r=2" type="video/mp4"> </video> </div> </div> <div class="col-md-8 col-lg-6 col-xl-5 custom-header-bar py-4 pe-5 appear-animation p-relative z-index-2" data-appear-animation="maskRight" data-appear-animation-delay="1200" data-appear-animation-duration="750"> <div class="appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="1500"> <div class="star-rating-wrap d-flex align-items-center justify-content-center position-relative text-color-dark text-5 py-2 mb-2"> <i class="fas fa-star"></i><i class="fas fa-star ms-1"></i><i class="fas fa-star ms-1"></i><i class="fas fa-star ms-1"></i><i class="fas fa-star ms-1"></i> </div> <h4 class="position-relative text-center text-color-light font-weight-bold text-7 line-height-2 negative-ls-1 mt-0 mb-1">Popular Admin HTML5 Template</h4> <p class="position-relative text-color-light text-center font-weight-normal opacity-7 mb-1">* Aproved by over 7k+ buyers since 2014</p> </div> </div> </div> </div> </section> <section id="intro" class="section section-no-border section-angled bg-light border-top-0 pt-0 pb-5 m-0"> <div class="section-angled-layer-bottom section-angled-layer-increase-angle bg-color-light-scale-1" style="padding: 24rem 0;"></div> <div class="container pb-5" style="min-height: 1000px;"> <div class="row counters justify-content-center"> <div class="col-md-8 col-lg-6 col-xl-5 text-center"> <h2 class="font-weight-bold text-color-dark text-9 mt-0mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-duration="750" data-plugin-options="{'accY': -200}">The Perfect Template for a Professional Admin Project</h2> <p class="sub-title text-primary text-4 font-weight-semibold positive-ls-2 mt-2 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" data-appear-animation-duration="750">YOUR ADMIN TO A <span class="highlighted-word highlighted-word-animation-1 highlighted-word-animation-1-2 highlighted-word-animation-1 pos-2 alternative-font-4 font-weight-semibold line-height-2 pb-3">NEW LEVEL</span></p> </div> <div class="col-lg-9 text-center"> <p class="text-1rem text-color-default negative-ls-05 pt-2 pb-4 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500" data-appear-animation-duration="750">Porto Admin is simply a better choice for your new project. The template is several years among the most popular in the world, being constantly improved and following the trends of design and best practices of code. Your search for the best solution is over, get your own copy and join our happy customers.</p> </div> </div> <div class="row text-center mb-5 pb-lg-3"> <div class="col-md-6 col-lg-4 offset-lg-2 text-center mb-5 mb-md-0"> <div class="appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="750" data-appear-animation-duration="750"> <h3 class="font-weight-bold text-color-dark text-14 line-height-1 negative-ls-2 mb-2">20+</h3> <label class="font-weight-semibold negative-ls-1 text-6 text-color-dark mb-0">Included Dashboards</label> <p class="text-color-grey font-weight-semibold pb-1 mb-2">100+ HTML FILES</p> <p class="mb-0"><a href="#demos" data-hash="" data-hash-offset="120" class="text-color-primary d-flex align-items-center justify-content-center text-3 font-weight-semibold text-decoration-none">VIEW DEMOS <i class="fas fa-long-arrow-alt-right ms-2 text-3 mb-0"></i></a></p> </div> </div> <div class="col-md-6 col-lg-4 text-center divider-left-border"> <div class="appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="750" data-appear-animation-duration="750"> <h3 class="font-weight-bold text-color-dark text-14 line-height-1 negative-ls-2 mb-2">7K+</h3> <label class="font-weight-semibold negative-ls-1 text-6 text-color-dark mb-0">Projects Using Porto Admin</label> <p class="text-color-grey font-weight-semibold pb-1 mb-2">100K+ IN ALL VERSIONS</p> <p class="mb-0"><a href="https://themeforest.net/item/porto-admin-responsive-html5-template/8539472" class="text-color-primary d-flex align-items-center justify-content-center text-3 font-weight-semibold text-decoration-none" target="_blank">BUILD PROJECT <i class="fas fa-long-arrow-alt-right ms-2 text-3 mb-0"></i></a></p> </div> </div> </div> <div class="intro row align-items-center justify-content-center justify-content-md-start pb-5 pb-md-0"> <div class="col-3 pe-0 ps-3 z-index-2"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/intro2.jpg" class="img-fluid border border-width-10 border-color-light box-shadow-5 rounded d-none d-md-block appear-animation" alt="Screenshot 2" data-appear-animation="fadeInUp" data-appear-animation-delay="600"> <div class="position-absolute d-none d-md-flex align-items-end appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="900" style="bottom: -60px; right: -90px;"> <span class="arrow hlt" style="margin-right: -70px;"></span> <strong class="text-color-dark mb-4 pb-3">advanced features!</strong> </div> </div> <div class="col-10 col-md-9 ps-0 pe-5 pb-5 pb-md-0 mb-5 mb-md-0 p-relative"> <div class="intro2 pt-5 pt-md-0 mt-5 mt-lg-0 appear-animation pe-5" data-appear-animation="fadeInUp" data-appear-animation-delay="400"><img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/intro1.jpg" class="img-fluid box-shadow-3 position-relative z-index-1 rounded d-none d-md-block" alt="Screenshot 1" style="left: -110px;"></div> <div class="intro3 z-index-3 position-absolute appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="800" style="top: 20%; right: 4%;"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/intro3.jpg" class="img-fluid border border-width-10 border-color-light box-shadow-6 rounded" alt="Screenshot 3"> <div class="position-absolute d-none d-md-flex align-items-end appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1100" style="bottom: -135px; right: -20px;"> <strong class="text-color-dark mb-3">a lot of demos!</strong> <span class="arrow hru"></span> </div> </div> </div> </div> </div> </section> <section class="section section-no-border border-top-0 pt-0 pb-0 m-0"> <div class="container"> <div class="row align-items-center justify-content-between"> <div class="col-lg-4 pe-lg-4 mb-5 mb-md-0"> <h2 class="text-color-dark text-7 font-weight-semibold line-height-2 mb-2">The new generation of admin templates is here.</h2> <p class="pe-lg-5">A complete suite of tools designed to make life easier with a top quality admin templates.</p> </div> <div class="col-md-4 col-lg-auto icon-box text-center mb-md-4"> <i class="icon-bg icon-1"></i> <h4 class="font-weight-bold text-color-dark custom-font-size-2 line-height-3 my-0">Super High<br>Performance</h4> </div> <div class="col-md-4 col-lg-auto icon-box text-center mx-xl-5 my-5 my-md-0 pb-md-4"> <i class="icon-bg icon-4"></i> <h4 class="font-weight-bold text-color-dark custom-font-size-2 line-height-3 my-0">Created with Top<br>Plugins and Extensions</h4> </div> <div class="col-md-4 col-lg-auto icon-box text-center mb-4"> <i class="icon-bg icon-3"></i> <h4 class="font-weight-bold text-color-dark custom-font-size-2 line-height-3 my-0">Extremely Easy<br>to Customize</h4> </div> <div class="col-sm-12"> <hr class="solid opacity-7 my-5"> <h2 class="font-weight-bold text-color-dark text-center text-10 pt-3 mb-3">The Most Customizable + Solid and Tested Base</h2> </div> <div class="col-lg-8 offset-lg-2 px-lg-0 text-center mb-5 mb-sm-4 mb-lg-0"> <p class="font-weight-500 text-4 mb-0">Porto Admin has a huge variety of options and features to create your project, it has also a very solid based that is being improved and tested by professional developers since 2014.</p> </div> </div> <div class="image-wrapper position-relative z-index-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500" data-appear-animation-duration="750" style="height: 0; padding-bottom: 16%; margin-top: -30px;"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/theme_options.png" class="img-fluid" alt="The Most Customizable Template"> </div> </div> </section> <section class="section section-no-border section-angled section-dark border-top-0 pb-0 m-0" style="background-repeat: no-repeat; background-color: #0169fe !important;" data-plugin-lazyload="" data-plugin-options="{'threshold': 500}" data-original="img/landing/reason_bg.png"> <div class="section-angled-layer-top section-angled-layer-increase-angle bg-color-light-scale-1" style="padding: 4rem 0;"></div> <div class="spacer py-md-4 my-md-5"></div> <div class="container pt-lg-4 pt-xl-5 mt-xl-5"> <div class="row align-items-center justify-content-center pt-lg-5 mt-5 p-relative"> <div class="col-auto col-sm-12 col-lg-6 offset-lg-1 pt-5 mb-5"> <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="500"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/porto_dots.png" width="154" height="146" class="position-absolute top-auto d-none d-lg-block" alt="6 reasons" data-plugin-float-element="" data-plugin-options="{'startPos': 'none', 'speed': 3, 'transition': true}" style="bottom: 204px; left: 70px;"> </div> <div class="text-reasons ps-4 ps-sm-0"> <label class="text-color-light appear-animation z-index-1" data-appear-animation="blurIn" data-appear-animation-delay="250" data-appear-animation-duration="750">6</label> <h3 class="text-color-light text-4 text-sm-6 text-md-9 text-lg-5 text-xl-7 px-5 py-sm-3 mt-0 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="450" data-appear-animation-duration="750">Reasons</h3> <h3 class="text-color-light text-4 text-sm-6 text-md-9 text-lg-5 text-xl-7 mt-0 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="750" data-appear-animation-duration="750">Why you should choose</h3> <h3 class="text-color-light text-4 text-sm-6 text-md-9 text-lg-5 text-xl-8 py-sm-3 px-sm-5 px-lg-4 mt-0 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="950" data-appear-animation-duration="750">Porto <span class="highlighted-word highlighted-word-animation-1 highlighted-word-animation-1-light highlighted-word-animation-1-2 alternative-font-4 font-weight-extra-bold">Admin</span></h3> </div> </div> <div class="col-10 col-sm-12 col-lg-5 col-xl-4 ps-lg-4 ps-xl-5"> <h2 class="text-color-light text-7 font-weight-semibold line-height-2 mb-2 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="1150" data-appear-animation-duration="750">With Porto your satisfaction is guaranteed.</h2> <p class="custom-text-color-2 line-height-5 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="1350" data-appear-animation-duration="750">We have selected the 6 top reasons to choose Porto Admin. Check below:</p> </div> </div> <div class="row justify-content-center mb-4 pt-lg-4"> <div class="col-lg-11"> <div class="row justify-content-center"> <div class="col-10 col-sm-6 col-lg-4 image-box appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750"> <img class="img-fluid mb-2" alt="Speed Performance" src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/reason1.png"> <div class="d-flex align-items-center mb-2"> <span class="text-color-dark font-weight-extra-bold text-12 me-2 line-height-1">1</span> <h4 class="d-flex flex-column font-weight-bold text-color-light text-5 mt-0 mb-0"><small class="font-weight-semibold positive-ls-2 line-height-1">OPTIMIZED FOR</small>Speed Performance</h4> </div> <p class="pe-5 custom-text-color-2">Choose Porto Admin and make your site at high performance. We know your project must the fast as possible.</p> </div> <div class="col-10 col-sm-6 col-lg-4 image-box appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800" data-appear-animation-duration="750"> <img class="img-fluid mb-2" alt="Speed Performance" src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/reason2.png"> <div class="d-flex align-items-center mb-2"> <span class="text-color-dark font-weight-extra-bold text-12 me-2 line-height-1">2</span> <h4 class="d-flex flex-column font-weight-bold text-color-light text-5 mt-0 mb-0"><small class="font-weight-semibold positive-ls-2 line-height-1">THE MOST</small>Solid and Tested Base</h4> </div> <p class="pe-5 custom-text-color-2">Porto has a very solid development base that has been improved since 2014 by our best developers.</p> </div> <div class="col-10 col-sm-6 col-lg-4 image-box appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1000" data-appear-animation-duration="750"> <img class="img-fluid mb-2" alt="Speed Performance" src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/reason3.png"> <div class="d-flex align-items-center mb-2"> <span class="text-color-dark font-weight-extra-bold text-12 me-2 line-height-1">3</span> <h4 class="d-flex flex-column font-weight-bold text-color-light text-5 mt-0 mb-0"><small class="font-weight-semibold positive-ls-2 line-height-1">TOP DESIGNS CREATED BY</small>Usability Specialists</h4> </div> <p class="pe-5 custom-text-color-2">The designs of all pages and all demos included in Porto Admin were created by usability experts and modern designs standards.</p> </div> <div class="col-10 col-sm-6 col-lg-4 image-box appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300" data-appear-animation-duration="750"> <img class="img-fluid mb-2" alt="Speed Performance" src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/reason4.png"> <div class="d-flex align-items-center mb-2"> <span class="text-color-dark font-weight-extra-bold text-12 me-2 line-height-1">4</span> <h4 class="d-flex flex-column font-weight-bold text-color-light text-5 mt-0 mb-0"><small class="font-weight-semibold positive-ls-2 line-height-1">THE BEST</small>Customer Experience</h4> </div> <p class="pe-5 custom-text-color-2">4.85 average rating based on 2.5k+ review proves that Porto is loved by our customers.</p> </div> <div class="col-10 col-sm-6 col-lg-4 image-box appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500" data-appear-animation-duration="750"> <img class="img-fluid mb-2" alt="Speed Performance" src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/reason5.png"> <div class="d-flex align-items-center mb-2"> <span class="text-color-dark font-weight-extra-bold text-12 me-2 line-height-1">5</span> <h4 class="d-flex flex-column font-weight-bold text-color-light text-5 mt-0 mb-0"><small class="font-weight-semibold positive-ls-2 line-height-1">WORKS PERFECTLY WITH</small>Porto Front-End Template</h4> </div> <p class="pe-5 custom-text-color-2">With Porto Front-End you can create your site with same design as the admin. Learn more in the next section.</p> </div> <div class="col-10 col-sm-6 col-lg-4 image-box appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700" data-appear-animation-duration="750"> <img class="img-fluid mb-2" alt="Speed Performance" src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/reason6.png"> <div class="d-flex align-items-center mb-2"> <span class="text-color-dark font-weight-extra-bold text-12 me-2 line-height-1">6</span> <h4 class="d-flex flex-column font-weight-bold text-color-light text-5 mt-0 mb-0"><small class="font-weight-semibold positive-ls-2 line-height-1">ALWAYS KEEP</small>Template Updates</h4> </div> <p class="pe-5 custom-text-color-2">Lifetime regular update makes porto always "best" compared to other competitors.</p> </div> </div> </div> </div> <div class="text-center"> <a href="https://themeforest.net/item/porto-admin-responsive-html5-template/8539472" class="btn btn-dark btn-rounded btn-modern btn-px-5 text-3 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300" target="_blank">BUY PORTO ADMIN NOW!</a> </div> </div> </section> <section class="section section-no-border section-angled bg-color-light-scale-1 border-top-0 m-0"> <div class="section-angled-layer-top section-angled-layer-increase-angle" style="padding: 3.7rem 0; background-color: #0169fe;"></div> <div class="container py-5 my-5"> <div class="row align-items-center text-center my-5"> <div class="col-md-6"> <h2 class="text-color-dark font-weight-bold text-9 mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" data-appear-animation-duration="750">Introducing Porto Front End</h2> <p class="font-weight-semibold text-primary text-4 fonts-weight-semibold positive-ls-2 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750">FRONT-END WITH SAME LOOK'N FEEL AS THE BACK-END</p> <p class="font-weight-500 pb-2 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800" data-appear-animation-duration="750">Porto Admin integration give you a package of new features to add in the front-end template, such as advanced tables, advanced forms, etc... Also allows you to create the back-end of your site using the same design.</p> <a href="https://themeforest.net/item/porto-admin-responsive-html5-template/8539472" class="btn btn-modern btn-gradient btn-rounded btn-px-5 py-3 text-3 mb-4 appear-animation" target="_blank" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1000" data-appear-animation-duration="750" target="_blank">VIEW PORTO FRONT-END</a> <p class="appear-animation text-4" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1200">* Porto Front-End <strong class="text-dark">is not included</strong> in the admin and is available for $16.</p> </div> <div class="col-md-6 py-5"> <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="500"> <img class="porto-lz" src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/porto_dots2.png" alt="" width="149" height="142" style="position: absolute; top: -60px; right: -8%;"> </div> <div class="appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="0" data-appear-animation-duration="750"> <div class="strong-shadow rounded strong-shadow-top-right"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/porto_front_end.jpg" class="img-fluid border border-width-10 border-color-light rounded box-shadow-3" alt="Porto Admin"> </div> </div> </div> </div> </div> </section> <section class="section border-0 section-angled section-angled-reverse section-funnel m-0 position-relative overflow-visible" style="background-image: url(img/lazy.png); background-size: 100%; background-position: top; background-repeat: no-repeat; background-color: rgb(34, 37, 42);" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/porto_performance_bg.png"> <div class="section-angled-layer-top section-angled-layer-increase-angle" style="padding: 5rem 0; background-color: #22252a;"></div> <svg version="1.1" viewbox="500 200 600 900" width="1920" height="100%" xmlns="http://www.w3.org/2000/svg" class="background-svg-style-1" style="top: 120px;"> <defs> <filter id="shadow" x="-300%" y="-300%" width="600%" height="600%"> <fedropshadow dx="0" dy="0" stddeviation="10 10" flood-color="#08c" radius="10" flood-opacity="1"></fedropshadow> </filter> </defs> <path id="svg_17" d="m1644.875212,897.875106l-1684.875221,-0.374889l1.25,-446.250108c-1.25,0.372765 496.124925,24.124892 496.124925,24.124892c0,0 255.000064,-106.250026 253.875257,-106.624912c1.124807,0.374885 129.874839,-2.125116 128.750031,-2.500001c1.124808,0.374885 112.374836,-32.125123 111.250027,-32.500008c1.124809,0.374885 144.874844,21.62489 144.874844,21.62489c0,0 128.750032,-73.750018 127.625222,-74.124903c1.124811,0.374884 133.624844,9.124887 133.624844,9.124887c0,0 108.750027,35.000009 108.750027,35.000009c0,0 178.750045,-125.000031 177.625231,-125.374915" opacity="0.5" stroke-opacity="null" stroke-width="0" stroke="#191b1e" fill="#191b1e" fill-opacity="0.4"></path> <path id="svg_6" d="m1663.83437,909.61168l-1704.94553,-0.72172l1.11111,-486.66724l648.88966,30.00004l105.55568,-41.11116l126.66682,1.11111l122.22236,-34.44449l126.66682,14.44447c0.49906,0.72171 126.05477,-64.83392 126.05477,-64.83392c0,0 128.88904,4.44445 128.38998,3.72273c0.49906,0.72172 118.27698,28.49953 118.27698,28.49953c0,0 173.33353,-108.88902 172.83447,-109.61073" stroke-opacity="null" stroke-width="0" stroke="#1a1b1f" fill="#1a1b1f" fill-opacity="0.4"></path> <ellipse class="dots appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="250" stroke="#000" ry="3.5" rx="3.5" id="svg_9" cy="453.023736" cx="609.150561" stroke-opacity="null" stroke-width="0" fill="#fff"></ellipse> <circle class="appear-animation" data-appear-animation="dotPulse" data-appear-animation-delay="2000" stroke="#FFF" r="20" id="svg_9" cy="453.023736" cx="609.150561" stroke-opacity="null" stroke-width="0.2" fill="none" style="transform-origin: 101.5% 50.4%;"></circle> <ellipse class="dots appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="500" stroke="#000" ry="3.5" rx="3.5" id="svg_10" cy="411.595173" cx="715.341014" stroke-opacity="null" stroke-width="0" fill="#fff"></ellipse> <circle class="appear-animation" data-appear-animation="dotPulse" data-appear-animation-delay="250" stroke="#FFF" r="20" id="svg_9" cy="411.595173" cx="715.341014" stroke-opacity="null" stroke-width="0.2" fill="none" style="transform-origin: 119.2% 45.7%;"></circle> <ellipse class="dots appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="750" stroke="#000" ry="3.5" rx="3.5" id="svg_11" cy="412.071364" cx="841.05527" stroke-opacity="null" stroke-width="0" fill="#fff"></ellipse> <circle class="appear-animation" data-appear-animation="dotPulse" data-appear-animation-delay="2000" stroke="#FFF" r="20" id="svg_9" cy="412.071364" cx="841.05527" stroke-opacity="null" stroke-width="0.2" fill="none" style="transform-origin: 140.1% 45.7%;"></circle> <ellipse class="dots appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="1000" stroke="#000" ry="3.5" rx="3.5" id="svg_12" cy="378.261847" cx="964.388575" stroke-opacity="null" stroke-width="0" fill="#fff"></ellipse> <circle class="appear-animation" data-appear-animation="dotPulse" data-appear-animation-delay="250" stroke="#FFF" r="20" id="svg_9" cy="378.261847" cx="964.388575" stroke-opacity="null" stroke-width="0.2" fill="none" style="transform-origin: 160.7% 42%;"></circle> <ellipse class="dots appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="1250" stroke="#000" ry="3.5" rx="3.5" id="svg_13" cy="391.595177" cx="1090.102832" stroke-opacity="null" stroke-width="0" fill="#fff"></ellipse> <circle class="appear-animation" data-appear-animation="dotPulse" data-appear-animation-delay="2000" stroke="#FFF" r="20" id="svg_9" cy="391.595177" cx="1090.102832" stroke-opacity="null" stroke-width="0.2" fill="none" style="transform-origin: 181.6% 43.5%;"></circle> <ellipse class="dots appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="1500" stroke="#000" ry="3.5" rx="3.5" id="svg_14" cy="327.706436" cx="1216.769206" stroke-opacity="null" stroke-width="0" fill="#fff"></ellipse> <circle class="appear-animation" data-appear-animation="dotPulse" data-appear-animation-delay="250" stroke="#FFF" r="20" id="svg_9" cy="327.706436" cx="1216.769206" stroke-opacity="null" stroke-width="0.2" fill="none" style="transform-origin: 202.8% 36.4%;"></circle> <ellipse class="dots appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="1750" stroke="#000" ry="3.5" rx="3.5" id="svg_15" cy="332.150871" cx="1346.213343" stroke-opacity="null" stroke-width="0" fill="#fff"></ellipse> <circle class="appear-animation" data-appear-animation="dotPulse" data-appear-animation-delay="2000" stroke="#FFF" r="20" id="svg_9" cy="332.150871" cx="1346.213343" stroke-opacity="null" stroke-width="0.2" fill="none" style="transform-origin: 224.3% 36.9%;"></circle> <ellipse class="dots appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="2000" stroke="#000" ry="3.5" rx="3.5" id="svg_16" cy="358.26192" cx="1463.43529" stroke-opacity="null" stroke-width="0" fill="#fff"></ellipse> <circle class="appear-animation" data-appear-animation="dotPulse" data-appear-animation-delay="250" stroke="#FFF" r="20" id="svg_9" cy="358.26192" cx="1463.43529" stroke-opacity="null" stroke-width="0.2" fill="none" style="transform-origin: 243.8% 39.8%;"></circle> <ellipse class="dots appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="2250" stroke="#000" ry="3.5" rx="3.5" id="svg_7" cy="278.817661" cx="1589.546107" stroke-opacity="null" stroke-width="0" fill="#fff"></ellipse> <circle class="appear-animation" data-appear-animation="dotPulse" data-appear-animation-delay="2000" stroke="#FFF" r="20" id="svg_9" cy="278.817661" cx="1589.546107" stroke-opacity="null" stroke-width="0.2" fill="none" style="transform-origin: 264.6% 30.9%;"></circle> </svg> <img class="img-fluid position-absolute d-none d-lg-block appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300" data-appear-animation-duration="750" src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/porto_notebook.png" alt="Performance on Laptop" style="display: block; top: -170px; left: 30px;"> <div class="container text-center py-5 mb-5"> <div class="row justify-content-center pb-md-5 mb-md-5"> <div class="col-md-7 offset-lg-5 pb-md-5 mb-md-5"> <h2 class="text-color-light font-weight-bold text-9 appear-animation mb-3" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" data-appear-animation-duration="750">Top Performance</h2> <p class="custom-text-color-1 color-inherit mb-4 pb-lg-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" data-appear-animation-duration="750">Porto has high performance base, all structure are focusing on performance as main point. Porto speed optimization is super fast compared to other templates.</p> </div> </div> <div class="row align-items-center pb-md-5 mb-md-5"> <div class="col-12 col-md-7 text-center mt-5"> <h2 class="font-weight-bold text-color-light text-7 text-md-6 text-lg-9 pt-5 pt-md-4 mt-5 mb-lg-5 mb-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" data-appear-animation-duration="750">Works Perfectly on <span class="highlighted-word highlighted-word-animation-1 highlighted-word-animation-1-no-rotate alternative-font-4 font-weight-bold pb-2"> Any </span> Device!</h2> <p class="custom-text-color-1 color-inherit appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" data-appear-animation-duration="750">We believe you will face lots of traffic from mobile device users not only from desktop or laptop users. Porto is the best solution for you, works fine on any screen resolutions and mobile devices. Try Porto and see how it works!</p> </div> <div class="col-5 d-none d-md-block"> <div class="text-end me-3 me-lg-5 ml-auto mb-4 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="600" data-appear-animation-duration="750" style="max-width: 244px;" data-plugin-options="{'accY': -100}"> <img class="img-fluid" src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/porto_iphone.png" width="244" height="228" alt="Performance on Mobile"> </div> <img class="img-fluid appear-animation z-index-1 position-relative" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="800" data-appear-animation-duration="750" src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/porto_ipad.png" width="437" height="241" alt="Performance on Tablet" style="margin-bottom: 0%"> </div> </div> </div> <div class="section-funnel-layer-bottom" style="bottom: 20px;"> <div class="section-funnel-layer bg-light"></div> <div class="section-funnel-layer bg-light"></div> </div> </section> <section id="demos" class="section section-no-border section-light bg-light position-relative z-index-3 border-top-0 pt-0 m-0"> <div class="container" style="margin-top: -60px;"> <div class="row align-items-center appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250" data-appear-animation-duration="750"> <div class="col-lg-8 offset-lg-2 text-center"> <ul class="list list-unstyled d-flex justify-content-center text-primary font-weight-semibold positive-ls-2 flex-column flex-md-row text-4 pb-1 mb-2"> <li>1. SELECT FILES</li> <li class="mx-5">2. CUSTOMIZE</li> <li>3. DONE</li> </ul> <p class="font-weight-500 text-4 px-lg-5 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" data-appear-animation-duration="750">Porto Admin is a truely complete template, with over 20 demos that make it suitable for any type of admin project. We believe you will like Porto Admin.</p> <p class="d-flex align-items-center justify-content-center font-weight-bold text-color-dark line-height-2 text-8 negative-ls-1 pb-2 mb-5 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="600"><span class="highlighted-word highlighted-word-animation-1 highlighted-word-animation-1-2 highlighted-word-animation-1-2-dark highlighted-word-animation-1 pos-2 alternative-font-4 font-weight-extra-bold line-height-1 text-8 py-2 me-3">20</span> Prebuilt Dashboards Ready to Use</p> </div> </div> </div> <div class="container-fluid" id="demos"> <div class="row justify-content-center portfolio-list sort-destination overflow-visible" data-sort-id="portfolio"> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-default.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-default.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Default</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3 portfolio-item-new"> <a target="_blank" href="ecommerce-dashboard.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-ecommerce.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">eCommerce</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-dark-header.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-dark-header.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Dark Header</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-dark.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-dark.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Dark</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-boxed.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-boxed-static-header.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Boxed With Static Header</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-boxed-fixed-header.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-boxed-fixed-header.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Boxed With Fixed Header</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-header-menu.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-horizontal-menu-pills.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Horizontal Menu - Pills</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-header-menu-stripe.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-horizontal-menu-stripe.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Horizontal Menu - Stripe</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-header-menu-top-line.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-horizontal-menu-top-line.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Horizontal Menu - Top Line</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-light-sidebar.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-light-sidebar.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Light Sidebar</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-left-sidebar-scroll.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-sidebar-scroll.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Left Sidebar Scroll</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-left-sidebar-big-icons.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-big-icons.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Left Sidebar Big Icons Dark</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-left-sidebar-big-icons-light.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-big-icons-light.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Left Sidebar Big Icons Light</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-left-sidebar-panel.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-sidebar-panel-dark.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Left Sidebar Panel Dark</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-left-sidebar-panel-light.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-sidebar-panel-light.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Left Sidebar Panel Light</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-tab-navigation.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-tab-navigation-light.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Tab Navigation Light</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-tab-navigation-dark.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-tab-navigation-dark.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Tab Navigation Dark</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-tab-navigation-boxed.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-tab-navigation-boxed.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Tab Navigation Boxed</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-two-navigations.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-two-navigations.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Two Navigations</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-square-borders.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-default.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Square Borders</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-sidebar-sizes-sm.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-sidebar-sm.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Left Sidebar Size SM</h5> </div> </div> </div> <div class="col-8 col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item"> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" data-appear-animation-duration="750"> <div class="portfolio-item hover-effect-1 text-center pb-2 mb-3false"> <a target="_blank" href="layouts-sidebar-sizes-xs.html"> <div class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg box-shadow-7"> <div class="thumb-info-wrapper thumb-info-wrapper-demos m-0"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-sidebar-xs.jpg" width="350" height="259" class="img-fluid h-auto" alt=""> </div> </div> </a> <h5 class="font-weight-semibold text-color-dark text-capitalize text-3 mt-3">Left Sidebar Size XS</h5> </div> </div> </div> </div> <div class="row pt-3 mt-5"> <div class="col text-center"> <a href="layouts-default.html" class="btn btn-dark btn-rounded btn-modern btn-px-5 py-3 text-3 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">VIEW MAIN DASHBOARD</a> </div> </div> </div> </section> <section class="section section-angled section-angled-reverse section-funnel border-0 m-0 section-dark"> <div class="section-angled-layer-top section-angled-layer-increase-angle bg-light" style="padding: 4rem 0;"></div> <div class="container py-5 mt-4 mb-3"> <div class="row align-items-center pt-2 pb-3 mt-4 mb-5"> <div class="col-lg-6 pe-lg-5 position-relative text-center mb-5 mb-lg-0"> <img alt="Porto Headers" src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/porto_headers.png" class="img-fluid appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="300"> </div> <div class="col-lg-5 text-center px-lg-0"> <h5 class="text-primary font-weight-semibold positive-ls-2 text-4 mb-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250" data-appear-animation-duration="750">ADVANCED USABILITY-FOCUSED </h5> <h2 class="text-color-light font-weight-bold text-9 mt-0 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750">Dashboards, Headers and Navs</h2> <p class="font-weight-500 custom-text-color-1 color-inherit appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800" data-appear-animation-duration="750">Porto comes with several headers and menus options for you to use on your project. We have created several options always focused on the best user experience to improve your business.</p> <p class="font-weight-500 custom-text-color-1 color-inherit pb-2 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1000" data-appear-animation-duration="750">Select any of the options we have giver you or create your own.</p> <div class="d-flex align-items-center justify-content-center"> <i class="fa fa-check text-color-primary bg-light rounded-circle p-2 me-3 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="1600" data-appear-animation-duration="750"></i> <p class="mb-0 line-height-5 ls-0 text-color-light font-weight-500 text-start appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="1300" data-appear-animation-duration="750">Menus, Nav Icons, Search Icons, Alerts,<br>Account Items, Search and much more...</p> </div> </div> </div> </div> <div class="section-funnel-layer-bottom" style="bottom: -30px;"> <div class="section-funnel-layer bg-color-light-scale-1"></div> <div class="section-funnel-layer bg-color-light-scale-1"></div> </div> </section> <section class="section section-funnel position-relative z-index-3 border-0 pt-0 m-0"> <div class="container pb-5"> <h2 class="fotn-weight-extra-bold text-center mt-0 mb-1"> <b class="text-color-dark text-13 d-block line-height-1 font-weight-extra-bold appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="250" data-appear-animation-duration="750">7K+</b> <span class="font-weight-bold text-color-dark text-5 negative-ls-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750">People Already Using Porto Admin</span> </h2> <p class="font-weight-bold text-4 text-center appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750">100K+ IN ALL PORTO VERSIONS</p> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="850" data-appear-animation-duration="850"> <h5 class="font-weight-semibold positive-ls-2 text-4 text-primary text-center mb-0">TOP 5 STAR RATING</h5> <p class="font-weight-500 text-default text-center mb-4">Real people, real stories. Hear from our community.</p> <div class="owl-carousel owl-theme carousel-center-active-item-2 nav-style-4 mb-4 pb-3" data-plugin-carousel="" data-plugin-options='{ "items": 1, "dots": false, "loop": true, "nav": true }'> <div> <div class="d-flex flex-column flex-md-row justify-content-between mb-3"> <div class="author"> <h4 class="font-weight-500 text-5 mt-0 mb-0">onealbs</h4> <span class="opacity-7">Themeforest User</span> </div> <span class="star-rating"> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> </span> </div> <p class="font-weight-500 opacity-8 text-4 line-height-8 mb-0">"I have purchased this template four times for different projects and will soon be purchasing my fifth. This options for this template are limitless and customer service is amazing!"</p> </div> <div> <div class="d-flex flex-column flex-md-row justify-content-between mb-3"> <div class="author"> <h4 class="font-weight-500 text-5 mt-0 mb-0">mrmelton</h4> <span class="opacity-7">Themeforest User</span> </div> <span class="star-rating"> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> </span> </div> <p class="font-weight-500 opacity-8 text-4 line-height-8 mb-0">"This template is pure joy to work with and customize. Everything is designed so clearly and it just makes your life easier to design a site. Highly recommend."</p> </div> <div> <div class="d-flex flex-column flex-md-row justify-content-between mb-3"> <div class="author"> <h4 class="font-weight-500 text-5 mt-0 mb-0">daniyal1997</h4> <span class="opacity-7">Themeforest User</span> </div> <span class="star-rating"> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> </span> </div> <p class="font-weight-500 opacity-8 text-4 line-height-8 mb-0">"This theme continues to blow my mind! I can't believe how many features and layouts that are included and yet how elegantly it's all executed underneath."</p> </div> <div> <div class="d-flex flex-column flex-md-row justify-content-between mb-3"> <div class="author"> <h4 class="font-weight-500 text-5 mt-0 mb-0">alfvlx</h4> <span class="opacity-7">Themeforest User</span> </div> <span class="star-rating"> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> </span> </div> <p class="font-weight-500 opacity-8 text-4 line-height-8 mb-0">"The best template i had work on!!!!!"</p> </div> <div> <div class="d-flex flex-column flex-md-row justify-content-between mb-3"> <div class="author"> <h4 class="font-weight-500 text-5 mt-0 mb-0">marcoss2009</h4> <span class="opacity-7">Themeforest User</span> </div> <span class="star-rating"> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> </span> </div> <p class="font-weight-500 opacity-8 text-4 line-height-8 mb-0">"The best theme in Themeforest. I like it because I can customize it without problems."</p> </div> <div> <div class="d-flex flex-column flex-md-row justify-content-between mb-3"> <div class="author"> <h4 class="font-weight-500 text-5 mt-0 mb-0">moirajanetallen</h4> <span class="opacity-7">Themeforest User</span> </div> <span class="star-rating"> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> </span> </div> <p class="font-weight-500 opacity-8 text-4 line-height-8 mb-0">"Very impressed with the great customer support."</p> </div> <div> <div class="d-flex flex-column flex-md-row justify-content-between mb-3"> <div class="author"> <h4 class="font-weight-500 text-5 mt-0 mb-0">majstro7</h4> <span class="opacity-7">Themeforest User</span> </div> <span class="star-rating"> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> <i class="fas fa-star text-color-dark"></i> </span> </div> <p class="font-weight-500 opacity-8 text-4 line-height-8 mb-0">"Good code quality ! Very fast and good support ! I recommended it in 100% !"</p> </div> </div> </div> <p class="text-center mb-5"><a class="btn btn-dark btn-modern btn-rounded btn-px-5 py-3 text-1 ls-0 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="250" data-appear-animation-duration="600" href="https://themeforest.net/item/porto-admin-responsive-html5-template/8539472" target="_blank">BUY PORTO ADMIN NOW</a></p> </div> <div class="section-funnel-layer-bottom" style="bottom: -30px"> <div class="section-funnel-layer bg-light"></div> <div class="section-funnel-layer bg-light"></div> </div> </section> <section id="support" class="section section-angled bg-light border-0 m-0 position-relative z-index-3 pt-0"> <div class="container pb-5 mb-5"> <div class="row align-items-center mb-5"> <div class="col-lg-6 pe-xl-5 mb-5 mb-lg-0"> <h2 class="text-color-dark font-weight-bold text-9 mt-0 mb-1">Professional Support</h2> <h5 class="font-weight-semibold positive-ls-2 text-4 text-primary mb-3">ONLINE DOCUMENTATION, VIDEOS AND FORUM</h5> <p class="ls-0 text-default fw-400 mb-5">Any problem while using Porto Admin? We're here to help you.</p> <div class="d-flex align-items-center border border-top-0 border-end-0 border-start-0 pb-4 mb-4"> <i class="fa fa-check text-color-primary bg-light rounded-circle box-shadow-4 p-2 me-3"></i> <p class="mb-0"><b class="text-color-dark">Online Documentation -</b> Contains all descriptions related to Porto Admin usage and features.</p> </div> <div class="d-flex align-items-center border border-top-0 border-end-0 border-start-0 pb-4 mb-4"> <i class="fa fa-check text-color-primary bg-light rounded-circle box-shadow-4 p-2 me-3"></i> <p class="mb-0 mb-0 opacity-5"><b class="text-color-dark">Video Documentation (coming soon) -</b> Need visual instructions? Check our video tutorials.</p> </div> <div class="d-flex align-items-center pb-4 mb-4 pb-lg-0 mb-lg-0"> <i class="fa fa-check text-color-primary bg-light rounded-circle box-shadow-4 p-2 me-3"></i> <p class="mb-0"><b class="text-color-dark">Support Center -</b> Contact us if you get any issue while using Porto Admin.</p> </div> </div> <div class="col-lg-4 offset-lg-2 p-relative"> <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="500"> <img class="img-fluid" src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/porto_dots2.png" alt="" style="position: absolute; bottom: -2%; left: -43%; transform: rotate(90deg)"> </div> <img alt="Porto Support" src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/support_login.jpg" class="img-fluid border border-width-10 border-color-light rounded box-shadow-3 ms-5 appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="200" style="width: 590px; max-width: none;"> <img alt="Porto Documentation" src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/landing/porto_docs.jpg" class="img-fluid rounded box-shadow-3 position-absolute appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="700" style="left: -100px; bottom: 50px;"> </div> </div> </div> <div class="section-angled-layer-bottom section-angled-layer-increase-angle" style="padding: 4rem 0; background: #222529;"></div> </section> <section class="section section-dark border-0 m-0"> <div class="container"> <div class="row justify-content-center mb-4"> <div class="col-md-9 col-lg-7 text-center"> <h5 class="font-weight-semibold positive-ls-2 text-4 text-primary mb-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250" data-appear-animation-duration="750">POWERFUL AND COMPLETE</h5> <h2 class="text-color-light font-weight-bold text-9 mt-0 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750">Advanced Plugins + Top Features</h2> <p class="font-weight-500 custom-text-color-1 color-inherit appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="850" data-appear-animation-duration="750">Create your admin using advanced included plugins and Porto's exclusive features. It’s incredibly easy and fun to build and mantain your admin design and content.</p> </div> </div> <div class="row row-gutter-sm justify-content-center pb-5"> <div class="d-flex col-sm-6 col-lg-4 col-xl-3 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" data-appear-animation-duration="750"> <div class="bg-color-dark-scale-4 rounded p-5"> <i class="icon-bg icon-feature-1 mt-4"></i> <h4 class="font-weight-bold text-color-light text-4 mt-0 mb-2">Top Level Support</h4> <p class="font-weight-500 custom-text-color-1 text-3 color-inherit ls-0 mb-0">You can expect high technical reply within 24 hrs, average response time is 14 hrs. Customer satisfication is our main focus. You won't be alone using Porto Admin.</p> </div> </div> <div class="d-flex col-sm-6 col-lg-4 col-xl-3 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" data-appear-animation-duration="750"> <div class="bg-color-dark-scale-4 rounded p-5"> <i class="icon-bg icon-feature-2 mt-4"></i> <h4 class="font-weight-bold text-color-light text-4 mt-0 mb-2">100% Fully Responsive</h4> <p class="font-weight-500 custom-text-color-1 text-3 color-inherit ls-0 mb-0">Not only working fine on any screen resolutions, Porto Admin offers very beautiful layouts and avoid any heaviness for small resolutions.</p> </div> </div> <div class="d-flex col-sm-6 col-lg-4 col-xl-3 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750"> <div class="bg-color-dark-scale-4 rounded p-5"> <i class="icon-bg icon-feature-3 mt-4"></i> <h4 class="font-weight-bold text-color-light text-4 mt-0 mb-2">Easy To Customize</h4> <p class="font-weight-500 custom-text-color-1 text-3 color-inherit ls-0 mb-0">Porto Admin was created to be very easy to edit and customize. The source code is organized to help any pro or beginner developer.</p> </div> </div> <div class="d-flex col-sm-6 col-lg-4 col-xl-3 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800" data-appear-animation-duration="750"> <div class="bg-color-dark-scale-4 rounded p-5"> <i class="icon-bg icon-feature-13 mt-4"></i> <h4 class="font-weight-bold text-color-light text-4 mt-0 mb-2">Optimized for Speed</h4> <p class="font-weight-500 custom-text-color-1 text-3 color-inherit ls-0 mb-0">Everything is oriented for high speed performance based in the best code standards.</p> </div> </div> <div class="d-flex col-sm-6 col-lg-4 col-xl-3 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" data-appear-animation-duration="750"> <div class="bg-color-dark-scale-4 rounded p-5"> <i class="icon-bg icon-feature-5 mt-4"></i> <h4 class="font-weight-bold text-color-light text-4 mt-0 mb-2">Retina Ready</h4> <p class="font-weight-500 custom-text-color-1 text-3 color-inherit ls-0 mb-0">Porto Admin works fine with any retina devices, we've fully tested Porto Admin on all retina resolutions including laptops and mobile devices.</p> </div> </div> <div class="d-flex col-sm-6 col-lg-4 col-xl-3 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" data-appear-animation-duration="750"> <div class="bg-color-dark-scale-4 rounded p-5"> <i class="icon-bg icon-feature-6 mt-4"></i> <h4 class="font-weight-bold text-color-light text-4 mt-0 mb-2">Bootstrap Based</h4> <p class="font-weight-500 custom-text-color-1 text-3 color-inherit ls-0 mb-0">Porto Admin is based on Bootstrap, the most popular CSS Framework for developing responsive and mobile-first projects.</p> </div> </div> <div class="d-flex col-sm-6 col-lg-4 col-xl-3 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750"> <div class="bg-color-dark-scale-4 rounded p-5"> <i class="icon-bg icon-feature-11 mt-4"></i> <h4 class="font-weight-bold text-color-light text-4 mt-0 mb-2">Unlimited Colors & Skins</h4> <p class="font-weight-500 custom-text-color-1 text-3 color-inherit ls-0 mb-0">You can configure any color you want, for entire site or certain sections using our exclusive style switcher.</p> </div> </div> <div class="d-flex col-sm-6 col-lg-4 col-xl-3 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800" data-appear-animation-duration="750"> <div class="bg-color-dark-scale-4 rounded p-5"> <i class="icon-bg icon-feature-10 mt-4"></i> <h4 class="font-weight-bold text-color-light text-4 mt-0 mb-2">CSS3 Animations</h4> <p class="font-weight-500 custom-text-color-1 text-3 color-inherit ls-0 mb-0">Porto Admin is always keen to update latest css 3 technologies, you can see nice and exclusive css3 animation effects through demos.</p> </div> </div> </div> </div> </section> <section class="section section-dark section-angled border-0 pb-0 m-0" style="background-size: 100%; background-position: top;" data-plugin-lazyload="" data-plugin-options="{'threshold': 500}" data-original="img/landing/build_bg.jpg"> <div class="section-angled-layer-top section-angled-layer-increase-angle bg-color-dark-scale-5" style="padding: 3rem 0;"></div> <div class="container text-center py-5 mt-5 mb-4"> <h2 class="text-color-light font-weight-bold line-height-3 text-12 mt-5 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250" data-appear-animation-duration="750">Build your project with Porto Admin</h2> <h4 class="text-color-light font-weight-bold text-10 line-height-2 mb-4 pb-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500" data-appear-animation-duration="750">Purchase now. Only <span class="highlighted-word highlighted-word-animation-1 highlighted-word-animation-1-no-rotate highlighted-word-animation-1 highlighted-word-animation-1-light alternative-font-4 font-weight-bold text-3 light appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="800" data-appear-animation-duration="750">$16!</span></h4> <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="900" data-appear-animation-duration="750"> <h4 class="font-weight-light text-color-light text-4 col-lg-6 px-0 offset-lg-3 fw-400 mb-5 opacity-8">Porto Admin has been available on ThemeForest since 2014 and is one of the top sellers with more than 7K+ sales.</h4> </div> <div class="col-12 px-0 pb-2 mb-4"> <div class="row flex-column flex-lg-row justify-content-center"> <div class="col-auto"> <h5 class="font-weight-semibold text-color-light text-4 positive-ls-2 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="1100" data-appear-animation-duration="750"><i class="fa fa-check"></i> SUPER HIGH PERFORMANCE</h5> </div> <div class="col-auto mx-5 my-2 my-lg-0"> <h5 class="font-weight-semibold text-color-light text-4 positive-ls-2 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="1400" data-appear-animation-duration="750"><i class="fa fa-check"></i> STRICT CODING STANDARDS</h5> </div> <div class="col-auto"> <h5 class="font-weight-semibold text-color-light text-4 positive-ls-2 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="1600" data-appear-animation-duration="750"><i class="fa fa-check"></i> FREE LIFETIME UPDATES</h5> </div> </div> </div> <a href="https://themeforest.net/item/porto-admin-responsive-html5-template/8539472" class="btn btn-dark btn-modern btn-rounded px-5 btn-py-3 text-4 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="1800" data-appear-animation-duration="750" target="_blank">BUY PORTO ADMIN NOW</a> </div> <div class="row border border-start-0 border-bottom-0 border-end-0 border-color-light-2"> <div class="col-sm-4 text-center divider-left-border border-color-light-2 d-flex align-items-center justify-content-center py-4"> <a href="http://www.okler.net/open-a-ticket/" class="text-decoration-none" target="_blank"> <div class="icon-box"> <i class="icon-bg icon-menu-2"></i> <h4 class="font-weight-500 text-color-light line-height-1 text-4 mt-0 mb-2">Support Center</h4> </div> </a> </div> <div class="col-sm-4 text-center divider-left-border border-color-light-2 d-flex align-items-center justify-content-center py-4"> <a href="http://www.okler.net/" class="text-decoration-none" target="_blank"> <div class="icon-box"> <i class="icon-bg icon-menu-3"></i> <h4 class="font-weight-500 text-color-light line-height-1 text-4 mt-0 mb-2">Online Documentation</h4> </div> </a> </div> <div class="col-sm-4 text-center divider-left-border border-color-light-2 d-flex align-items-center justify-content-center py-4 opacity-5"> <a href="http://www.okler.net/" class="text-decoration-none" target="_blank"> <div class="icon-box"> <i class="icon-bg icon-menu-4"></i> <h4 class="font-weight-500 text-color-light line-height-1 text-4 mt-0 mb-2">Video Tutorials<br><span class="text-2 d-block pt-1">(coming soon)</span></h4> </div> </a> </div> </div> </section> <section class="section bg-color-dark-scale-5 border-0 m-0 py-4"> <div class="container"> <div class="row"> <div class="col"> <ul class="list list-unstyled list-inline d-flex align-items-center justify-content-center flex-column flex-lg-row mb-0"> <li class="list-inline-item custom-text-color-1 color-inherit mb-lg-0 text-2 pe-2">Porto Versions:</li> <li class="list-inline-item mb-lg-0"><a href="https://themeforest.net/item/porto-admin-responsive-html5-template/8539472?s_rank=2" class="btn btn-dark-darken btn-modern btn-rounded btn-px-4 py-3 border-0" target="_blank">HTML</a></li> <li class="list-inline-item mb-lg-0"><a href="https://themeforest.net/item/porto-ecommerce-shop-template/22685562" class="btn btn-dark-darken btn-modern btn-rounded btn-px-4 py-3 border-0" target="_blank">SHOP HTML</a></li> <li class="list-inline-item mb-lg-0"><a href="https://themeforest.net/item/porto-responsive-wordpress-ecommerce-theme/9207399" class="btn btn-dark-darken btn-modern btn-rounded btn-px-4 py-3 border-0" target="_blank">WORDPRESS</a></li> <li class="list-inline-item mb-lg-0"><a href="https://themeforest.net/item/porto-ultimate-responsive-magento-theme/9725864" class="btn btn-dark-darken btn-modern btn-rounded btn-px-4 py-3 border-0" target="_blank">MAGENTO</a></li> <li class="list-inline-item mb-lg-0"><a href="https://themeforest.net/item/porto-ultimate-responsive-shopify-theme/19162959" class="btn btn-dark-darken btn-modern btn-rounded btn-px-4 py-3 border-0" target="_blank">SHOPIFY</a></li> <li class="list-inline-item mb-lg-0"><a href="https://themeforest.net/item/porto-responsive-drupal-7-theme/5219986" class="btn btn-dark-darken btn-modern btn-rounded btn-px-4 py-3 border-0" target="_blank">DRUPAL</a></li> </ul> </div> </div> </div> </section> </div> <footer id="footer" class="bg-color-dark-scale-5 border border-end-0 border-start-0 border-bottom-0 border-color-light-3 mt-0"> <div class="container text-center my-3 py-5"> <a href="#" class="goto-top"> <img src="img/lazy.png" data-plugin-lazyload="" data-plugin-options="{'threshold': 500}" data-original="img/logo-light.png" width="102" height="45" class="mb-4 appear-animation" alt="Porto" data-appear-animation="fadeIn" data-appear-animation-delay="300"> </a> <p class="font-weight-500 text-4 ls-0 mb-4">Porto is exclusively available on themeforest.net by <a href="https://themeforest.net/user/okler/" class="text-color-light" target="_blank">Okler.</a></p> <ul class="social-icons social-icons-big social-icons-dark-2"> <li class="social-icons-instagram"><a href="http://www.instagram.com/" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a></li> <li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li> <li class="social-icons-twitter"><a href="http://www.twitter.com/" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a></li> <li class="social-icons-youtube"><a href="http://www.youtube.com/" target="_blank" title="Youtube"><i class="fab fa-youtube"></i></a></li> </ul> </div> <div class="copyright bg-color-dark-scale-4 py-4"> <div class="container text-center py-2"> <p class="mb-0 text-2 ls-0">Copyright 2014 - 2021 Porto - All Rights Reserved</p> </div> </div> </footer> </div> <!-- Vendor --> <script src="vendor/jquery/jquery.js"></script> <script src="vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script> <script src="vendor/jquery-cookie/jquery.cookie.js"></script> <script src="master/style-switcher/style.switcher.js"></script> <script src="vendor/popper/umd/popper.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> <script src="vendor/common/common.js"></script> <script src="vendor/nanoscroller/nanoscroller.js"></script> <script src="vendor/magnific-popup/jquery.magnific-popup.js"></script> <script src="vendor/jquery-placeholder/jquery.placeholder.js"></script> <!-- Specific Page Vendor --> <script src="vendor/jquery-appear/jquery.appear.js"></script> <script src="vendor/owl.carousel/owl.carousel.js"></script> <script src="vendor/jquery.lazyload/jquery.lazyload.js"></script> <!-- Theme Base, Components and Settings --> <script src="js/theme.js"></script> <!-- Theme Custom --> <script src="js/custom.js"></script> <!-- Theme Initialization Files --> <script src="js/theme.init.js"></script> <!-- Analytics to Track Preview Website --> <script> (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-42715764-8', 'auto'); ga('send', 'pageview'); </script> </body> </html>