-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
320 lines (297 loc) · 14.7 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
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Primoflex臺灣</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Main css -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- 網頁抬頭選單 -->
<header>
<nav class="navbar navbar-dark bg-dark navbar-expand-md fixed-top">
<div class="container">
<!-- LOGO -->
<a href="#" class="navbar-brand">
<img src="images/logo.png" alt="logo" />
</a>
<!-- 手機選單漢堡按鈕 -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">
<!-- 漢堡ICON -->
<span class="navbar-toggler-icon"></span>
</button>
<!-- 選單內容 -->
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li><a href="#product" class="nav-link">產品</a></li>
<li><a href="#creative" class="nav-link">特色</a></li>
<li><a href="#activity" class="nav-link">PhotoArt</a></li>
<li><a href="#standard" class="nav-link">規格</a></li>
<li><a href="https://ywqbx.github.io/ORI_PHOTO/" class="nav-link">回首頁</a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- 可以輪播的Banner圖片 -->
<section id="product">
<div id="carousel-controller" class="carousel slide" data-ride="carousel">
<!-- 輪播圖片 -->
<div class="carousel-inner">
<!-- 圖片1 -->
<div class="carousel-item active">
<img class="w-100" src="images/Banner1.jpg" alt="">
<div class="carousel-caption">
<h1>獨特造型</h1>
<p>拿出來，你就是全場矚目的焦點</p>
</div>
</div>
<!-- 圖片2 -->
<div class="carousel-item">
<img class="w-100" src="images/Banner2.jpg" alt="">
<div class="carousel-caption">
<h1>享受攝影</h1>
<p>從裝底片到洗出來 每一步驟都刺激著感官</p>
</div>
</div>
<!-- 圖片3 -->
<div class="carousel-item">
<img class="w-100" src="images/Banner3.jpg" alt="">
<div class="carousel-caption">
<h1>品質保證</h1>
<p>網紅推薦 真心不騙</p>
</div>
</div>
</div>
<!-- 圖片上一頁按鈕 -->
<a href="#carousel-controller" data-slide="prev" class="carousel-control-prev">
<span class="carousel-control-prev-icon"></span>
</a>
<!-- 圖片下一頁按鈕 -->
<a href="#carousel-controller" data-slide="next" class=" carousel-control-next">
<span class="carousel-control-next-icon"></span>
</a>
<!-- 下方點點 -->
<ol class="carousel-indicators">
<li data-target="#carousel-controller" data-slide-to="0" class="active"></li>
<li data-target="#carousel-controller" data-slide-to="1"></li>
<li data-target="#carousel-controller" data-slide-to="2"></li>
</ol>
</div>
</section>
<!-- 產品介紹區塊(創意) -->
<section id="creative" class="creative_area">
<div class="container">
<h2 class="text-center">
百年工藝 匠心獨具
</h2>
<!-- 產品照片 -->
<div class="row">
<!-- 照片組1 -->
<div class="col">
<div class="card">
<a href="http://www.eslite.com/product.aspx?pgid=1001276712273014&kw=%e5%a4%a7%e4%ba%ba%e7%9a%84%e7%a7%91%e5%ad%b8+1+35mm%e9%9b%99%e7%9c%bc%e7%9b%b8%e6%a9%9f&pi=0"><img alt="產品照片1" src="images/info1.jpg">
<div class="card-title-wrap">
<span class="card-title">傳統攝影</span>
<span class="card-text">超過60年傳統技術一眼構圖一眼拍照</span>
</div>
<div class="pic-hover">
<h4>體驗攝影無窮樂趣</h4>
</div>
</a>
</div>
</div>
<!-- 照片組2 -->
<div class="col">
<div class="card">
<a href="https://www.youtube.com/watch?v=ByBEBV2USNU"><img alt="產品照片2" src="images/info2.jpg">
<div class="card-title-wrap">
<span class="card-title">手動操作曝光</span>
<span class="card-text">每次拍照都是對自己的一次挑戰</span>
</div>
<div class="pic-hover">
<h4>刺激度超越手機！</h4>
</div>
</a>
</div>
</div>
<!-- 照片組3 -->
<div class="col">
<div class="card">
<a href="https://class.ruten.com.tw/user/index00.php?s=i-love-polaroid&d=4789042&o=0&m=1"><img alt="產品照片3" src="images/info3.jpg">
<div class="card-title-wrap">
<span class="card-title">中片幅120底片</span>
<span class="card-text">畫質細膩如數位相機</span>
</div>
<div class="pic-hover">
<h4>傳統媒材，美麗且經典。</h4>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- 商品文案 -->
<section>
<div class="container">
<div class="row">
<div class="article_text">
<p> </br></p>
<h3>追求新高度</h3>
<p>拍照攝影 已經深植現代人的生活中</br>
人手一台手機 就能拍出很多的照片</br>
但是卻往往不能滿足對攝影的慾望及探索</br>
底片相機的最高境界...
</p>
<h3>文青登峰造極之作</h3>
<p>手機拍照不文青</br>
復古數位相機假文青</br>
普通底片相機不夠文青</br>
文青相機的登峰造極之選
</p>
<h1>Primoflix</h1>
<p>帶給高要求高品質的文青</br>
一個最棒的禮物
</p>
</div>
</div>
</div>
<!-- 背景影片 -->
<div class="container">
<video autoplay muted loop id="myVideo">
<source src="video/camera.mp4" type="video/mp4">
</video>
</div>
</section>
<!-- 商品促銷活動區塊 -->
<section id="activity" class="activity_area">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="images/info5.jpg">
</div>
<div class="col-md-4 activity_price text-center">
<h2>Photo Art 1951</h2>
<span>☆プリモフレックス</span>
<p>レンズトーコー 1:3.5 f=75mm全面ハードコーテツド シヤツター NKS1-200シンクロベルドイン サイズ 6x6cm 12枚撮 近々捲止め装置が完備されろ。</p>
<p> 東京光學のトプコーフレツクス(シヤツターオリエント ⅢＢ1-200）が大澤商會發賣となりプリモフレツクスとなり、丁度昔のローライコード F3.5 Ⅱ型コーテツドカメラとなつたわけ。</p>
<p> 一二、五〇〇圓</p>
</div>
<div class="col-md-4">
<img src="images/info4.jpg">
</div>
</div>
</div>
</section>
<!-- 規格 -->
<section id="standard" class="standard_area">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<table class="table table-hover">
<tr>
<h5 scope="col">規格說明：</h5>
</tr>
<tbody>
<tr>
<th scope="row">商品名：</th>
<td>Primoflex I雙眼相機</td>
</tr>
<tr>
<th scope="row">焦距：</th>
<td>75mm</td>
</tr>
<tr>
<th scope="row">光圈範圍：</th>
<td colspan="2">F3.5-F16</td>
</tr>
<tr>
<th scope="row">最快快門：</th>
<td colspan="2">1/200秒</td>
</tr>
<tr>
<th scope="row">產地：</th>
<td colspan="2">日本</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6 col-sm-12">
<table class="table">
<tr>
<h5 scope="col">使用說明：</h5>
</tr>
<ul class="standard_use">
<li>曝光需要透過下鏡頭旁邊的轉盤來控制，測光可以裡用手機App來確定數值。</li>
<li>每次按下快門前，需要先確定已經手動過片，且已經完成上發條步驟。</li>
<li>本相機沒有自動捲片功能，需要觀看機背紅窗對齊底片張數拍攝，本功能也可以用來重複曝光。</li>
<li>腰平取景器需要將相機放在腰部，將頭望下看入構圖，需要注意成像為左右相反的！</li>
</ul>
</table>
</div>
</div>
</div>
</section>
<!-- 貼心提醒 -->
<section>
<div class="container content">
<div class="row remind">
<h4> </h4>
<h4>貼心提醒</h4>
<div class="w-100"></div>
<p>使用時請留意：</p>
<ul>
<li>底片相機請確保光線充足情況使用，室內通常不太建議拍攝。</li>
<li>本相機使用120底片，需要自備捲片桿才可以正常使用，捲片桿可以由拍完的底片內取得，可詢問附近的照相館。</li>
<li>底片相機為避免底片曝光，請確實將一整捲底片拍攝完畢再打開背蓋取出，如果底片尚未捲至捲筒內請勿將背蓋打開！</li>
</ul>
<h4> </h4>
</div>
</div>
</section>
<!-- 影片 -->
<section class="container-fluid video-area" id="video">
<h2 class="text-center">PR</h2>
<div class="video-container">
<iframe width="640" height="360" src="https://www.youtube.com/embed/3FLDHhIgNjw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h2 class="text-center"></h2>
</section>
<!-- 頁腳 -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-12 footer_logo">
<img src="images/logo247.png">
</div>
<div class="col-md-4 col-sm-12 footer_address">
<ul>
<li>株式会社 プリモフレックス</li>
<li>お客様相談室：0800 080 123</li>
<li>休憩時間：月曜日〜日曜日 0:00 ~ 24:00</li>
<li>休憩時間に相談できませんので、電話を連絡しないで下さい</li>
<li>メール：[email protected]</li>
</ul>
</div>
</div>
<div class="row footer_copyright justify-content-center">
<p>COPYRIGHT © 2019 YWQBX .ALL RIGHTS RESERVED.</p>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src=" https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous">
</script>
<script src="js/back_top.js"></script>
</body>
</html>