-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
438 lines (427 loc) · 19.8 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
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>与你一起</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<meta name="description" content="很感谢你的出现，让我的世界变得不一样">
<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link href="css/base.css" rel="stylesheet" />
<link href="favicon.ico" rel="icon" />
</head>
<body>
<div class="loader" >
<div class="loader-inner">
<svg width="120" height="220" viewBox="0 0 100 100" class="loading-spinner" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="spinner" cx="50" cy="50" r="21" fill="#ffffff" stroke-width="2"></circle>
</svg>
</div>
</div>
<div class="wrapper">
<section class="hero overlay">
<div class="background-img col-sm-6 col-xs-12" >
<img src="images/head_mt.jpg" alt="" style="display: none;">
</div>
<div class="background-img col-sm-6 col-xs-12" >
<img src="images/head_wh.jpg" alt="" style="display: none;">
</div>
<header class="header default" style="display: block;">
<div class="left-part">
<a class="logo scroll" href="#hero">
<h2>LOVE</h2>
</a>
</div>
<div class="right-part">
<nav class="main-nav">
<div class="toggle-mobile-but">
<a href="#" class="mobile-but">
<div class="lines"></div>
</a>
</div>
<ul>
<li><a class="scroll" href="#home">爱的首页</a></li>
<li><a class="scroll" href="#story">爱的故事</a></li>
<li><a class="scroll" href="#album">爱的相册</a></li>
</ul>
</nav>
</div>
</header>
<div class="inner-hero">
<div class="container hero-content">
<div class="row">
<div class="col-sm-12 text-center">
<h1 class="large mb-100">与你一起</h1>
<div class="block-date-hero">
<div class="circle-dashed bg-n">
<div class="round-circle">
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50"></circle>
</svg>
<i class="icon-heart"></i>
</div>
</div>
<ul>
<li>MT.CHEN</li>
<li>WH.WENG</li>
</ul>
</div>
<p class="mt-50 lead"></p>
<span id="elapseClock" class="text-white" style="font-size: 45px; font-weight: 300;"></span>
</div>
</div>
</div>
</div>
</section>
<section id="story" class="story pt-50 pb-50">
<svg class="section-dashed" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="2450px" xml:space="preserve">
<path class="dashed-line" stroke-width="1" d="M30 0 v2050 400"></path>
</svg>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center mb-100">
<h1 class="title">我们的故事</h1>
<p>程序员与摄影师的爱情<br> <span>感谢你的出现，让我的世界变得不一样</span></p>
</div>
</div>
<div class="row story-row mt-10 mb-100">
<div class="circle-dashed timeline bg">
<div class="round-circle bg before">
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50"></circle>
</svg>
<i class="icon-heart"></i>
</div>
</div>
<div class="col-sm-5 ">
<div class="couple-story text-right">
<p>2017年11月14日，我们第一次通过相亲电话认识，打给你的电话，你一直说着气氛尴尬，原来你是第一次相亲，那时候我觉得估计又没戏了。</p>
</div>
</div>
<div class="col-sm-5 col-sm-offset-2">
<div class="couple-story">
<p>一开始认识，跟其他人一样，都是互相问一下，理解了情况，你说你刚毕业，在摄影工作室做摄影师，对我的相亲历史很好奇，你描述自己160多，体重不少，
经常扛摄影器材，我内心构想了一个又高又壮的女同胞，想着完了，这一定不是我喜欢的类型。
</p>
</div>
</div>
</div>
<div class="row story-row mt-100 mb-80 ">
<div class="circle-dashed timeline bg green">
<div class="round-circle green before">
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50"></circle>
</svg>
<i class="icon-heart"></i>
</div>
</div>
<div class="col-sm-5 ">
<div class="couple-story text-right">
<p>2017年12月7日，我们第一次见面，约在了爱琴海。你出现的时候，颠覆了我的印象。</p>
</div>
</div>
<div class="col-sm-5 col-sm-offset-2">
<div class="couple-story">
<p>背着个书包，看上去好像学生晚自习回来，不过你已经吸引我了，虽然吃完饭你走的很急，我很怕你不满意我，
我给同事说这次我真的很喜欢，希望可以和你走下去。
</p>
</div>
</div>
</div>
<div class="row story-row mt-100 mb-80 ">
<div class="circle-dashed timeline bg">
<div class="round-circle bg before">
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50"></circle>
</svg>
<i class="icon-heart"></i>
</div>
</div>
<div class="col-sm-5 ">
<div class="couple-story text-right">
<p>2018年1月27日，我们第一次一起看电影《神秘巨星》，约在宝龙，晚饭还是你请我吃了一顿有玉米的米饭。</p>
</div>
</div>
<div class="col-sm-5 col-sm-offset-2">
<div class="couple-story">
<p>我们逐渐的熟悉起来，你跟别的女孩子不一样，跟你聊天都很少出现尴尬的时候，虽然你一直描述你以前好像很任性调皮，不过我不是很在意。
我们的宗教不同，上班的作息不同，不过有时候认对了人就会觉得这一切都不是什么大问题。
</p>
</div>
</div>
</div>
<div class="row story-row mt-100 mb-80 ">
<div class="circle-dashed timeline bg green">
<div class="round-circle green before">
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50"></circle>
</svg>
<i class="icon-heart"></i>
</div>
</div>
<div class="col-sm-5 ">
<div class="couple-story text-right">
<p>2018年2月2日，我们约在了万达吃饭，就如之前一样，一起吃饭走走，那天下了点雨，吃完在附近走了一会，我就向你表述了我内心的想法。</p>
</div>
</div>
<div class="col-sm-5 col-sm-offset-2">
<div class="couple-story">
<p>一开始，你是拒绝的，虽然我心里有点失落，但是还是一直在那边说着，说我们都是第一次恋爱，但是我还是想尝试一下，说我跟朋友说很喜欢你，你虽然不是很信，
你怕在一起没多久，你就厌倦了分手怕伤害我，不过后面，你不知道是因为我说了太久，可怜我还是怎么样，就答应我，我们先试着交往一下。虽然过程不是很顺利，但是好歹你答应了。
</p>
</div>
</div>
</div>
<div class="row story-row mt-100 mb-80 ">
<div class="circle-dashed timeline bg">
<div class="round-circle bg before">
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50"></circle>
</svg>
<i class="icon-heart"></i>
</div>
</div>
<div class="col-sm-5 ">
<div class="couple-story text-right">
<p>2018年2月10日，下午约在农大，在沙滩公园走了一会，虽然上次表白不是很成功，我提前准备了礼物，想情人节送你，但是正好那天可能碰上春节，想着就提前送你，顺便还把第一次的情书放在里面。</p>
</div>
</div>
<div class="col-sm-5 col-sm-offset-2">
<div class="couple-story">
<p>你拿到礼物，好像也没有特别开心。后来快回去时候，我又问了我们是否在一起了，你说是把，然后我就想牵手，第一次的我，也不知道怎么牵手，就硬拉着你的手，
虽然后来你说想拉着狗一样拉着我。就这样我们应该算正式在一起了。
</p>
</div>
</div>
</div>
<div class="row story-row mt-100 mb-80 ">
<div class="circle-dashed timeline bg green">
<div class="round-circle green before">
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50"></circle>
</svg>
<i class="icon-heart"></i>
</div>
</div>
<div class="col-sm-5 ">
<div class="couple-story text-right">
<p>2018年2月25日，约在了三坊七巷，你拍摄结束出来，我给你背着相机，吃了萨贝尔，后来就随便逛逛。</p>
</div>
</div>
<div class="col-sm-5 col-sm-offset-2">
<div class="couple-story">
<p>逛着逛着，走到了西湖公园，说到其他男生约女孩子开房的套路，你说我居然想开房，我立刻在那边澄清。后来我在你面前第一次唱歌，不过我好像得意忘形了，唱的有点夸张了。
最后就我们第一次拥抱了，本来还想亲你，不过你拒绝了。后来回去，我的腰痛的不行，心疼你经常背着那么重的相机。
</p>
</div>
</div>
</div>
<div class="row story-row mt-100 mb-80 ">
<div class="circle-dashed timeline bg">
<div class="round-circle bg before">
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50"></circle>
</svg>
<i class="icon-heart"></i>
</div>
</div>
<div class="col-sm-5 ">
<div class="couple-story text-right">
<p>2018年3月4日，你突然给我发微信说，你想了很久还是没觉得你喜欢我。原来你一直在想到底有没有喜欢我，我有没有喜欢你。</p>
</div>
</div>
<div class="col-sm-5 col-sm-offset-2">
<div class="couple-story">
<p>可能我们第一次恋爱，也确实不知道什么才是喜欢，但是听到后，我确实也蛮难过的，我也去咨询了我朋友，他们说他们以前也没觉得喜欢不喜欢，
就是想跟一个人一起玩耍，一起吃饭，一起做很多事情。因为你想冷静一下，为此我还装门写了几天日记。在日记的最后还用了李商隐写给宫女的诗。
<br/>远路应悲春晼晚，残宵犹得梦依稀。
<br/>玉珰缄札何由达，万里云罗一雁飞。
</p>
</div>
</div>
</div>
<div class="row story-row mt-100 mb-80 ">
<div class="circle-dashed timeline bg green">
<div class="round-circle green before">
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50"></circle>
</svg>
<i class="icon-heart"></i>
</div>
</div>
<div class="col-sm-5 ">
<div class="couple-story text-right">
<p>2018年4月1日，一起吃完饭，后来走着走着送你回去，你说想抱一下，我没听清楚，就亲了一下，那是我们的第一次接吻。</p>
</div>
</div>
<div class="col-sm-5 col-sm-offset-2">
<div class="couple-story">
<p>逐渐的每次逛着逛着都是去万达那个公园，在那里估计度过了最少2个月，后来随着天气热，就不在继续逛那里了。依然想念那里的石椅，想念和你的恋爱。
你说你想老了学乐器，不知道未来的日子会怎么样，期望可以你能完成你的想法，我也可以跟你一起到老。
</p>
</div>
</div>
</div>
<div class="row story-row mt-100 mb-80 ">
<div class="circle-dashed timeline bg">
<div class="round-circle bg before">
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50"></circle>
</svg>
<i class="icon-heart"></i>
</div>
</div>
<div class="col-sm-5 ">
<div class="couple-story text-right">
<p>2018年5月7日，突然你说觉得我们不合适，觉得我跟别的男朋友不一样，对你一点不热情，没有表现出在乎的感觉。</p>
</div>
</div>
<div class="col-sm-5 col-sm-offset-2">
<div class="couple-story">
<p>听到你说完话后，我第一次觉得好像要失去你，突然就不想工作了，想去一个陌生的地方呆着。你可能觉得我只是因为年龄大了，想结婚随便找个人，
但是你男朋友真的不是那么随便的人，其实我父母他们一直在叫我抓紧，赶紧定亲结婚。其实我不是不想跟你说，但是我怕说了，你会觉得是我父母的要求，不是我的想法。
其实我也思考了我的原因，可能确实自己的思想在这方面好像还是做不了很在乎别人的举动。以后我会尽量去改变自己，让你能感受到我对你的喜欢把。
</p>
</div>
</div>
</div>
<div class="row story-row mt-100 mb-80 ">
<div class="circle-dashed timeline bg green">
<div class="round-circle green before">
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50"></circle>
</svg>
<i class="icon-heart"></i>
</div>
</div>
<div class="col-sm-5 ">
<div class="couple-story text-right">
<p>2018年6月25日，周杰伦演唱会，我们第一次一起看了演唱会。</p>
</div>
</div>
<div class="col-sm-5 col-sm-offset-2">
<div class="couple-story">
<p>突然想起来，认识后，你说想一起看周杰伦演唱会，结果去年他来过福州，不过后来居然今年又来福州举办，真的很开心能和你一起实现这个想法。虽然后来你经常开玩笑说，
不知道我们能不能坚持到6月25日，不过一下子就到看演唱会的时候，在演唱会现场一起听杰伦的老歌，你好像最喜欢简单爱，我也特地把它做成了背景音乐。
时间真的很快，和你在一起，期望与你一起做更多的第一次。
</p>
</div>
</div>
</div>
<div class="row story-row mt-100 mb-80 ">
<div class="circle-dashed timeline bg">
<div class="round-circle bg before">
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50"></circle>
</svg>
<i class="icon-heart"></i>
</div>
</div>
<div class="col-sm-5 ">
<div class="couple-story text-right">
<p>2018年7月1日，我在写这个网页，其实之前就有这个想法了。</p>
</div>
</div>
<div class="col-sm-5 col-sm-offset-2">
<div class="couple-story">
<p>前天，你生气了，还哭了很久，感觉我给你安全感还是不够，有时候简单的一句梦婷生气，你就笑了，你要的不多，只是想知道我是在乎你。以后我会争取让你知道。
4000字的要求，男朋友只能做到这了，希望你能喜欢。本来打算后面特殊日子给你看的，这下可能要提前给你看了，以后的日子，我在想其他东西把。
就像之前写给你的信一样，我可能无法给你很好的生活，豪华的婚礼。我其实也一直在思考怎么给你更好的生活，可能目前我能做到的也只有这些了，尽量尊重你。
可能你男朋友我可能只有嘴了，不过只有这个我也是给你的。
</p>
</div>
</div>
</div>
</div>
</section>
<section id="album" class="album pt-120 pb-120">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center mb-100">
<h1 class="title">我们的相册</h1>
<p>记录生活的点点滴滴，以后一起回味</p>
</div>
</div>
<div class="row mb-30">
<div class="col-md-4 col-sm-4 col-xs-12 ">
<div class="block-img">
<a href="images/1.jpg" class="venobox vbox-item">
<div class="background-img">
<img alt="" src="images/1.jpg" style="display: none;">
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 ">
<div class="block-img">
<a href="images/2.jpg" class="venobox vbox-item">
<div class="background-img">
<img alt="" src="images/2.jpg" style="display: none;">
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 ">
<div class="block-img">
<a href="images/3.jpg" class="venobox vbox-item">
<div class="background-img">
<img alt="" src="images/3.jpg" style="display: none;">
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 ">
<div class="block-img">
<a href="images/4.jpg" class="venobox vbox-item">
<div class="background-img">
<img alt="" src="images/4.jpg" style="display: none;">
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 ">
<div class="block-img">
<a href="images/5.jpg" class="venobox vbox-item">
<div class="background-img">
<img alt="" src="images/5.jpg" style="display: none;">
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 ">
<div class="block-img">
<a href="images/6.jpg" class="venobox vbox-item">
<div class="background-img">
<img alt="" src="images/6.jpg" style="display: none;">
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<footer class="footer pt-70 pb-70">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h2 class="typo"><i class="icon-heart"></i></h2>
<p class="uppercase heavy normal">与你一起，未完待续</p>
</div>
</div>
</div>
</footer>
</div>
<div style="display: none;">
<audio id="main_audio" autoplay="autoplay" preload="auto" loop="">
<source src="https://1-1255355766.cos-website.ap-guangzhou.myqcloud.com/love.mp3" type="audio/mpeg">
</audio>
<a class="c-white fs-12 icon-play rotate" id="btn-play" href="javascript:void(0);"></a>
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
<script src="https://cdn.bootcss.com/venobox/1.5.3/venobox.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-smooth-scroll/1.4.13/jquery.smooth-scroll.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<!-- <script src="scripts/vendor.js"></script> -->
<script src="scripts/app.js"></script>
</body>
</html>