Skip to content

Instantly share code, notes, and snippets.

@devloprs

devloprs/MDB-Test ScrollSpy

Created January 2, 2017 11:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save devloprs/f47a57e174b7e35ea3e2a3d9ccc3210a to your computer and use it in GitHub Desktop.
Save devloprs/f47a57e174b7e35ea3e2a3d9ccc3210a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
MDB-Test ScrollSpy
<div data-spy="scroll" data-target="#scrollspy1" data-offset="0">
<!--Section: Magazine v.1-->
<section class="section magazine-section" id="section1">
<!--Section heading-->
<h1 class="section-heading">Section title</h1>
<!--Section description-->
<p class="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!--First row-->
<div class="row text-xs-left">
<!--First column-->
<div class="col-lg-6 col-md-12">
<!--Featured news-->
<div class="single-news">
<!--Image-->
<div class="view overlay hm-white-slight">
<img src="http://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(27).jpg">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="news-data">
<a href="" class="light-blue-text"><h5><i class="fa fa-plane"></i> Travels</h5></a>
<p><strong><i class="fa fa-clock-o"></i> 20/08/2016</strong></p>
</div>
<h3><a>Top 5 places in Italy you need to visit.</a></h3>
<p> Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
</p>
</div>
<!--/Featured news-->
</div>
<!--/First column-->
<!--Second column-->
<div class="col-lg-6 col-md-12">
<!--Featured news-->
<div class="single-news">
<!--Image-->
<div class="view overlay hm-white-slight">
<img src="http://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20(90).jpg">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="news-data">
<a href="" class="red-text"><h5 class="purple-text"><i class="fa fa-money"></i> Business</h5></a>
<p><strong><i class="fa fa-clock-o"></i> 24/08/2016</strong></p>
</div>
<h3><a>How to start PR career in New York?</a></h3>
<p>Sed ut perspiciatis unde voluptatem omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae explicabo.
</p>
</div>
<!--/Featured news-->
</div>
<!--/Second column-->
</div>
<!--/First row-->
</section>
<!--/Section: Magazine v.1-->
<!--Section: Magazine v.1-->
<section class="section magazine-section" id="section2">
<!--Section heading-->
<h1 class="section-heading">Section title</h1>
<!--Section description-->
<p class="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!--First row-->
<div class="row text-xs-left">
<!--First column-->
<div class="col-lg-6 col-md-12">
<!--Featured news-->
<div class="single-news">
<!--Image-->
<div class="view overlay hm-white-slight">
<img src="http://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(27).jpg">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="news-data">
<a href="" class="light-blue-text"><h5><i class="fa fa-plane"></i> Travels</h5></a>
<p><strong><i class="fa fa-clock-o"></i> 20/08/2016</strong></p>
</div>
<h3><a>Top 5 places in Italy you need to visit.</a></h3>
<p> Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
</p>
</div>
<!--/Featured news-->
</div>
<!--/First column-->
<!--Second column-->
<div class="col-lg-6 col-md-12">
<!--Featured news-->
<div class="single-news">
<!--Image-->
<div class="view overlay hm-white-slight">
<img src="http://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20(90).jpg">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="news-data">
<a href="" class="red-text"><h5 class="purple-text"><i class="fa fa-money"></i> Business</h5></a>
<p><strong><i class="fa fa-clock-o"></i> 24/08/2016</strong></p>
</div>
<h3><a>How to start PR career in New York?</a></h3>
<p>Sed ut perspiciatis unde voluptatem omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae explicabo.
</p>
</div>
<!--/Featured news-->
</div>
<!--/Second column-->
</div>
<!--/First row-->
</section>
<!--/Section: Magazine v.1-->
<!--Section: Magazine v.1-->
<section class="section magazine-section" id="section3">
<!--Section heading-->
<h1 class="section-heading">Section title</h1>
<!--Section description-->
<p class="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!--First row-->
<div class="row text-xs-left">
<!--First column-->
<div class="col-lg-6 col-md-12">
<!--Featured news-->
<div class="single-news">
<!--Image-->
<div class="view overlay hm-white-slight">
<img src="http://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(27).jpg">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="news-data">
<a href="" class="light-blue-text"><h5><i class="fa fa-plane"></i> Travels</h5></a>
<p><strong><i class="fa fa-clock-o"></i> 20/08/2016</strong></p>
</div>
<h3><a>Top 5 places in Italy you need to visit.</a></h3>
<p> Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
</p>
</div>
<!--/Featured news-->
</div>
<!--/First column-->
<!--Second column-->
<div class="col-lg-6 col-md-12">
<!--Featured news-->
<div class="single-news">
<!--Image-->
<div class="view overlay hm-white-slight">
<img src="http://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20(90).jpg">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="news-data">
<a href="" class="red-text"><h5 class="purple-text"><i class="fa fa-money"></i> Business</h5></a>
<p><strong><i class="fa fa-clock-o"></i> 24/08/2016</strong></p>
</div>
<h3><a>How to start PR career in New York?</a></h3>
<p>Sed ut perspiciatis unde voluptatem omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae explicabo.
</p>
</div>
<!--/Featured news-->
</div>
<!--/Second column-->
</div>
<!--/First row-->
</section>
<!--/Section: Magazine v.1-->
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment