-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
278 lines (255 loc) · 11 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
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
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="shortcut icon" href="https://helloqingfeng.github.io/front-end-index/img/favicon.png"/>
<link rel="stylesheet" type="text/css" href="css/app.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
<title>黑森林--每天三分钟的科技新闻</title>
<meta name="keywords" content="科技,媒体,通信,科技资讯,聚合阅读,精选,无码科技">
<meta name="description" content="每天三分钟的科技新闻聚合阅读">
</head>
<body>
<header class="topimg">
<div class="container">
<div class="topbox">
<h1>Hello world</h1>
<p><img src="image/text.png"></p>
</div>
<div class="formbox">
<p class="text-center">CREATE YOUR ACCOUNT</p>
<P class="text-center">IT IS ABBSOLUTELY FREE</P>
<form class="sign-in">
<input class="sign-item" type="text" name="user" placeholder="[email protected]">
<input class="sign-item" type="password" name="password" placeholder="create your password">
<!-- <input type="submit" name="submit" value="SIGN UP"> -->
<button type="submit">SIGN UP</button>
</form>
</div>
</div>
</header>
<section class="wrap-center">
<div class="secbody">
<p class="sectitle">Boatloads of Awesome</p>
<p class="sectext">Ready-made, customizable, HTML landing page sections</p>
</div>
<div class="secwrap">
<div class="secpanel">
<div class="panel">
<div class="panel-img">
<img src="image/Iphone Icon.png">
</div>
<div class="panel-body">
<p class="panel-title">Mobile first</p>
<p class="panel-text">All modulz are built mobile-first for maximum device compatibility.</p>
</div>
</div>
<div class="panel">
<div class="panel-img">
<img src="image/Check Icon.png">
</div>
<div class="panel-body">
<p class="panel-title">Accessibility</p>
<p class="panel-text">Support for IE8, mobile and tablet devices, screenreaders and color blind.</p>
</div>
</div>
<div class="panel">
<div class="panel-img">
<img src="image/Pencil Icon.png">
</div>
<div class="panel-body">
<p class="panel-title">Fluid Typography</p>
<p class="panel-text">On different screen sizes, fonts automagically scale with the viewport.</p>
</div>
</div>
<div class="panel">
<div class="panel-img">
<img src="image/Settings Icon.png">
</div>
<div class="panel-body">
<p class="panel-title">Customization</p>
<p class="panel-text">Make any design your own using the Style Editor. Personalize fonts,colors,and layouts to create the custom look you want.</p>
</div>
</div>
</div>
</div>
</section>
<article class="artback">
<div class="artcontent">
<div class="artpanel">
<div>
<h2>Supportive policies for China's smart car</h2>
<p>Sit ad omnis essent accumsan, no vis ludus ubique platonem.Sit ad omnis essent accumsan, no vis ludus ubique platonem.Sit ad omnis essent accumsan, no vis ludus ubique platonem.</p>
</div>
<button class="btn btn-primary">CHECK OUT FEATURES</button><button class="btn btn-info">TRY PRODUCT FOR FREE</button>
</div>
<div class="artimg">
<div class="ipad"><img src="image/IPad.png"></div>
<div class="screen"><img src="image/Screen.png"></div>
</div>
</div>
</article>
<div class="main-four wrap-center">
<div>
<h1 class="text-center">Try Our Awesome Products</h1>
</div>
<div class="four-box">
<div class="four-item">
<div class="four-img text-center"><img src="image/Portland.png"></div>
<div class="four-text text-center"><p>Li Jun, a China Academy of Engineering academician and also director of the alliance's experts' committee, said that China will also launch design guidance for smart cars, smart map architecture and standards for test grounds.</p></div>
</div>
<div class="four-item">
<div class="four-img text-center"><img src="image/Hero.png"></div>
<div class="four-text text-center"><p>Li said the smart car industry is able to enlarge the current car industry by 1 trillion yuan ($158.15 billion) and also able to boost fast development in 5G, internet of cars, big data, artificial intelligence and new-energy vehicles.</p></div>
</div>
<div class="four-item text-center">
<div class="four-img text-center"><img src="image/Singleton.png"></div>
<div class="four-text"><p>Zhang Junyi, a partner with NIO Capital, said that the smart car is the trend for the car industry and China's auto sector will usher in a new key development stage with the improvement of infrastructure, technology, policies and laws.</p></div>
</div>
</div>
</div>
<hr class="hr-line">
<div class="wrap-center">
<div class="five-box">
<div class="five-item">
<div class="five-img f-left"><img src="image/leaf.jpg"></div>
<div class="five-text">
<h2>Learn How To Improve Your Business</h2>
<p>Zhang Junyi, a partner with NIO Capital, said that the smart car is the trend for the car industry and China's auto sector will usher in a new key development stage with the improvement of infrastructure, technology, policies and laws.
</p>
</div>
</div>
<div class="five-item">
<div class="five-text f-left">
<h2>Choose Between Two Beautifully Designed color Schemes</h2>
<p>Zhang Junyi, a partner with NIO Capital, said that the smart car is the trend for the car industry and China's auto sector will usher in a new key development stage with the improvement of infrastructure, technology, policies and laws.
</p>
</div>
<div class="five-img"><img src="image/bird.jpg"></div>
</div>
</div>
</div>
<hr class="hr-line">
<div class="wrap-center">
<div class="six-text">
<h2 class="text-center">Our Awesome Team</h2>
<p class="text-center">风乍起，吹皱一池春水。闲引鸳鸯香径里，手挼红杏蕊。斗鸭阑干独倚，碧玉搔头斜坠。终日望君君不至，举头闻鹊喜。世界上最可贵的两个词：一个叫“认真”，一个叫“坚持”。认真的人改变自己，坚持的人改变命运 。</p>
</div>
<div class="six-box">
<div class="media">
<div class="media-img"><img src="image/001.png"></div>
<div class="media-body text-center">
<h3>张向东</h3>
<p>腾讯技术官</p>
<span><a href="https://www.facebook.com/" target="_blank"><img src="image/Facebook.png"></a></span>
<span><a href="https://www.instagram.com/" target="_blank"><img src="image/Instagram.png"></a></span>
<span><a href="https://www.twitter.com/" target="_blank"><img src="image/Twitter.png"></a></span>
</div>
</div>
<div class="media">
<div class="media-img"><img src="image/002.png"></div>
<div class="media-body text-center">
<h3>马化腾</h3>
<p>腾讯董事长</p>
<span><a href="https://www.facebook.com/" target="_blank"><img src="image/Facebook.png"></a></span>
<span><a href="https://www.facebook.com/" target="_blank"><img src="image/Instagram.png"></a></span>
<span><a href="https://www.facebook.com/" target="_blank"><img src="image/Twitter.png"></a></span>
</div>
</div>
<div class="media">
<div class="media-img"><img src="image/003.png"></div>
<div class="media-body text-center">
<h3>李彦宏</h3>
<p>百度技术官</p>
<span><a href="https://www.facebook.com/" target="_blank"><img src="image/Facebook.png"></a></span>
<span><a href="https://www.facebook.com/" target="_blank"><img src="image/Instagram.png"></a></span>
<span><a href="https://www.facebook.com/" target="_blank"><img src="image/Twitter.png"></a></span>
</div>
</div>
<div class="media">
<div class="media-img"><img src="image/004.png"></div>
<div class="media-body text-center">
<h3>丁磊</h3>
<p>网易技术官</p>
<span><a href="https://www.facebook.com/" target="_blank"><img src="image/Facebook.png"></a></span>
<span><a href="https://www.facebook.com/" target="_blank"><img src="image/Instagram.png"></a></span>
<span><a href="https://www.facebook.com/" target="_blank"><img src="image/Twitter.png"></a></span>
</div>
</div>
</div>
</div>
<hr class="hr-line">
<aside class="seven-wrap wrap-center">
<form class="message">
<fieldset>
<h2 class="text-center">FELL FREE TO WITH US</h2>
<input class="mess-item" type="email" name="" placeholder="Email">
<input class="mess-item" type="text" name="" placeholder="Subject">
<textarea class="mess-item" placeholder="messages"></textarea>
<!-- <input class="mess-item" type="submit" name="" value="send"> -->
<button class="mess-item">SEND</button>
</fieldset>
</form>
<div class="contact">
<div class="con-body">
<h2>CONTACTS</h2>
<p>世界上最可贵的两个词：一个叫“认真”，一个叫“坚持”。认真的人改变自己， 坚持的人改变命运 。 世界上最可贵的两个词：一个叫“认真”，一个叫“坚持”。认真的人改变自己， 坚持的人改变命运 。 </p>
</div>
<div class="flex-two">
<div class="flex-item"><img src="image/Map Icon.png"></div>
<div class="flex-item">360 King Street Feastrvale Trevose, PA 19057</div>
</div>
<div class="flex-two">
<div class="flex-item"><img src="image/Phone Icon.png"></div>
<div class="flex-item">(755) 564-84-12</div>
</div>
<div class="flex-two">
<div class="flex-item"><img src="image/Mail Icon.png"></div>
<div class="flex-item">[email protected]</div>
</div>
</div>
</aside>
<footer>
<div class="foot-item">
<p>Learn More</p>
<ul>
<li><a href="#">How It Works</a></li>
<li><a href="#">Meeting Tools</a></li>
<li><a href="#">How It Works</a></li>
<li><a href="#">Meeting Tools</a></li>
</ul>
</div>
<div class="foot-item">
<p>ABOUT US</p>
<ul>
<li><a href="#">How It Works</a></li>
<li><a href="#">Meeting Tools</a></li>
<li><a href="#">How It Works</a></li>
<li><a href="#">Meeting Tools</a></li>
</ul>
</div>
<div class="foot-item">
<p>SUPPORT</p>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Live Chat</a></li>
<li><a href="#">Phone Call</a></li>
</ul>
</div>
<div class="foot-item">
<p>ENJOY YOUR LIFE</p>
<p style="font-size:16px;color: #646464;word-spacing:normal">Great web UI kit for designers, freelancers or business.</p>
<p><a href="https://www.facebook.com/"><img src="image/Twitter Icon.png"></a>
<a href="https://www.facebook.com/"><img src="image/Facebook Icon.png"></a>
<a href="https://www.facebook.com/"><img src="image/Google Icon.png"></a>
<a href="https://www.facebook.com/"><img src="image/Tumbler Icon.png"></a>
<a href="#top"><img src="image/Pinterest Icon.png"></a>
<a href="#top"><img src="image/LinkedIn Icon.png"></a>
</p>
</div>
</footer>
</body>
</html>