/
myphotos.html
142 lines (132 loc) · 5.59 KB
/
myphotos.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photos - Yaonan Zhong</title>
<meta name="description" content="Nature photos taken in Oregon">
<meta name="author" content="Yaonan Zhong">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:700,400' rel='stylesheet'>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="/javascript/picturefill.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-57909375-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body id="photos">
<header>
<img src="/images/zhongyaonan.jpg" alt="Yaonan Zhong">
<h1><a href="/">Yaonan Zhong</a></h1>
<nav >
<span id="local-nav">
<a class="home" href="/">
<span class="fa-stack">
<i class="fa fa-square-o fa-stack-2x fa-fw"></i>
<i class="fa fa-home fa-stack-1x fa-fw"></i>
</span>
<span class="nav-item">Home</span>
</a>
<a class="photos" href="/myphotos.html">
<span class="fa-stack">
<i class="fa fa-square-o fa-stack-2x fa-fw"></i>
<i class="fa fa-tree fa-stack-1x fa-fw"></i>
</span>
<span class="nav-item">Photos</span>
</a>
<a class="about" href="/about.html">
<span class="fa-stack">
<i class="fa fa-square-o fa-stack-2x fa-fw"></i>
<i class="fa fa-user fa-stack-1x fa-fw"></i>
</span>
<span class="nav-item">About</span>
</a>
<a class="soccer" href="/soccer.html">
<span class="fa-stack">
<i class="fa fa-square-o fa-stack-2x fa-fw"></i>
<i class="fa fa-futbol-o fa-stack-1x fa-fw"></i>
</span>
<span class="nav-item">Soccer</span>
</a>
</span>
<span id="social-network">
<a href="https://www.github.com/zhongyn">
<span class="fa-stack">
<i class="fa fa-circle-thin fa-stack-2x fa-fw"></i>
<i class="fa fa-github-alt fa-stack-1x fa-fw"></i>
</span>
</a>
<a href="https://www.linkedin.com/in/yaonanzhong">
<span class="fa-stack">
<i class="fa fa-circle-thin fa-stack-2x fa-fw"></i>
<i class="fa fa-linkedin fa-stack-1x fa-fw"></i>
</span>
</a>
<a href="mailto:zhongyaonan@gmail.com">
<span class="fa-stack">
<i class="fa fa-circle-thin fa-stack-2x fa-fw"></i>
<i class="fa fa-envelope fa-stack-1x fa-fw"></i>
</span>
</a>
</span>
</nav>
</header>
<article>
<picture>
<source srcset="/images/nature/marys-peak-large.jpg" media="(min-width: 1024px)">
<source srcset="/images/nature/marys-peak-medium.jpg" media="(min-width: 640px)">
<img srcset="/images/nature/marys-peak-small.jpg" alt="marys peak in Oregon">
<p>Mary's Peak in Oregon. October 2, 2014.</p>
</picture>
<picture>
<source srcset="/images/nature/crater-lake-large.jpg" media="(min-width: 1024px)">
<source srcset="/images/nature/crater-lake-medium.jpg" media="(min-width: 640px)">
<img srcset="/images/nature/crater-lake-small.jpg" alt="crater lake in Oregon">
<p>Crater Lake in Oregon. October 21, 2014.</p>
</picture>
<picture>
<source srcset="/images/nature/cannon-beach-large.jpg" media="(min-width: 1024px)">
<source srcset="/images/nature/cannon-beach-medium.jpg" media="(min-width: 640px)">
<img srcset="/images/nature/cannon-beach-small.jpg" alt="cannon beach in Oregon">
<p>Cannon Beach in Oregon. October 31, 2014.</p>
</picture>
<picture>
<source srcset="/images/nature/corvallis-fall-large.jpg" media="(min-width: 1024px)">
<source srcset="/images/nature/corvallis-fall-medium.jpg" media="(min-width: 640px)">
<img srcset="/images/nature/corvallis-fall-small.jpg" alt="fall in Corvallis">
<p>Fall in Corvallis, Oregon. November 11, 2014.</p>
</picture>
<picture>
<source srcset="/images/nature/corvallis-sunset-large.jpg" media="(min-width: 1024px)">
<source srcset="/images/nature/corvallis-sunset-medium.jpg" media="(min-width: 640px)">
<img srcset="/images/nature/corvallis-sunset-small.jpg" alt="corvallis sunset in Oregon">
<p>Sunset in Corvallis, Oregon. July 11, 2014.</p>
</picture>
<div><strong>Note: please leave a comment for using above images. Thank you!</strong></div>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'mylifephotos'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</article>
</body>
</html>