forked from Dogfalo/materialize
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathparallax.html
100 lines (91 loc) · 4.39 KB
/
parallax.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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Materialize - Documentation</title>
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
<link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
<!-- Android 5 Chrome Color -->
<meta name="theme-color" content="#EE6E73">
<link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="css/prism.css" rel="stylesheet" />
</head>
<body class="parallax-demo">
<nav>
<div class="container">
<div class="nav-wrapper">
<a href="index.html" class="brand-logo">Materialize</a>
<ul class="right side-nav" id="nav-mobile">
<li><a href="about.html">About</a></li>
<li><a href="getting_started.html">Getting Started</a></li>
<li><a href="sass.html">Sass</a></li>
<li><a href="components.html">Components</a></li>
<li class="active"><a href="javascript.html">JavaScript</a></li>
</ul>
<a class="button-collapse" href="#" data-activates='nav-mobile'><i class="mdi-navigation-menu"></i></a>
</div>
</div>
</nav>
<!-- Parallax Section -->
<div class="parallax-container">
<div class="parallax"><img src="images/parallax1.jpg"></div>
<div class="text-center">
<a href="javascript.html" class="btn-large waves-effect waves-light">Back To Docs</a>
</div>
</div>
<div class="section grey lighten-4">
<div class="row container">
<h2 class="header">Parallax</h2>
<p class="grey-text darken-3 lighten-3">The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then when you click on each tab, only the container with the corresponding tab id will become visible.</p>
</div>
<div class="row container">
<h4 class="light">Parallax HTML Structure</h4>
<pre><code class="language-markup col s12">
<div class="parallax-container">
<div class="parallax"><img src="images/parallax1.jpg"></div>
</div>
</code></pre>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="images/parallax2.jpg"></div>
</div>
<div id="footer" class="section">
<iframe src="http://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large"
allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
<a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a><a href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
</div>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js">
</script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/waves.js"></script>
<script src="js/prism.js"></script>
<script src="js/toasts.js"></script>
<script src="js/tooltip.js"></script>
<script src="js/tabs.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/parallax.js"></script>
<script src="js/leanModal.js"></script>
<script src="js/collapsible.js"></script>
<script src="js/materialbox.js"></script>
<script src="js/scrollspy.js"></script>
<script src="js/sideNav.js"></script>
<script src="js/init.js"></script>
<!-- Twitter Button -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-56218128-1', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>