-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
187 lines (175 loc) · 9.23 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
<!DOCTYPE html>
<html>
<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>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<link rel="stylesheet" href="Content/default-layout.css">
</head>
<body>
<div class="index-background"></div>
<div class="container-fluid">
<header class="header">
<h1 class="logo">
<img src="Images/logo-01.png" height="50" alt="">
</h1>
<div class="mob-menu hidden-md-up" role="open-menu">
<i class="material-icons">tune</i>
</div>
</header>
<section class="fall-page landing-top border-top-orage maT15">
<div class="">
<!-- search -->
<div class="mob-search hidden-md-up" role="open-menu">探索黑膠 Soulmate</div>
<div class="search-area">
<form action="#">
<div class="search-keyword">
<i class="material-icons">search</i>
<input type="text" placeholder="尋找你的黑膠 soulmate">
</div>
<div class="search-type">
<ul class="search-type--list">
<li class="search-type--item">唱片名稱</li>
<li class="search-type--item">名人</li>
<li class="search-type--item">
音樂類型
<ul class="search-sub-type">
<li><a href="#">藍調</a></li>
<li><a href="#">兒童音樂</a></li>
<li><a href="#">華語</a></li>
<li><a href="#">古典音樂</a></li>
<li><a href="#">鄉村音樂</a></li>
<li><a href="#">電子音樂</a></li>
<li><a href="#">兒童音樂</a></li>
<li><a href="#">華語</a></li>
<li><a href="#">古典音樂</a></li>
<li><a href="#">鄉村音樂</a></li>
<li><a href="#">電子音樂</a></li>
<li><a href="#">兒童音樂</a></li>
<li><a href="#">華語</a></li>
<li><a href="#">古典音樂</a></li>
<li><a href="#">鄉村音樂</a></li>
<li><a href="#">電子音樂</a></li>
</ul>
</li>
<li class="search-type--item">唱片編號</li>
</ul>
</div>
</form>
</div>
<!-- search end -->
</div>
</section>
<section class="about fall-page">
<div class="about-img"></div>
<div class="about-content">
<h3 class="section-title text-center text-black">關於顯經黑膠文創</h3>
<p class="text-center text-black">About Manifasto</p>
<blockquote class="blockquote text-justify ">
促進黑膠分享、保存、價值延續，是顯經黑膠唱片俱樂部的理念核心。這是一個充滿冒險的計畫，同時也是場巨大的實驗：關於陌生人之間如何建立足夠的信賴，透過平台互動與交流傳遞黑膠文化，讓沉睡的黑膠甦醒，重回現代人的日常生活中。
<br>
之一 分享<br>
黑膠唱片在過去的年代裡，多半作為一種收藏品，或私人物件，鮮少被擺進大眾分享、交流的場域中。透過「實體黑膠唱片借閱」服務，黑膠唱片便能橫跨私領域，走入更多人的生命。我們認為，黑膠唱片的命運不該只是擺在舊櫥櫃中累積灰塵，而是重新成為現代藝術生活的一部分。
<br>
之二 保存<br>
對於多數黑膠愛好者而言，黑膠的動人之處是類比訊號比起數位訊號的圓滑完整；當唱針延著唱片上的密紋滑動，每一次發聲都代表一次磨損，卻也是數位音樂所不能乘載的斑駁，時間的痕跡。藉著「黑膠數位化」行動，我們試圖以另一種形式保存這些黑膠唱片，留住美好的樂章。
<br>
之三 價值延續<br>
很多人納悶，既然科技的進步已經帶來更多便利而快速的聲音儲存方式，為什麼仍要走「回頭路」，踏進黑膠唱片的懷抱呢？我們接觸許多黑膠迷，發現不單只是音樂本身吸引人，播放的前置作業－「儀式性過程」，以及每張黑色碟片隱含的時代意義，都是令人著迷的原因。黑膠唱片所構成的獨特文化，亦是年輕世代還沒有機會觸及的。我們希望利用這波「黑膠浪潮」，廣納愛好者豐富的黑膠資源與經驗，把聆聽黑膠的美好體驗沖刷上岸。
</blockquote>
</div>
</section>
<section class="rent fall-page">
<h3 class="section-title text-center text-orange">唱片租借須知</h3>
<p class="text-center text-orange">Rent Notice</p>
<br>
<br>
<div class="row">
<div class="col-md-4 text-center">
<div class="rent-img text-center">
<i class="material-icons text-black">perm_identity</i>
</div>
<h5 class="section-title text-orange">成為會員</h5>
<p class="text-gray text-justify">
請至「黑膠募集計畫」專頁申請會員，上千張經典黑膠館藏一覽無遺，讓巴哈到府為您演奏。
</p>
</div>
<div class="col-md-4 text-center">
<div class="rent-img text-center">
<i class="material-icons">assignment</i>
</div>
<h5 class="section-title text-orange">線上預約 / 臨櫃取件</h5>
<p class="text-gray text-justify">
害怕在茫茫「膠」海迷失自己嗎？ 按下搜尋，線上預約唱片，兩天後可直接至點位現場取件！
</p>
</div>
<div class="col-md-4 text-center">
<div class="rent-img text-center">
<i class="material-icons">book</i>
</div>
<h5 class="section-title text-orange">借閱辦法</h5>
<p class="text-gray text-justify">
每次限借3張黑膠唱片，可無限期續約，餘音繞樑一整年！
</p>
</div>
<div class="col-md-12 text-center maT15">
<a class="download-button maT15" href="">下載會員申請條款</a>
</div>
</div>
</section>
<section class="contact fall-page">
<h3 class="section-title text-center text-orange">顯經黑膠文創位置</h3>
<p class="text-center text-orange">Contact Us</p>
<br>
<div class="row">
<div class="col-md-8 offset-md-1">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14485.99588564523!2d121.02730622403378!3d24.81260429522214!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjTCsDQ4JzQ1LjQiTiAxMjHCsDAyJzA5LjgiRQ!5e0!3m2!1szh-TW!2stw!4v1472454803358" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="col-md-2">
<div class="contact-info">
<h6 class="content-title">顯經竹北黑膠唱片圖書館</h6>
<p class="text-gray">
新竹縣竹北市 <br>
光明六路東二段381號3樓 <br>
</p>
<br>
<h6 class="content-title">電子郵件</h6>
<p>
<a class="text-orange" href="mailto:[email protected]">[email protected]</a> <br>
</p>
<br>
<h6 class="content-title">聯絡電話</h6>
<p>
<a class="text-orange" href="tel:03-123-456-7890">Tel: 123-456-7890</a> <br>
Fax: 123-456-7890 <br>
</p>
<br>
<p class="text-center">
<a class="download-button maT15" href="https://www.facebook.com/manivinylclub/"> FaceBook </a>
</p>
</div>
</div>
</div>
<br>
<br>
<div class="footer-text text-center">© 2016 顯經黑膠文創版權所有。建議最佳解析度為 1280 x 800<span class="hidden-md-down"><br>請使用 IE Edge、Firefox、Chrome 等瀏覽本網頁，獲取最佳效果。</span> <a href="http://www.infbeyond.com">Design By Infbeyond.</a></div>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
<script>
$("[role='open-menu']").on('click',function(){
$('.search-area').toggleClass('active');
$('.mob-menu').toggleClass('active');
});
$('.search-type--item').on('click',function(){
$('.search-type--item').removeClass('active')
$(this).addClass('active');
});
</script>
</body>
</html>