1 changed files with 112 additions and 75 deletions
@ -1,85 +1,122 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh-CN"> |
|||
|
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>Dnomd343</title> |
|||
<link rel="shortcut icon" href="favicon.ico"> |
|||
<style> |
|||
html, |
|||
body { |
|||
background-color: #fff; |
|||
color: #636b6f; |
|||
font-family: 'Raleway'; |
|||
font-weight: 100; |
|||
height: 100vh; |
|||
margin: 0; |
|||
} |
|||
.full-height { |
|||
height: 100vh; |
|||
} |
|||
.flex-center { |
|||
align-items: center; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
.position-ref { |
|||
position: relative; |
|||
} |
|||
.top-right { |
|||
position: absolute; |
|||
right: 10px; |
|||
top: 18px; |
|||
} |
|||
.content { |
|||
text-align: center; |
|||
} |
|||
.title { |
|||
font-size: 84px; |
|||
} |
|||
.links > a { |
|||
color: #636b6f; |
|||
padding: 0 25px; |
|||
font-size: 12px; |
|||
font-weight: 600; |
|||
letter-spacing: .1rem; |
|||
text-decoration: none; |
|||
} |
|||
.m-b-md { |
|||
margin-bottom: 30px; |
|||
} |
|||
.title a img { |
|||
max-height: none!important; |
|||
width: 120px; |
|||
height: 120px; |
|||
overflow: hidden; |
|||
border-radius: 50%; |
|||
background: #FFF; |
|||
box-shadow: rgba(255,255,255,1) 0 0 0 5px, rgba(0,0,0,1) 0 0 5px 4px; |
|||
-webkit-transition: -webkit-transform 600ms; |
|||
-moz-transition: -moz-transform 600ms; |
|||
transition: transform 600ms; |
|||
} |
|||
.title a img:hover { |
|||
-webkit-transform: rotate(360deg); |
|||
-moz-transform: rotate(360deg); |
|||
transform: rotate(360deg); |
|||
} |
|||
</style> |
|||
<style> |
|||
html, |
|||
body { |
|||
background-color: #fff; |
|||
color: #636b6f; |
|||
font-family: 'Raleway'; |
|||
font-weight: 100; |
|||
height: 100vh; |
|||
margin: 0; |
|||
} |
|||
|
|||
.full-height { |
|||
height: 100vh; |
|||
} |
|||
|
|||
.flex-center { |
|||
align-items: center; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.position-ref { |
|||
position: relative; |
|||
} |
|||
|
|||
.top-right { |
|||
position: absolute; |
|||
right: 10px; |
|||
top: 18px; |
|||
} |
|||
|
|||
.content { |
|||
text-align: center; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 84px; |
|||
} |
|||
|
|||
.links>a { |
|||
color: #636b6f; |
|||
padding: 0 25px; |
|||
font-size: 12px; |
|||
font-weight: 600; |
|||
letter-spacing: .1rem; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
.m-b-md { |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.title a img { |
|||
max-height: none!important; |
|||
width: 120px; |
|||
height: 120px; |
|||
overflow: hidden; |
|||
border-radius: 50%; |
|||
background: #FFF; |
|||
box-shadow: rgba(255, 255, 255, 1) 0 0 0 5px, rgba(0, 0, 0, 1) 0 0 5px 4px; |
|||
-webkit-transition: -webkit-transform 600ms; |
|||
-moz-transition: -moz-transform 600ms; |
|||
transition: transform 600ms; |
|||
} |
|||
|
|||
.title a img:hover { |
|||
-webkit-transform: rotate(360deg); |
|||
-moz-transform: rotate(360deg); |
|||
transform: rotate(360deg); |
|||
} |
|||
|
|||
.ICP { |
|||
position: absolute; |
|||
left: 0px; |
|||
right: 0px; |
|||
bottom: 20px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.ICP a { |
|||
text-decoration: none; |
|||
color: #636b6f; |
|||
padding: 0 25px; |
|||
font-size: 12px; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.ICP a:hover { |
|||
color: #343; |
|||
} |
|||
</style> |
|||
</head> |
|||
|
|||
<body> |
|||
<div class="flex-center position-ref full-height"> |
|||
<div class="content"> |
|||
<div class="title m-b-md"> |
|||
<a href="/"> |
|||
<img src="dnomd343.jpg" alt="dnomd343"> |
|||
</a> |
|||
</div> |
|||
<div class="links"> |
|||
<a target="_blank" href="https://www.zhihu.com/people/lin-ju-cong">知乎</a> |
|||
<a target="_blank" href="https://space.bilibili.com/32477702">哔哩哔哩</a> |
|||
<a target="_blank" href="https://github.com/dnomd343">GitHub</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="flex-center position-ref full-height"> |
|||
<div class="content"> |
|||
<div class="title m-b-md"> |
|||
<a href="/"> |
|||
<img src="dnomd343.jpg" alt="dnomd343"> |
|||
</a> |
|||
</div> |
|||
<div class="links"> |
|||
<a target="_blank" href="https://www.zhihu.com/people/lin-ju-cong">知乎</a> |
|||
<a target="_blank" href="https://space.bilibili.com/32477702">哔哩哔哩</a> |
|||
<a target="_blank" href="https://github.com/dnomd343">GitHub</a> |
|||
</div> |
|||
<div class="ICP"> |
|||
<a target="_blank" href="http://www.beian.miit.gov.cn/">粤ICP备20041813号</a> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
Loading…
Reference in new issue