A Pen by Beibit Sakhanov on CodePen.
Created
January 18, 2019 06:13
-
-
Save bsakhanov/42757bd3dde651deac5e958b0bbce5f1 to your computer and use it in GitHub Desktop.
Filter Uikit 3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class=" uk-container uk-container-small uk-tile uk-padding-remove"> | |
| <div class="uk-text-center uk-margin-top "> | |
| <h2 class="uk-text-primary "> Проекты </h2> | |
| </div> | |
| <div uk-filter="target: .js-filter"> | |
| <div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid> | |
| <div> | |
| <ul class="uk-subnav uk-subnav-pill" uk-margin> | |
| <li class="uk-active" uk-filter-control><a href="#">Все проекты</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="uk-subnav uk-subnav-pill" uk-margin> | |
| <li uk-filter-control="filter: [data-energy='sun']; group: data-energy"><a href="#"><span uk-icon="icon: sun; ratio: 2"></span></a> | |
| <div class="uk-width-auto" uk-drop> | |
| <div class="uk-card uk-card-default uk-border-rounded uk-padding-small uk-overlay uk-overlay-primary"> | |
| <div class="uk-card-body uk-padding-remove uk-text-small ">Энергия Солнца</div> | |
| </div> | |
| </div> | |
| </li> | |
| <li uk-filter-control="filter: [data-energy='wind']; group: data-energy"><a href="#"><span uk-icon="icon: eolic; ratio: 2"></span></a> | |
| <div class="uk-width-auto" uk-drop> | |
| <div class="uk-card uk-card-default uk-border-rounded uk-padding-small uk-overlay uk-overlay-primary"> | |
| <div class="uk-card-body uk-padding-remove uk-text-small ">Энергия ветра</div> | |
| </div> | |
| </div> | |
| </li> | |
| <li uk-filter-control="filter: [data-energy='bio']; group: data-energy"><a href="#"><span uk-icon="icon: bio-mass-renewable-energy; ratio: 2"></span></a> | |
| <div class="uk-width-auto" uk-drop> | |
| <div class="uk-card uk-card-default uk-border-rounded uk-padding-small uk-overlay uk-overlay-primary"> | |
| <div class="uk-card-body uk-padding-remove uk-text-small ">Энергия биомассы</div> | |
| </div> | |
| </div> | |
| </li> | |
| <li uk-filter-control="filter: [data-energy='hidro']; group: data-energy"><a href="#"><span uk-icon="icon: kaplan-turbine; ratio: 2"></span></a> | |
| <div class="uk-width-auto" uk-drop> | |
| <div class="uk-card uk-card-default uk-border-rounded uk-padding-small uk-overlay uk-overlay-primary"> | |
| <div class="uk-card-body uk-padding-remove uk-text-small ">Энергия воды</div> | |
| </div> | |
| </div> | |
| </li> | |
| <li uk-filter-control="filter: [data-energy='geo']; group: data-energy"><a href="#"><span uk-icon="icon: earth-outline; ratio: 2"></span></a> | |
| <div uk-drop> | |
| <div class="uk-card uk-card-default uk-border-rounded uk-padding-small uk-overlay uk-overlay-primary"> | |
| <div class="uk-card-body uk-padding-remove uk-text-small ">Энергия геотермальных источников</div> | |
| </div> | |
| </div> | |
| </li> | |
| <li uk-filter-control="filter: [data-energy='recicling']; group: data-energy"><a href="#"><span uk-icon="icon: recycling-bin; ratio: 2"></span></a> | |
| <div uk-drop> | |
| <div class="uk-card uk-card-default uk-border-rounded uk-padding-small uk-overlay uk-overlay-primary"> | |
| <div class="uk-card-body uk-padding-remove uk-text-small ">Энергия из отходов</div> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="uk-subnav uk-subnav-pill" uk-margin> | |
| <li uk-filter-control="filter: [data-type='inter']; group: data-type"><a href="#"><span uk-icon="icon: globe; ratio: 2"></span></a> | |
| <div uk-drop> | |
| <div class="uk-card uk-card-default uk-border-rounded uk-padding-small uk-overlay uk-overlay-primary"> | |
| <div class="uk-card-body uk-padding-remove uk-text-small ">Международные проекты</div> | |
| </div> | |
| </div> | |
| </li> | |
| <li uk-filter-control="filter: [data-type='region']; group: data-type"><a href="#"><span uk-icon="icon: map2; ratio: 2"></span></a> | |
| <div uk-drop> | |
| <div class="uk-card uk-card-default uk-border-rounded uk-padding-small uk-overlay uk-overlay-primary"> | |
| <div class="uk-card-body uk-padding-remove uk-text-small ">Региональные проекты</div> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <ul class="js-filter uk-child-width-1-1@s uk-child-width-1-3@m uk-text-center" uk-grid> | |
| <li data-energy="sun" data-type="region"> | |
| <div class="uk-card uk-card-default uk-card-body"> | |
| <div class="uk-card-badge uk-label ">Солнце</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="wind" data-type="region"> | |
| <div class="uk-card uk-card-primary uk-card-body"> | |
| <div class="uk-card-badge uk-label">Ветер</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="recicling" data-type="region"> | |
| <div class="uk-card uk-card-primary uk-card-body"> | |
| <div class="uk-card-badge uk-label">Отходы</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="sun" data-type="region"> | |
| <div class="uk-card uk-card-default uk-card-body"> | |
| <div class="uk-card-badge uk-label">Солнце</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="sun" data-type="region"> | |
| <div class="uk-card uk-card-default uk-card-body"> | |
| <div class="uk-card-badge uk-label">Солнце</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="bio" data-type="region"> | |
| <div class="uk-card uk-card-secondary uk-card-body"> | |
| <div class="uk-card-badge uk-label">Биомасса</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="hidro" data-type="region"> | |
| <div class="uk-card uk-card-secondary uk-card-body"> | |
| <div class="uk-card-badge uk-label">Вода</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="bio" data-type="inter"> | |
| <div class="uk-card uk-card-secondary uk-card-body"> | |
| <div class="uk-card-badge uk-label">Биомасса</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="wind" data-type="region"> | |
| <div class="uk-card uk-card-primary uk-card-body"> | |
| <div class="uk-card-badge uk-label">Ветер</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="bio" data-type="region"> | |
| <div class="uk-card uk-card-secondary uk-card-body"> | |
| <div class="uk-card-badge uk-label">Биомасса</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="wind" data-type="inter"> | |
| <div class="uk-card uk-card-primary uk-card-body"> | |
| <div class="uk-card-badge uk-label">Ветер</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="geo" data-type="region"> | |
| <div class="uk-card uk-card-primary uk-card-body"> | |
| <div class="uk-card-badge uk-label">Геотермаль</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="hidro" data-type="region"> | |
| <div class="uk-card uk-card-secondary uk-card-body"> | |
| <div class="uk-card-badge uk-label">Вода</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="geo" data-type="region"> | |
| <div class="uk-card uk-card-primary uk-card-body"> | |
| <div class="uk-card-badge uk-label">Геотермаль</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="recicling" data-type="region"> | |
| <div class="uk-card uk-card-primary uk-card-body"> | |
| <div class="uk-card-badge uk-label">Отходы</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="sun" data-type="region"> | |
| <div class="uk-card uk-card-default uk-card-body"> | |
| <div class="uk-card-badge uk-label">Солнце</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="wind" data-type="region"> | |
| <div class="uk-card uk-card-primary uk-card-body"> | |
| <div class="uk-card-badge uk-label">Ветер</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="recicling" data-type="inter"> | |
| <div class="uk-card uk-card-primary uk-card-body"> | |
| <div class="uk-card-badge uk-label">Отходы</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="bio" data-type="inter"> | |
| <div class="uk-card uk-card-secondary uk-card-body"> | |
| <div class="uk-card-badge uk-label">Биомасса</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="geo" data-type="inter"> | |
| <div class="uk-card uk-card-primary uk-card-body"> | |
| <div class="uk-card-badge uk-label">Геотермаль</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| <li data-energy="hidro" data-type="inter"> | |
| <div class="uk-card uk-card-secondary uk-card-body"> | |
| <div class="uk-card-badge uk-label">Вода</div> | |
| <h3 class="uk-card-title uk-margin-top">Проект</h3> | |
| <p>Устойчивость производства продовольствия во все большей степени будет зависеть от рационального и эффективного использования водных ресурсов и методов их сбережения...</p> | |
| <div class="uk-card-footer"><a class="uk-button uk-button-text" href="#">Подробнее</a></div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.1/js/uikit.min.js"></script> | |
| <script src="https://webmarka.kz/templates/asta2/js/libs/custom-icons.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/css/uikit.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment