HTML-final-work/index.html at master · tim8076/HTML-final-work · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>六角學院</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="wrap">
        <ul class="social-links">
            <li>
                <img src="images/facebookIcon.png" alt="facebook">
                <a href="#" class="facebook">粉絲團</a>
            </li>
            <li>
                <img src="images/twitterIcon.png" alt="twitter">
                <a href="#" class="twitter">追隨我們</a>
            </li>
        </ul>
        <div class="menu">
            <h2>
                <a href="#" class="logo">Hex School</a>
            </h2>
            <ul class="menu-list">
                <li ><a href="#" >首頁</a></li>
                <li>
                    <a href="#">課程介紹</a>
                    <ul class="sub-menu">
                        <li><a href="#">HTML 課程</a></li>
                        <li><a href="#">RWD 響應式設計</a></li>
                        <li><a href="#">JQuery 應用</a></li>
                        <li><a href="#">JS 學徒試煉</a></li>
                        <li><a href="#">JS 核心篇</a></li>
                    </ul>
                </li>
                <li><a href="#">聯絡我們</a></li>
            </ul>
        </div>
        <div class="jumbotron">
            <img src="images/banner.png" alt="banner">
            <div class="title">
                <h1>六角學院<br>讓您奠定良好的前端基礎</h1>
            </div>
        </div>
        <ul class="course-cards">
            <li>
                <div class="img">
                    <img src="images/html.png" alt="html5 基礎教學">
                </div>
                <div class="txt">
                    <h3>Html 5基礎教學</h3>
                    <p>有能力排出具專業、語意化、美觀的網頁設計
                    課程結束後，我們會提供給你一個完整的網頁設計稿，當你實作出網頁來後再轉交六角學院的講師們。
                    </p>
                </div>
            </li>
            <li>
                <div class="img">
                    <img src="images/rwd.png" alt="響應式網站設計">
                </div>
                <div class="txt">
                    <h3>響應式網站設計</h3>
                    <p>對於教學只有程式碼是不足夠的，在重要的觀念傳達部分，
                       我們製作大量的說明動畫來介紹，在了解原理後再看難以理解的程式碼。
                    </p>
                </div>
            </li>
            <li>
                <div class="img">
                    <img src="images/jQuery.png" alt="jquery 實戰教學">
                </div>
                <div class="txt">
                    <h3>jquery 實戰教學</h3>
                    <p>能夠掌握如何在網頁上設計互動性網頁動畫效果
                    有辦法輕易整合別人寫好的第三方動畫插件，並套用在自己的網頁上
                    </p>
                </div>
            </li>
        </ul>
        <div class="comparison">
            <h3>線上及實體課程差異</h3>
            <table>
                <tr>
                    <th>項目</th>
                    <th>Hex School線上課程</th>
                    <th>一般線上課程</th>
                    <th>實體課程</th>
                </tr>
                <tr>
                    <td>費用</td>
                    <td class="green">較低</td>
                    <td class="green">較低</td>
                    <td>較高</td>
                </tr>
                <tr>
                    <td>學習效果</td>
                    <td>一般</td>
                    <td class="green">較低</td>
                    <td class="green">很好</td>
                </tr>
                <tr>
                    <td>Code review</td>
                    <td class="green">有</td>
                    <td>無</td>
                    <td>不一定</td>
                </tr>
                <tr>
                    <td>課程更新速度</td>
                    <td class="green">普通</td>
                    <td class="green">普通</td>
                    <td>較慢</td>
                </tr>
                <tr>
                    <td >多次複習</td>
                    <td class="green">可</td>
                    <td>可</td>
                    <td>不可</td>
                </tr>
                <tr>
                    <td >字幕</td>
                    <td class="green">有</td>
                    <td>不一定</td>
                    <td>板書</td>
                </tr>
            </table>
        </div>
        <div class="form">
            <h2>對我們的課程有興趣嗎?<br>歡迎留下您的資料</h2>
            <form action="index.html">
              <textarea name="info"  cols="30" rows="10" class="text-area"></textarea>
              <div class="contact">
                  <label for="name">姓名</label>
                  <input type="text" id="name" name="name">
                  <label for="tel">電話</label>
                  <input type="tel" id="tel" name="tel">
                  <label for="email">信箱</label>
                  <input type="email" id="email" name="email">
                  <input type="submit" value="送出">
              </div>
            </form>
        </div>
        <div class="footer">
            <img src="images/footerLogo.png" alt="footerLogo">
            <div class="info">
                <p>聯絡我們: <span>hexschool@gmail.com</span></p>
                <p>電話: <span>0999123456</span></p>
            </div>
        </div>
    </div>


</body>
</html>