Skip to content

Commit d1783f6

Browse files
shps951023shps951023
committed
Refactor payment section layout and styles in index.html and site.css
1 parent 2ac2b8d commit d1783f6

2 files changed

Lines changed: 116 additions & 52 deletions

File tree

‎index.html‎

Lines changed: 55 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
<body class="text-center">
1111

12-
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
12+
<div class="cover-container d-flex p-3 mx-auto flex-column">
1313

1414
<header class="masthead mb-auto">
1515
<div class="inner">
@@ -32,50 +32,60 @@ <h1 id='code'></h1>
3232
<hr> -->
3333
</div>
3434

35-
<div>
36-
<h1 class="cover-heading">微信/支付宝</h1>
37-
<a href="https://user-images.githubusercontent.com/12729184/158003727-ca348041-5e59-44bc-a694-f400777e0252.jpg">
38-
<img
39-
src="https://user-images.githubusercontent.com/12729184/158003727-ca348041-5e59-44bc-a694-f400777e0252.jpg"
40-
alt="wechat" width="200px" height="300px">
41-
</a>
42-
<a href="https://user-images.githubusercontent.com/12729184/158003731-6d132872-19c3-4840-b1af-97aa22f9bf4b.jpg">
43-
<img
44-
src="https://user-images.githubusercontent.com/12729184/158003731-6d132872-19c3-4840-b1af-97aa22f9bf4b.jpg"
45-
alt="alipay" width="200px" height="300px">
46-
</a>
47-
<hr>
48-
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
49-
<input type="hidden" name="cmd" value="_s-xclick">
50-
<input type="hidden" name="hosted_button_id" value="XF7U44UHSW9F6">
51-
<input type="hidden" name="on0" value="Plan">
52-
<h1>PayPal</h1>
53-
<select name="os0" class="form-control">
54-
<option value="Plan1">Plan1 $5.00 USD</option>
55-
<option value="Plan2">Plan2 $15.00 USD</option>
56-
<option value="Plan3">Plan3 $25.00 USD</option>
57-
<option value="Plan4">Plan4 $35.00 USD</option>
58-
<option value="Plan5">Plan5 $45.00 USD</option>
59-
</select>
60-
<br>
61-
<input type="hidden" name="currency_code" value="USD">
62-
<input type="submit" class="btn btn-success" border="0" name="submit" alt="PayPal" value="Buy">
63-
<img alt="" border="0" src="https://www.paypalobjects.com/zh_TW/i/scr/pixel.gif" width="1" height="1">
64-
</form>
65-
<hr>
66-
<!-- 绿界 -->
67-
<h1 class="cover-heading">绿界科技ECPay</h1>
68-
<p class="lead">
69-
<a href="https://p.ecpay.com.tw/693B4A0"><img src="https://payment.ecpay.com.tw/Content/themes/WebStyle20170517/images/ecgo.png" /></a>
70-
</p>
71-
<hr>
72-
<!-- YuShan -->
73-
<h1 class="cover-heading">E.SUN Bank 玉山銀行</h1>
74-
<p class="lead">
75-
Bank Code 銀行代號 808<br>
76-
Account 賬號 705979061551
77-
</p>
78-
<hr>
35+
<div class="payment-grid">
36+
37+
<div class="payment-card" style="
38+
margin-top: 10px;
39+
">
40+
<h2 class="payment-title">PayPal</h2>
41+
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
42+
<input type="hidden" name="cmd" value="_s-xclick">
43+
<input type="hidden" name="hosted_button_id" value="XF7U44UHSW9F6">
44+
<input type="hidden" name="on0" value="Plan">
45+
<select name="os0" class="form-control">
46+
<option value="Plan1">Plan1 $5.00 USD</option>
47+
<option value="Plan2">Plan2 $15.00 USD</option>
48+
<option value="Plan3">Plan3 $25.00 USD</option>
49+
<option value="Plan4">Plan4 $35.00 USD</option>
50+
<option value="Plan5">Plan5 $45.00 USD</option>
51+
</select>
52+
<br>
53+
<input type="hidden" name="currency_code" value="USD">
54+
<input type="submit" class="btn btn-success" border="0" name="submit" alt="PayPal" value="Buy">
55+
<img alt="" border="0" src="https://www.paypalobjects.com/zh_TW/i/scr/pixel.gif" width="1" height="1">
56+
</form>
57+
</div>
58+
59+
<div class="payment-card">
60+
<h2 class="payment-title">微信 / 支付宝</h2>
61+
<div class="qr-group">
62+
<a href="https://user-images.githubusercontent.com/12729184/158003727-ca348041-5e59-44bc-a694-f400777e0252.jpg">
63+
<img
64+
src="https://user-images.githubusercontent.com/12729184/158003727-ca348041-5e59-44bc-a694-f400777e0252.jpg"
65+
alt="wechat" width="180px" height="270px">
66+
</a>
67+
<a href="https://user-images.githubusercontent.com/12729184/158003731-6d132872-19c3-4840-b1af-97aa22f9bf4b.jpg">
68+
<img
69+
src="https://user-images.githubusercontent.com/12729184/158003731-6d132872-19c3-4840-b1af-97aa22f9bf4b.jpg"
70+
alt="alipay" width="180px" height="270px">
71+
</a>
72+
</div>
73+
</div>
74+
75+
<div class="payment-card">
76+
<h2 class="payment-title">绿界科技 ECPay</h2>
77+
<p class="lead">
78+
<a href="https://p.ecpay.com.tw/693B4A0"><img src="https://payment.ecpay.com.tw/Content/themes/WebStyle20170517/images/ecgo.png" /></a>
79+
</p>
80+
</div>
81+
82+
<div class="payment-card">
83+
<h2 class="payment-title">E.SUN Bank 玉山銀行</h2>
84+
<p class="lead">
85+
Bank Code 銀行代號 808<br>
86+
Account 帳號 705979061551
87+
</p>
88+
</div>
7989

