-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproject02.html
222 lines (212 loc) · 10.5 KB
/
project02.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gong's family -- 致那些年最美好的记忆</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="author" content="Ryan">
<meta name="Description" content="Personal HTML5 for Gentileman Gong">
<link rel="shortcut icon" href="images/icons/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/icons/favicon.ico" type="image/x-icon">
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/contact.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/responsive.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
#QRcodeImg{
background:url("images/qrcodeimg.png" ) no-repeat 0px 0px;
width: 150px;
height: 150px;
position: absolute;/*可以覆盖在内容之上，因为采用absolute时，脱离文档流 */
right:10px;
bottom: 50px;
z-index: 1002;
display: none;
}
footer div p a:hover #QRcodeImg{
display:block;
}
</style>
<script src="js/modernizr.js" type="text/javascript"></script>
</head>
<body class="centered-tiles">
<!-- start preloader -->
<div id="preloader">
<div id="status">
<div class="parent">
<div class="child">
<p>loading</p>
</div>
</div>
</div>
</div>
<!-- end preloader -->
<!-- start main nav -->
<nav id="main-nav">
<ul id="options" class="clearfix">
<li> <a href="index.html#home">首页</a> </li>
<li> <a href="index.html#portfolio" class="selected">姓氏源起</a></li>
<li> <a href="index.html#services">家族相册</a> </li>
<li> <a href="index.html#agency">时光机</a> </li>
<li> <a href="index.html#blog">Blog</a> </li>
<li> <a href="#" class="sub-nav-toggle">经典推荐</a>
<ul class="sub-nav hidden">
<li> <a href="project01.html">书籍</a> </li>
<li> <a href="project02.html">电影</a> </li>
<li> <a href="post01.html">音乐</a> </li>
</ul>
</li>
<li> <a href="index.html#contact">联系我们</a> </li>
</ul>
<ul class="social-list clearfix">
<li> <a href="#"><i class="fa fa-qrcode"></i></a> </li>
<li> <a href="#"><i class="fa fa-weixin"></i></a> </li>
<li> <a href="#"><i class="fa fa-qq"></i></a> </li>
</ul>
</nav>
<!-- end main nav -->
<div id="wrap">
<div class="content-wrapper">
<!-- start header -->
<header id="header" class="clearfix">
<ul class="social-list clearfix not-white">
<li> <a href="#" class="circled"><i class="fa fa-qrcode"></i> </a> </li>
<li> <a href="#" class="circled"><i class="fa fa-weixin"></i> </a> </li>
<li> <a href="#" class="circled"><i class="fa fa-qq"></i> </a> </li>
</ul>
<div class="logo-wrapper">
<h1 id="logo"><a href="index.html">Ridgewood</a></h1>
</div>
<div id="menu-button">
<div class="centralizer">
<div class="cursor">
<div id="nav-button"> <span class="nav-bar"></span> <span class="nav-bar"></span> <span class="nav-bar"></span> </div>
</div>
</div>
</div>
</header>
<!-- end header -->
<!-- start content -->
<!-- <div id="content">
<div id="container" class="clearfix">
<div class="element clearfix col2-3 home auto">
<figure class="images"><img src="images/project04-large01.jpg" alt="" /></figure>
</div>
<div class="element clearfix col2-3 home white auto">
<div class="boxed">
<h2 class="header">Magazine Mockup <br />
<span class="italic">for</span> Copan</h2>
<p class="lefted">This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed. These words are here to provide the reader with a basic impression of how actual text will appear in its final presentation. </p>
<div class="borderline above"></div>
<blockquote>
<p>I didn't fail! I've just found 10,000 ways that won't work.</p>
<p class="name">- Thomas Edison</p>
</blockquote>
<div class="borderline below"></div>
<p class="lefted">It's Greek to you. Unless, of course, you're Greek, in which case, it really makes no sense. Why, you can't even read it! It is strictly for mock-ups. You may mock it up as strictly as you wish.</p>
<div class="bottom-section"> <a href="#" title="" class="button"><i class="fa fa-external-link"></i> Visit Website</a> </div>
</div>
</div>
<div class="element clearfix col1-3 home auto">
<figure class="images"><img src="images/project04-large02.jpg" alt="" /></figure>
</div>
<div class="element clearfix col1-3 home auto">
<figure class="images"><img src="images/project04-large03.jpg" alt="" /></figure>
</div>
</div>
</div> -->
<div class="container">
<div class="span12">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img alt="300x200" src="images/a-pertfect-world.jpg" />
<div class="caption">
<h3>
完美的世界 A Perfect World (1993)
</h3>
<p>
单亲孩子菲利普·佩里的母亲对他管教甚严，8岁的小菲利普甚至从未参加过一次鬼节讨糖果的游戏。附近州监狱的两名罪犯越狱成功，劫持了菲利普作为人质，向德州边界逃窜。途中，罪犯之一的布奇干掉了鲁莽愚蠢的同伙，却对小菲利普照顾有佳。与此同时，德州警探瑞德带着手下和州长特派的犯罪专家萨利一同火速追捕布奇。双方在德克萨斯州境内展开了一场公路赛大竞技；而小菲利普也经历了很多从未想过过的刺激与快乐，并与布奇产生了一种近似父子的不寻常感情。
</p>
<p>
<a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">分享</a>
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img alt="300x200" src="images/the-eagles.jpg" />
<div class="caption">
<h3>
女猎鹰人 The Eagle Huntress (2016)
</h3>
<p>
纪录片讲述了生活在蒙古西北部阿尔泰山区的13岁小女孩Aisholpan，打破沿袭了几百年的传男不传女的风俗，跟随父亲学习猎鹰，并成为地区"猎鹰节大赛"首位女性参赛者的经历。
</p>
<p>
<a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">分享</a>
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img alt="300x200" src="images/the-paddington.jpg" />
<div class="caption">
<h3>
帕丁顿熊2 Paddington 2 (2017)
</h3>
<p>
露西婶婶的生日即将到来，帕丁顿决定送婶婶一份会让她终生难忘的礼物。最终，帕丁顿选中了一本立体绘本，然而这绘本是世间仅此一份的珍贵宝物，为了存钱购买绘本，帕丁顿决定开始工作，在遭遇了一连串的失败后，帕丁顿终于找到了适合他的工作——清洁玻璃窗。就在帕丁顿的存款即将达标之际，绘本竟然被一名神出鬼没的小偷给偷走了，同时出现在案发现场的帕丁顿被当做嫌疑犯捉拿归案，并最终被关进了监狱。在监狱里，帕丁顿凭借着自己的爱与勇气改变了墙内死气沉沉的氛围，监狱外，布朗一家人亦从来没有放弃过替帕丁顿洗清冤屈的机会。
</p>
<p>
<a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">分享</a>
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- end content -->
</div>
<!-- end content-wrapper -->
</div>
<!-- end wrap -->
<footer id="footer" class="clearfix">
<div class="container" style="padding:10px;"> <p class="text-center" id="now_time"></p></div>
<div class="padding-wrapper">
<p class="alignleft">© <span id="now_year">0000</span>, Gong's family All Rights Reserved</p>
<p class="alignright">Made with <i class="fa fa-heart"></i> by <a href="#" id="qrcode_link">Ryan<img id="QRcodeImg"></a></p>
</div>
</footer>
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="js/jquery-easing-1.3.js" type="text/javascript"></script>
<script src="js/jquery.touchSwipe.min.js" type="text/javascript"></script>
<script src="js/jquery.isotope2.min.js" type="text/javascript"></script>
<script src="js/jquery.ba-bbq.min.js" type="text/javascript"></script>
<script src="js/packery-mode.pkgd.min.js" type="text/javascript"></script>
<script src="js/jquery.isotope.load.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
<script src="js/input.fields.js" type="text/javascript"></script>
<script src="js/preloader.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery.sliphover.min.js"></script>
<script type="text/javascript">
$(function(){
var myDate = new Date;
var year = myDate.getFullYear(); //获取当前年
var mon = myDate.getMonth() + 1; //获取当前月
var date = myDate.getDate(); //获取当前日
var week = myDate.getDay();
var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
$("#now_time").text("今天是"+year + "年" + mon + "月" + date + "日" + weeks[week]);
$("#now_year").text(year);
});
</script>
</body>
</html>