-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (124 loc) · 5.23 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zeyu Li</title>
<link rel="stylesheet" href="style.css"/>
<link rel="shortcut icon" href="favicon.png" type="image/x-icon"/>
</head>
<body>
<header>
<a href="/" class="favicon-link">
<img src="favicon.png" alt="Home" class="favicon">
</a>
<nav class="header-content">
<a href="/about/" class="en">About Me</a>
<a href="/about/" class="zh">我的简介</a>
<a href="/projects/" class="en">My Projects</a>
<a href="/projects/" class="zh">我的项目</a>
<a href="/contact/" class="en">Contact</a>
<a href="/contact/" class="zh">联系方式</a>
</nav>
<div class="language-dropdown">
<button id="language-toggle">English</button>
<div class="dropdown-content">
<a href="#" data-lang="en">English</a>
<a href="#" data-lang="zh">中文</a>
</div>
</div>
</header>
<div class="body-content">
<div class="profile-picture">
<img src="photo_background.jpg" alt="Your Name">
<div class="overlay-text">
<span class="en">Welcome to my website!</span>
<span class="zh">欢迎来到我的网站！</span>
</div>
</div>
<div class="motto" id="motto">
<div class="en"><h2>But I have promises to keep, </h2>
<h2 font-weight="400">And miles to go before I sleep, </h2>
<h2 font-weight="400">And miles to go before I sleep.</h2>
<h2 font-weight="400">- by Robert Frost</h2></div>
<div class="zh"><h2>在我入睡前，依然有诺言要遵守，</h2>
<h2>依然有漫漫长路要走，</h2>
<h2>依然有漫漫长路要走。</h2>
<h2>——罗伯特·弗罗斯特</h2></div>
</div>
<main>
<div class="content-wrapper">
<div class="content">
<section class="about">
<a href="/about/">
<div class="content-wrapper">
<div class="image-wrapper left">
<img src="photo1.jpg" alt="About Me Image">
</div>
<div class="text-wrapper">
<div class="en">
<h2>About Me</h2>
<div class="line"></div>
<p>Learn more about my current status and the past</p>
</div>
<div class="zh">
<h2>我的简介</h2>
<div class="line"></div>
<p>了解我的现状和过去</p>
</div>
</div>
</div>
</a>
</section>
<section class="projects">
<a href="/projects/">
<div class="content-wrapper">
<div class="text-wrapper">
<div class="en">
<h2>My Projects</h2>
<div class="line"></div>
<p>Explore my projects and see what I've been working on</p>
</div>
<div class="zh">
<h2>我的项目</h2>
<div class="line"></div>
<p>探索我的项目，看看我一直在做什么</p>
</div>
</div>
<div class="image-wrapper right">
<img src="photo2.jpg" alt="My Projects Image">
</div>
</div>
</a>
</section>
<section class="contact">
<a href="/contact/">
<div class="content-wrapper">
<div class="image-wrapper left">
<img src="photo3.jpg" alt="Contact Image">
</div>
<div class="text-wrapper">
<div class="en">
<h2>Contact</h2>
<div class="line"></div>
<p>Get in touch with me for collaborations or inquiries</p>
</div>
<div class="zh">
<h2>联系方式</h2>
<div class="line"></div>
<p>与我联系以进行合作或咨询</p>
</div>
</div>
</div>
</a>
</section>
</div>
</div>
</main>
</div>
<footer>
<p>© 2024 Zeyu Li</p>
</footer>
<script src="script.js"></script>
</body>
</html>