-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (123 loc) · 3.93 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" href="me.jpg" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IF的个人小屋</title>
<style>
@font-face {
font-family: 汉仪正圆;
src: url(./汉仪正圆/HYZhengYuan-95W.ttf);
}
@media only screen and (orientation:portrait) {
.contain img{
max-width: 90%!important;
}
}
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
.header,.nav,.container,.footer{
float: left;
width: 100%;
}
.header{
background: #ccc;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
.nav{
background: #333;
}
.nav a{
color: #fff;
padding: 10px 20px;
display: inline-block;
}
.nav a:hover{
background: #bbb;
color: #000;
}
.container{
background-image: url("Intro2.png");
background-size: cover;
}
.contain{
height: max-content;
padding: 10px;
margin: auto;
text-align: center;
background-color: rgba(10, 10, 10, 0.5);
}
.contain h2{
font-weight: 900;
font-family: 汉仪正圆;
font-size: 48px;
color: white;
-webkit-text-stroke: 2px rgb(0, 215, 251);
}
.contain p{
font-weight: 900;
font-family: 汉仪正圆;
font-size: 24px;
color: white;
-webkit-text-stroke: 1px rgb(0, 215, 251);
}
.footer{
padding-top: 10px;
padding-bottom: 10px;
background: #ccc;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<div class="header">
<h1>IF的个人小屋</h1>
</div>
<div class="nav">
<a href="#">主页</a>
<a href="1_yume.html">梦之铁路</a>
<a href="2_foxy.html">Foxy的英国铁路之旅</a>
<a href="3_traintype.html">柯林老师的列车种别理论</a>
<a href="4_link.html">友链</a>
</div>
<div class="container">
<div class="contain">
<h2>我是谁？</h2>
<br>
<p>我是大魔王IF，你也可以叫我游戏业界的一阵风。</p>
<br>
<p>Bilibili/Pixiv：IF-游戏业界的一阵风</p>
<p>Twitter：@KagamineX</p>
<p>YouTube：IF The Wind of Gamindustri</p>
<br>
<h2>爱好是？</h2>
<br>
<p>铁路、玩游戏</p>
<br>
<h2>玩什么游戏？</h2>
<br>
<p>碧蓝档案/蔚蓝档案、公主连结、泰拉瑞亚、铁路调度模拟器（Rail Route）、模拟火车世界、模拟火车</p>
<br>
<h2>本月的Road Map：</h2>
<img src="./roadmap/Roadmap.png" width="800">
</div>
</div>
<!-- 链接 -->
<div class="footer">
<a target="_blank" href="https://space.bilibili.com/14823193">Bilibili</a>
<a target="_blank" href="https://www.pixiv.net/users/17593098">Pixiv</a>
<a target="_blank" href="https://twitter.com/KagamineX">Twitter</a>
<a target="_blank" href="https://www.youtube.com/channel/UCu1u-4pgzdnQ_Q6hIr_dmGA">YouTube</a>
</div>
</div>
</body>
</html>