Difference between revisions of "Team:Peking/2333"

Line 98: Line 98:
 
<span class="codrops-header__pretitle">Inspiration for</span>
 
<span class="codrops-header__pretitle">Inspiration for</span>
 
<h1 class="codrops-header__title">Navigation Indicators</h1>
 
<h1 class="codrops-header__title">Navigation Indicators</h1>
−
<!-- GitHub corner by Tim Holman -->
 
−
<a href="https://github.com/codrops/NavigationIndicators/" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" class="github-icon"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
 
 
</header>
 
</header>
 
<section class="section section--intro">
 
<section class="section section--intro">

Revision as of 16:10, 1 November 2017

Navigation Indicators | Codrops

Inspiration for

Navigation Indicators

Many UI components require some kind of navigation or pagination. Today we want to explore some different styles on the example of a vertical slideshow.

Let's have a look.

img03

Ubax

img07

Shamso

img08

Maxamed

img14

Hagos

img04

Zahi

img05

Magool

Inspired by Brewskies v2 by Kevin Yang

img01

Xusni

img09

Beca

img10

Etefu

img11

Meklit

img06

Timiro

img12

Mariame

img13

Desta

img15

Berta

img16

Aman

img02

Kafa

img8

Totit

img17

Ayana

Images from Unsplash.com

If you enjoyed this demo you might also like:

Tooltip Styles Inspiration

Notification Styles Inspiration

Arrow Navigation Styles

Dot Navigation Styles