apollodec/Apollo/assets/views/ui_links.html

<!-- start: PAGE TITLE -->
<section id="page-title">
	<div class="row">
		<div class="col-sm-8">
			<h1 class="mainTitle" translate="sidebar.nav.element.LINKS">{{ mainTitle }}</h1>
			<span class="mainDescription">Subtle and modern effects for links or menu items</span>
		</div>
		<div ncy-breadcrumb></div>
	</div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: LINK EFFECT 1 -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15"><span class="text-bold">Brackets</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-1</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-1" class="links cl-effect-1">
					<a href>
						Wafture
					</a>
					<a href>
						Sumptuous
					</a>
					<a href>
						Scintilla
					</a>
					<a href>
						Propinquity
					</a>
					<a href>
						Harbinger
					</a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 1 -->
<!-- start: LINK EFFECT 2 -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15"><span class="text-bold">3D rolling</span> links</h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-2</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-2" class="links cl-effect-2">
					<a href><span data-hover="Ratatouille">Ratatouille</span></a>
					<a href><span data-hover="Lassitude">Lassitude</span></a>
					<a href><span data-hover="Murmurous">Murmurous</span></a>
					<a href><span data-hover="Palimpsest">Palimpsest</span></a>
					<a href><span data-hover="Assemblage">Assemblage</span></a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 2 -->
<!-- start: LINK EFFECT 3 -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Bottom line <span class="text-bold">slides/fades in</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-3</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-3" class="links cl-effect-3">
					<a href>
						Palimpsest
					</a>
					<a href>
						Ineffable
					</a>
					<a href>
						Lilt
					</a>
					<a href>
						Mellifluous
					</a>
					<a href>
						Serendipity
					</a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 3 -->
<!-- start: LINK EFFECT 4 -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Bottom border <span class="text-bold">enlarge</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-4</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-4" class="links cl-effect-4">
					<a href>
						Woebegone
					</a>
					<a href>
						Lassitude
					</a>
					<a href>
						Murmurous
					</a>
					<a href>
						Palimpsest
					</a>
					<a href>
						Assemblage
					</a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 4 -->
<!-- start: LINK EFFECT 5 -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Same word <span class="text-bold">slide in</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-5</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-5" class="links cl-effect-5">
					<a href><span data-hover="Seraglio">Seraglio</span></a>
					<a href><span data-hover="Sumptuous">Sumptuous</span></a>
					<a href><span data-hover="Scintilla">Scintilla</span></a>
					<a href><span data-hover="Palimpsest">Palimpsest</span></a>
					<a href><span data-hover="Assemblage">Assemblage</span></a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 5 -->
<!-- start: LINK EFFECT 6 -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Same word slide in and <span class="text-bold">border bottom</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-6</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-6" class="links cl-effect-6">
					<a href>
						Umbrella
					</a>
					<a href>
						Ineffable
					</a>
					<a href>
						Lilt
					</a>
					<a href>
						Mellifluous
					</a>
					<a href>
						Serendipity
					</a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 6 -->
<!-- start: LINK EFFECT 7 -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Second border <span class="text-bold">slides up</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-7</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-7" class="links cl-effect-7">
					<a href>
						Languor
					</a>
					<a href>
						Lassitude
					</a>
					<a href>
						Murmurous
					</a>
					<a href>
						Palimpsest
					</a>
					<a href>
						Assemblage
					</a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 7 -->
<!-- start: LINK EFFECT 8 -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Border slight <span class="text-bold">translate</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-8</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-8" class="links cl-effect-8">
					<a href>
						Imbue
					</a>
					<a href>
						Sumptuous
					</a>
					<a href>
						Scintilla
					</a>
					<a href>
						Propinquity
					</a>
					<a href>
						Harbinger
					</a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 8 -->
<!-- start: LINK EFFECT 9 -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Second text and <span class="text-bold">borders</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-9</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-9" class="links cl-effect-9">
					<a href><span>Gossamer</span><span>Sumptuous Heart</span></a>
					<a href><span>Ineffable</span><span>Evanescent Life</span></a>
					<a href><span>Chatoyant</span><span>Assemblage Love</span></a>
					<a href><span>Mellifluous</span><span>Mellifluous Will</span></a>
					<a href><span>Serendipity</span><span>Serendipity Cut</span></a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 9 -->
<!-- start: LINK EFFECT 10 -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Reveal, <span class="text-bold">push out</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-10</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-10" class="links cl-effect-10">
					<a data-hover="Seraglio" href><span>Seraglio</span></a>
					<a data-hover="Sumptuous" href><span>Sumptuous</span></a>
					<a data-hover="Scintilla" href><span>Scintilla</span></a>
					<a data-hover="Palimpsest" href><span>Palimpsest</span></a>
					<a data-hover="Assemblage" href><span>Assemblage</span></a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 10 -->
