PageStackNavigation/index.html at master · codrops/PageStackNavigation · GitHub

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>
<htmllang="en" class="no-js">

<head>
<metacharset="UTF-8" />
<metahttp-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<metaname="viewport" content="width=device-width, initial-scale=1.0">
<title>Blueprint: Page Stack Navigation</title>
<metaname="description" content="Blueprint: A basic template for a page stack navigation effect" />
<metaname="keywords" content="blueprint, template, html, css, page stack, 3d, perspective, navigation, menu" />
<metaname="author" content="Codrops" />
<linkrel="shortcut icon" href="favicon.ico">
<linkrel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<linkrel="stylesheet" type="text/css" href="css/demo.css" />
<linkrel="stylesheet" type="text/css" href="css/component.css" />
<scriptsrc="js/modernizr-custom.js"></script>
</head>

<body>
<!-- navigation -->
<navclass="pages-nav">
<divclass="pages-nav__item"><aclass="link link--page" href="#page-home">Home</a></div>
<divclass="pages-nav__item"><aclass="link link--page" href="#page-docu">Documentation</a></div>
<divclass="pages-nav__item"><aclass="link link--page" href="#page-manuals">Manuals</a></div>
<divclass="pages-nav__item"><aclass="link link--page" href="#page-software">Software</a></div>
<divclass="pages-nav__item"><aclass="link link--page" href="#page-custom">Customization &amp; Settings</a></div>
<divclass="pages-nav__item"><aclass="link link--page" href="#page-training">Training</a></div>
<divclass="pages-nav__item pages-nav__item--small"><aclass="link link--page link--faded" href="#page-buy">Where to buy</a></div>
<divclass="pages-nav__item pages-nav__item--small"><aclass="link link--page link--faded" href="#page-blog">Blog &amp; News</a></div>
<divclass="pages-nav__item pages-nav__item--small"><aclass="link link--page link--faded" href="#page-contact">Contact</a></div>
<divclass="pages-nav__item pages-nav__item--social">
<aclass="link link--social link--faded" href="#"><iclass="fa fa-twitter"></i><spanclass="text-hidden">Twitter</span></a>
<aclass="link link--social link--faded" href="#"><iclass="fa fa-linkedin"></i><spanclass="text-hidden">LinkedIn</span></a>
<aclass="link link--social link--faded" href="#"><iclass="fa fa-facebook"></i><spanclass="text-hidden">Facebook</span></a>
<aclass="link link--social link--faded" href="#"><iclass="fa fa-youtube-play"></i><spanclass="text-hidden">YouTube</span></a>
</div>
</nav>
<!-- /navigation-->
<!-- pages stack -->
<divclass="pages-stack">
<!-- page -->
<divclass="page" id="page-home">
<!-- Blueprint header -->
<headerclass="bp-header cf">
<spanclass="bp-header__present">Blueprint <spanclass="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>
<h1class="bp-header__title">Page Stack Navigation</h1>
<pclass="bp-header__desc">Based on Ilya Kostin's Dribbble shot <ahref="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
<navclass="bp-nav">
<aclass="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-->
<aclass="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>
<aclass="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>
<imgclass="poster" src="images/1.jpg" alt="img01" />
</div>
<!-- /page -->
<divclass="page" id="page-docu">
<headerclass="bp-header cf">
<h1class="bp-header__title">Documentation</h1>
<pclass="bp-header__desc">Based on Ilya Kostin's Dribbble shot <ahref="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
<pclass="info">
 "We cannot have peace among men whose hearts find delight in killing any living creature." &mdash; Rachel Carson
</p>
</header>
<imgclass="poster" src="images/6.jpg" alt="img06" />
</div>
<divclass="page" id="page-manuals">
<headerclass="bp-header cf">
<h1class="bp-header__title">Manuals</h1>
<pclass="bp-header__desc">Based on Ilya Kostin's Dribbble shot <ahref="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
<pclass="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." &mdash; Freelee Frugivore
</p>
</header>
<imgclass="poster" src="images/2.jpg" alt="img02" />
</div>
<divclass="page" id="page-software">
<headerclass="bp-header cf">
<h1class="bp-header__title">Software &amp; Downloads</h1>
<pclass="bp-header__desc">Based on Ilya Kostin's Dribbble shot <ahref="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
<pclass="info">
 "I decided to pick the diet that I thought would maximize my chances of long-term survival." &mdash; Al Gore
</p>
</header>
<imgclass="poster" src="images/3.jpg" alt="img03" />
</div>
<divclass="page" id="page-custom">
<headerclass="bp-header cf">
<h1class="bp-header__title">Customization &amp; Settings</h1>
<pclass="bp-header__desc">Based on Ilya Kostin's Dribbble shot <ahref="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
<pclass="info">
 "You have to make a conscious decision to change for your own well-being, that of your family and your country." &mdash;Bill Clinton
</p>
</header>
<imgclass="poster" src="images/4.jpg" alt="img04" />
</div>
<divclass="page" id="page-training">
<headerclass="bp-header cf">
<h1class="bp-header__title">Training &amp; Learning Center</h1>
<pclass="bp-header__desc">Based on Ilya Kostin's Dribbble shot <ahref="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
<pclass="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." &mdash; Bryan Adams
</p>
</header>
<imgclass="poster" src="images/5.jpg" alt="img05" />
</div>
<divclass="page" id="page-buy">
<headerclass="bp-header cf">
<h1class="bp-header__title">Where to buy</h1>
<pclass="bp-header__desc">Based on Ilya Kostin's Dribbble shot <ahref="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
<pclass="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.'" &mdash;
</p>
</header>
<imgclass="poster" src="images/6.jpg" alt="img06" />
</div>
<divclass="page" id="page-blog">
<headerclass="bp-header cf">
<h1class="bp-header__title">Blog &amp; News</h1>
<pclass="bp-header__desc">Based on Ilya Kostin's Dribbble shot <ahref="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
<pclass="info">
 "The question is not, 'Can they reason?' nor, 'Can they talk?' but rather, 'Can they suffer?" &mdash; Jeremy Bentham
</p>
</header>
<imgclass="poster" src="images/1.jpg" alt="img01" />
</div>
<divclass="page" id="page-contact">
<headerclass="bp-header cf">
<h1class="bp-header__title">Contact</h1>
<pclass="bp-header__desc">Based on Ilya Kostin's Dribbble shot <ahref="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
<pclass="info">
 "Man is the only animal that can remain on friendly terms with the victims he intends to eat until he eats them." &mdash; Samuel Butler
</p>
</header>
<imgclass="poster" src="images/4.jpg" alt="img04" />
</div>
</div>
<!-- /pages-stack -->
<buttonclass="menu-button"><span>Menu</span></button>
<scriptsrc="js/classie.js"></script>
<scriptsrc="js/main.js"></script>
</body>

</html>