-
Notifications
You must be signed in to change notification settings - Fork 0
/
20231214-2.html
159 lines (150 loc) · 6.46 KB
/
20231214-2.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
<!-- 另一個主頁面的練習 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ch6 切版練習</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/myall.css">
<style>
.box01 {
height: 200px;
background-image: url(images/star01.jpg);
}
.box02 {
height: 180px;
margin-top: 5px;
line-height: 180px;
background-color: var(--mycolor01);
color: var(--textcolor04);
}
.box03{
border: 2px solid var(--mycolor05);
padding: 10px;
border-radius: 10px;
box-shadow: 2px 2px 5px 5px var(--mycolor05);
}
.box03 .h4{
margin-top: 15px;
margin-bottom: 15px;
}
@media screen and (max-width: 768px){
.box02{
height: 100px;
line-height: 100px;
}
}
@media screen and (min-width: 992px) {
.box02 {
width: 220px;
height: 220px;
border-radius: 50%;
line-height: 220px;
background-color: var(--mycolor05);
margin-top: 15px;
margin-bottom: 15px;
}
.box02:hover {
background-color: var(--mycolor02);
color: var(--textcolor02);
}
}
@media screen and (min-width: 1200px) {
.box02 {
width: 260px;
height: 260px;
line-height: 260px;
background-color: var(--mycolor02);
margin-top: 25px;
margin-bottom: 25px;
}
.box02:hover {
background-color: var(--textcolor02);
color: var(--mycolor01);
}
}
</style>
</head>
<body>
<div class="container-lg">
<div class="row">
<div class="col-12 d-none d-sm-block">
<div class="box01 bg-info bg-cover"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="box02 h1 fw-900 text-center bg-success">
選單01
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="box02 h1 fw-900 text-center">
選單02
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="box02 h1 fw-900 text-center">
選單03
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="box02 h1 fw-900 text-center">
選單04
</div>
</div>
</div>
<div class="row g-3">
<div class="col-md-6 col-lg-4">
<div class="box03 text-center">
<img src="images/party007.jpg" class="img-fluid" alt="">
<div class="h4 fw-900">旅遊景點介紹001</div>
<p>的確每年移動機械參與只有四周表演小心給他十大也就早已，風情不但學科開發流行門派民眾，機械改造圖形統計高校導演，唱片新型女朋友怎樣支付運動怎樣共有高達果然同志請。</p>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="box03 text-center">
<img src="images/party001.jpg" class="img-fluid" alt="">
<div class="h4 fw-900">旅遊景點介紹001</div>
<p>的確每年移動機械參與只有四周表演小心給他十大也就早已，風情不但學科開發流行門派民眾，機械改造圖形統計高校導演，唱片新型女朋友怎樣支付運動怎樣共有高達果然同志請。</p>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="box03 text-center">
<img src="images/party002.jpg" class="img-fluid" alt="">
<div class="h4 fw-900">旅遊景點介紹001</div>
<p>的確每年移動機械參與只有四周表演小心給他十大也就早已，風情不但學科開發流行門派民眾，機械改造圖形統計高校導演，唱片新型女朋友怎樣支付運動怎樣共有高達果然同志請。</p>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="box03 text-center">
<img src="images/party008.jpg" class="img-fluid" alt="">
<div class="h4 fw-900">旅遊景點介紹001</div>
<p>的確每年移動機械參與只有四周表演小心給他十大也就早已，風情不但學科開發流行門派民眾，機械改造圖形統計高校導演，唱片新型女朋友怎樣支付運動怎樣共有高達果然同志請。</p>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="box03 text-center">
<img src="images/party007.jpg" class="img-fluid" alt="">
<div class="h4 fw-900">旅遊景點介紹001</div>
<p>的確每年移動機械參與只有四周表演小心給他十大也就早已，風情不但學科開發流行門派民眾，機械改造圖形統計高校導演，唱片新型女朋友怎樣支付運動怎樣共有高達果然同志請。</p>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="box03 text-center">
<img src="images/party009.jpg" class="img-fluid" alt="">
<div class="h4 fw-900">旅遊景點介紹001</div>
<p>的確每年移動機械參與只有四周表演小心給他十大也就早已，風情不但學科開發流行門派民眾，機械改造圖形統計高校導演，唱片新型女朋友怎樣支付運動怎樣共有高達果然同志請。</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 mt-3 d-none d-md-block">
<img src="https://fakeimg.pl/1400x150/200" class="img-fluid">
</div>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>