<!-- start: LINK EFFECT 11 -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Text <span class="text-bold">fill</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-11</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-11" class="links cl-effect-11">
					<a data-hover="Desultory" href>
						Desultory
					</a>
					<a data-hover="Sumptuous" href>
						Sumptuous
					</a>
					<a data-hover="Scintilla" href>
						Scintilla
					</a>
					<a data-hover="Propinquity" href>
						Propinquity
					</a>
					<a data-hover="Harbinger" href>
						Harbinger
					</a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 11 -->
<!-- start: LINK EFFECT 12 -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15"><span class="text-bold">Circle</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-12</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-12" class="links cl-effect-12">
					<a href>
						Chatoyant
					</a>
					<a href>
						Ineffable
					</a>
					<a href>
						Efficiency
					</a>
					<a href>
						Mellifluous
					</a>
					<a href>
						Serendipity
					</a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 12 -->
<!-- start: LINK EFFECT 13 -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Three <span class="text-bold">circles</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-13</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-13" class="links cl-effect-13">
					<a href>
						Beleaguer
					</a>
					<a href>
						Lassitude
					</a>
					<a href>
						Murmurous
					</a>
					<a href>
						Palimpsest
					</a>
					<a href>
						Assemblage
					</a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 13 -->
<!-- start: LINK EFFECT 14 -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Border <span class="text-bold">switch</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-14</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-14" class="links cl-effect-14">
					<a href>
						Ailurophile
					</a>
					<a href>
						Sumptuous
					</a>
					<a href>
						Scintilla
					</a>
					<a href>
						Propinquity
					</a>
					<a href>
						Harbinger
					</a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 14 -->
<!-- start: LINK EFFECT 15 -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Scale down, <span class="text-bold">reveal</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-15</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-15" class="links cl-effect-15">
					<a data-hover="Desultory" href>
						Desultory
					</a>
					<a data-hover="Sumptuous" href>
						Sumptuous
					</a>
					<a data-hover="Scintilla" href>
						Scintilla
					</a>
					<a data-hover="Propinquity" href>
						Propinquity
					</a>
					<a data-hover="Harbinger" href>
						Harbinger
					</a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 15 -->
<!-- start: LINK EFFECT 16 -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Fall <span class="text-bold">down</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-16</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-16" class="links cl-effect-16">
					<a data-hover="Languor" href>
						Languor
					</a>
					<a data-hover="Murmurous" href>
						Murmurous
					</a>
					<a data-hover="Lassitude" href>
						Lassitude
					</a>
					<a data-hover="Chatoyant" href>
						Chatoyant
					</a>
					<a data-hover="Palimpsest" href>
						Palimpsest
					</a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 16 -->
<!-- start: LINK EFFECT 17 -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Move up fade out, <span class="text-bold">push border</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-17</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-17" class="links cl-effect-17">
					<a data-hover="Languor" href>
						Languor
					</a>
					<a data-hover="Murmurous" href>
						Murmurous
					</a>
					<a data-hover="Lassitude" href>
						Lassitude
					</a>
					<a data-hover="Chatoyant" href>
						Chatoyant
					</a>
					<a data-hover="Palimpsest" href>
						Palimpsest
					</a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 17 -->
<!-- start: LINK EFFECT 18 -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15"><span class="text-bold">Cross</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-18</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-18" class="links cl-effect-18">
					<a data-hover="Desultory" href>
						Desultory
					</a>
					<a data-hover="Sumptuous" href>
						Sumptuous
					</a>
					<a data-hover="Scintilla" href>
						Scintilla
					</a>
					<a data-hover="Propinquity" href>
						Propinquity
					</a>
					<a data-hover="Harbinger" href>
						Harbinger
					</a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 18 -->
<!-- start: LINK EFFECT 19 -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">3D <span class="text-bold">side</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-19</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-19" class="links cl-effect-19">
					<a href><span data-hover="Ratatouille">Ratatouille</span></a>
					<a href><span data-hover="Lassitude">Lassitude</span></a>
					<a href><span data-hover="Murmurous">Murmurous</span></a>
					<a href><span data-hover="Palimpsest">Palimpsest</span></a>
					<a href><span data-hover="Assemblage">Assemblage</span></a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 19 -->
<!-- start: LINK EFFECT 20 -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">3D <span class="text-bold">side</span></h5>
			<p>
				Enclose your link inside the class <code>.cl-effect-20</code>
			</p>
			<div class="margin-top-30 margin-bottom-30">
				<nav id="cl-effect-20" class="links cl-effect-20">
					<a href><span data-hover="Beleaguer">Beleaguer</span></a>
					<a href><span data-hover="Scintilla">Scintilla</span></a>
					<a href><span data-hover="Chatoyant">Chatoyant</span></a>
					<a href><span data-hover="Palimpsest">Palimpsest</span></a>
					<a href><span data-hover="Languor">Languor</span></a>
				</nav>
			</div>
		</div>
	</div>
</div>
<!-- end: LINK EFFECT 20 -->