sysphcd.github.io/index.html at main · sysphcd/sysphcd.github.io · 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE html>
<html>

<head>
  <title>進度條 HTML CSS JavaScript 課程範例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="subject" content="進度條 HTML 課程範例">
  <meta name="description" content="這是進度條線上課程 HTML / CSS / JavaScript 從零開始的範例，課程連結： https://progressbar.tw/courses/2">
  <meta name="keywords"
    content="Bootstrap, 網站, 開發, 程式, 設計, 教學, jquery, HTML, HTML5, CSS, JavaScript, Swift, WordPress, iOS, Ruby On Rails, Arduino">
  <meta name="copyright" content="思誠科技有限公司">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://progressbartw.github.io/">
  <meta property="og:site_name" content="進度條線上課程範例">
  <meta property="og:locale" content="zh_TW">
  <meta property="og:title" content="進度條線上課程範例">
  <meta property="og:image" content="https://progressbartw.github.io/imgs/small-card3.jpg">
  <meta property="og:description"
    content="這是進度條線上課程 HTML / CSS / JavaScript 從零開始的範例，課程連結： https://progressbar.tw/courses/2">
  <meta name="image" content="/imgs/small-card3.jpg">
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/earlyaccess/notosanstc.css">
  <link href="https://fonts.googleapis.com/css?family=Macondo" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <script src="js/jquery-3.2.1.min.js"></script>
</head>

