Skip to content

Commit 28504bd

Browse files
mytharchermytharcher
committed
Add page style.
1 parent 7ecd707 commit 28504bd

3 files changed

Lines changed: 228 additions & 58 deletions

File tree

‎assets/img/header-bg.jpg‎

21.3 KB
Loading

‎assets/img/rocket.png‎

20.7 KB
Loading

‎index.html‎

Lines changed: 228 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -3,70 +3,240 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>昆明开发者2014年度技术分享聚会</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
7+
<style type="text/css">
8+
*{
9+
-webkit-box-sizing: border-box;
10+
-moz-box-sizing: border-box;
11+
box-sizing: border-box;
12+
13+
-webkit-text-size-adjust: none;
14+
}
15+
16+
html,body{
17+
margin: 0;
18+
padding: 0;
19+
border: none;
20+
line-height: 1;
21+
min-height:100%;
22+
height: 100%;
23+
}
24+
body{
25+
color: #555;
26+
font-size: 14px;
27+
font-family: "Microsoft YaHei","微软雅黑",Arial,Helvetica,sans-serif;
28+
}
29+
30+
ul,ol,figure,form,dl,dt,dd{
31+
margin: 0;
32+
padding: 0;
33+
}
34+
img{
35+
border: 0;
36+
vertical-align: middle;
37+
}
38+
39+
a{
40+
color: #0395d0;
41+
text-decoration: none;
42+
}
43+
a:hover{
44+
text-decoration: underline;
45+
}
46+
47+
.row{
48+
position: relative;
49+
}
50+
.container{
51+
position: relative;
52+
width: 80%;
53+
min-width: 800px;
54+
max-width: 1280px;
55+
margin: auto;
56+
}
57+
.container-full{
58+
width: 100%;
59+
min-width: 100%;
60+
max-width: 100%;
61+
}
62+
63+
header{
64+
background: url(assets/img/header-bg.jpg) no-repeat center;
65+
background-size: cover;
66+
color: #fff;
67+
text-shadow: 1px 2px 0 rgba(0,0,0,.2);
68+
}
69+
header .container{
70+
padding: 10% 25% 10% 0;
71+
background: url(assets/img/rocket.png) no-repeat right center;
72+
}
73+
header h1{
74+
font-size: 4em;
75+
font-weight: normal;
76+
}
77+
header h2{
78+
margin: 0;
79+
font-weight: normal;
80+
}
81+
header dl{
82+
line-height: 1.8;
83+
}
84+
header dt{
85+
float: left;
86+
}
87+
88+
.topics{
89+
90+
box-shadow: 0 -5px 5px rgba(0,0,0,.1);
91+
}
92+
.topics .container{
93+
padding: 5% 0;
94+
}
95+
.topics ul:after{
96+
content: "";
97+
display: block;
98+
clear: both;
99+
}
100+
.topics li{
101+
list-style: none;
102+
float: left;
103+
position: relative;
104+
width: 48%;
105+
background: #eee;
106+
border-radius: 10px;
107+
margin-bottom: 4%;
108+
padding: 2% 2% 2% 12%;
109+
}
110+
.topics li:nth-child(odd){
111+
margin-right: 4%;
112+
}
113+
.topics figure{
114+
position: absolute;
115+
left: 5%;
116+
top: 50%;
117+
width: 15%;
118+
transform: translateY(-50%);
119+
}
120+
.topics figure img{
121+
width: 100%;
122+
border-radius: 100%;
123+
border: 3px solid #fff;
124+
box-shadow: 0 2px 3px rgba(0,0,0,.2);
125+
}
126+
.topics figcaption{
127+
margin-top: .5em;
128+
text-align: center;
129+
}
130+
.topics h3{
131+
height: 2em;
132+
margin: 0;
133+
font-size: 1em;
134+
}
135+
.topics p{
136+
margin: .5em 0;
137+
}
138+
139+
footer{
140+
background: #ccc;
141+
}
142+
footer .container{
143+
padding: 5% 0;
144+
}
145+
footer h2{
146+
margin-top: 0;
147+
text-align: center;
148+
font-size: 2em;
149+
}
150+
footer p{
151+
width: 60%;
152+
margin: auto;
153+
line-height: 1.8;
154+
}
155+
footer .copyright{
156+
margin-top: 5%;
157+
text-align: center;
158+
}
159+
</style>
6160
</head>
7161

