Sindbad~EG File Manager
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/uikit.min.css" />
<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>
</head>
<body>
<div style="padding: 25px">
<br/><br/><br/><br/>
<div uk-filter="target: .js-filter">
<h2>Filters</h2>
<ul class="uk-subnav uk-subnav-pill">
<li class="uk-active" uk-filter-control><a href="#">All</a></li>
<li uk-filter-control="[data-color='white']"><a href="#">White</a></li>
<li uk-filter-control="[data-color='blue']"><a href="#">Blue</a></li>
<li uk-filter-control="[data-color='black']"><a href="#">Black</a></li>
</ul>
<ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid>
<li data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
</ul>
</div>
<br/><br/><br/><br/>
<div uk-filter="target: .js-filter">
<div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
<h2>Multiple Filters</h2>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li class="uk-active" uk-filter-control><a href="#">All</a></li>
</ul>
</div>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li uk-filter-control="[data-color='white']"><a href="#">White</a></li>
<li uk-filter-control="[data-color='blue']"><a href="#">Blue</a></li>
<li uk-filter-control="[data-color='black']"><a href="#">Black</a></li>
</ul>
</div>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li uk-filter-control="[data-size='small']"><a href="#">Small</a></li>
<li uk-filter-control="[data-size='medium']"><a href="#">Medium</a></li>
<li uk-filter-control="[data-size='large']"><a href="#">Large</a></li>
</ul>
</div>
</div>
<ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid="masonry: true">
<li data-color="white" data-size="large">
<div class="uk-card uk-card-default uk-card-body">
<canvas width="600" height="800"></canvas>
<div class="uk-position-center">Item</div>
</div>
</li>
<li data-color="blue" data-size="small">
<div class="uk-card uk-card-primary uk-card-body">
<canvas width="600" height="400"></canvas>
<div class="uk-position-center">Item</div>
</div>
</li>
<li data-color="white" data-size="medium">
<div class="uk-card uk-card-default uk-card-body">
<canvas width="600" height="600"></canvas>
<div class="uk-position-center">Item</div>
</div>
</li>
<li data-color="white" data-size="small">
<div class="uk-card uk-card-default uk-card-body">
<canvas width="600" height="400"></canvas>
<div class="uk-position-center">Item</div>
</div>
</li>
<li data-color="black" data-size="medium">
<div class="uk-card uk-card-secondary uk-card-body">
<canvas width="600" height="600"></canvas>
<div class="uk-position-center">Item</div>
</div>
</li>
<li data-color="black" data-size="small">
<div class="uk-card uk-card-secondary uk-card-body">
<canvas width="600" height="400"></canvas>
<div class="uk-position-center">Item</div>
</div>
</li>
<li data-color="blue" data-size="medium">
<div class="uk-card uk-card-primary uk-card-body">
<canvas width="600" height="600"></canvas>
<div class="uk-position-center">Item</div>
</div>
</li>
<li data-color="black" data-size="large">
<div class="uk-card uk-card-secondary uk-card-body">
<canvas width="600" height="800"></canvas>
<div class="uk-position-center">Item</div>
</div>
</li>
<li data-color="blue" data-size="large">
<div class="uk-card uk-card-primary uk-card-body">
<canvas width="600" height="800"></canvas>
<div class="uk-position-center">Item</div>
</div>
</li>
<li data-color="white" data-size="large">
<div class="uk-card uk-card-default uk-card-body">
<canvas width="600" height="800"></canvas>
<div class="uk-position-center">Item</div>
</div>
</li>
<li data-color="blue" data-size="medium">
<div class="uk-card uk-card-primary uk-card-body">
<canvas width="600" height="600"></canvas>
<div class="uk-position-center">Item</div>
</div>
</li>
<li data-color="black" data-size="small">
<div class="uk-card uk-card-secondary uk-card-body">
<canvas width="600" height="400"></canvas>
<div class="uk-position-center">Item</div>
</div>
</li>
</ul>
</div>
<br/><br/><br/><br/>
<h1> Test Page </hi>
<p> Accordian </p>
<ul uk-accordion style="background-color: antiquewhite; border: thin">
<li>
<a class="uk-accordion-title" href="#"></a>
<div class="uk-accordion-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</li>
<li>
<a class="uk-accordion-title" href="#"></a>
<div class="uk-accordion-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</li>
<li>
<a class="uk-accordion-title" href="#"></a>
<div class="uk-accordion-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</li>
</ul>
<br/><br/><br/><br/>
<h2>Parallax </h2>
<div class="uk-height-large uk-background-cover uk-light uk-flex" uk-parallax="bgy: -200" style="background-image: url('images/dark.jpg');">
<h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">Headline</h1>
</div>
<br/><br/><br/><br/>
<h2>Parallax II</h2>
<div class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url('images/dark.jpg');">
<div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
<h1 uk-parallax="opacity: 0,1; y: -100,0; scale: 2,1; viewport: 0.5;">Headline</h1>
<p uk-parallax="opacity: 0,1; y: 100,0; scale: 0.5,1; viewport: 0.5;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists