-
Notifications
You must be signed in to change notification settings - Fork 0
/
Monterey.html
120 lines (102 loc) · 5.17 KB
/
Monterey.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
<!DOCTYPE html>
<html>
<title>Monterey</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.cn/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1 {font-family: "Montserrat", sans-serif}
img {margin-bottom: -7px}
.w3-row-padding img {margin-bottom: 12px}
</style>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar w3-white w3-wide w3-padding w3-card">
<a href="blog.html" class="w3-bar-item w3-button">Home</a>
<a href="#home" class="w3-bar-item w3-button"><b>Mon</b>terey</a>
<!-- Float links to the right. Hide them on small screens -->
<div class="w3-right w3-hide-small">
<a href="#Scenery" class="w3-bar-item w3-button">Scenery</a>
<a href="#People" class="w3-bar-item w3-button">People</a>
<a href="#End" class="w3-bar-item w3-button">Epilogue</a>
</div>
</div>
</div>
<!-- Header -->
<header class="w3-display-container w3-content w3-wide" style="max-width:1300px;" id="home">
<img class="w3-image" src="src/mon/mon15.JPG" alt="sunset" width="1500" height="800">
<div class="w3-display-middle w3-margin-top w3-center">
<h1 class="w3-xxlarge w3-text-white"><span class="w3-padding w3-black w3-opacity-min"><b>Mon</b></span> <span class="w3-hide-small w3-text-light-grey">Terey</span></h1>
</div>
</header>
<!-- Page content -->
<div class="w3-content w3-padding" style="max-width:1564px">
<!-- Project Section -->
<div class="w3-container w3-padding-32" id="Scenery">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Scenery</h3>
<p>早起出海观鲸是很早就安排好的行程，但是最终出发的时候还是比预期晚了很多。于是前往码头的路上，我们只好一路狂奔，突然就和上一次前往麦基诺岛时奔向码头的记忆重合了，似乎每一次前往上船码头，我都是奔跑赴会的。快到码头的地方，可以看到无数船只停留在岸边，随着海浪自由的起伏，无数飞鸟盘旋，我来不及掏出手机拍照，但是无数毛不易的歌词不可阻拦的在我脑海中回响。“晚风轻抚过船帆 不合时宜的浪漫”，“海鸥停留在桅杆 而我还不能靠”。《海上日记》MV中停满船只的港口与眼前的景象相重合。不同的是，MV是充满遗憾的傍晚，船只是简陋的渔船，人是走不出海岛的打工人。而我沐浴着朝阳，虽然同样坐着“是为了靠岸而不是出去”的小船，但是我只是一个过客。我的靠岸，是为了奔赴更好的旅程。</p>
</div>
<div class="w3-row" id="myGrid" style="margin-bottom:128px">
<div class="w3-third">
<img src="src/mon/mon2.JPG" style="width:100%">
<img src="src/mon/mon3.JPG" style="width:100%">
<img src="src/mon/mon21.JPG" style="width:100%">
<img src="src/mon/mon23.JPG" style="width:100%">
<img src="src/mon/mon29.JPG" style="width:100%">
</div>
<div class="w3-third">
<img src="src/mon/mon6.JPG" style="width:100%">
<img src="src/mon/mon10.JPG" style="width:100%">
<img src="src/mon/mon12.JPG" style="width:100%">
<img src="src/mon/mon13.JPG" style="width:100%">
<img src="src/mon/mon19.JPG" style="width:100%">
<img src="src/mon/mon24.JPG" style="width:100%">
<img src="src/mon/mon30.JPG" style="width:100%">
</div>
<div class="w3-third">
<img src="src/mon/mon14.JPG" style="width:100%">
<img src="src/mon/mon15.JPG" style="width:100%">
<img src="src/mon/mon16.JPG" style="width:100%">
<img src="src/mon/mon17.JPG" style="width:100%">
<img src="src/mon/mon18.JPG" style="width:100%">
<img src="src/mon/mon25.JPG" style="width:100%">
<img src="src/mon/mon31.JPG" style="width:100%">
</div>
</div>
<!-- About Section -->
<div class="w3-container w3-padding-32" id="People">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">People</h3>
</div>
<div class="w3-row" id="myGrid" style="margin-bottom:128px">
<div class="w3-third">
<img src="src/mon0.jpg" style="width:100%">
<img src="src/mon/mon4.JPG" style="width:100%">
<img src="src/mon/mon7.JPG" style="width:100%">
</div>
<div class="w3-third">
<img src="src/mon/mon8.JPG" style="width:100%">
<img src="src/mon/mon9.JPG" style="width:100%">
</div>
<div class="w3-third">
<img src="src/mon/mon20.JPG" style="width:100%">
<img src="src/mon/mon11.JPG" style="width:100%">
</div>
</div>
<!-- Contact Section -->
<!-- End page content -->
</div>
<!-- Footer -->
<footer class="w3-container w3-teal w3-center w3-margin-top">
<p> 我希望文字的意义，是让时光慢下来</p>
<a href="https://www.instagram.com/lemon.lemon_tea" target="_blank" class="w3-hover-opacity">
<i class="fa fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/feed/" target="_blank" class="w3-hover-opacity">
<i class="fa fa-linkedin"></i>
</a>
</footer>
</body>
</html>