forked from weightshift/The-Personal-Page
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
86 lines (82 loc) · 4.99 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
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Wu Yan</title>
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="false" />
<style>
* { padding: 0; margin: 0; }
p { color: #fff; font-family: Helvetica; font-size: 15px; line-height: 22px; margin-bottom: 15px; -webkit-font-smoothing: antialiased; }
a { color: #2B82AD; font-weight: bold; text-decoration: none; }
a:hover { color: #990000; }
#name { color: #fff; font-family: Helvetica; font-size: 95px; margin-bottom: 22px; -webkit-font-smoothing: antialiased; }
#about { width: 350px;
padding: 20px 20px 15px 20px;
margin:75px 120px 0 auto !important;
background: tranparent;
background:rgba(0, 0, 0, 0.257813);
<!--[if lt IE 8]>
background: transparent ;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#41000000', EndColorStr='#41000000');
<![endif]-->
}
.sep_div { height: 0px; background-color: transparent; border-top-width: 1px; border-top-style: solid; border-top-color: rgb(0, 0, 0); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(255, 255, 255); opacity: 0.1; margin-bottom:15px; }
.links { width:360px; height: 40px; }
.links ul { display:inline; width:100%; white-space:nowrap; overflow-x:hidden; }
.links li { display:inline; float:left; margin:0px 8px 0px 0px;}
.links a { height:32px; width:32px; display:block; }
.links a:hover { opacity:0.6; border-style:none; }
.fb_li a { background-image:url('icons/fb_32x32.png'); }
.linkedin_li a { background-image:url('icons/linkedin_32x32.png'); }
.twitter_li a { background-image:url('icons/twitter_32x32.png'); }
.gplus_li a { background-image:url('icons/g+_32x32.png'); }
.github_li a { background-image:url('icons/github_32x32.png'); }
.weibo_li a { background-image:url('icons/weibo_32x32.png'); }
.douban_li a { background-image:url('icons/douban_32x32.png'); }
.first-letter { font-size:20px; }
#email_li a { background-image:url('icons/email_32x32.png'); }
</style>
</head>
<body>
<!-- swap out for a logo -->
<!-- swap out for information about yourself -->
<div id="about">
<div id="name">Wu Yan</div>
<p><b class="first-letter">P</b>rogrammer. I view programming as <a href="http://www.paulgraham.com/hp.html" target="_blank">a kind of art</a>, with keyboard as the brush and code as the color.I love the feeling of creating something cool and making some difference to the world.</p>
<p><b class="first-letter">R</b>esearcher. I'm currently a graduate student from <a href="http://www.fudan.edu.cn" target="_blank">FDU</a> and doing some research in <a href="http://www.imc.fudan.edu.cn/Index_en.aspx" target="_blank">IMC</a>.(<a href="http://www.linkedin.com/profile/view?id=80864684" target="_blank">publications</a>)</p>
<p><b class="first-letter">I</b>nternet-enthusiast. Google changes the way we get information; Amazon changes the way we do shopping; Facebook changes the way we socialize. It's such a great thing to be involved in.</p>
<p><b class="first-letter">H</b>appiness-pursuer. Life is short, keep pursuing the happiness that is sustainable and deep in life, like love,friendship and interest.</p>
<div class="sep_div">
<hr />
</div>
<div class="links">
<ul>
<li class="fb_li"><a href="http://www.facebook.com/telooon" target="_blank"></a></li>
<li class="twitter_li"><a href="http://www.twitter.com/teloon" target="_blank"></a></li>
<li class="gplus_li"><a href="https://plus.google.com/114136964255904308215/posts" target="_blank"></a></li>
<li class="linkedin_li"><a href="http://www.linkedin.com/pub/yan-wu/23/b8/838" target="_blank"></a></li>
<li class="weibo_li"><a href="http://www.weibo.com/telooon" target="_blank"></a></li>
<li class="douban_li"><a href="http://www.douban.com/people/teloon/" target="_blank"></a></li>
<li id="email_li"><a href="" target="_blank"></a></li>
</ul>
</div>
</div>
<!--include jquery & backstretch-->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.backstretch.min.js"></script>
<script type="text/javascript">
$.backstretch("avatar.jpg", {speed: 150});
var email_link = 'mai' + 'lto:'+ 'tel' + 'ooon@' + 'gmai' + 'l.com'
$("#email_li a").attr("href", email_link)
</script>
<script type="text/javascript">
//Baidu tongji
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F4a4299120483d00b38be4e03d8583f6a' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>