8162
<body>
9-
<header>
10-
<h1>昆明开发者2014年度技术分享聚会</h1>
11-
<p>该聚会源于“昆明开花者”QQ群，旨在通过有关互联网技术和其他话题的交流分享，提升昆明本地较为落后的技术氛围，并借此机会建立一个长期交流分享的社区，以促进成员之间互助提高和资源共享。</p>
12-
<dl>
13-
<dt>发起人：</dt>
14-
<dd>高纯，严俊羿，张锐等</dd>
15-
<dt>时间：</dt>
16-
<dd>2014年11月22日（周六） 下午2点</dd>
17-
<dt>地点：</dt>
18-
<dd>待定（周五前通知）</dd>
19-
</dl>
20-
</header>
21-
22-
<div>
23-
<p>本次活动邀请到了社区的5位讲师，为大家带来精彩的内容：</p>
24-
<article>
25-
<h3>Odoo（OpenERP）Python环境的快速数据库应用开发</h3>
163+
<header class="row">
164+
<div class="container">
165+
<h2>在昆明的开发者，你并不孤独，我们一起装逼一起飞！</h2>
166+
<h1>2014年度技术分享聚会</h1>
26167
<dl>
27-
<dt>讲师：</dt>
28-
<dd>李维 <a href="mailto:liwei@sandwych.com">&lt;liwei@sandwych.com&gt;</a></dd>
29-
<dt>工作信息：</dt>
30-
<dd>昆明维智众源企业管理咨询有限公司</dd>
168+
<dt>发起人：</dt>
169+
<dd>高纯，严俊羿，张锐等</dd>
170+
<dt>时间：</dt>
171+
<dd>2014年11月22日（周六）下午2点</dd>
172+
<dt>地点：</dt>
173+
<dd>待定（周五前通知）</dd>
174+
<dt>费用：</dt>
175+
<dd>每人50RMB左右，包括场地和饮品</dd>
31176
</dl>
32-
</article>
33-
<article>
34-
<h3>再造轮子之JS模板引擎</h3>
35-
<dl>
36-
<dt>讲师：</dt>
37-
<dd>严俊羿 <a href="mailto:mytharcher@gmail.com">&lt;mytharcher@gmail.com&gt;</a></dd>
38-
<dt>工作信息：</dt>
39-
<dd>自由职业者</dd>
40-
</dl>
41-
</article>
42-
<article>
43-
<h3>金融与比特币</h3>
44-
<dl>
45-
<dt>讲师：</dt>
46-
<dd>王楚安 <a href="mailto:we2code@gmail.com">&lt;we2code@gmail.com&gt;</a></dd>
47-
<dt>工作信息：</dt>
48-
<dd>昆明维智众源企业管理咨询有限公司</dd>
49-
</dl>
50-
</article>
51-
<article>
52-
<h3>15分钟内写出realtime应用——Meteor介绍</h3>
53-
<dl>
54-
<dt>讲师：</dt>
55-
<dd>张锐 <a href="mailto:stamen0630@gmail.com">&lt;stamen0630@gmail.com&gt;</a></dd>
56-
<dt>工作信息：</dt>
57-
<dd>恒翌科技</dd>
58-
</dl>
59-
</article>
60-
<article>
61-
<h3>待定</h3>
62-
<dl>
63-
<dt>讲师：</dt>
64-
<dd>高纯</dd>
65-
<dt>工作信息：</dt>
66-
<dd></dd>
67-
</dl>
68-
</article>
177+
</div>
178+
</header>
179+
180+
<div class="row topics">
181+
<div class="container">
182+
<ul>
183+
<li>
184+
<figure>
185+
<img src="http://en.gravatar.com/avatar/3f28ab5de36c63192e702a06d1e0652e?s=160"/>
186+
<figcaption>李维</figcaption>
187+
</figure>
188+
<h3>Odoo(OpenERP)Python环境的快速数据库应用开发</h3>
189+
<p><abbr title="昆明维智众源企业管理咨询有限公司">维智众源</abbr> 软件工程师</p>
190+
<p><a href="mailto:liwei@sandwych.com">liwei@sandwych.com</a></p>
191+
</li>
192+
<li>
193+
<figure>
194+
<img src="http://en.gravatar.com/avatar/1cd8c12591616d8c22aaa624f8c07834?s=160"/>
195+
<figcaption>严俊羿</figcaption>
196+
</figure>
197+
<h3>再造轮子之JS模板引擎</h3>
198+
<p>自由职业者 软件工程师</p>
199+
<p><a href="mailto:mytharcher@gmail.com">mytharcher@gmail.com</a></p>
200+
</li>
201+
<li>
202+
<figure>
203+
<img src="http://en.gravatar.com/avatar/3f28ab5de36c63192e702a06d1e0652e?s=160"/>
204+
<figcaption>王楚安</figcaption>
205+
</figure>
206+
<h3>金融与比特币</h3>
207+
<p>自由职业者 软件工程师</p>
208+
<p><a href="mailto:we2code@gmail.com">we2code@gmail.com</a></p>
209+
</dl>
210+
</li>
211+
<li>
212+
<figure>
213+
<img src="http://en.gravatar.com/avatar/3f28ab5de36c63192e702a06d1e0652e?s=160"/>
214+
<figcaption>张锐</figcaption>
215+
</figure>
216+
<h3>15分钟写出realtime应用——Meteor介绍</h3>
217+
<p><abbr title="云南恒翌科技有限公司">恒翌科技</abbr> 软件工程师</p>
218+
<p><a href="mailto:we2code@gmail.com">we2code@gmail.com</a></p>
219+
</li>
220+
<li>
221+
<figure>
222+
<img src="http://en.gravatar.com/avatar/3f28ab5de36c63192e702a06d1e0652e?s=160"/>
223+
<figcaption>高纯</figcaption>
224+
</figure>
225+
<h3>待定</h3>
226+
<p>xxxx 软件工程师</p>
227+
<p><a href="mailto:">email</a></p>
228+
</li>
229+
</ul>
230+
</div>
69231
</div>
70232

233+
<footer class="row">
234+
<div class="container">
235+
<h2>分享·交流·共创</h2>
236+
<p>该聚会源于“昆明开花者”群，旨在通过有关互联网技术和其他话题的交流分享，提升昆明本地较为落后的技术氛围，并借此机会建立一个长期交流分享的社区，以促进成员之间互助提高和资源共享。</p>
237+
<p class="copyright">&copy; 2014</p>
238+
</div>
239+
</footer>
240+
71241
</body>
72242
</html>

0 commit comments

Comments
 (0)