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