-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
216 lines (182 loc) · 5.38 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
<!doctype html>
<!-- Special Thanks The Author of "bideo.js" and This Opensource Project. You helped me a lot about build this page -->
<!-- 特别鸣谢 "bideo.js" 开源项目及其作者，这对我构建此页面帮助很大 -->
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Jerry's HomePage</title>
<meta name="keywords" content="css3, html5, js, background video, fullscreen video">
<meta name="description" content="Super easy to implement HTML5 fullscreen background video library in JavaScript.">
<style>
* {
margin: 0; padding: 0;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
#container {
overflow: hidden;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
#background_video {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
height: 100%; width: 100%;
}
#video_cover {
position: absolute;
width: 100%; height: 100%;
background: url('video_cover.jpeg') no-repeat;
background-size: cover;
background-position: center;
}
#video_controls {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
#play img {
width: 100px;
}
#pause img {
width: 90px;
}
#pause {
display: none;
}
@media (min-width: 768px) {
#video_controls {
display: none;
}
}
/* Demo page specific styles */
body {
text-align: center;
font-family: 'proxima-nova', Helvetica;
}
#container {
height: 100%;
}
#overlay {
position: absolute;
top: 0; right: 0; left: 0; bottom: 0;
background: rgba(0,0,0,0.5);
}
#main_content {
z-index: 2;
position: relative;
display: inline-block;
/* Vertical center */
top: 50%;
transform: translateY(-50%);
}
#main_content h1 {
text-transform: uppercase;
font-weight: 600;
font-family: 'proxima-nova-condensed', Helvetica;
color: #fff;
font-size: 35px;
}
#main_content .sub_head {
color: rgba(255,255,255,0.5);
font-size: 18px;
}
#main_content .info {
color: rgba(255,255,255,0.5);
font-size: 12px;
margin-top: 10px;
}
#links {
margin-top: 50px;
}
#links a {
border: 2px solid rgba(255,255,255,0.20);
border-radius: 61px;
font-size: 12px;
color: #FFFFFF;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
padding: 10px 25px;
display: inline-block;
margin-right: 15px;
}
#githubHome{
cursor: pointer;
}
#footer {
position: absolute;
bottom: 0; left: 0; right: 0;
}
#footer a {
color: rgba(255,255,255,0.5);
text-decoration: none;
margin: 10px;
font-size: 12px;
}
#footer a:first-child {
float: left;
}
#footer a:last-child {
float: right;
}
</style>
<script src="https://use.typekit.net/nlq1kdt.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
<body>
<div id="container">
<video id="background_video" loop muted></video>
<div id="video_cover"></div>
<div id="overlay"></div>
<div id="video_controls">
<span id="play">
<img src="play.png">
</span>
<span id="pause">
<img src="pause.png">
</span>
</div>
<section id="main_content">
<div id="head">
<h1>这里是Jerry的主页</h1>
<p class="sub_head">所有我制作的开源项目都在此展示，您可点击对应项查看预览效果</p>
<p class="info">（稍安勿躁，这个背景视频需要一段时间加载）</p>
</div>
<div id="links">
<a link="https://github.com/Jerry114514" id="githubHome">My Github HomePage || 我的Github主页</a>
<br>
<br>
<a href=".\bf1-webtool\index.html">bf1-webtool-template || 战地1网页工具模板</a>
<a href=".\bf1-web-wiki\index.html">战地1网页百科全书（制作中）</a>
</div>
</section>
</div>
<div id="footer">
<a href="https://space.bilibili.com/57439297">Follow me on BiliBili 在哔哩哔哩关注我</a>
<a href="https://github.com/rishabhp/bideo.js">Special Thanks The Author of "bideo.js" and This Opensource Project || 特别鸣谢 "bideo.js" 的作者及此开源项目</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<a href="https://www.youtube.com/watch?v=w7JrHIHi8t0" target="_blank">
Video by shortenit
</a>
</div>
<script src="bideo.js"></script>
<script src="main.js"></script>
<script>
if (window.location.host.indexOf('github.io') !== -1 && window.location.protocol !== "https:") {
window.location.protocol = "https";
}
/* ------- */
let homeBtn = document.querySelector("#githubHome").addEventListener("click",function(){
window.location.href = "https://github.com/Jerry114514";
removeEventListener();
})
</script>
</body>
</html>