materialize-css
Version:
Builds Materialize distribution packages
51 lines (49 loc) • 2.15 kB
HTML
<header>
<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 class="hide-on-small-only"><a href="parallax.html"><i class="mdi-navigation-arrow-back"></i></a></li>
</ul>
<a class="button-collapse" href="#" data-activates='nav-mobile'><i class="mdi-navigation-menu"></i></a>
</div>
</div>
</nav>
</header>
<main>
<!-- Parallax Section -->
<div class="parallax-container">
<div class="parallax"><img src="images/parallax1.jpg"></div>
</div>
<div class="section white">
<div class="row container">
<h2 class="header">Parallax</h2>
<p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
<div class="row container">
<h4 class="light">Parallax Demo HTML</h4>
<pre><code class="language-markup col s12">
<div class="parallax-container">
<div class="parallax"><img src="images/parallax1.jpg"></div>
</div>
<div class="section white">
<div class="row container">
<h2 class="header">Parallax</h2>
<p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="images/parallax2.jpg"></div>
</div>
</code></pre>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="images/parallax2.jpg"></div>
</div>
<div class="buysellads buysellads-demo hide-on-small-only">
<a href="#!" class="close"><i class="material-icons">close</i></a>
<!-- CarbonAds Zone Code -->
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
</div>