Skip to content

Instantly share code, notes, and snippets.

@mstaack

mstaack/index.html

Created October 4, 2017 12:17
Show Gist options
  • Save mstaack/200137d15b3216ee3c593ca91bcf4d18 to your computer and use it in GitHub Desktop.
Save mstaack/200137d15b3216ee3c593ca91bcf4d18 to your computer and use it in GitHub Desktop.
Download ZIP
uikit3 - gallery
Raw
index.html
<!--HEADER-->
<header>
<nav class="uk-navbar-container">
<div class="uk-container">
<div class="uk-navbar">
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
</div>
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<div>
<a class="uk-navbar-toggle" uk-search-icon href="#"></a>
<div class="uk-drop" uk-drop="mode: click; pos: left-center; offset: 0">
<form class="uk-search uk-search-navbar uk-width-1-1">
<input class="uk-search-input" type="search" placeholder="Search for images" autofocus>
</form>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<!--/HEADER-->
<!--HERO-->
<section class="uk-section uk-section-large uk-section-secondary">
<div class="uk-container uk-container-small uk-text-center">
<h1>Album example</h1>
<p class="uk-text-large">Mauris vulputate non augue eu tincidunt. Nunc nec suscipit nisi. Maecenas quis quam et ex cursus sodales vitae luctus sem. </p>
<div uk-margin>
<div class="uk-button uk-button-primary">
CALL TO ACTION
</div>
<div class="uk-button uk-button-default">
CLICK HERE
</div>
</div>
</div>
</section>
<!--/HERO-->
<!-- INFO -->
<section class="uk-section uk-section-default uk-box-shadow-small uk-section-xsmall">
<div class="uk-container">
<div class="uk-grid uk-grid-small uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img src="https://unsplash.it/65/65/?random" class="uk-border-circle">
</div>
<div class="uk-width-expand">
<h4 class="uk-margin-remove">Curabitur consequat lectus a dolor interdum semper.</h4>
<i class="uk-text-muted uk-text-small">Created on 12th May 2017</i>
</div>
<div class="uk-width-1-2 uk-width-1-5@m uk-visible@m">
<span class="uk-text-primary" uk-icon="icon:calendar; ratio: 0.8"></span><span class="uk-text-small uk-text-muted uk-text-bottom"> Member since:</span><br>
<span class="uk-text-large uk-text-primary">13th May 2015</span>
</div>
<div class="uk-width-1-2 uk-width-1-5@m uk-visible@m">
<span class="uk-text-success" uk-icon="icon:user; ratio: 0.8"></span><span class="uk-text-small uk-text-muted uk-text-bottom"> Last Login:</span><br>
<span class="uk-text-large uk-text-success">18th Feb 2017</span>
</div>
<div class="uk-width-auto@m uk-visible@m">
<a class="uk-button uk-button-default">Back</a>
</div>
</div>
</div>
</section>
<!-- /INFO -->
<!-- CONTENT -->
<section class="uk-section uk-section-muted">
<div class="uk-container">
<div class="uk-grid uk-grid-medium uk-child-width-1-2 uk-child-width-1-3@m uk-grid-match" uk-lightbox uk-grid uk-scrollspy="target: > div > .uk-card; cls: uk-animation-slide-bottom-small uk-hidden; delay: 150">
<!-- item -->
<div>
<div class="uk-card uk-card-default uk-card-small uk-hidden">
<div class="uk-card-media-top">
<div class="uk-inline-clip uk-transition-toggle uk-light">
<img src="https://unsplash.it/400/320/?random">
<div class="uk-transition-fade uk-position-cover uk-overlay uk-overlay-primary uk-flex uk-flex-center uk-flex-middle">
<div uk-margin class="uk-transition-slide-bottom-small">
<span uk-icon="icon: plus; ratio: 1.3"></span>
</div>
</div>
<a href="https://static.photocdn.pt/images/articles/2017/04/28/iStock-516651882.jpg" class="uk-position-cover"></a>
</div>
</div>
<div class="uk-card-header">
<div class="uk-grid-small uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-border-circle" width="70" height="70" src="https://unsplash.it/70/70/?random">
</div>
<div class="uk-width-expand">
<h5 class="uk-margin-remove-bottom">Vivamus hendrerit tristique</h3>
<p class="uk-text-meta uk-margin-remove"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
<a href="#" class="uk-icon-link" uk-icon="icon: facebook; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: twitter; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: linkedin; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: instagram; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: behance; ratio: 0.9"></a>
</div>
</div>
</div>
</div>
</div>
<!-- item -->
<!-- item -->
<div>
<div class="uk-card uk-card-default uk-card-small uk-hidden">
<div class="uk-card-media-top">
<div class="uk-inline-clip uk-transition-toggle uk-light">
<img src="https://unsplash.it/400/320/?random">
<div class="uk-transition-fade uk-position-cover uk-overlay uk-overlay-primary uk-flex uk-flex-center uk-flex-middle">
<div uk-margin class="uk-transition-slide-bottom-small">
<span uk-icon="icon: plus; ratio: 1.3"></span>
</div>
</div>
<a href="https://static.photocdn.pt/images/articles/2017/04/28/iStock-516651882.jpg" class="uk-position-cover"></a>
</div>
</div>
<div class="uk-card-header">
<div class="uk-grid-small uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-border-circle" width="70" height="70" src="https://unsplash.it/70/70/?random">
</div>
<div class="uk-width-expand">
<h5 class="uk-margin-remove-bottom">Vivamus hendrerit tristique</h3>
<p class="uk-text-meta uk-margin-remove"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
<a href="#" class="uk-icon-link" uk-icon="icon: facebook; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: twitter; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: linkedin; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: instagram; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: behance; ratio: 0.9"></a>
</div>
</div>
</div>
</div>
</div>
<!-- item -->
<!-- item -->
<div>
<div class="uk-card uk-card-default uk-card-small uk-hidden">
<div class="uk-card-media-top">
<div class="uk-inline-clip uk-transition-toggle uk-light">
<img src="https://unsplash.it/400/320/?random">
<div class="uk-transition-fade uk-position-cover uk-overlay uk-overlay-primary uk-flex uk-flex-center uk-flex-middle">
<div uk-margin class="uk-transition-slide-bottom-small">
<span uk-icon="icon: plus; ratio: 1.3"></span>
</div>
</div>
<a href="https://static.photocdn.pt/images/articles/2017/04/28/iStock-516651882.jpg" class="uk-position-cover"></a>
</div>
</div>
<div class="uk-card-header">
<div class="uk-grid-small uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-border-circle" width="70" height="70" src="https://unsplash.it/70/70/?random">
</div>
<div class="uk-width-expand">
<h5 class="uk-margin-remove-bottom">Vivamus hendrerit tristique</h3>
<p class="uk-text-meta uk-margin-remove"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
<a href="#" class="uk-icon-link" uk-icon="icon: facebook; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: twitter; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: linkedin; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: instagram; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: behance; ratio: 0.9"></a>
</div>
</div>
</div>
</div>
</div>
<!-- item -->
<!-- item -->
<div>
<div class="uk-card uk-card-default uk-card-small uk-hidden">
<div class="uk-card-media-top">
<div class="uk-inline-clip uk-transition-toggle uk-light">
<img src="https://unsplash.it/400/320/?random">
<div class="uk-transition-fade uk-position-cover uk-overlay uk-overlay-primary uk-flex uk-flex-center uk-flex-middle">
<div uk-margin class="uk-transition-slide-bottom-small">
<span uk-icon="icon: plus; ratio: 1.3"></span>
</div>
</div>
<a href="https://static.photocdn.pt/images/articles/2017/04/28/iStock-516651882.jpg" class="uk-position-cover"></a>
</div>
</div>
<div class="uk-card-header">
<div class="uk-grid-small uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-border-circle" width="70" height="70" src="https://unsplash.it/70/70/?random">
</div>
<div class="uk-width-expand">
<h5 class="uk-margin-remove-bottom">Vivamus hendrerit tristique</h3>
<p class="uk-text-meta uk-margin-remove"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
<a href="#" class="uk-icon-link" uk-icon="icon: facebook; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: twitter; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: linkedin; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: instagram; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: behance; ratio: 0.9"></a>
</div>
</div>
</div>
</div>
</div>
<!-- item -->
<!-- item -->
<div>
<div class="uk-card uk-card-default uk-card-small uk-hidden">
<div class="uk-card-media-top">
<div class="uk-inline-clip uk-transition-toggle uk-light">
<img src="https://unsplash.it/400/320/?random">
<div class="uk-transition-fade uk-position-cover uk-overlay uk-overlay-primary uk-flex uk-flex-center uk-flex-middle">
<div uk-margin class="uk-transition-slide-bottom-small">
<span uk-icon="icon: plus; ratio: 1.3"></span>
</div>
</div>
<a href="https://static.photocdn.pt/images/articles/2017/04/28/iStock-516651882.jpg" class="uk-position-cover"></a>
</div>
</div>
<div class="uk-card-header">
<div class="uk-grid-small uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-border-circle" width="70" height="70" src="https://unsplash.it/70/70/?random">
</div>
<div class="uk-width-expand">
<h5 class="uk-margin-remove-bottom">Vivamus hendrerit tristique</h3>
<p class="uk-text-meta uk-margin-remove"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
<a href="#" class="uk-icon-link" uk-icon="icon: facebook; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: twitter; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: linkedin; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: instagram; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: behance; ratio: 0.9"></a>
</div>
</div>
</div>
</div>
</div>
<!-- item -->
<!-- item -->
<div>
<div class="uk-card uk-card-default uk-card-small uk-hidden">
<div class="uk-card-media-top">
<div class="uk-inline-clip uk-transition-toggle uk-light">
<img src="https://unsplash.it/400/320/?random">
<div class="uk-transition-fade uk-position-cover uk-overlay uk-overlay-primary uk-flex uk-flex-center uk-flex-middle">
<div uk-margin class="uk-transition-slide-bottom-small">
<span uk-icon="icon: plus; ratio: 1.3"></span>
</div>
</div>
<a href="https://static.photocdn.pt/images/articles/2017/04/28/iStock-516651882.jpg" class="uk-position-cover"></a>
</div>
</div>
<div class="uk-card-header">
<div class="uk-grid-small uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-border-circle" width="70" height="70" src="https://unsplash.it/70/70/?random">
</div>
<div class="uk-width-expand">
<h5 class="uk-margin-remove-bottom">Vivamus hendrerit tristique</h3>
<p class="uk-text-meta uk-margin-remove"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
<a href="#" class="uk-icon-link" uk-icon="icon: facebook; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: twitter; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: linkedin; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: instagram; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: behance; ratio: 0.9"></a>
</div>
</div>
</div>
</div>
</div>
<!-- item -->
<!-- item -->
<div>
<div class="uk-card uk-card-default uk-card-small uk-hidden">
<div class="uk-card-media-top">
<div class="uk-inline-clip uk-transition-toggle uk-light">
<img src="https://unsplash.it/400/320/?random">
<div class="uk-transition-fade uk-position-cover uk-overlay uk-overlay-primary uk-flex uk-flex-center uk-flex-middle">
<div uk-margin class="uk-transition-slide-bottom-small">
<span uk-icon="icon: plus; ratio: 1.3"></span>
</div>
</div>
<a href="https://static.photocdn.pt/images/articles/2017/04/28/iStock-516651882.jpg" class="uk-position-cover"></a>
</div>
</div>
<div class="uk-card-header">
<div class="uk-grid-small uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-border-circle" width="70" height="70" src="https://unsplash.it/70/70/?random">
</div>
<div class="uk-width-expand">
<h5 class="uk-margin-remove-bottom">Vivamus hendrerit tristique</h3>
<p class="uk-text-meta uk-margin-remove"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
<a href="#" class="uk-icon-link" uk-icon="icon: facebook; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: twitter; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: linkedin; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: instagram; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: behance; ratio: 0.9"></a>
</div>
</div>
</div>
</div>
</div>
<!-- item -->
<!-- item -->
<div>
<div class="uk-card uk-card-default uk-card-small uk-hidden">
<div class="uk-card-media-top">
<div class="uk-inline-clip uk-transition-toggle uk-light">
<img src="https://unsplash.it/400/320/?random">
<div class="uk-transition-fade uk-position-cover uk-overlay uk-overlay-primary uk-flex uk-flex-center uk-flex-middle">
<div uk-margin class="uk-transition-slide-bottom-small">
<span uk-icon="icon: plus; ratio: 1.3"></span>
</div>
</div>
<a href="https://static.photocdn.pt/images/articles/2017/04/28/iStock-516651882.jpg" class="uk-position-cover"></a>
</div>
</div>
<div class="uk-card-header">
<div class="uk-grid-small uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-border-circle" width="70" height="70" src="https://unsplash.it/70/70/?random">
</div>
<div class="uk-width-expand">
<h5 class="uk-margin-remove-bottom">Vivamus hendrerit tristique</h3>
<p class="uk-text-meta uk-margin-remove"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
<a href="#" class="uk-icon-link" uk-icon="icon: facebook; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: twitter; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: linkedin; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: instagram; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: behance; ratio: 0.9"></a>
</div>
</div>
</div>
</div>
</div>
<!-- item -->
<!-- item -->
<div>
<div class="uk-card uk-card-default uk-card-small uk-hidden">
<div class="uk-card-media-top">
<div class="uk-inline-clip uk-transition-toggle uk-light">
<img src="https://unsplash.it/400/320/?random">
<div class="uk-transition-fade uk-position-cover uk-overlay uk-overlay-primary uk-flex uk-flex-center uk-flex-middle">
<div uk-margin class="uk-transition-slide-bottom-small">
<span uk-icon="icon: plus; ratio: 1.3"></span>
</div>
</div>
<a href="https://static.photocdn.pt/images/articles/2017/04/28/iStock-516651882.jpg" class="uk-position-cover"></a>
</div>
</div>
<div class="uk-card-header">
<div class="uk-grid-small uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-border-circle" width="70" height="70" src="https://unsplash.it/70/70/?random">
</div>
<div class="uk-width-expand">
<h5 class="uk-margin-remove-bottom">Vivamus hendrerit tristique</h3>
<p class="uk-text-meta uk-margin-remove"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
<a href="#" class="uk-icon-link" uk-icon="icon: facebook; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: twitter; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: linkedin; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: instagram; ratio: 0.9"></a>
<a href="#" class="uk-icon-link" uk-icon="icon: behance; ratio: 0.9"></a>
</div>
</div>
</div>
</div>
</div>
<!-- item -->
</div>
</div>
</section>
<!-- /CONTENT -->
<!--FOOTER-->
<footer class="uk-section uk-section-default uk-section-small">
<div class="uk-container">
<p class="uk-text-small uk-text-center">Copyright 2017 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus hendrerit tristique tortor vel ultricies. </p>
</div>
</footer>
<!--/FOOTER-->
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit-icons.min.js"></script>
Raw
style.css
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/css/uikit.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment