Skip to content

Commit

Permalink
新增个人主页导航单页
Browse files Browse the repository at this point in the history
  • Loading branch information
@realwds
realwds committed Nov 5, 2024
1 parent 79c35e0 commit 25aa7da
Show file tree
Hide file tree
Showing 2 changed files with 266 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
| 14 |[新浪每日搞笑动图](https://github.com/realwds/super-single-page/blob/gh-pages/pages/新浪每日搞笑动图.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/新浪每日搞笑动图.html)|
| 15 |[照片墙特效](https://github.com/realwds/super-single-page/blob/gh-pages/pages/照片墙特效.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/照片墙特效.html)|
| 16 |[抽奖小游戏](https://github.com/realwds/super-single-page/blob/gh-pages/pages/抽奖小游戏.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/抽奖小游戏.html)|
| 17 |[个人主页导航](https://github.com/realwds/super-single-page/blob/gh-pages/pages/个人主页导航.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/个人主页导航.html)|

## packages

Expand Down
265 changes: 265 additions & 0 deletions pages/个人主页导航.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,265 @@
<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>realwds</title>
<meta name="description" content="seo description">
<meta property="og:title" content="seo title">
<meta property="og:url" content="seo url">
<meta property="og:image" content="seo image">
<meta property="profile:username" content="seo username">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="twitter title">
<meta name="twitter:image" content="twitter image">
<meta name="twitter:url" content="twitter url">
<link rel="shortcut icon" href="https://github.githubassets.com/favicons/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="https://gw.alipayobjects.com/os/k/font/lxgwwenkaiscreenr.css" crossorigin="anonymous">
<style>
body,
html {
font-family: "LXGW WenKai Screen R", "Inter";
font-style: normal;
font-weight: 400;
margin: 0;
padding: 0;
overscroll-behavior: none;
font-display: swap;
-webkit-font-smoothing: subpixel-antialiased;
}

.min-h-full {
min-height: 100vh;
}

.flex {
display: flex;
}

.flex-center {
align-items: center;
justify-content: center;
}

.mt-12 {
margin-top: 12px;
}

.mt-16 {
margin-top: 16px;
}

.mt-28 {
margin-top: 28px;
}

.m-auto {
margin: auto;
}

.py-10 {
padding: 10px;
}

.ln-h-22 {
line-height: 22px;
}

.page-bg {
height: 100vh;
inset: 0;
position: fixed;
width: 100vw;
z-index: -1;
background: #FFFFFF;
}

.display-image {
object-fit: cover;
border-radius: 50%;
display: block;
height: 96px;
width: 96px;
}

.text-center {
text-align: center;
}

.page-title {
margin-bottom: 0;
font-size: 22px;
font-weight: 700;
}

.page-full-wrap {
margin-top: 24px;
padding-bottom: 60px;
width: 680px;
z-index: 10;
}

.page-item-wrap {
transition: transform .15s cubic-bezier(.17, .67, .29, 2.71) 0s;
margin: 18px 0;
}

.page-item-wrap:last-child {
margin-bottom: 0;
}

.page-item-wrap:hover {
transform: translate3d(0px, 0px, 0px) scale(1.015);
}

.page-item {
box-sizing: border-box;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
border: 0px solid transparent;
background: #f2f2f2;
border-radius: 30px;
}

.relative {
position: relative;
}

.link-each-image {
height: 43px;
left: 9px;
object-fit: cover;
position: absolute;
width: 43px;
border-radius: 30px;
}

.page-item-each {
box-sizing: border-box;
overflow: hidden;
text-decoration: none;
z-index: 10;
color: #000000;
font-size: 16px;
font-weight: 400;
text-transform: none;
border-radius: 30px;
min-height: 60px;
}

.item-title {
width: 55%;
word-break: break-word;
letter-spacing: 0.5px;
}

.page-bioline {
font-size: 16px;
font-weight: 500;
}

.page-text-font {
text-transform: none;
letter-spacing: 0.5px;
}

.page-text-color {
color: #000000;
}

.top-sec {
padding-bottom: 18px;
justify-content: space-between;
}

@media (max-width: 768px) {
.page-full-wrap {
width: 90%;
}
}

@media (min-width: 764px) {
.top-sec {
padding-bottom: 8px;
}
}

@media only screen and (max-width: 600px) {
body,
html {
max-height: 100svh;
overflow: hidden;
}

.container {
align-items: center;
flex-direction: column;
height: 100svh;
justify-content: space-between;
overflow-y: auto;
}
}
</style>
</head>

<body>
<div class="min-h-full flex flex-center container">
<div class="page-full-wrap relative">
<div class="flex relative top-sec"></div>
<img id="displayImage" class="display-image m-auto" src="https://avatars.githubusercontent.com/u/38198082?v=4" alt role="presentation">
<h1 class="page-title page-text-color page-text-font mt-16 text-center">realwds</h1>
<h2 class="page-bioline page-text-color page-text-font mt-12 ln-h-22 text-center">数学系的挨踢者</h2>
<div class="mt-28">
<div class="page-item-wrap relative">
<div class="page-item flex flex-center absolute"></div>
<a target="_blank" rel="noopener nofollow" class="page-item-each py-10 flex flex-center" href="https://github.com/realwds">
<img class="link-each-image" src="https://github.githubassets.com/favicons/favicon.svg" alt="Github">
<span class="item-title text-center">Github</span>
</a>
</div>
<div class="page-item-wrap relative">
<div class="page-item flex flex-center absolute"></div>
<a target="_blank" rel="noopener nofollow" class="page-item-each py-10 flex flex-center" href="https://github.com/realwds">
<img class="link-each-image" src="https://github.githubassets.com/favicons/favicon.svg" alt="Github">
<span class="item-title text-center">Github</span>
</a>
</div>
<div class="page-item-wrap relative">
<div class="page-item flex flex-center absolute"></div>
<a target="_blank" rel="noopener nofollow" class="page-item-each py-10 flex flex-center" href="https://github.com/realwds">
<img class="link-each-image" src="https://github.githubassets.com/favicons/favicon.svg" alt="Github">
<span class="item-title text-center">Github</span>
</a>
</div>
<div class="page-item-wrap relative">
<div class="page-item flex flex-center absolute"></div>
<a target="_blank" rel="noopener nofollow" class="page-item-each py-10 flex flex-center" href="https://realwds.com/">
<img class="link-each-image" src="https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/favicon.png" alt="博客">
<span class="item-title text-center">博客</span>
</a>
</div>
<div class="page-item-wrap relative">
<div class="page-item flex flex-center absolute"></div>
<a target="_blank" rel="noopener nofollow" class="page-item-each py-10 flex flex-center" href="https://realwds.com/">
<img class="link-each-image" src="https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/favicon.png" alt="博客">
<span class="item-title text-center">博客</span>
</a>
</div>
<div class="page-item-wrap relative">
<div class="page-item flex flex-center absolute"></div>
<a target="_blank" rel="noopener nofollow" class="page-item-each py-10 flex flex-center" href="https://realwds.com/">
<img class="link-each-image" src="https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/favicon.png" alt="博客">
<span class="item-title text-center">博客</span>
</a>
</div>
</div>
</div>
</div>
</body>

</html>

0 comments on commit 25aa7da

Please sign in to comment.