-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·160 lines (156 loc) · 5.94 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
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1" />
<title>周自兴个人简历</title>
<link rel="stylesheet" href="./style.css" type="text/css" media="all" />
<link rel="shortcut icon" href="./images/favicon.png"/>
</head>
<body class="loading-process">
<div class="loading">
<div class="loading-circle"></div>
<div class="loading-avatar"><img src="images/avatar.jpg" alt="" width="100" height="100"></div>
<div class="loading-info">服务器是海外的，加载会有点慢哦~</div>
</div>
<div class="section-header">
<div class="section">
<nav class="nav" role="navigation">
<ul>
<li class="nav-about fade fade1"><a href="#about">关于</a></li>
<li class="nav-works fade fade4"><a href="#works">作品</a></li>
<li class="fade back-home"><a href="#top">首页</a></li>
<li class="nav-skill fade fade2"><a href="#skill">能力</a></li>
<li class="nav-contact fade fade3"><a href="#contact">联系</a></li>
</ul>
</nav>
</div>
<div class="nav-bg"></div>
</div>
<div class="home-bg">
<img src="images/home-bg.jpg" alt="" width="1000" height="667">
</div>
<div class="section-wrap section-fristpage">
<div class="section">
<div class="section-content">
<p class="fade fade1">Hi，我是 周自兴</p>
<p class="fade fade2">是一名软件开发工程师、前端开发讲师</p>
<p class="fade fade2">性格外向、喜欢演讲和探索</p>
<p class="fade fade3">想了解更多，往下滚动哦 ^_^</p>
</div>
<a href="#" class="scroll-tip fade fade4">向下滚动</a>
</div>
</div>
<div id="about" class="section-wrap section-about">
<div class="section">
<div class="about-content clearfix section-content">
<div class="left">
<h1>关于本人</h1>
<p class="fade fade1">2011-2013中软国际Java兼web开发工程师</p>
<p class="fade fade2">2013-2016 浙江维融科技 前端开发</p>
<p class="fade fade2">2016-2017 千峰互联科技 前端开发讲师</p>
<p class="fade fade2">2017-2018 安正飞鸟科技 前端开发</p>
<p class="fade fade2">2019- 打算专注研究少儿编程</p>
<p class="fade fade3">旧博课（太懒了，很久不更新了） <a href="http://blog.chizi.com" target="_blank">赤子的空间</a>)</p>
</div>
<div class="right">
<img class="my-photo fade fade4" src="images/me.jpg" alt="" width="335" height="540">
</div>
</div>
</div>
</div>
<div id="works" class="section-wrap section-works">
<div class="section">
<div class="works-content section-content">
<h1>近期作品</h1>
<div class="works-list clearfix">
<div class="works-item first fade fade1">
<a href="#" target="_blank">
<img src="images/works/flower.jpg" alt="" width="300" height="180">
<div class="work-info">
<h2>鲜花商城</h2>
<p>前端有购买支付以及付款等一些功能，同时支持手机端查看。有相应的管理后台</p>
</div>
</a>
</div>
<div class="works-item fade fade2">
<a href="#" target="_blank">
<img src="images/works/baojian.jpg" alt="" width="300" height="180">
<div class="work-info">
<h2>保健品门户网</h2>
<p>有保健品介绍、案例介绍、产品介绍、加盟招商等内容，同时支持手机端</p>
</div>
</a>
</div>
<div class="works-item fade fade3">
<a href="http://zhouzixing.github.io/" target="_blank">
<img src="images/works/meitu.png" alt="" width="300" height="180">
<div class="work-info">
<h2>美涂装饰</h2>
<p>酷炫的一些设计效果，同时能在智能报价等功能</p>
</div>
</a>
</div>
<div class="works-item first fade fade4">
<a href="#" target="_blank">
<img src="images/works/kuaiyin.png" alt="" width="300" height="180">
<div class="work-info">
<h2>海报快印</h2>
<p>简约而不见的的一个网站</p>
</div>
</a>
</div>
<!-- <a class="more-link" >查看更多</a> -->
</div>
</div>
</div>
<div id="skill" class="section-wrap section-skill">
<div class="section">
<div class="skill-content section-content">
<h1>我的技能包</h1>
<ul>
<li class="fade fade1">开发web网站、APP、微信公众号、微信小程序</li>
<li class="fade fade1">精通前端主流框架前端框架有vue、angular、react</li>
<li class="fade fade3">熟悉的后台语言有：Java、php、nodejs</li>
</ul>
</div>
</div>
</div>
<div id="contact" class="section-wrap section-contact">
<div class="section">
<div class="contact-content clearfix section-content">
<h1>联系本人</h1>
<div class="left">
<div class="contact-ways fade fade1">
<h2>社交网络</h2>
<ul>
<li>邮箱：<a target="_blank" href="[email protected]">[email protected]</a></li>
<li>微信：<a target="_blank">@赤子：ku_sunny</a></li>
<li>Github：<a target="_blank" href="https://github.com/zhouzixing">@zhouzixing</a></li>
</ul>
</div>
<div class="contact-info fade fade2">
<h2>本站声明</h2>
<p>你要是喜欢我的作品就抓紧找我咯</p>
</div>
</div>
<div class="right fade fade3">
<h2>手拉手好朋友</h2>
<p>广结天下有缘之士</p>
<ul>
<li>需要做教程找我</li>
<li>需要网站源码的找我</li>
<li>需要app的找我</li>
<li>需要小程序的找我</li>
<li>不会部署需要我帮你部署的找我</li>
</ul>
</div>
</div>
</div>
</div>
<div class="overlay"></div>
<div class="state-indicator"></div>
<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
<script src="js/global.js"></script>
</body>
</html>