-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsp-5.html
179 lines (179 loc) · 7.46 KB
/
sp-5.html
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
<!DOCTYPE html>
<html>
<head>
<meta name="robots" content="noindex" />
<!-- 使用 noindex 禁止 Google 搜尋建立索引，套版時請工程師刪掉這行 -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>取消訂閱原因</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/style.css" />
<!-- favicon -->
<link href="images/favicon.ico" rel="icon" type="image/x-icon">
</head>
<body>
<!-- mask 1 -->
<!-- <section id="mask">
<div class="container">
<h3>手機號碼已被註冊</h3>
<p>此手機號碼已註冊成為郵政會員，是否要立即進行登入？</p>
<div class="btnGrp">
<button class="btn _second">返回</button>
<button class="btn _primary">下一步</button>
</div>
<div class="btnGrp _full">
<button class="btn _primary">前往連結</button>
<button class="btn _second">以訪客身份使用</button>
</div>
<button class="btnClose">關閉</button>
</div>
</section> -->
<!-- mask 2 -->
<section id="mask_below" class="_hide">
<div class="container">
<h3>標題</h3>
<p>請閱讀完條款內容，方可點擊同意按鈕</p>
<div class="scrollCover">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae modi animi fugit laborum quidem aperiam eum pariatur, ducimus sequi perspiciatis ad odio, maxime recusandae distinctio sapiente ut natus rem beatae.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae modi animi fugit laborum quidem aperiam eum pariatur, ducimus sequi perspiciatis ad odio, maxime recusandae distinctio sapiente ut natus rem beatae.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae modi animi fugit laborum quidem aperiam eum pariatur, ducimus sequi perspiciatis ad odio, maxime recusandae distinctio sapiente ut natus rem beatae.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae modi animi fugit laborum quidem aperiam eum pariatur, ducimus sequi perspiciatis ad odio, maxime recusandae distinctio sapiente ut natus rem beatae.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae modi animi fugit laborum quidem aperiam eum pariatur, ducimus sequi perspiciatis ad odio, maxime recusandae distinctio sapiente ut natus rem beatae.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae modi animi fugit laborum quidem aperiam eum pariatur, ducimus sequi perspiciatis ad odio, maxime recusandae distinctio sapiente ut natus rem beatae.
<ol>
<li>有序清單</li>
<li>有序清單</li>
<li>有序清單</li>
<li>有序清單</li>
<li>有序清單</li>
</ol>
<ul>
<li>無序清單</li>
<li>無序清單</li>
<li>無序清單</li>
<li>無序清單</li>
<li>無序清單</li>
</ul>
</div>
<button class="btnToEnd">滑動頁面詳閱告知內容</button>
</div>
<div class="btnGrp _full">
<button class="btn _primary _openMask _disable">同意條款</button>
</div>
<button class="btnClose">關閉</button>
</div>
</section>
<header>
<div class="container">
<a href="#"><h1>中華郵政會員資訊網</h1></a>
<button type="button" class="sidebarCtrl">側欄選單<span></span><span></span><span></span></button>
<nav>
<a href="#" class="lang">English</a>
<div class="menu">
<a href="#">郵政會員</a>
<a href="#">最新消息</a>
<a href="#">常見問題</a>
<a href="#">下載行動郵局</a>
</div>
</nav>
</div>
</header>
<!-- 內容 -->
<div class="main">
<div class="container">
<div class="centerLimit">
<h3>請告訴我們您刪除的原因</h3>
<p>您寶貴的意見是我們持續改善的動力</p>
<!-- 功能卡 -->
<section class="functions">
<!-- 樣式一 -->
<!-- 樣式二 -->
<div class="listCard">
<div class="state">
<input type="checkbox">
</div>
<div class="itemName">
<p>取消原因1</p>
</div>
</div>
<div class="listCard">
<div class="state">
<input type="checkbox">
</div>
<div class="itemName">
<p>取消原因2</p>
</div>
</div>
<div class="listCard">
<div class="state">
<input type="checkbox">
</div>
<div class="itemName">
<p>取消原因3</p>
</div>
</div>
</section>
<!-- 按鈕組合 -->
<!-- <div class="btnGrp">
<button class="btn _second">下次再說</button>
<button class="btn _primary">立即升級</button>
</div> -->
<!-- <div class="btnGrp">
<button class="btn _primary">主要按鈕</button>
<button class="btn _second">次要按鈕</button>
<button class="btn">一般按鈕</button>
</div> -->
<!-- disable -->
<!-- <div class="btnGrp">
<button class="btn _primary _disable">主要按鈕 disable</button>
<button class="btn _second _disable">次要按鈕 disable</button>
<button class="btn _disable">一般按鈕 disable</button>
</div> -->
<div class="btnGrp _full">
<button class="btn _primary">下一步</button>
<button class="btn _second">取消</button>
<!-- <button class="btn">一般按鈕</button> -->
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="flex">
<div class="f_links">
<a href="#">中華郵政全球資訊網</a>
<a href="#">常見問題</a>
<a href="#">隱私權與各項條款</a>
</div>
<section class="f_info">
<div class="col">
<h3 class="f_logo"><img src="images/logo-footer.png" alt=""></h3>
<p>地址：臺北市大安區金山南路2段55號<br>客服電話：(02) 2321-4311、(02)2392-1310</p>
</div>
<div class="col">
<h3>下載行動郵局 App</h3>
<div class="f_icons">
<img src="images/QRcode.jpg" alt="QRcode">
<div>
<a href="#"><img src="images/img-AppStore.png" alt="AppStore"></a>
<a href="#"><img src="images/img-GooglePlay.png" alt="GooglePlay"></a>
</div>
</div>
</div>
</section>
</div>
<p class="Copyright">中華郵政 版權所有 © 2013 Chunghwa Post All Rights Reserved. </p>
</div>
</footer>
<a href="javascript:;" class="scrollToTop">回頁首</a>
<!-- js -->
<script src="js/customize.js"></script>
</body>
</html>