Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
