forked from codrops/PageStackNavigation
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·145 lines (142 loc) · 8.29 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blueprint: Page Stack Navigation</title>
<meta name="description" content="Blueprint: A basic template for a page stack navigation effect" />
<meta name="keywords" content="blueprint, template, html, css, page stack, 3d, perspective, navigation, menu" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr-custom.js"></script>
</head>
<body>
<!-- navigation -->
<nav class="pages-nav">
<div class="pages-nav__item"><a class="link link--page" href="#page-home">Home</a></div>
<div class="pages-nav__item"><a class="link link--page" href="#page-docu">Documentation</a></div>
<div class="pages-nav__item"><a class="link link--page" href="#page-manuals">Manuals</a></div>
<div class="pages-nav__item"><a class="link link--page" href="#page-software">Software</a></div>
<div class="pages-nav__item"><a class="link link--page" href="#page-custom">Customization & Settings</a></div>
<div class="pages-nav__item"><a class="link link--page" href="#page-training">Training</a></div>
<div class="pages-nav__item pages-nav__item--small"><a class="link link--page link--faded" href="#page-buy">Where to buy</a></div>
<div class="pages-nav__item pages-nav__item--small"><a class="link link--page link--faded" href="#page-blog">Blog & News</a></div>
<div class="pages-nav__item pages-nav__item--small"><a class="link link--page link--faded" href="#page-contact">Contact</a></div>
<div class="pages-nav__item pages-nav__item--social">
<a class="link link--social link--faded" href="#"><i class="fa fa-twitter"></i><span class="text-hidden">Twitter</span></a>
<a class="link link--social link--faded" href="#"><i class="fa fa-linkedin"></i><span class="text-hidden">LinkedIn</span></a>
<a class="link link--social link--faded" href="#"><i class="fa fa-facebook"></i><span class="text-hidden">Facebook</span></a>
<a class="link link--social link--faded" href="#"><i class="fa fa-youtube-play"></i><span class="text-hidden">YouTube</span></a>
</div>
</nav>
<!-- /navigation-->
<!-- pages stack -->
<div class="pages-stack">
<!-- page -->
<div class="page" id="page-home">
<!-- Blueprint header -->
<header class="bp-header cf">
<span class="bp-header__present">Blueprint <span class="bp-tooltip bp-icon bp-icon--about" data-content="The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration."></span></span>
<h1 class="bp-header__title">Page Stack Navigation</h1>
<p class="bp-header__desc">Based on Ilya Kostin's Dribbble shot <a href="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
<nav class="bp-nav">
<a class="bp-nav__item bp-icon bp-icon--prev" href="http://tympanus.net/Blueprints/ZoomSlider/" data-info="previous Blueprint"><span>Previous Blueprint</span></a>
<!--a class="bp-nav__item bp-icon bp-icon--next" href="" data-info="next Blueprint"><span>Next Blueprint</span></a-->
<a class="bp-nav__item bp-icon bp-icon--drop" href="http://tympanus.net/codrops/?p=25311" data-info="back to the Codrops article"><span>back to the Codrops article</span></a>
<a class="bp-nav__item bp-icon bp-icon--archive" href="http://tympanus.net/codrops/category/blueprints/" data-info="Blueprints archive"><span>Go to the archive</span></a>
</nav>
</header>
<img class="poster" src="images/1.jpg" alt="img01" />
</div>
<!-- /page -->
<div class="page" id="page-docu">
<header class="bp-header cf">
<h1 class="bp-header__title">Documentation</h1>
<p class="bp-header__desc">Based on Ilya Kostin's Dribbble shot <a href="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
<p class="info">
"We cannot have peace among men whose hearts find delight in killing any living creature." — Rachel Carson
</p>
</header>
<img class="poster" src="images/6.jpg" alt="img06" />
</div>
<div class="page" id="page-manuals">
<header class="bp-header cf">
<h1 class="bp-header__title">Manuals</h1>
<p class="bp-header__desc">Based on Ilya Kostin's Dribbble shot <a href="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
<p class="info">
"When you adopt a vegan diet we make a connection, you don't go back, it is not a diet, it is a lifestyle." — Freelee Frugivore
</p>
</header>
<img class="poster" src="images/2.jpg" alt="img02" />
</div>
<div class="page" id="page-software">
<header class="bp-header cf">
<h1 class="bp-header__title">Software & Downloads</h1>
<p class="bp-header__desc">Based on Ilya Kostin's Dribbble shot <a href="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
<p class="info">
"I decided to pick the diet that I thought would maximize my chances of long-term survival." — Al Gore
</p>
</header>
<img class="poster" src="images/3.jpg" alt="img03" />
</div>
<div class="page" id="page-custom">
<header class="bp-header cf">
<h1 class="bp-header__title">Customization & Settings</h1>
<p class="bp-header__desc">Based on Ilya Kostin's Dribbble shot <a href="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
<p class="info">
"You have to make a conscious decision to change for your own well-being, that of your family and your country." —Bill Clinton
</p>
</header>
<img class="poster" src="images/4.jpg" alt="img04" />
</div>
<div class="page" id="page-training">
<header class="bp-header cf">
<h1 class="bp-header__title">Training & Learning Center</h1>
<p class="bp-header__desc">Based on Ilya Kostin's Dribbble shot <a href="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
<p class="info">
"The moment I began to understand what was going on with the treatment of animals, it led me more and more in the way of the path I am [on] now, which is a complete vegan." — Bryan Adams
</p>
</header>
<img class="poster" src="images/5.jpg" alt="img05" />
</div>
<div class="page" id="page-buy">
<header class="bp-header cf">
<h1 class="bp-header__title">Where to buy</h1>
<p class="bp-header__desc">Based on Ilya Kostin's Dribbble shot <a href="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
<p class="info">
"When people ask me why I don't eat meat or any other animal products, I say, 'Because they are unhealthy and they are the product of a violent and inhumane industry.'" —
</p>
</header>
<img class="poster" src="images/6.jpg" alt="img06" />
</div>
<div class="page" id="page-blog">
<header class="bp-header cf">
<h1 class="bp-header__title">Blog & News</h1>
<p class="bp-header__desc">Based on Ilya Kostin's Dribbble shot <a href="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
<p class="info">
"The question is not, 'Can they reason?' nor, 'Can they talk?' but rather, 'Can they suffer?" — Jeremy Bentham
</p>
</header>
<img class="poster" src="images/1.jpg" alt="img01" />
</div>
<div class="page" id="page-contact">
<header class="bp-header cf">
<h1 class="bp-header__title">Contact</h1>
<p class="bp-header__desc">Based on Ilya Kostin's Dribbble shot <a href="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
<p class="info">
"Man is the only animal that can remain on friendly terms with the victims he intends to eat until he eats them." — Samuel Butler
</p>
</header>
<img class="poster" src="images/4.jpg" alt="img04" />
</div>
</div>
<!-- /pages-stack -->
<button class="menu-button"><span>Menu</span></button>
<script src="js/classie.js"></script>
<script src="js/main.js"></script>
</body>
</html>