8090
</div>
8191
</main>

‎site.css‎

Lines changed: 61 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ a:hover {
4343

4444
html,
4545
body {
46-
height: 100%;
46+
min-height: 100%;
4747
background-color: #333;
4848
}
4949

@@ -61,6 +61,7 @@ body {
6161

6262
.cover-container {
6363
max-width: 42em;
64+
min-height: 100vh;
6465
}
6566

6667

@@ -76,25 +77,28 @@ body {
7677
}
7778

7879
.nav-masthead .nav-link {
79-
padding: .25rem 0;
80+
padding: .25rem .75rem;
8081
font-weight: 700;
81-
color: rgba(255, 255, 255, .5);
82+
color: rgba(255, 255, 255, .7);
8283
background-color: transparent;
83-
border-bottom: .25rem solid transparent;
84+
border: 1px solid rgba(255, 255, 255, .3);
85+
border-radius: 4px;
86+
text-decoration: none;
8487
}
8588

8689
.nav-masthead .nav-link:hover,
8790
.nav-masthead .nav-link:focus {
88-
border-bottom-color: rgba(255, 255, 255, .25);
91+
color: #fff;
92+
border-color: rgba(255, 255, 255, .6);
8993
}
9094

9195
.nav-masthead .nav-link + .nav-link {
92-
margin-left: 1rem;
96+
margin-left: .5rem;
9397
}
9498

9599
.nav-masthead .active {
96100
color: #fff;
97-
border-bottom-color: #fff;
101+
border-color: #fff;
98102
}
99103

100104
@media (min-width: 48em) {
@@ -119,6 +123,56 @@ body {
119123
}
120124

121125

126+
/*
127+
* Payment grid
128+
*/
129+
.payment-grid {
130+
display: flex;
131+
flex-direction: column;
132+
gap: 1.5rem;
133+
}
134+
135+
.payment-card {
136+
background: rgba(255, 255, 255, .07);
137+
border: 1px solid rgba(255, 255, 255, .12);
138+
border-radius: 12px;
139+
padding: 2rem 1.5rem;
140+
transition: background .2s;
141+
}
142+
143+
.payment-card:hover {
144+
background: rgba(255, 255, 255, .1);
145+
}
146+
147+
.payment-title {
148+
margin-top: 0;
149+
margin-bottom: 1rem;
150+
font-size: 1.6rem;
151+
font-weight: 700;
152+
letter-spacing: .03em;
153+
}
154+
155+
.qr-group {
156+
display: flex;
157+
justify-content: center;
158+
gap: 1rem;
159+
flex-wrap: wrap;
160+
}
161+
162+
.qr-group img {
163+
border-radius: 6px;
164+
}
165+
166+
.payment-card .form-control {
167+
max-width: 320px;
168+
margin: 0 auto;
169+
}
170+
171+
.payment-card .btn-success {
172+
margin-top: .5rem;
173+
}
174+
175+
122176
/*
123177
* Footer
124178
*/

0 commit comments

Comments
 (0)