Files

714 lines
42 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Files</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="theme-color" content="#fff">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="Page description"><!-- Twitter Card data-->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<meta name="twitter:image" content="http://www.example.com/image.jpg"><!-- Open Graph data-->
<meta property="og:title" content="Title Here">
<meta property="og:type" content="article">
<meta property="og:url" content="http://www.example.com/">
<meta property="og:image" content="http://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name, i.e. Moz">
<meta property="fb:admins" content="Facebook numeric ID">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" media="all" href="css/app.css"><!-- favicon-->
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="manifest" href="img/site.webmanifest">
<link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
</head>
<body>
<!-- page-->
<div class="page">
<!-- sidebar-->
<div class="sidebar js-sidebar">
<div class="sidebar__nav">
<!-- nav-->
<nav class="nav js-nav"><a class="nav__link nav__link_head" href="/">
<div class="nav__preview"><img class="nav__pic" src="img/logo.svg" alt="Logo"></div>
<div class="nav__title"><img class="nav__pic" src="img/betaCRM.svg" alt="betaCRM"></div>
</a>
<div class="nav__list">
<!-- mobile primary menu-->
<div class="nav__primary js-nav-primary">
<div class="nav__group"><a class="nav__link active" href="#" title="Dashboard">
<div class="nav__preview"><i class="la la-tachometer-alt "></i></div>
<div class="nav__title">Dashboard</div>
</a><a class="nav__link" href="#" title="Projects">
<div class="nav__preview"><i class="la la-toolbox "></i></div>
<div class="nav__title">Projects</div>
</a><a class="nav__link" href="#" title="Tasks">
<div class="nav__preview"><i class="la la-clipboard-check "></i></div>
<div class="nav__title">Tasks</div>
</a><a class="nav__link" href="#" title="Kanban">
<div class="nav__preview"><i class="la la-images "></i></div>
<div class="nav__title">Kanban</div>
</a><a class="nav__link" href="#" title="Calendar">
<div class="nav__preview"><i class="la la-calendar-week "></i></div>
<div class="nav__title">Calendar</div>
</a><a class="nav__link nav__link_menu js-nav-link-menu" href="#">
<div class="nav__preview"><i class="la la-bars "></i></div>
</a></div>
</div><!-- mobile secondary menu-->
<div class="nav__secondary js-nav-secondary">
<div class="nav__group"><a class="nav__link" href="#" title="Contacts">
<div class="nav__preview"><i class="la la-user-lock "></i></div>
<div class="nav__title">Contacts</div>
</a><a class="nav__link" href="#" title="Messages">
<div class="nav__preview"><i class="la la-comments "></i>
<div class="nav__online online"></div>
</div>
<div class="nav__title">Messages</div>
</a><a class="nav__link" href="#" title="Products">
<div class="nav__preview"><i class="la la-cube "></i></div>
<div class="nav__title">Products</div>
</a><a class="nav__link" href="#" title="Invoices">
<div class="nav__preview"><i class="la la-calculator "></i></div>
<div class="nav__title">Invoices</div>
</a><a class="nav__link" href="#" title="File Browser">
<div class="nav__preview"><i class="la la-folder-open "></i></div>
<div class="nav__title">File Browser</div>
</a><a class="nav__link" href="#" title="Notifications">
<div class="nav__preview"><i class="la la-bullseye "></i>
<div class="nav__online online bg-red-raw"></div>
</div>
<div class="nav__title">Notifications</div>
</a><a class="nav__link" href="#" title="Reports">
<div class="nav__preview"><i class="la la-chart-area "></i></div>
<div class="nav__title">Reports</div>
</a><a class="nav__link" href="#" title="Help Center">
<div class="nav__preview"><i class="la la-question "></i></div>
<div class="nav__title">Help Center</div>
</a><a class="nav__link nav__link_user" href="#" title="John Doe">
<div class="nav__preview"><img class="nav__pic" src="img/user-1.jpg" alt="User">
<div class="nav__online online"></div>
</div>
<div class="nav__title">John Doe</div>
</a></div>
</div>
</div>
</nav>
</div>
<div class="sidebar__container js-sidebar-container">
<div class="sidebar__head">
<div class="sidebar__preview"><img class="sidebar__pic" src="img/white-ui-store.png" alt="WhiteUI.store"></div>
<div class="sidebar__wrap">
<div class="sidebar__title">WHITEUI.STORE LLC</div>
<div class="sidebar__text">8484 Ross Wells</div>
</div><button class="sidebar__action sidebar__action_toggle action js-sidebar-toggle"><i class="la la-angle-left "></i></button>
</div>
<div class="sidebar__inner">
<div class="sidebar__section">
<!-- menu-->
<div class="menu js-menu">
<div class="menu__head js-menu-head">
<div class="menu__item js-menu-item">
<div class="menu__icon"><i class="la la-folder-open "></i></div>
<div class="menu__wrap">
<div class="menu__title">My Files</div>
<div class="menu__text">Files that your own</div>
</div>
<div class="menu__badge badge green">5</div>
</div><button class="menu__action action js-menu-toggle"><i class="la la-bars "></i></button>
</div>
<div class="menu__container js-menu-container">
<div class="menu__section"><a class="menu__item js-menu-item active" href="#">
<div class="menu__icon"><i class="la la-folder-open "></i></div>
<div class="menu__wrap">
<div class="menu__title">My Files</div>
<div class="menu__text">Files that your own</div>
</div>
<div class="menu__badge badge"></div>
</a><a class="menu__item js-menu-item" href="#">
<div class="menu__icon"><i class="la la-broadcast-tower "></i></div>
<div class="menu__wrap">
<div class="menu__title">Sharing</div>
<div class="menu__text">Files that others share with you</div>
</div>
<div class="menu__badge badge"></div>
</a><a class="menu__item js-menu-item" href="#">
<div class="menu__icon"><i class="la la-inbox "></i></div>
<div class="menu__wrap">
<div class="menu__title">Archieve</div>
<div class="menu__text">Files that you store in archieve</div>
</div>
<div class="menu__badge badge"></div>
</a><a class="menu__item js-menu-item" href="#">
<div class="menu__icon"><i class="la la-trash-alt "></i></div>
<div class="menu__wrap">
<div class="menu__title">Deleted Files</div>
<div class="menu__text">Files that will be deleted soon</div>
</div>
<div class="menu__badge badge"></div>
</a></div>
</div>
</div>
</div>
<div class="sidebar__section">
<div class="history">
<div class="history__container">
<div class="history__head">
<div class="history__wrap">
<div class="history__title title title_sm">Conversion history</div>
<div class="history__text">Week to week performance</div>
</div><a class="history__link" href="#"><i class="la la-chart-bar "></i></a>
</div>
<div class="history__chart">
<div id="chart-history-bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- container-->
<div class="container js-container">
<div class="container__head"><button class="container__action container__action_menu action js-container-toggle"><i class="la la-bars "></i></button>
<div class="container__title title title_md">File Management</div><!-- search-->
<div class="container__search search js-search"><button class="search__action action js-search-open"><i class="la la-search "></i></button>
<div class="search__dropdown js-search-dropdown">
<div class="search__field"><input class="search__input js-search-input" type="search" placeholder="Start typing…">
<div class="search__icon"><i class="la la-search "></i></div>
</div>
<div class="search__results js-search-results"><a class="search__result" href="#">
<div class="search__cell">
<div class="search__preview color-red"><i class="lab la-dribbble "></i></div>
</div>
<div class="search__cell">
<div class="search__title">Dribble Redesign</div>
<div class="search__text">Webdesign</div>
</div>
<div class="search__cell mobile-hide">
<!-- tag-->
<div class="search__tag tag gray">24 Feb 2019</div>
</div>
</a><a class="search__result" href="#">
<div class="search__cell">
<div class="search__preview color-green"><i class="lab la-evernote "></i></div>
</div>
<div class="search__cell">
<div class="search__title">New HTML Theme</div>
<div class="search__text">Theme</div>
</div>
<div class="search__cell mobile-hide">
<!-- tag-->
<div class="search__tag tag gray">20 May 2019</div>
</div>
</a><a class="search__result" href="#">
<div class="search__cell">
<div class="search__preview"><img class="search__pic" src="img/user-1.jpg" alt="User"></div>
</div>
<div class="search__cell">
<div class="search__title">Bradley Wilkins</div>
<div class="search__text">[email protected]</div>
</div>
<div class="search__cell mobile-hide">
<!-- tag-->
<div class="search__tag tag gray">Designer</div>
</div>
</a></div>
</div>
<div class="search__backdrop backdrop js-search-backdrop"></div>
</div><!-- new-->
<div class="container__new new js-new"><button class="new__action action js-new-open"><i class="la la-plus-circle "></i></button>
<div class="new__dropdown js-new-dropdown"><a class="new__item" href="#">
<div class="new__icon"><i class="la la-toolbox "></i></div>
<div class="new__title">New Project</div>
</a><a class="new__item" href="#">
<div class="new__icon"><i class="la la-clipboard-check "></i></div>
<div class="new__title">New Task</div>
</a><a class="new__item" href="#">
<div class="new__icon"><i class="la la-user-lock "></i></div>
<div class="new__title">New Contact</div>
</a><a class="new__item" href="#">
<div class="new__icon"><i class="la la-calendar-week "></i></div>
<div class="new__title">New Event</div>
</a><a class="new__item" href="#">
<div class="new__icon"><i class="la la-cube "></i></div>
<div class="new__title">New Product</div>
</a><a class="new__item" href="#">
<div class="new__icon"><i class="la la-calculator "></i></div>
<div class="new__title">New Invoice</div>
</a></div>
<div class="new__backdrop backdrop js-new-backdrop"></div>
</div>
</div>
<div class="container__body">
<!-- panel-->
<div class="panel js-panel">
<div class="panel__head panel__head_line">
<!-- btn group-->
<div class="panel__group btn-group btn-group_tabs"><button class="btn btn_light btn_icon js-panel-btn active"><i class="la la-list "></i>List</button><button class="btn btn_light btn_icon js-panel-btn"><i class="la la-border-all "></i>Grid</button></div>
<div class="panel__group">
<div class="sort js-sort">
<div class="sort__head js-sort-head">
<div class="sort__icon"><i class="la la-filter "></i></div>
<div class="sort__label">sort:</div>
<div class="sort__selected js-sort-selected">A-Z</div>
<div class="sort__arrow"><i class="la la-angle-down "></i></div>
</div>
<div class="sort__dropdown js-sort-dropdown">
<div class="sort__title">Sort projects by</div>
<div class="sort__items">
<div class="sort__item"><label class="switch sort__switch js-sort-switch"><input class="switch__input" type="radio" name="sort" checked="checked" /><span class="switch__content">A-Z</span></label></div>
<div class="sort__item"><label class="switch sort__switch js-sort-switch"><input class="switch__input" type="radio" name="sort" /><span class="switch__content">Budget</span></label></div>
<div class="sort__item"><label class="switch sort__switch js-sort-switch"><input class="switch__input" type="radio" name="sort" /><span class="switch__content">Assigned Tasks</span></label></div>
<div class="sort__item"><label class="switch sort__switch js-sort-switch"><input class="switch__input" type="radio" name="sort" /><span class="switch__content">Progress</span></label></div>
<div class="sort__item"><label class="switch sort__switch js-sort-switch"><input class="switch__input" type="radio" name="sort" /><span class="switch__content">Date Created</span></label></div>
</div>
<div class="sort__foot"><button class="sort__btn btn btn_light js-sort-apply">Apply</button></div>
</div>
<div class="sort__backdrop backdrop js-sort-backdrop"></div>
</div>
</div>
</div>
<div class="panel__body">
<div class="panel__tab js-panel-tab" style="display: block">
<!-- data-->
<div class="data data_list">
<div class="data__container">
<div class="data__head">
<div class="data__row">
<div class="data__cell data__cell_lg">
<div class="data__filter">Name<i class="la la-sort-alpha-down "></i></div>
</div>
<div class="data__cell">
<div class="data__filter">Size<i class="la la-sort-alpha-down "></i></div>
</div>
<div class="data__cell">
<div class="data__filter">Tag<i class="la la-sort-alpha-down "></i></div>
</div>
<div class="data__cell data__cell_members">
<div class="data__filter">Members<i class="la la-sort-alpha-down "></i></div>
</div>
<div class="data__cell data__cell_action"></div>
</div>
</div>
<div class="data__body">
<div class="data__item">
<div class="data__row">
<div class="data__cell data__cell_lg">
<div class="data__main">
<div class="data__preview data__preview_file bg-yellow"><img class="data__pic" src="img/file-sketch.svg"></div>
<div class="data__wrap">
<div class="data__content"><strong>IOtask web UI kit.sketch</strong></div>
</div>
</div>
</div>
<div class="data__cell mobile-hide">
<div class="data__label">162 Mb</div>
</div>
<div class="data__cell mobile-hide">
<!-- meta-->
<div class="meta"><i class="la la-tags "></i>Designer</div>
</div>
<div class="data__cell data__cell_members mobile-hide">
<!-- members-->
<div class="members">
<div class="members__item"><img class="members__pic" src="img/user-1.jpg" alt="User" /></div>
<div class="members__item"><img class="members__pic" src="img/user-2.jpg" alt="User" /></div>
<div class="members__item"><img class="members__pic" src="img/user-3.jpg" alt="User" /></div>
<div class="members__item">
<div class="members__counter">+5</div>
</div>
</div>
</div>
<div class="data__cell data__cell_action"><button class="action action_stroke"><i class="la la-ellipsis-h "></i></button></div>
</div>
</div>
<div class="data__item">
<div class="data__row">
<div class="data__cell data__cell_lg">
<div class="data__main">
<div class="data__preview data__preview_file bg-red"><img class="data__pic" src="img/file-pptx.svg"></div>
<div class="data__wrap">
<div class="data__content"><strong>Presentation Invest.pptx</strong></div>
</div>
</div>
</div>
<div class="data__cell mobile-hide">
<div class="data__label">3.6 Mb</div>
</div>
<div class="data__cell mobile-hide">
<!-- meta-->
<div class="meta"><i class="la la-tags "></i>Employee</div>
</div>
<div class="data__cell data__cell_members mobile-hide">
<!-- members-->
<div class="members">
<div class="members__item"><img class="members__pic" src="img/user-1.jpg" alt="User" /></div>
<div class="members__item"><img class="members__pic" src="img/user-2.jpg" alt="User" /></div>
<div class="members__item"><img class="members__pic" src="img/user-3.jpg" alt="User" /></div>
<div class="members__item">
<div class="members__counter">+5</div>
</div>
</div>
</div>
<div class="data__cell data__cell_action"><button class="action action_stroke"><i class="la la-ellipsis-h "></i></button></div>
</div>
</div>
<div class="data__item">
<div class="data__row">
<div class="data__cell data__cell_lg">
<div class="data__main">
<div class="data__preview data__preview_file bg-blue"><img class="data__pic" src="img/file-docx.svg"></div>
<div class="data__wrap">
<div class="data__content"><strong>User stories.docx</strong></div>
</div>
</div>
</div>
<div class="data__cell mobile-hide">
<div class="data__label">1.2 Mb</div>
</div>
<div class="data__cell mobile-hide">
<!-- meta-->
<div class="meta"><i class="la la-tags "></i>Employee</div>
</div>
<div class="data__cell data__cell_members mobile-hide">
<!-- members-->
<div class="members">
<div class="members__item"><img class="members__pic" src="img/user-1.jpg" alt="User" /></div>
<div class="members__item"><img class="members__pic" src="img/user-2.jpg" alt="User" /></div>
<div class="members__item"><img class="members__pic" src="img/user-3.jpg" alt="User" /></div>
<div class="members__item">
<div class="members__counter">+5</div>
</div>
</div>
</div>
<div class="data__cell data__cell_action"><button class="action action_stroke"><i class="la la-ellipsis-h "></i></button></div>
</div>
</div>
<div class="data__item">
<div class="data__row">
<div class="data__cell data__cell_lg">
<div class="data__main">
<div class="data__preview data__preview_file bg-red"><img class="data__pic" src="img/file-pdf.svg"></div>
<div class="data__wrap">
<div class="data__content"><strong>Budget estimates</strong></div>
</div>
</div>
</div>
<div class="data__cell mobile-hide">
<div class="data__label">1.2 Mb</div>
</div>
<div class="data__cell mobile-hide">
<!-- meta-->
<div class="meta"><i class="la la-tags "></i>Employee</div>
</div>
<div class="data__cell data__cell_members mobile-hide">
<!-- members-->
<div class="members">
<div class="members__item"><img class="members__pic" src="img/user-1.jpg" alt="User" /></div>
<div class="members__item"><img class="members__pic" src="img/user-2.jpg" alt="User" /></div>
<div class="members__item"><img class="members__pic" src="img/user-3.jpg" alt="User" /></div>
<div class="members__item">
<div class="members__counter">+5</div>
</div>
</div>
</div>
<div class="data__cell data__cell_action"><button class="action action_stroke"><i class="la la-ellipsis-h "></i></button></div>
</div>
</div>
<div class="data__item">
<div class="data__row">
<div class="data__cell data__cell_lg">
<div class="data__main">
<div class="data__preview data__preview_file bg-turquoise"><img class="data__pic" src="img/file-folder.svg"></div>
<div class="data__wrap">
<div class="data__content"><strong>Additional materials</strong></div>
</div>
</div>
</div>
<div class="data__cell mobile-hide">
<div class="data__label">24 Files</div>
</div>
<div class="data__cell mobile-hide">
<!-- meta-->
<div class="meta"><i class="la la-tags "></i>Manager</div>
</div>
<div class="data__cell data__cell_members mobile-hide">
<!-- members-->
<div class="members">
<div class="members__item"><img class="members__pic" src="img/user-1.jpg" alt="User" /></div>
<div class="members__item"><img class="members__pic" src="img/user-2.jpg" alt="User" /></div>
<div class="members__item"><img class="members__pic" src="img/user-3.jpg" alt="User" /></div>
<div class="members__item">
<div class="members__counter">+5</div>
</div>
</div>
</div>
<div class="data__cell data__cell_action"><button class="action action_stroke"><i class="la la-ellipsis-h "></i></button></div>
</div>
</div>
<div class="data__item">
<div class="data__row">
<div class="data__cell data__cell_lg">
<div class="data__main">
<div class="data__preview data__preview_file bg-yellow"><img class="data__pic" src="img/file-ai.svg"></div>
<div class="data__wrap">
<div class="data__content"><strong>Logo and branding.ai</strong></div>
</div>
</div>
</div>
<div class="data__cell mobile-hide">
<div class="data__label">10.2 Mb</div>
</div>
<div class="data__cell mobile-hide">
<!-- meta-->
<div class="meta"><i class="la la-tags "></i>Designer</div>
</div>
<div class="data__cell data__cell_members mobile-hide">
<!-- members-->
<div class="members">
<div class="members__item"><img class="members__pic" src="img/user-1.jpg" alt="User" /></div>
<div class="members__item"><img class="members__pic" src="img/user-2.jpg" alt="User" /></div>
<div class="members__item"><img class="members__pic" src="img/user-3.jpg" alt="User" /></div>
<div class="members__item">
<div class="members__counter">+5</div>
</div>
</div>
</div>
<div class="data__cell data__cell_action"><button class="action action_stroke"><i class="la la-ellipsis-h "></i></button></div>
</div>
</div>
<div class="data__item">
<div class="data__row">
<div class="data__cell data__cell_lg">
<div class="data__main">
<div class="data__preview data__preview_file bg-blue"><img class="data__pic" src="img/file-psd.svg"></div>
<div class="data__wrap">
<div class="data__content"><strong>Converted files.psd</strong></div>
</div>
</div>
</div>
<div class="data__cell mobile-hide">
<div class="data__label">16.2 Gb</div>
</div>
<div class="data__cell mobile-hide">
<!-- meta-->
<div class="meta"><i class="la la-tags "></i>Manager</div>
</div>
<div class="data__cell data__cell_members mobile-hide">
<!-- members-->
<div class="members">
<div class="members__item"><img class="members__pic" src="img/user-1.jpg" alt="User" /></div>
<div class="members__item"><img class="members__pic" src="img/user-2.jpg" alt="User" /></div>
<div class="members__item"><img class="members__pic" src="img/user-3.jpg" alt="User" /></div>
<div class="members__item">
<div class="members__counter">+5</div>
</div>
</div>
</div>
<div class="data__cell data__cell_action"><button class="action action_stroke"><i class="la la-ellipsis-h "></i></button></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel__tab js-panel-tab" style="display: none">
<!-- data-->
<div class="data data_grid">
<div class="data__container">
<div class="data__head">
<div class="data__row">
<div class="data__cell data__cell_lg">
<div class="data__filter">Name<i class="la la-sort-alpha-down "></i></div>
</div>
<div class="data__cell">
<div class="data__filter">Size<i class="la la-sort-alpha-down "></i></div>
</div>
<div class="data__cell">
<div class="data__filter">Tag<i class="la la-sort-alpha-down "></i></div>
</div>
<div class="data__cell data__cell_members">
<div class="data__filter">Shared with<i class="la la-sort-alpha-down "></i></div>
</div>
<div class="data__cell data__cell_action"></div>
</div>
</div>
<div class="data__body">
<div class="data__item">
<div class="data__corner"><button class="action action_stroke"><i class="la la-ellipsis-h "></i></button></div>
<div class="data__row">
<div class="data__cell">
<div class="data__main">
<div class="data__preview data__preview_file bg-yellow"><img class="data__pic" src="img/file-sketch.svg"></div>
<div class="data__wrap">
<div class="data__content"><strong>IOtask web UI kit.sketch</strong></div>
<div class="data__label">162 Mb</div>
</div>
</div>
</div>
<div class="data__cell">
<!-- meta-->
<div class="meta"><i class="la la-tags "></i>Designer</div>
</div>
</div>
</div>
<div class="data__item">
<div class="data__corner"><button class="action action_stroke"><i class="la la-ellipsis-h "></i></button></div>
<div class="data__row">
<div class="data__cell">
<div class="data__main">
<div class="data__preview data__preview_file bg-red"><img class="data__pic" src="img/file-pptx.svg"></div>
<div class="data__wrap">
<div class="data__content"><strong>Presentation Invest.pptx</strong></div>
<div class="data__label">3.6 Mb</div>
</div>
</div>
</div>
<div class="data__cell">
<!-- meta-->
<div class="meta"><i class="la la-tags "></i>Employee</div>
</div>
</div>
</div>
<div class="data__item">
<div class="data__corner"><button class="action action_stroke"><i class="la la-ellipsis-h "></i></button></div>
<div class="data__row">
<div class="data__cell">
<div class="data__main">
<div class="data__preview data__preview_file bg-blue"><img class="data__pic" src="img/file-docx.svg"></div>
<div class="data__wrap">
<div class="data__content"><strong>User stories.docx</strong></div>
<div class="data__label">1.2 Mb</div>
</div>
</div>
</div>
<div class="data__cell">
<!-- meta-->
<div class="meta"><i class="la la-tags "></i>Employee</div>
</div>
</div>
</div>
<div class="data__item">
<div class="data__corner"><button class="action action_stroke"><i class="la la-ellipsis-h "></i></button></div>
<div class="data__row">
<div class="data__cell">
<div class="data__main">
<div class="data__preview data__preview_file bg-red"><img class="data__pic" src="img/file-pdf.svg"></div>
<div class="data__wrap">
<div class="data__content"><strong>Budget estimates</strong></div>
<div class="data__label">1.2 Mb</div>
</div>
</div>
</div>
<div class="data__cell">
<!-- meta-->
<div class="meta"><i class="la la-tags "></i>Employee</div>
</div>
</div>
</div>
<div class="data__item">
<div class="data__corner"><button class="action action_stroke"><i class="la la-ellipsis-h "></i></button></div>
<div class="data__row">
<div class="data__cell">
<div class="data__main">
<div class="data__preview data__preview_file bg-turquoise"><img class="data__pic" src="img/file-folder.svg"></div>
<div class="data__wrap">
<div class="data__content"><strong>Additional materials</strong></div>
<div class="data__label">24 Files</div>
</div>
</div>
</div>
<div class="data__cell">
<!-- meta-->
<div class="meta"><i class="la la-tags "></i>Manager</div>
</div>
</div>
</div>
<div class="data__item">
<div class="data__corner"><button class="action action_stroke"><i class="la la-ellipsis-h "></i></button></div>
<div class="data__row">
<div class="data__cell">
<div class="data__main">
<div class="data__preview data__preview_file bg-yellow"><img class="data__pic" src="img/file-ai.svg"></div>
<div class="data__wrap">
<div class="data__content"><strong>Logo and branding.ai</strong></div>
<div class="data__label">10.2 Mb</div>
</div>
</div>
</div>
<div class="data__cell">
<!-- meta-->
<div class="meta"><i class="la la-tags "></i>Designer</div>
</div>
</div>
</div>
<div class="data__item">
<div class="data__corner"><button class="action action_stroke"><i class="la la-ellipsis-h "></i></button></div>
<div class="data__row">
<div class="data__cell">
<div class="data__main">
<div class="data__preview data__preview_file bg-blue"><img class="data__pic" src="img/file-psd.svg"></div>
<div class="data__wrap">
<div class="data__content"><strong>Converted files.psd</strong></div>
<div class="data__label">16.2 Gb</div>
</div>
</div>
</div>
<div class="data__cell">
<!-- meta-->
<div class="meta"><i class="la la-tags "></i>Manager</div>
</div>
</div>
</div>
<div class="data__item">
<div class="data__corner"><button class="action action_stroke"><i class="la la-ellipsis-h "></i></button></div>
<div class="data__row">
<div class="data__cell">
<div class="data__main">
<div class="data__preview data__preview_file bg-yellow"><img class="data__pic" src="img/file-sketch.svg"></div>
<div class="data__wrap">
<div class="data__content"><strong>IOtask web UI kit.sketch</strong></div>
<div class="data__label">162 Mb</div>
</div>
</div>
</div>
<div class="data__cell">
<!-- meta-->
<div class="meta"><i class="la la-tags "></i>Designer</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel__foot">
<div class="pager"><a class="pager__arrow action action_icon_before" href="#"><i class="la la-angle-left "></i>Prev</a>
<div class="pager__list"><a class="pager__link action" href="#">1</a><a class="pager__link action" href="#">2</a><a class="pager__link action active" href="#">3</a><a class="pager__link action" href="#">4</a><a class="pager__link action" href="#">5</a></div><a class="pager__arrow action action_icon_after" href="#">Next<i class="la la-angle-right "></i></a>
</div>
</div>
</div>
</div>
</div>
</div><!-- modals-->
<!-- scripts-->
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/datepicker.min.js"></script>
<script src="js/lib/datepicker.en.js"></script>
<script src="js/lib/select2.min.js"></script>
<script src="js/lib/wNumb.min.js"></script>
<script src="js/lib/nouislider.min.js"></script>
<script src="js/lib/apexcharts.min.js"></script>
<script src="js/charts.js"></script>
<script src="js/app.js"></script>
</body>
</html>