222 lines
6.5 KiB
HTML
222 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-Hans">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="Cache-Control" content="no-siteapp">
|
|
<title>Profile on Blockchain | Luo Tianyi CodeLab</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
|
|
background-color: #f0f4ff;
|
|
margin: 0 50px;
|
|
margin-top: 100px;
|
|
margin-bottom: 50px;
|
|
padding: 0;
|
|
display: flex;
|
|
gap: 60px;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
min-width: 600px;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
body {
|
|
margin: 0;
|
|
min-width: 600px;
|
|
padding: 50px 20px;
|
|
}
|
|
}
|
|
|
|
svg path {
|
|
fill: #555;
|
|
}
|
|
|
|
a {
|
|
color: #3b82f6;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: #3b82f6;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
a.button {
|
|
display: inline-block;
|
|
padding: 0.5rem 1rem;
|
|
background: #66ccff;
|
|
color: white;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.button:hover {
|
|
background: #3b82f6;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.card {
|
|
background-color: white;
|
|
width: 600px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
padding: 20px;
|
|
}
|
|
|
|
.card-profile-header {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.card-profile-header img {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.card-profile-header div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-profile-header h1 {
|
|
font-size: 1.8rem;
|
|
margin: 0;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.card-profile-header span {
|
|
font-size: 1rem;
|
|
color: gray;
|
|
}
|
|
|
|
.card-profile-desc {
|
|
margin-top: 2.5rem;
|
|
}
|
|
|
|
.card-profile-desc p {
|
|
margin: 10px 0;
|
|
font-size: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
.card-profile-props {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.card-profile-props .card-profile-props-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: left;
|
|
margin-bottom: 1.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.card-profile-props .card-profile-props-item img {
|
|
width: 1.2rem;
|
|
height: 1.2rem;
|
|
margin-right: .1rem;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.card-profile-props .card-profile-props-item a {
|
|
margin-top: .5rem;
|
|
padding: .5rem 1rem;
|
|
background: #f5f5f5;
|
|
border-radius: 5px;
|
|
color: #555;
|
|
font-weight: 400;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.card-profile-props .card-profile-props-item a:hover {
|
|
background: #e8e8e8;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.inscription {
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.inscription a {
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="card-profile-header">
|
|
<img src="/assets/profile-avatar.webp" alt="Profile Avatar">
|
|
<div>
|
|
<h1>Luo Tianyi</h1>
|
|
<span>luotianyi.eth</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-profile-desc">
|
|
<p>华风夏韵·洛水天依 | 世界首位中文 VOCALOID 虚拟歌手，生日 2012 年 7 月 12 日，代表色 66CCFF。</p>
|
|
<p>性格内向安静，感性细腻。拥有「共鸣」的特殊能力，能够感受并且读出人类所藏的「心中的歌声」。</p>
|
|
</div>
|
|
<div class="card-profile-props">
|
|
<div class="card-profile-props-item">
|
|
<span>
|
|
<img src="/assets/icon/bx-globe.svg" alt="位置图标">
|
|
位置
|
|
</span>
|
|
<a href="/assets/VOCALOID_CHINA_ART_COLLECTIONS.pdf" target="_blank">
|
|
瓦纳海姆
|
|
</a>
|
|
</div>
|
|
<div class="card-profile-props-item">
|
|
<span>
|
|
<img src="/assets/icon/bx-envelope.svg" alt="邮箱图标">
|
|
电子邮箱
|
|
</span>
|
|
<a href="mailto:me@lty.name" target="_blank">
|
|
me@lty.me
|
|
</a>
|
|
</div>
|
|
<div class="card-profile-props-item">
|
|
<span>
|
|
<img src="/assets/icon/bx-link-alt.svg" alt="链接图标">
|
|
网页
|
|
</span>
|
|
<a href="https://lty.name/" target="_blank">
|
|
lty.name
|
|
</a>
|
|
</div>
|
|
<div class="card-profile-props-item">
|
|
<span>
|
|
<img src="/assets/icon/bx-link-alt.svg" alt="链接图标">
|
|
网页
|
|
</span>
|
|
<a href="https://luotianyi.eth.limo" target="_blank">
|
|
luotianyi.eth.limo
|
|
</a>
|
|
</div>
|
|
<div class="card-profile-props-item">
|
|
<span>
|
|
<img src="/assets/icon/bx-wallet-alt.svg" alt="钱包地址图标">
|
|
地址
|
|
</span>
|
|
<a href="https://app.ens.domains/luotianyi.eth" target="_blank">
|
|
0x66CCffDE4E5941aD0593adE6e6Fe23e8CE1550C6
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="inscription">
|
|
<a href="faq" class="button">链上刻字 —「永不停止的歌声」FAQ</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|