-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (149 loc) · 10.3 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
<!-- <!DOCTYPE html> -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="hp_style.css">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/houtou_icon_16x16.png">
<script>
function scrollWindow(){
window.scrollTo(960,350);
}
// $(document).ready(function(){
// $('#box').css('height',$('#box').css('width'));
// })
</script>
<title>Von.io</title>
</head>
<body>
<!-- 浮动的标题栏和导航 -->
<header class="page-header">
<div class="ph-band"></div>
<div class="ph-img">
<div id="QR-code">
<img src="\img\QR_code03.png">
<p>Mobile</p>
</div>
<div class="wrapper">
<div class="ph-title">
<span class="Von">VON</span>
<span class="Von-sentence screen-resp-sentence">"饮 酒 南 山 ， 春 宵 嫣 然"</span>
<!-- <p>Hello</p> -->
</div>
<div class="ph-nav screen-resp-nav-width">
<ul class="Upper">
<li><a class="screen-resp-nav" href="#Link-intro">页首</a></li>
<li><a class="screen-resp-nav" href="#Link-skill">技能</a></li>
<li><a class="screen-resp-nav" href="#Link-works">设计</a></li>
<li><a class="screen-resp-nav" href="#Link-novels">故事</a></li>
<li><a class="screen-resp-nav" href="#Link-CG">图像</a></li>
<li><a class="screen-resp-nav" href="#Link-Cont">联系</a></li>
</ul>
</div>
</div>
</div>
<div class="gradient-div"></div>
</header>
<!-- 网页内容主体 -->
<div class="container">
<article>
<div class="wrapper">
<!-- 自我介绍 -->
<header class="article-header">
<h1 id="Link-intro" class="titles">关于我<p>Introduction</p></h1>
<div id="intro">
<div class="intro-base">
<div>
<p>林文霆<br><span class="en">Wenting Lin</span></p>
<p>同济大学工业设计在读</p>
</div>
<div>
<img id="intro-img" src="\img\Me.png" alt="">
</div>
</div>
<p>
努力学习的设计学生狗一枚，熬夜到无法自拔，沉迷于各种电子技术学习的虚无的充实中。<br>
中二病晚期而写小说，憧憬写作、导片、游戏等自由散漫而糜烂的生活。
<span class="en">
A design student who studies hard, stays up all night but be unable to extricate himself, indulging in the emptiness time of various electronic technology learning.<br>
Written novels once, lookinging forward to a free as well as profligate life such as writing, directing films, and games.
</span>
</p>
</div>
</header>
<!-- 作品内容连接 -->
<section>
<!-- 技能点 -->
<div id="skill">
<h1 id="Link-skill" class="titles">技能点<p>Skills</p></h1>
<div id="skill-points">
<!-- <div class="skill-row"> -->
<div class="skill-points" id="skill-1"><img src="\img\icons\draw.svg"></div>
<div class="skill-points" id="skill-2"><img src="\img\icons\typewriter.svg"></div>
<div class="skill-points" id="skill-3"><img src="\img\icons\movies.svg"></div>
<div class="skill-points" id="skill-4"><img src="\img\icons\blender.svg"></div>
<!-- </div> -->
<!-- <div class="skill-row"> -->
<div class="skill-points" id="skill-5"><img src="\img\icons\rhinoceros.svg"></div>
<div class="skill-points" id="skill-6"><img src="\img\icons\grasshopper.svg"></div>
<div class="skill-points" id="skill-7"><img src="\img\icons\python.svg"></div>
<div class="skill-points" id="skill-8"><img src="\img\icons\css.svg"></div>
<!-- </div> -->
</div>
</div>
<!-- 设计作业 -->
<div id="pj-works">
<h1 id="Link-works" class="titles">设计作业<p>Design Project</p></h1>
<div id="works-list">
<div class="screen-resp"><img src="\img\design\Design_felix_stool.png"><p class="item-title">Felix</p><p class="item-description">宜家黑客凳子。以盘子和盘子架为组件构建，在日常之物的联系中发掘想象的趣味。</p></div>
<div class="screen-resp"><img src="\img\design\Design_aqua_vehicle.png"><p class="item-title">蔚蓝竞速</p><p class="item-description">2035的蔚蓝海洋竞速载具，变形构架、徜徉水中九重奇境。驱动引擎、速度皆在下一秒。</p></div>
<div class="screen-resp"><img src="\img\design\Design_fire_mask.png"><p class="item-title">O-relif</p><p class="item-description">为保障火灾受困者而设计的可持续逃生呼吸器，轻便供氧，协助消防队伍守护人民安全。</p></div>
<div class="screen-resp"><img src="\img\design\Design_toys_home.png"><p class="item-title">Toys Home</p><p class="item-description">独特收纳盒设计，为孩子打造他和玩具的互动社区，希望童心常在、伴随成长。</p></div>
</div>
</div>
<!-- 小说故事投稿 -->
<div id="pj-novels"></div>
<h1 id="Link-novels" class="titles">小说<p>Novels</p></h1>
<div id="novels-list">
<div class="screen-resp"><img id="box" src="\img\novels\distance.png"><p class="item-title">近在咫尺的远方</p><p class="item-description">/粒子是静止的，而时空在以光速向前变化着。其实前面的粒子并没有动，它们在静静地等待着什么，而后方的粒子也不知不觉地停了下来。时空像一条光河般飞逝而过……/</p></div>
<div class="screen-resp"><img id="box" src="\img\novels\star_sky.png"><p class="item-title">星空</p><p class="item-description">/温度骤然地降到了零下几十摄氏度。我的身体渐渐地被冰冻，意识逐渐地模糊。在我的生命机能消失后，我的身躯会在宇宙中飘荡，百年不腐，却会随着这铁板飞船一起烟消云散。可我痴迷地看着星空……/</p></div>
<div class="screen-resp"><img id="box" src="\img\novels\blood_crime.png"><a class="novels-link" id="blood_crime" href="/pages/novels-blood_crime.html">Link</a><p class="item-title">罪与血</p><p class="item-description">/莱茵河往日粼粼的水波此刻也像一只侵略的河狮，汹涌地向前刺去。沿河大道的石板上，被次序前进的装甲车碾压出一声闷响。头戴锃亮铁盔的士兵们满目阴沉地踏过，从旁观的人群眼中刻印出他们血色的剪影……/</p></div>
<div class="screen-resp"><img id="box" src="\img\novels\chess_king.png"><p class="item-title">上校</p><p class="item-description">
/上校昏沉中，看见了金色的沙滩，悬空的狮子。
他声嘶力竭地吼道：“正义万岁！”
群情激愤了，又万籁俱寂了。
突然，传来一声刺耳的笑。
“爸，将军！
……/
</p></div>
</div>
<!-- 视觉艺术练习 -->
<div id="pj-CG"></div>
<h1 id="Link-CG" class="titles">CG练习<p>CG Practice</p></h1>
<div id="CG-list">
<div class="screen-resp"><img src="\img\CG\CG_guru_classic_300.png"><p class="item-title">咖啡甜甜圈</p><p class="item-description">Guru 的经典入门，用来解馋。</p></div>
<div class="screen-resp"><img src="\img\CG\CG_lowpoly_island_300.png"><p class="item-title">空岛</p><p class="item-description">低面数风景，下一步像素世界。</p></div>
<div class="screen-resp"><img src="\img\CG\CG_car_eevee_300.png"><p class="item-title">光晕上海</p><p class="item-description">城市的光污染，放映在前车窗的雨帘。</p></div>
</div>
</section>
<!-- 联系方式 -->
<footer>
<h1 id="Link-Cont" class="titles">联系我<p>Contact Me</p></h1>
<div id="contact-container">
<div><img src="\img\icons\address.svg"><p class="upper">address</p><p class="contact-info">同济西南十一</p></div>
<div><img src="\img\icons\ic_email_round.svg"><p class="upper">mail</p><p class="contact-info">[email protected]</p></div>
<div><img src="\img\icons\wechat.svg"><p class="upper">wechat</p><p class="contact-info">Vontean.lwt</p></div>
</div>
</footer>
</div>
</article>
</div>
<!-- 网页底部提示 -->
<footer class="page-footer">
<p>到底线了哦~</p>
<div></div>
</footer>
</body>
</html>