1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55<script src="js/template-web.js"></script>
<main class="page__content">
<nav class="page__drawer mdc-persistent-drawer">
<ul class="page__drawer-list">
<template id="temp-page-list">
<li class="page__drawer-list__item">
<a href="" class="page__drawer-list__link"></a>
</li>
</template>
<!-- Use template tag to generate these link -->
<li class="page__drawer-list__item">
<a href="#" class="page__drawer-list__link page__drawer-list__link--active">Title</a>
</li>
</ul>
</nav>
<article class="page__article">
<h1 class="mdc-typography--headline">Headline h1</h1>
<h2 class="mdc-typography--title">
Title h2
<span class="mdc-typography--caption">Caption.</span>
</h2>
<h3>Title h3</h3>
</article>
</main>
<footer class="footer">
<div class="footer__content">
<span class="footer__logo">Lanzhou 2017</span>
<ul class="footer__links">
<li>
<a href="" class="footer__link">About Lanzhou 2017</a>
</li>
<!-- ้่ฆๆนๅจ -->
<li>
<a href="" class="footer__link">copyright</a>
</li>
<li class="footer__link-container--right">
<a href="http://lawliet.pw" class="footer__link">
<span class="footer__made-with-desktop">Made by L. with Material Components for the web</span>
<span class="footer__made-with-mobile">Made by L. with MDC Web</span>
</a>
</li>
</ul>
</div>
</footer>
<button id="to-top" class="mdc-fab mdc-ripple-surface material-icons" aria-label="Favorite">
<span class="mdc-fab__icon">keyboard_arrow_up</span>
</button>
</body>
<script src="material-components-web/dist/material-components-web.js"></script>
<script src="js/jquery.min.js"></script>
<script>window.mdc.autoInit()</script>
<script src="js/main.js"></script>
</html>