-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
172 lines (167 loc) · 8.7 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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Foundation | 6.2.0</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/owl-slider-2/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl-slider-2/owl.theme.default.min.css">
<link rel="stylesheet" href="css/owl-slider-2/assets/ajax-loader.gif">
<link rel="stylesheet" href="css/owl-slider-2/assets/owl.video.play.png">
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="/js/core/scrollSpeed.js"></script>
</head>
</html>
<body>
<div class="off-canvas-wrapper">
<div data-off-canvas-wrapper="" class="off-canvas-wrapper-inner">
<div data-off-canvas-content="" class="off-canvas-content">
<div id="offCanvas" data-off-canvas="" data-position="left" class="off-canvas position-left">
<ul class="menu vertical">
<li><a href="index.html">Home</a></li>
<li class="hide"><a href="kitchensink.html">Full Foundation Kitchensink</a></li>
<li class="hide"><a href="minisink.html">Original Foundation Kitchensink</a></li>
</ul>
</div>
<div class="top-bar">
<div class="top-bar-left">
<ul data-dropdown-menu="" class="dropdown menu">
<li class="menu-text">Foundation 6.2.0</li>
<li><a href="index.html">Home</a></li>
<li class="hide"><a href="kitchensink.html">Full Foundation Kitchensink</a></li>
<li class="hide"><a href="minisink.html">Original Foundation Kitchensink</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>
<input type="search" placeholder="Search">
</li>
<li>
<button type="button" class="button">Search</button>
</li>
</ul>
</div>
</div>
<div style="height:50px;" class="row"></div>
<div class="row text-center animated fadeInUp">
<h1><b>Tirado's Ultimate Front-End Starter Project</b></h1>
<h3>for modern web development</h3><b>Powered By:</b>
<p>Jade / Sass / Foundation 6.2 / Motion Ui / Owl Slider / FontAwesome / Animate.css / Matthew Wagerfield's Parallax.js / Pixelcog's Parallax.js / Wow.js / scrollSpeed.js</p>
</div>
<div style="height:20px;" class="row animated fadeInUp">
<div class="hcenter vcenter">and <i class="fa-2x fa fa-heart animated pulse infinite" style="color:tomato;"></i> by Eric Tirado</div>
</div>
<div style="height:40px;" class="row"></div>
<hr>
<div style="height:50px;" class="row"></div>
<div class="row">
<ul class="menu expanded text-center toggles">
<li><a href="https://github.com/iamtirado/foundation6-jade-sass-plus">
<button class="button success">
<i class="fa fa-github"></i>
Download <b>.sass </b>Version
</button></a></li>
<li><a href="https://github.com/iamtirado/foundation6-jade-scss-plus">
<button class="button success">
<i class="fa fa-github"></i>
Download <b>.scss </b>Version
</button></a></li>
<li>
<button data-toggle="animatedModal10" class="button">Modal Reveal Toggle
</button>
</li>
<li>
<button data-toggle="motion-toggle" class="button">Motion Ui Toggle</button>
</li>
</ul>
<div class="small-12 small-centered">
<div id="main">
<section id="motion-toggle" style="background-color: #f1c40f;" data-toggler data-animate="fade-in fade-out"></section>
</div>
</div>
</div>
<div class="row">
<hr>
<h2 data-wow-duration="2s" class="wow fadeInLeft">
<button type="button" data-toggle="offCanvas"><a><i class="fa fa-chevron-left">
Offcanvas Ready</i></a></button>
</h2>
<hr>
</div>
<div class="row">
<h2 data-wow-duration="2s" data-wow-delay=".2s" class="wow fadeInLeft"><i class="fa fa-arrows-h">
Owl Slider </i></h2>
<div class="owl-carousel">
<div><img src="http://placehold.it/1200x300"></div>
<div><img src="http://placehold.it/1200x300"></div>
<div><img src="http://placehold.it/1200x300"></div>
<div><img src="http://placehold.it/1200x300"></div>
<div><img src="http://placehold.it/1200x300"></div>
<div><img src="http://placehold.it/1200x300"></div>
<div><img src="http://placehold.it/1200x300"></div>
<div><img src="http://placehold.it/1200x300"></div>
</div>
<p></p>
<p>Go to <a href="#">js/app.js</a> in folder directory to manage options</p>
<p>visit <a href="http://www.owlcarousel.owlgraphic.com/docs/api-options.html" target="_blank">OwlSlider</a> to see list of options.</p>
</div>
<div class="row">
<hr>
<h2 data-wow-duration="2s" data-wow-delay=".4s" class="wow fadeInLeft"><i class="fa fa-check">
Font-awesome</i></h2>
<p><i class="fa fa-link">
Visit <a href="https://fortawesome.github.io/Font-Awesome/cheatsheet/" target="_blank">FontAwesome</a> to find class for icons.</i></p>
</div>
<div class="row">
<hr>
<h2 data-wow-duration="2s" class="wow fadeInLeft"><i class="fa fa-rocket">
Parallax.js</i></h2>
<p>Move the mouse and see the magic</p>
<div id="container" class="container">
<ul id="scene" class="scene border fill small-12">
<li data-depth="1.00" style="height:500px; width: 100%;" class="layer expand-width"><img src="http://placehold.it/500x500" style="display: block; margin:0 auto; border: solid 5px #eee;"></li>
<li data-depth="0.80" style="height:500px; width: 100%;" class="layer expand-width"><img src="http://placehold.it/450x450" style="display: block; margin:25px auto 0; border: solid 5px #eee;"></li>
<li data-depth="0.60" style="height:500px; width: 100%;" class="layer expand-width"><img src="http://placehold.it/400x400" style="display: block; margin:50px auto 0; border: solid 5px #eee;"></li>
</ul>
</div>
</div>
<div style="height:100px;" class="row"></div>
<hr>
<div class="row">
<div class="small-12 small-centered">
<h2 data-wow-duration="2s" class="wow fadeInRight"><i class="fa fa-heart"> WOW.js </i></h2>
<p>Scroll-Initiated Intro Animations</p>
</div>
<div class="small-6 small-centered">
<div id="main">
<section style="background-color: #f1c40f;" class="wow fadeInDown"></section>
<section style="background-color: #e74c3c;" data-wow-iteration="infinite" data-wow-duration="1500ms" class="wow pulse"></section>
<section data-wow-delay="1s" class="section--purple wow slideInRight"></section>
<section data-wow-offset="300" class="section--blue wow bounceInLeft"></section>
<section data-wow-duration="4s" class="section--green wow slideInLeft"></section>
<button id="moar" class="button large"><b>LOAD MORE!!!</b></button>
</div>
</div>
</div>
<div style="height:200px;" class="row"></div>
</div>
</div>
</div>
<div id="animatedModal10" data-reveal="" data-close-on-click="true" data-animation-in="spin-in" data-animation-out="spin-out" class="reveal">
<h1>Was I spinning? It must have worked.</h1>
<p class="lead">There are many options for animating modals, check out the Motion UI library to see them all</p>
<button data-close="" aria-label="Close reveal" type="button" class="close-button"><span aria-hidden="true">×</span></button>
</div>
<script src="js/core/what-input.min.js"></script>
<script src="js/core/foundation.min.js"></script>
<script src="js/core/owl-slider-2/owl.carousel.min.js"></script>
<script src="js/core/scroll-parallax.min.js"></script>
<script src="js/core/mouse-parallax/mouse-parallax.min.js"></script>
<script src="js/core/wow.js"></script>
<script src="js/app.js"></script>
</body>