<body>
  <header>
    <nav class="nav">
      <ul class="nav-list">
        <li class="nav-list-item"><a href="/bootstrap3/">Bootstrap3 範例</a></li>
        <li class="nav-list-item"><a href="https://progressbar.tw/courses/2">課程連結</a></li>
        <li class="nav-list-item"><a href="https://progressbar.tw">進度條官網</a></li>
        <li class="nav-list-item"><a href="https://pb.cistrend.com/htmlfinal">Github 程式</a></li>
      </ul>
      <button type="button" class="nav-button">
        <i class="fa fa-bars" aria-hidden="true"></i>
      </button>
    </nav>
  </header>
  <main>
    <section>
      <!-- 首頁標語 -->
      <div class="pb-row">
        <div class="col-phone-100">
          <div class="index-cover">
            <div class="index-container">
              <h1 class="_title">進度條線上課程範例</h1>
              <div>
                <a href="https://progressbar.tw/users/sign_in" target="_pb">
                  <button type="button" class="btn btn_light">
                    登入
                  </button>
                </a>
                <a href="https://progressbar.tw/users/sign_up" target="_pb">
                  <button type="button" class="btn btn_dark">
                    註冊
                  </button>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section>
      <!-- cards -->
      <div class="pb-container">
        <div class="pb-row">
          <div class="col-phone-100 col-tablet-50">
            <div class="card">
              <div class="_image">
                <div class="ratio_3_2">
                  <img class="ratio_content" src="/imgs/large-card1.jpg">
                </div>
              </div>
              <div class="_content">
                <a class="_link" href="https://progressbar.tw/courses/3" target="_pb">
                  <h4 class="_title">
                    快速開發，從頭教起的Ruby on Rails後端之旅
                  </h4>
                </a>
                <p class="_detail">
                  Ruby on
                  rails是一個適合快速開發網站的後端程式架構，Airbnb、Github、Twitter等大型新創公司都是靠它起家。它也長年佔據高年薪程式語言的前面名次。本課程從頭教起，讓你了解快速開發可以為你省下多少的人生！
                </p>
              </div>
              <div class="_action">
                <div class="_action_content">
                  <a class="_link" href="https://progressbar.tw/courses/3" target="_pb">
                    <button class="btn" type="button">
                      閱讀更多
                    </button>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-phone-100 col-tablet-50">
            <div class="card">
              <div class="_image">
                <div class="ratio_3_2">
                  <img class="ratio_content" src="/imgs/large-card2.jpg">
                </div>
              </div>
              <div class="_content">
                <a class="_link" href="https://progressbar.tw/courses/1" target="_pb">
                  <h4 class="_title">
                    行動第一! 使用Bootstrap建立響應式網站!
                  </h4>
                </a>
                <p class="_detail">
                  羨慕別人也有響應式的網站嗎？你知道一般人超過60%以上的上網時間都是在手機上嗎? 利用Bootstrap
                  可以讓您快速的完成響應式的網站。本課程更進一步的教您如何客製化Bootstrap，讓您的網站不會永遠像是樣品!
                </p>
              </div>
              <div class="_action">
                <div class="_action_content">
                  <a class="_link" href="https://progressbar.tw/courses/1" target="_pb">
                    <button class="btn" type="button">
                      閱讀更多
                    </button>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section>
      <!-- video player -->
      <div class="pb-container">
        <div class="pb-row">
          <div class="col-phone-100 col-tablet-67">
            <div class="video-player">
              <div class="ratio_16_9">
                <iframe id="video_player" class="ratio_content" src="https://www.youtube.com/embed/-TDjWe5xZ0w"
                  frameborder="0" allowfullscreen></iframe>
              </div>
            </div>
          </div>
          <div class="col-phone-100 col-tablet-33">
            <div class="video-list-container mdl-shadow--2dp">
              <div class="ratio_8_9">
                <ul class="ratio_content video-list">
                  <li class="_video" data-video="Enw2PhRe3Bg">
                      JavaScript ES6 與 React 課程介紹
                  </li>
                  <li class="_video" data-video="HJwt0fnadUg">
                      [WordPress] 接案最方便的網站課程介紹
                  </li>
                  <li class="_video" data-video="RUZ7gCo7gws">
                      Linux雲端伺服器，用AWS暸解Apache與Nginx
                  </li>
                  <li class="_video" data-video="IVWkKn_8GiQ">
                      [Ruby On Rails] 新創公司最愛的後台網站框架課程介紹
                  </li>
                  <li class="_video" data-video="XN031PuViqI">
                    [Bootstrap 3] 安裝與開始使用Bootstrap 3
                  </li>
                  <li class="_video" data-video="-TDjWe5xZ0w">
                    [Git][免費空間] 將靜態網頁放上Github Page(也就是現在的網站)
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="remove_padding">
      <!-- image links -->
      <div class="pb-container">
        <div class="pb-row">
          <div class="col-phone-100 col-tablet-50 col-desktop-25">
            <a href="https://progressbar.tw">
              <div class="ratio_3_2">
                <img class="ratio_content" src="/imgs/small-card1.jpg">
              </div>
            </a>
          </div>
          <div class="col-phone-100 col-tablet-50 col-desktop-25">
            <a href="https://progressbar.tw">
              <div class="ratio_3_2">
                <img class="ratio_content" src="/imgs/small-card2.jpg">
              </div>
            </a>
          </div>
          <div class="col-phone-100 col-tablet-50 col-desktop-25 hidden-on-phone">
            <a href="https://progressbar.tw">
              <div class="ratio_3_2">
                <img class="ratio_content" src="/imgs/small-card3.jpg">
              </div>
            </a>
          </div>
          <div class="col-phone-100 col-tablet-50 col-desktop-25 hidden-on-phone">
            <a href="https://progressbar.tw">
              <div class="ratio_3_2">
                <img class="ratio_content" src="/imgs/small-card4.jpg">
              </div>
            </a>
          </div>
        </div>
      </div>
    </section>
  </main>
  <footer>
    <div class="pb-container">
      <div class="pb-row">
        <div class="col-phone-100 col-tablet-33">
          <div class="_container">
            <ul class="footer-links">
              <li>link 1</li>
              <li>link 1</li>
              <li>link 1</li>
            </ul>
          </div>
        </div>
        <div class="col-phone-100 col-tablet-33">
          <div class="_container">
            <ul class="footer-links">
              <li>link 1</li>
              <li>link 1</li>
              <li>link 1</li>
            </ul>
          </div>
        </div>
        <div class="col-phone-100 col-tablet-33">
          <div class="_container _center">
            <div class="pb-row">
              <div class="col-phone-100 col-phone-33">
                <a href="https://www.facebook.com/ProgressBarTW" target="_facebook">
                  <i class="fa fa-facebook-official" aria-hidden="true"></i>
                </a>
              </div>
              <div class="col-phone-100 col-phone-33">
                <a href="https://progressbar.tw/courses/2" target="_pb">
                  <i class="fa fa-television" aria-hidden="true"></i>
                </a>
              </div>
              <div class="col-phone-100 col-phone-33">
                <a href="https://www.youtube.com/playlist?list=PL2SrkGHjnWcwfkYtccRowRAxWE6TakOjC" target="_youtube">
                  <i class="fa fa-youtube" aria-hidden="true"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <script>
    $(function () {
      /* video player init*/
      $("._video").click(function () {
        var video = $(this).data("video");
        var url = "https://www.youtube.com/embed/" + video;
        $("#video_player").attr('src', url);
      })

      /* nav init*/
      $(".nav-button").click(function () {
        $(".nav-list").slideToggle(400);
      })
    })
  </script>
</body>

</html>