Skip to content

Instantly share code, notes, and snippets.

@markodayan

markodayan/index.html

Last active January 9, 2020 15:28
Show Gist options
  • Save markodayan/9b21c749bccef3d68fb4799093537495 to your computer and use it in GitHub Desktop.
Save markodayan/9b21c749bccef3d68fb4799093537495 to your computer and use it in GitHub Desktop.
Download ZIP
Scrollspy Implementation
Raw
index.html
<html>
<body id="home" class="scrollspy"> ********
<header class="main-header">
<div class="primary-overlay">
<div class="navbar-fixed">
<nav class="transparent">
<div class="container">
<div class="nav-wrapper">
<a href="#home" class="brand-logo">BizLand</a> ********
<a href="#" data-activates="mobile-nav" class="button-collapse">
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
<a href="#home">Home</a> ********
</li>
<li>
<a href="#about">About</a> ********
</li>
<li>
<a href="#testimonials">Testimonials</a> ********
</li>
<li>
<a href="#contact">Contact</a> ********
</li>
<li>
<a href="#" class="btn blue">Download</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Side nav -->
<ul class="side-nav" id="mobile-nav">
<h4 class="blue-grey darken-3 center">BizLand</h4>
<li>
<a class="divider"></a>
</li>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#testimonials">Testimonials</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
<!-- Showcase -->
</div>
</header>
<!-- Section: Boxes -->
<section class="section-boxes center">
<div class="row">
<div class="col s12 m6 l3 blue white-text box">
<i class="material-icons medium">show_chart</i>
<h4>Grow Your Business</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel dicta
eveniet aperiam tenetur error dignissimos autem similique laboriosam
officiis accusamus!
</p>
</div>
<div class="col s12 m6 l3 purple white-text box">
<i class="material-icons medium">people</i>
<h4>Professional Advisors</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel dicta
eveniet aperiam tenetur error dignissimos autem similique laboriosam
officiis accusamus!
</p>
</div>
<div class="col s12 m6 l3 teal white-text box">
<i class="material-icons medium">verified_user</i>
<h4>Secure Your Company</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel dicta
eveniet aperiam tenetur error dignissimos autem similique laboriosam
officiis accusamus!
</p>
</div>
<div class="col s12 m6 l3 amber darken-4 white-text box">
<i class="material-icons medium">account_balance</i>
<h4>Multiply Your Income</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel dicta
eveniet aperiam tenetur error dignissimos autem similique laboriosam
officiis accusamus!
</p>
</div>
</div>
</section>
<!-- Section: About -->
<section
id="about" ********
class="section section-about grey lighten-3 center scrollspy"
>
</section>
<!-- Section: Testimonials -->
<section
id="testimonials" ********
class="section section-testimonials blue white-text center scrollspy"
>
</section>
<!-- Section: Contact -->
<section id="contact" class="section section-contact center scrollspy"> ********
</section>
<!--Import jQuery before materialize.js-->
<script
type="text/javascript"
src="https://code.jquery.com/jquery-3.2.1.min.js"
></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMTjBaSdDlU-yewvTsxr3PDzkXOwgdPqk&callBack"></script>
<script>
$(document).ready(function() {
// Init ScrollSpy
$('.scrollspy').scrollSpy();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment