forked from astrosites/template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgallery.html
288 lines (250 loc) · 11.1 KB
/
gallery.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
<!DOCTYPE HTML>
<!--
Dimension by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
Aiyuan Yang use the HTML5 template, then update and modify it.
-->
<html>
<!-- This is the "Head" of the HTML document.
It contains information that isn't displayed on the actual page, but is useful
for the web browser when loading the page
-->
<head>
<!-- This is the title of the page. It is the text that appears inside this pages tab in your web browser -->
<title>AiyuanYang</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!-- This links to this page's CSS, which is contained in the folder assets/css and the file main.css.
If you want to edit the styling of this page, you should edit the file assets/css/main.css
If you have a new CSS file you'd like to add with custom styling, you should link to it here using:
<link rel="stylesheet" href="assets/css/my-new-css-file.css"/>
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!--set for the slide show -->
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/css/slideshow.css" />
<!-- In the case that the user's browser does not support JavaScript (unlikely, but possible), the page
will load a separate set of CSS stylings from the file assets/css/noscript.css
Any HTML contained inside <noscript></noscript> tags will be loaded in the event that JavaScript is not
available.
-->
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<!-- add html jquery by AYY, you need to create a b.html, and call it use <div data-include="b"> </div> -->
<script src="assets/js/jquery_html.js"></script>
<!--set for the slide show -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body class="is-preload">
<!-- This "div" wraps around all of our content and just changes how things are layed out -->
<div id="wrapper">
<!-- This is where the content that appears on page load exists -->
<header id="header">
<!-- This is the main content of the front page -->
<div class="content">
<div class="inner">
<!-- Here is a heading where you can put your name -->
<h1 style="color:white">
Aiyuan Yang
</h1>
<!-- Here is an image where you can put a picture of you.
You can change the width and height attributes below to change how large
your image is.
Try adding "border-radius: 50%;" to the style attribute.
-->
<img src="images/2017-10-04.jpg" style="width:280px; height:280px; object-fit: cover;">
<!-- Here is a paragraph where you can put your position and institution, or
a short line about yourself.
-->
<p>
<a style="color:white" href="https://www.mpifr-bonn.mpg.de/person/94862/2169" target="_blank">
Postdoctoral researcher <br> (MPIfR)</a>
</p>
<!-- Here is a paragraph where you can put a link to your CV -->
<p>
<!-- Note you will want to change where this points to! -->
<a style="color:white" href="images/CV_AiyuanYang_PersonalWeb.pdf" target="_blank">Curriculum Vitae</a>
</p>
</div>
</div>
<!-- This is the navigation menu -->
<nav>
<!-- This element makes an "Unordered List" -->
<ul>
<!-- This is a "List Item" -->
<li>
<!-- Note that this links to #about, which will move the page to wherever
the element with the id "about" exists.
-->
<a style="color:white" href="#about">About Me</a>
</li>
<li>
<a style="color:white" href="gallery.html">Photo Gallery</a>
</li>
<li>
<a style="color:white" href="#links">Links</a>
</li>
<li>
<a style="color:white" href="#research">Research</a>
</li>
<li>
<a style="color:white" href="#publications">Publications</a>
</li>
<!-- You can add another button to your navigation menu by adding
another List Item with a link inside of it.
-->
<!-- <li>
<a href="images/Astronomy.jpg">My CV</a>
</li> -->
</ul>
</nav>
</header>
<!-- Here is the "Photo Gallery" card. -->
<article id="gallery">
<h2 class="major">Photo Gallery</h2>
<p>
<!-- A <br> tag puts in a break so that the text that follows it displays on
the next line.
-->
<! -- Telescope picture slide show start-->
<!-- slide show use carousel; include head: /link-4.1/css/bootstrap.min.css; script: jquery.min.js bootstrap.min.js -->
<div class="container">
<h3>Telescopes</h3>
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="width:700px;!important;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/apex1.jpg" alt="APEX" style="width:700px;height:280px">
<div class="carousel-caption">
<h3>San Pedro de Atacama, Chile</h3>
<p>APEX: the father of ALMA 😂</p>
</div>
</div>
<div class="item">
<img src="images/alma.jpg" alt="ALMA" style="width:700px;height:280px">
<div class="carousel-caption">
<h3>San Pedro de Atacama, Chile</h3>
<p>ALMA: what a beauty!</p>
</div>
</div>
<div class="item">
<img src="images/Effelsberg.jpg" alt="Effelsberg 100m" style="width:700px;height:280px">
<div class="carousel-caption">
<h3>Effelsberg, Germany</h3>
<p>Not easy to climb to the top</p>
</div>
</div>
<div class="item">
<img src="images/iram.jpg" alt="IRAM 30m" style="width:700px;height:280px">
<div class="carousel-caption">
<h3>IRAM 30m, Granada, Spain </h3>
<p>Amazing sunrise, sunset and ham</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Telescope picture slide show end -->
<! -- Travel picture slide show start-->
<!-- slide show use carousel; include head: /link-4.1/css/bootstrap.min.css; script: jquery.min.js bootstrap.min.js -->
<div class="container">
<h3>Travel</h3>
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="width:700px;!important;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/travel01.jpg" alt="Los Angeles" style="width:700px;height:280px">
<div class="carousel-caption">
<h3>Valparaíso, Chile</h3>
<p>Had so much fun!</p>
</div>
</div>
<div class="item">
<img src="images/travel02.jpg" alt="Chicago" style="width:700px;height:280px">
<div class="carousel-caption">
<h3>Granada, Spain</h3>
<p>Pico Veleta observatory, IRAM 30m</p>
</div>
</div>
<div class="item">
<img src="images/park1.jpg" alt="New York" style="width:700px;height:280px">
<div class="carousel-caption">
<h3>Richmond Park, UK</h3>
<p>Fantastic landscape</p>
</div>
</div>
<div class="item">
<img src="images/endenich.jpg" alt="New York" style="width:700px;height:280px">
<div class="carousel-caption">
<h3>Endenich, Bonn, Germany</h3>
<p>Fields of Hope 😂 near MPIfR </p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Travel picture slide show end -->
</article>
</div>
<!-- This is the footer that appears at the bottom of the page -->
<footer id="footer">
<!-- You can change "Untitled" to your name to show everyone that
this is your work.
-->
<!-- hitwebcounter Code START -->
<!-- Start of WebFreeCounter Code -->
<p class="copyright">© Aiyuan Yang. Web. Counter:
<!-- Start of WebFreeCounter Code -->
<a href="https://www.webfreecounter.com/" target="_blank">
<img src="https://www.webfreecounter.com/hit.php?id=guvpdpfp&nd=6&style=2"
border="0" alt="free counter"></a>
<!-- End of WebFreeCounter Code -->
</p>
</footer>
</div>
<!-- This is the background image of the site.
All configuration of the background is done with CSS.
Look in the file assets/css/main.css and search for "#bg" to
see how this element is styled. Look for comments pointing
to where you can set a new background image.
-->
<div id="bg"></div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>