-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtest03.html
More file actions
155 lines (144 loc) · 6.79 KB
/
Copy pathtest03.html
File metadata and controls
155 lines (144 loc) · 6.79 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>欄與列搭配斷點</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style>
:root {
--mycolor01: beige;
--mycolor02: #B63D32;
--mycolor03: #FFC90E;
--mycolor04: #71552A;
--mycolor05: #F4F4ED;
--mycolor06: #B63D32;
--mycolor07: #FFE634;
--myblack: #0b0b0b;
--mywhite: #fefaf9;
}
.box {
height: 180px;
border: 3px solid var(--mycolor03);
background-color: var(--mycolor06);
text-align: center;
line-height: 180px;
}
.box01 {
height: 180px;
border: 5px solid var(--mycolor05);
background-color: var(--mycolor01);
text-align: center;
line-height: 180px;
font-size: 26px;
font-weight: bolder;
}
.box03 {
border: 2px solid var(--mycolor04);
padding: 10px;
}
@media screen and (min-width: 992px) {
body{
background-color: var(--mycolor02);
}
.box01 {
background-color: var(--mycolor04);
width: 180px;
border-radius: 50%;
margin: 0 auto;
}
.box01:hover {
background-color: var(--mycolor03);
color: var(--mycolor06);
}
}
@media screen and (min-width: 1200px) {
.box01 {
background-color: var(--mycolor03);
}
.box01:hover {
background-color: var(--mycolor04);
}
}
</style>
</head>
<body class="bg-light">
<div class="container-lg">
<div class="row">
<div class="col-12 mt-2 d-none d-sm-block">
<img src="https://fakeimg.pl/1400x300/fa0" class="img-fluid">
</div>
</div>
<div class="row text-center">
<div class="col-sm-6 col-md-3 mt-3">
<div class="box01 bg-info">選單01</div>
</div>
<div class="col-sm-6 col-md-3 mt-3">
<div class="box01">選單02</div>
</div>
<div class="col-sm-6 col-md-3 mt-3">
<div class="box01">選單03</div>
</div>
<div class="col-sm-6 col-md-3 mt-3">
<div class="box01">選單04</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 mt-3">
<div class="box03">
<img src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="img-fluid" alt="">
<h4 class="mt-3">景點介紹001</h4>
<p>指出等級簽名一路，更是眾多別的樣子將會高手課堂教學運行我們，思維阿摩斯並沒有，告訴你老師，手機鈴聲。</p>
</div>
</div>
<div class="col-md-6 col-lg-4 mt-3">
<div class="box03">
<img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="img-fluid" alt="">
<h4 class="mt-3">景點介紹002</h4>
<p>指出等級簽名一路，更是眾多別的樣子將會高手課堂教學運行我們，思維阿摩斯並沒有，告訴你老師，手機鈴聲。</p>
</div>
</div>
<div class="col-md-6 col-lg-4 mt-3">
<div class="box03">
<img src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="img-fluid" alt="">
<h4 class="mt-3">景點介紹003</h4>
<p>指出等級簽名一路，更是眾多別的樣子將會高手課堂教學運行我們，思維阿摩斯並沒有，告訴你老師，手機鈴聲。</p>
</div>
</div>
<div class="col-md-6 col-lg-4 mt-3">
<div class="box03">
<img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="img-fluid" alt="">
<h4 class="mt-3">景點介紹004</h4>
<p>指出等級簽名一路，更是眾多別的樣子將會高手課堂教學運行我們，思維阿摩斯並沒有，告訴你老師，手機鈴聲。</p>
</div>
</div>
<div class="col-md-6 col-lg-4 mt-3">
<div class="box03">
<img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="img-fluid" alt="">
<h4 class="mt-3">景點介紹006</h4>
<p>指出等級簽名一路，更是眾多別的樣子將會高手課堂教學運行我們，思維阿摩斯並沒有，告訴你老師，手機鈴聲。</p>
</div>
</div>
<div class="col-md-6 col-lg-4 mt-3">
<div class="box03">
<img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="img-fluid" alt="">
<h4 class="mt-3">景點介紹006</h4>
<p>指出等級簽名一路，更是眾多別的樣子將會高手課堂教學運行我們，思維阿摩斯並沒有，告訴你老師，手機鈴聲。</p>
</div>
</div>
</div>
<div class="row my-3">
<div class="col-12 mt-2 d-none d-md-block">
<img src="https://fakeimg.pl/1400x120/aaa/?text=footer" class="img-fluid">
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
</body>
</html>