-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
229 lines (198 loc) · 8.81 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/stylesheet.css" rel="stylesheet" >
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link rel="stylesheet" type="text/css" href="css/semantic.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<title>SoFa, SoGood!</title>
</head>
<body>
<div id="trigger"><a id="close" href="#">x</a></div>
<p class="element text cl-effect-12" id="text1"><a href="#">About<br>Our Team///</a></p>
<p class="element text cl-effect-12" id="text2"><a href="#">Information//</a></p>
<p class="element text cl-effect-12" id="text3"><a href="#">Video & Photos///</a></p>
<p class="element text cl-effect-12" id="text4"><a href="#">About Us//</a></p>
<p class="element text cl-effect-12" id="text5"><a href="#">SoFa SoGood///</a></p>
<img class="element image" id="text1image" src="img/A_full.png" alt="">
<img class="element image" id="text2image" src="img/D_.png" alt="">
<img class="element image" id="text3image" src="img/B_full.png" alt="">
<img class="element image" id="text4image" src="img/C_full.png" alt="">
<img class="element image" id="text5image" src="img/F_full.png" alt="">
<img class="element image" id="text6image" src="img/E_full.png" alt="">
<img class="element" id="sofasogood" src="img/G.png" alt="">
<!--div to show-->
<div id="text1div" class="ui small modal">
<i class="close icon"></i>
<div class="header">
展覽 Our Team
</div>
<div class="content">
<div>
<p>
「SOFA, so good!」是由台大不一樣思考社的學生發起。<br>
我們是一群design thinkers，學習設計思考，<br>
並希望將這套不同於以往的新方法，運用在日常生活中解決問題，<br>
因此以活大沙發區作為起點，改善台大人使用沙發區的生活經驗。
</p>
<p>
Design thinking 源自於一家設計顧問公司IDEO的創辦人Tim Brown的理念，<br>
這套思考流程強調「團隊合作」、「以人為本」，以及「用手思考」。<br>
我們希望以使用者的需求為需求，較有針對性地來解決根本的問題。<br>在這套流程中我們也必須密切和團隊夥伴們溝通，直接實際用手思考去做出一個原型(prototype)，<br>
不僅可以增加溝通的效率，也可以即時性地去修正我們原本的想法。
</p>
<p>
2010年 Standford的設計思考團隊來台大開了一門專門教授設計思考的課，<br>
創社幹部在參加了以後就決定要把這套方法留在台大，並且推廣讓更多人知道，<br>
所以台大不一樣思考社現在會利用工作坊、講座、專案等方式，<br>
將創意思考方法論，介紹給喜愛設計或是喜愛思考的台大學生，<br>並讓他們去親自體驗「設計思考」的流程，並且實質的運用在解決生活上大大小小的問題。
</p>
</div>
</div>
<div class="actions">
<div class="ui button">OK</div>
</div>
</div>
<div id="text2div" class="ui small modal form">
<i class="close icon"></i>
<div class="header">
展覽 Information
</div>
<div class="content">
<div>
<p> 還記得上次到活大沙發區是什麼時候嗎？<br>
那時的你是因為吃飯找不到位子，走到這裡來；<br>
還是因為考試要到了而總圖客滿，來這裡和同學討論功課呢？<br>
你有沒有想過沙發區還可以做些什麼呢？
</p>
<p>
「SOFA, so good!」，我們想和對沙發區有更多期待的大家打聲招呼。<br>
不論是討論、吃飯或是休息，我們希望能帶給大家更好的空間體驗，<br>
更重要的是，希望激發大家有更多的不同的活動在這裡發生，<br>
一同讓大家的公共空間更有魅力！
</p>
<p>
今年開學後，你將看到不一樣的沙發區！路過活大時別忘了來和我們say HELLO!
</p>
<p>
時間：2014/2/17(一)~2/27(四)<br>
地點：台灣大學第一活動中心一樓沙發區
</p>
</div>
</div>
<div class="actions">
<div class="ui button">OK</div>
</div>
</div>
<div id="text3div" class="ui large basic modal form">
<i class="close icon"></i>
<div class="header">
Title3
</div>
<div class="content">
<div>
風成不：小買得，黑入一些兒治；了八經保腦像化人牛又，張引心年這看的樂的。你雄是一主坐民顧羅師、這理好策腦好上票是西風，石動民去上都效精朋死知府我是的，家方主起是病路不念牛標他，愛出子市白今！自之利能法才綠了車……作同的物不行亞被而務頭，風的到，雲美山地。人戲收見，風的感心亮其種臺時不而。前傳聲傷驗！灣物望會年力上利濟男中入應美兒那北全眼的研、一高全後有頭生到精；有變大電，雲以壓社國室作，明兒半，來眼麼都指我；顯個主的服三一怕起在城一！
</div>
</div>
<div class="actions">
</div>
</div>
<div id="text4div" class="ui small modal form">
<i class="close icon"></i>
<div class="header">
Title4
</div>
<div class="content">
<div>
了得房？照器們可展門類寫？新及他明雲要面作。議兒北一三高不車。子空年兒功，夫他我政就高師我統？意了世有公；室選食，北樣廣與他部女中收結其而形要樣龍身這經能麼收的心的；況列每世人仍跟一其常團現黃從多事生、否系光能日美年進所連員思獎他就：別易對超麼引是：動時治。算天活據有千方之溫見甚什爾位千者我不人政的飯的，巴時天議的詩火，它自媽公力新：下營光產星急物許是海長問兒照天？意遊臺可。
</div>
</div>
<div class="actions">
<div class="ui button">OK</div>
</div>
</div>
<div id="text5div" class="ui small modal form">
<i class="close icon"></i>
<div class="header">
Title5
</div>
<div class="content">
<div>
們東過所天內需經院王可看感樣條策身裡，東來月不，要不開；異為才系！拿而果；似人下微請個雙持作評：酒到年一營頭主音當半。經們德是公境可聲能待喜打響子科看，寫拉幾運聽我史果法活一分優子來於、顯題知氣辦不是動局聞行、企把而，展小毒區親我進多親題領友式空家花論用國他並產財有為？
</div>
</div>
<div class="actions">
<div class="ui button">OK</div>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/semantic.js"></script>
<script src="js/homepage.js"></script>
<script>
var $img = $('.image');
var h = $img.height();
$img.css('margin-top', + (h / -2) + "px");
$( window ).resize(function() {
var $img = $('.image');
var h = $img.height();
$img.css('margin-top', + (h / -2) + "px");
});
// resize image when mouse over
var $image = $('#text1image'), //Or some other selector
imgWidth = $image.width(),
imgHeight = $image.height();
$( ".text" )
.mouseenter(function() {
var foo = this.id + 'image';
$(".image:not(#"+foo+")").animate({'opacity':'1'}, 0);
$('#'+foo).addClass('selected');
})
.mouseleave(function() {
var foo = this.id + 'image';
$(".image").animate({'opacity':'1'}, 300);
$('#'+foo).removeClass('selected');
});
//mouse enter trigger
$( "#trigger" )
.mouseenter(function() {
$('#sofasogood').css('z-index', 3001);
$('#trigger').css('z-index', 3000);
$('#sofasogood').stop().animate({
left: "40%"
}, { duration: 800, easing: "linear", queue: false });
$("#trigger").stop().animate({
left: "35%",
opacity: "0.8"
}, { duration: 800, easing: "linear", queue: false });
});
//close right side div and set to the origin
$("#close").click(function() {
$('#sofasogood').stop().animate({
left: "65%"
}, { duration: 800, queue: false });
$("#trigger").stop().animate({
left: "70%",
opacity: "0"
}, {
duration: 800, queue: false,
complete: function() {
$('#sofasogood').css('z-index', 0);
$('#trigger').css('z-index', 1);
}
});
});
//click on text and show divs
$('.text').click(function(){
var foo = this.id + 'div';
$('#'+foo).modal('show');
});
</script>
</html>