-
Notifications
You must be signed in to change notification settings - Fork 0
/
story6.html
147 lines (142 loc) · 7.38 KB
/
story6.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
<!DOCTYPE html>
<html lang="zh-TW">
<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 -->
<link rel="stylesheet" href="./stylesheets/all.css">
<!-- icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<!-- noto sans -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kalam:wght@700&family=Noto+Sans+TC&display=swap"
rel="stylesheet">
</head>
<body>
<!-- nav -->
<nav class="navbar navbar-expand-lg navbar-light bg-white py-lg-3 sticky-lg-top">
<div class="container">
<h1 class="mb-0"><a class="navbar-brand logo" href="index.html">撿到寶</a></h1>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav text-center ms-lg-auto mb-2 mb-lg-0">
<li class="nav-item mx-3">
<a class="nav-link" aria-current="page" href="index.html">首頁</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="service2.html">服務介紹</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="artworks3.html">設計作品</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="adoption4.html">領養專區</a>
</li>
<li class="nav-item mx-3">
<a class="btn btn-primary px-3 px-lg-5 nav-btn" href="contact5.html">毛孩似顏繪</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 上方黃線 -->
<div class="d-block d-lg-none border-top border-primary border-3"></div>
<!-- main -->
<main class="py-5">
<!-- 領養專區 -->
<section class="container my-5 overflow-hidden">
<div class="col-5 col-lg-4 mx-auto text-center mb-4">
<img class="img-fluid"
src="https://drive.google.com/uc?export=view&id=1dTNyxZ95G7oQpB4sTn9u7p85xxnULw-C" alt="領養專區">
</div>
<div class="row g-3 g-lg-4 mb-4 mb-lg-5 font-noto">
<div class="col-12 col-lg-8">
<div class="col card rounded-img">
<div class="card-body lh-lg">
<h4 class="card-title fw-bold my-4">等家中-snow</h4>
<div class="row g-3 g-lg-4 mb-4 mb-lg-5">
<div class="col col-lg-4">
品種｜哈士奇<br>
性別｜公<br>
體型｜大型
</div>
<div class="col col-lg-8">
年紀｜2個月<br>
結紮｜已結紮<br>
狂犬病疫苗｜已施打
</div>
</div>
<p>
看起來很兇但特別怕打雷的Snow，很喜歡吃冰，冰冰的水也喜歡，如果摸他的額頭會發出很像貓的叫聲，相當有活力，不適合關籠會發出像獅子的叫聲。
<br>如果照片看起來像你家人，歡迎帶回家一家團圓！
</p>
</div>
<div class="card-body px-3 px-lg-4">
<img src="https://drive.google.com/uc?export=view&id=1PxGgWHtYghNeDLyRdWZNZ6FrobnzfIDt"
class="img-fluid rounded-img mb-4" alt="snow">
</div>
</div>
</div>
<div class="co-12 col-lg-4">
<div class="col card rounded-img">
<img src="https://drive.google.com/uc?export=view&id=1d3kerH0VW5fGnJiKE1CWDNL9hVQFxBos"
class="card-img-top rounded-img-top mb-4" alt="snow">
<div class="card-body lh-lg mb-4">
<h6>收容所</h6>
<p class="fw-bold mb-4">高雄浪流連途之家</p>
<h6>電話</h6>
<p class="fw-bold mb-4">07-123999</p>
<h6>地址</h6>
<p class="fw-bold mb-4">高雄市三民區河中三路123號</p>
<a class="btn btn-primary d-block mx-3">前往中途之家</a>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- 下方黃線 -->
<div class="d-block border-top border-primary border-3"></div>
<!-- footer -->
<footer>
<div class="container my-5 text-center text-lg-start">
<div class="row row-cols-1 row-cols-lg-6 align-items-center g-4">
<div class="d-none d-lg-block col"></div>
<div class="col">
<img class="img-fluid"
src="https://drive.google.com/uc?export=view&id=1bjzbxxMg-8qczNXLv88d7g5HAEvrFscP" alt="聯絡我們">
</div>
<div class="col mb-3">
<h4>加入奴才團隊</h4>
<p>我也會畫畫，希望能盡一份心力！</p>
<a class="btn btn-outline-primary px-3 px-xl-5" href="./contact5.html">聯絡我們</a>
</div>
<div class="col">
<img class="img-fluid"
src="https://drive.google.com/uc?export=view&id=1lM8Gq-HlCkoiTp0Tws0RdilUqxEdOESw" alt="領養專區">
</div>
<div class="col mb-3">
<h4>加入奴才團隊</h4>
<p>我也會畫畫，希望能盡一份心力！</p>
<a class="btn btn-outline-primary px-3 px-xl-5" href="./adoption4.html">領養專區</a>
</div>
<div class="d-none d-lg-block col"></div>
</div>
</div>
<div class="bg-dark p-4 text-center">
<p class="text-white mb-0 font-noto">Copyright © 2021 撿到寶.All rights reserved.</p>
</div>
</footer>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"></script>
</body>
</html>