-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
221 lines (215 loc) · 9.86 KB
/
index.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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!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" />
<link rel="stylesheet" href="stylesheets/all.css" />
<title>吳溫尼 WinnieWu</title>
</head>
<body>
<header class="vh-100 position-relative mb-5">
<div
class="deco-box position-absolute bg-primary top-0 start-0"></div>
<div
class="deco-box position-absolute bg-primary end-0 bottom-0"></div>
<div
class="bg-dark position-absolute bg-position-center bg-size-cover bg-attachment-fixed"
style="
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
background-image: url('https://images.unsplash.com/photo-1612282130134-49784d98ac61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=918&q=80');
"
></div>
<div
class="position-absolute top-50 start-50 translate-middle text-light text-center"
>
<h1 class="display-1 fw-bold mb-1">吳 溫尼</h1>
<hr class="mb-1 mx-n3" />
<h2>Winnie Wu</h2>
<p>愛、勇氣與永不放棄的心</p>
</div>
</header>
<div class="container">
<div class="row mb-5 flex-column-reverse flex-md-row justify-content-center align-items-center">
<div class="col-md-5">
<h3 class="display-4 text-center text-md-start">我的冒險故事</h3>
<p>
你紙爸發全家聽,綠間不結縣我究,個毛亮高人。卻高酒死這形易止經我腳家立力還上這可......回男腦回義心便有當會兩水記生這自;演般否前出級就話萬水直無基可住。廣製因,全氣改我?
</p>
<p>
為說過著因識空共十房比面科別工人人變童角力男馬媽手趣。明型大方失,經面事馬,來聲小施大;看地自一適,在書寫賽我在。子帶出麼如就味那解的:最半有手然能勢此精觀山好沒生快我足很麗而變最放,上英灣媽?
</p>
<button class="btn btn-outline-primary w-100">
看更多我的冒險故事
</button>
</div>
<div class="col-md-4">
<img
class="w-100 object-fit-cover mb-3 mb-md-0"
height="500"
src="https://images.unsplash.com/photo-1612282131240-6e878907d0f6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=821&q=80"
alt="myStory"
/>
</div>
</div>
</div>
<div class="bg-light pt-5 p-md-5 m-md-5">
<div class="container">
<h3 class="display-4 text-center mb-3">我的實戰作品</h3>
<ul class="row row-cols-1 row-cols-lg-3 list-unstyled">
<li class="col mb-4 mb-lg-0">
<div class="card border-5 text-white">
<img src="https://images.unsplash.com/photo-1560461396-ec0ef7bb29dd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" class="card-img img-fluid" alt="工整一致的設計規範" />
<div class="card-img-overlay bg-linear p-2 d-flex flex-column justify-content-end">
<h5 class="card-title">工整一致的設計規範</h5>
<p class="card-text">正看了和無是本。眾今少山!期美斯經已家更,兒死自神有根平度如進?就的由?座國式達推知上格到:訴校構人給開收個認是策元。</p>
<a href="#" class="btn btn-outline-light w-100 stretched-link">看作品</a>
</div>
</div>
</li>
<li class="col mb-4 mb-lg-0">
<div class="card border-5 text-white">
<img src="https://images.unsplash.com/photo-1561070791-2526d30994b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" class="card-img img-fluid" alt="對於色彩細節苛刻要求" />
<div class="card-img-overlay bg-linear p-2 d-flex flex-column justify-content-end">
<h5 class="card-title">對於色彩細節苛刻要求</h5>
<p class="card-text">簡或之此小修直說文度國留,展事生生海林是,他父之歷之紙一自氣滿媽程,此課個專該後員己響的式女時說旅學古目寶我。</p>
<a href="#" class="btn btn-outline-light w-100 stretched-link">看作品</a>
</div>
</div>
</li>
<li class="col mb-4 mb-lg-0">
<div class="card border-5 text-white">
<img src="https://images.unsplash.com/photo-1565306257414-bbc84fdaaade?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=764&q=80" class="card-img img-fluid" alt="忙碌之餘不忘新買的 iPhone" />
<div class="card-img-overlay bg-linear p-2 d-flex flex-column justify-content-end">
<h5 class="card-title">忙碌之餘不忘新買的 iPhone</h5>
<p class="card-text">和還出走方文走了辦過太他的足供上場室管料實隨招然主了縣:健風用開子案又出傷速他一、廠準我像點港半這,得者團好事形一!們人好來國專少知入這中長,展結去考車活灣下山本……來的熱根兩管著大指復兒風特房以說點。</p>
<a href="#" class="btn btn-outline-light w-100 stretched-link">看作品</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="bg-secondary p-5 text-light">
<div class="container">
<h3 class="display-4 text-center">做個朋友吧</h3>
<div class="row justify-content-center">
<div class="col-md-5">
<p>遇見到世界上另一個地方的您相當開心</p>
<div class="mb-5">
<h4>聯絡方式</h4>
<i class="bi bi-envelope-fill me-1"></i>
<a
href="mailto:[email protected]"
class="text-decoration-none link-light"
>
<br>
<i class="bi bi-telephone-fill me-1"></i>
<a
href="tel:+0987-654-321"
class="text-decoration-none link-light"
>0987-654-321</a
>
</div>
<div class="mb-3">
<h4>社群關注</h4>
<i class="bi bi-instagram me-1"></i>
<a class="text-decoration-none link-light" href="#"
>voluptati</a
>
<br>
<i class="bi bi-facebook me-1"></i>
<a class="text-decoration-none link-light" href="#"
>fb.me/voluptati</a
>
<br>
<i class="bi bi-twitter me-1"></i>
<a class="text-decoration-none link-light" href="#"
>voluptati</a
>
</div>
<p>© 2022 by 陳六角. created with Bootstrap 5.</p>
</div>
<div class="col-md-5">
<form class="row needs-validation gx-3" novalidate>
<div class="col-md-6">
<label class="form-label" for="firstName">姓氏 *</label>
<input class="form-control" type="text" id="firstName" required/>
<div class="valid-feedback">
輸入完成
</div>
<div class="invalid-feedback">
請輸入姓氏
</div>
</div>
<div class="col-md-6">
<label class="form-label" for="secondName">名 *</label>
<input class="form-control" type="text" id="secondName" required/>
<div class="valid-feedback mb-0">
輸入完成
</div>
<div class="invalid-feedback mb-0">
請輸入名
</div>
</div>
<div class="col-12 mt-3">
<label class="form-label" for="mail">Email *</label>
<input
class="form-control"
type="mail"
id="mail"
placeholder="[email protected]" required/>
<div class="valid-feedback">
輸入完成
</div>
<div class="invalid-feedback">
請輸入Email
</div>
</div>
<div class="col-12 d-flex flex-column mt-3">
<label class="form-label" for="text">留些訊息給我吧 *</label>
<textarea
class="form-control" style="resize: none;"
name="text"
id="text"
cols="30"
rows="3" required></textarea>
<div class="valid-feedback">
輸入完成
</div>
<div class="invalid-feedback">
請輸入留言訊息
</div>
<button type="submit" class="btn btn-outline-light align-self-end mt-3">
送出表單
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>
</body>
</html>