notes/Materialize CSS Example-zPMuWmbx.html
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script>
$(document).ready(function(){
$('.carousel').carousel();
$(".button-collapse").sideNav();
//Popup Message
Materialize.toast('I am a toast!', 3000, 'rounded');
//init modal
$('.modal').modal();
});
</script>
</head>
<body>
<!--Nav Bar-->
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
</div>
</nav>
<!--Carousel-->
<div class="carousel">
<a class="carousel-item" target="_blank" href="https://www.youtube.com/watch?v=VgNIkGzxGAU"><img src="https://i3.ytimg.com/vi/VgNIkGzxGAU/hqdefault.jpg"></a>
<a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a>
<a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a>
<a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a>
</div>
<!--tooltip button-->
<a class="btn tooltipped" data-position="top" data-delay="50" data-tooltip="I am tooltip">Hover me!</a>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
<!-- Element Showed -->
<a id="menu" class="waves-effect waves-light btn btn-floating" ><i class="material-icons">menu</i></a>
<!-- Tap Target Structure -->
<div class="tap-target" data-activates="menu">
<div class="tap-target-content">
<h5>Title</h5>
<p>A bunch of text</p>
</div>
</div>
</body>
</html>
syntax highlighted by Code2HTML, v. 0.9.1