-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathindex.html
executable file
·93 lines (89 loc) · 4.24 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
<!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" />
<link rel="stylesheet" href="css/style.css" />
<title>Document</title>
</head>
<body>
<div id="particles-js"></div>
<section id="section-media">
<!-- #region 左側箭咀 -->
<div id="arrow-btn-prev" class="arrowBtn media-nav-btn prev" data-cursor="pointer">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 103 103">
<circle class="dot" r="4.5" cx="36" cy="51.5" transform-origin="34% 50%" transform="scale(0, 0)"></circle>
<g transform="translate(35, 15)">
<use class="top" xlink:href="#arrow-btn-tr" transform-origin="16.1% 15.9%">
<path
id="arrow-btn-tr"
transform-origin="16.1% 15.9%"
d="M31.274,7.155 L7.392,31.037 C5.870,32.559 3.402,32.559 1.880,31.037 C0.358,29.515 0.358,27.048 1.880,25.526 L25.762,1.644 C27.284,0.122 29.752,0.122 31.274,1.644 C32.795,3.166 32.795,5.633 31.274,7.155 Z"
></path>
</use>
<use class="bot" xlink:href="#arrow-btn-br" transform-origin="16% 55%">
<path
id="arrow-btn-br"
transform-origin="16% 55%"
d="M1.880,41.954 C3.402,40.432 5.870,40.432 7.392,41.954 L31.274,65.836 C32.795,67.358 32.795,69.825 31.274,71.347 C29.752,72.869 27.284,72.869 25.762,71.347 L1.880,47.465 C0.358,45.943 0.358,43.476 1.880,41.954 Z"
></path>
</use>
</g>
</svg>
</div>
<!-- #endregion -->
<!-- #region 輪播圖 -->
<div class="media-container-box" style="perspective: 5000px">
<div class="media-main-view" id="media-layer-view">
<div class="media-current">
<div class="media-main-pic">
<a target="_blank" class="media-img"></a>
</div>
<div class="media-user-interactive" id="media-layer-front">
<div class="media-current-info">
<div class="media-info-wrapper">
<div class="media-info-serial"></div>
<div class="media-info-title"></div>
<div class="media-info-detail">
<div class="media-detail-desc"></div>
</div>
</div>
<div class="media-nav-wrapper"></div>
</div>
</div>
</div>
<div class="media-list-wrapper" id="media-list"></div>
</div>
</div>
<!-- #endregion -->
<!-- #region 右側箭咀 -->
<div id="arrow-btn-next" class="arrowBtn media-nav-btn next" data-cursor="pointer">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 103 103">
<circle class="dot" r="4.5" cx="67" cy="51.5" transform-origin="66% 50%" transform="scale(0, 0)"></circle>
<g transform="translate(35, 15)">
<use class="top" xlink:href="#arrow-btn-tl" transform-origin="16.1% 15.9%">
<path
id="arrow-btn-tl"
transform-origin="16.1% 15.9%"
d="M30.833,30.926 C29.311,32.448 26.844,32.448 25.322,30.926 L1.440,7.044 C-0.082,5.523 -0.082,3.055 1.440,1.533 C2.962,0.011 5.429,0.011 6.951,1.533 L30.833,25.415 C32.355,26.937 32.355,29.405 30.833,30.926 Z"
></path>
</use>
<use class="bot" xlink:href="#arrow-btn-bl" transform-origin="16% 55%">
<path
id="arrow-btn-bl"
transform-origin="16% 55%"
d="M1.440,65.725 L25.322,41.843 C26.844,40.321 29.311,40.321 30.833,41.843 C32.355,43.365 32.355,45.832 30.833,47.354 L6.951,71.236 C5.429,72.758 2.962,72.758 1.440,71.236 C-0.082,69.714 -0.082,67.247 1.440,65.725 Z"
></path>
</use>
</g>
</svg>
</div>
<!-- #endregion -->
</section>
<script src="js/parallax-move.js"></script>
<script src="js/carousel.js"></script>
<script src="js/particles.min.js"></script>
<script src="js/particles-effect.js"></script>
</body>
</html>