Mandarin-Pathways/learn.html at main · dbsectrainer/Mandarin-Pathways · GitHub

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes"
        />
        <meta
            name="description"
            content="Guides for learning Mandarin: the story method, pinyin and tones for beginners, and a beginner's guide to Chinese characters."
        />
        <meta name="theme-color" content="#1a2733" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta
            name="apple-mobile-web-app-status-bar-style"
            content="black-translucent"
        />
        <meta name="apple-mobile-web-app-title" content="Mandarin Pathways" />
        <title>Mandarin Pathways - Learn Mandarin Guides</title>
        <link rel="manifest" href="manifest.json" />
        <link rel="apple-touch-icon" href="icons/icon-192x192.png" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
            rel="stylesheet"
            media="print"
            onload="this.media = 'all'"
        />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
            media="print"
            onload="this.media = 'all'"
        />
        <link rel="stylesheet" href="css/styles.min.css" />
        <link rel="stylesheet" href="css/layout.css" />
        <noscript>
            <link
                href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
                rel="stylesheet"
            />
            <link
                rel="stylesheet"
                href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
            />
        </noscript>
    </head>
    <body>
        <div id="site-header"></div>

        <main>
            <section class="page-hero">
                <h2>
                    <span class="zh">学习指南</span
                    ><span class="en">Learn Mandarin: guides</span>
                </h2>
                <p>
                    <span class="zh"
                        >开始课程前想先了解方法？这些指南解释故事学习法、拼音声调和汉字入门。</span
                    ><span class="en"
                        >Want to understand the method before you start? These
                        guides cover story-based learning, pinyin and tones,
                        and your first Chinese characters.</span
                    >
                </p>
            </section>

            <section class="page-section">
                <div class="hub-card-grid">
                    <a href="learn-method.html" class="hub-card">
                        <i class="fas fa-book-open-reader"></i>
                        <h3>
                            <span class="zh">如何通过故事学中文</span
                            ><span class="en"
                                >How to learn Mandarin with stories</span
                            >
                        </h3>
                        <p>
                            <span class="zh"
                                >为什么可理解输入胜过语法练习，以及每天20-30分钟的学习循环。</span
                            ><span class="en"
                                >Why comprehensible input beats grammar drills,
                                and the 20-30 minute daily loop that makes it
                                stick.</span
                            >
                        </p>
                    </a>
                    <a href="learn-pinyin.html" class="hub-card">
                        <i class="fas fa-wave-square"></i>
                        <h3>
                            <span class="zh">拼音与声调入门</span
                            ><span class="en"
                                >Pinyin and tones for beginners</span
                            >
                        </h3>
                        <p>
                            <span class="zh"
                                >中文的发音系统，四个声调的实时演示，以及常见发音误区。</span
                            ><span class="en"
                                >Mandarin's sound system, a live demo of the
                                four tones, and the pronunciation traps to
                                avoid.</span
                            >
                        </p>
                    </a>
                    <a href="learn-characters.html" class="hub-card">
                        <i class="fas fa-pen-nib"></i>
                        <h3>
                            <span class="zh">汉字入门指南</span
                            ><span class="en"
                                >A beginner's guide to Chinese characters</span
                            >
                        </h3>
                        <p>
                            <span class="zh"
                                >笔画、笔顺和部首，配有动画演示——以及什么时候该开始动笔写。</span
                            ><span class="en"
                                >Strokes, stroke order, and radicals with
                                animated demos — and when to start writing.</span
                            >
                        </p>
                    </a>
                </div>
            </section>

            <section class="page-section text-center">
                <h2>
                    <span class="zh">准备好开始了吗？</span
                    ><span class="en">Ready to put it into practice?</span>
                </h2>
                <div class="cta-row">
                    <a href="course.html" class="cta-btn cta-primary">
                        <i class="fas fa-map"></i>
                        <span class="zh">查看免费课程</span
                        ><span class="en">See the free course</span>
                    </a>
                </div>
            </section>
        </main>

        <div id="site-footer"></div>

        <script src="js/layout.js" defer></script>
        <script src="js/sw-register.js" defer></script>
        <script src="js/i18n.js" defer></script>
        <script src="js/lang-switcher.js" defer></script>
        <script src="js/return-to-top.js" defer></script>
    </body>
</html>