-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
144 lines (138 loc) · 4.52 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
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"
/>
<!-- AOS Styling -->
<!--Obtained from: https://michalsnik.github.io/aos/ -->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,500;0,600;0,700;0,800;1,300;1,400&display=swap"
rel="stylesheet"
/>
<!-- Custom Styles -->
<link rel="stylesheet" href="assets/css/styles.css" />
<title>Home | Zhaoyu's Website</title>
</head>
<body id="home" class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand fw-bold" href="index.html">Zhaoyu Guo</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<ul class="navbar-nav ms-auto">
<li>
<a class="nav-link active" aria-current="page" href="index.html"
>Home</a
>
</li>
<li>
<a class="nav-link" href="overview.html">Overview</a>
</li>
<li><a class="nav-link" href="projects.html">Projects</a></li>
<li><a class="nav-link" href="education.html">Education</a></li>
<li>
<a class="nav-link" href="process.html">Process</a>
</li>
<li class="ms-2">
<a href="contact.html" class="btn btn-nav btn-light w-100"
>Contact me</a
>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main
id="content"
class="
bg-primary
d-flex
flex-column
justify-content-center
text-center text-white
"
>
<div class="container">
<div id="textWrapper" class="mb-4">
<h1
class="display-1 fw-bold"
data-aos="fade-up"
data-aos-duration="1000"
>
Hi
</h1>
<h2
class="display-4"
data-aos="fade-up"
data-aos-duration="1000"
data-aos-delay="1000"
>
I make amazing things.
</h2>
</div>
<a
href="Overview.html"
class="btn btn-light btn-lg"
data-aos="fade-up"
data-aos-duration="1000"
data-aos-delay="2500"
>Learn more.</a
>
</div>
</main>
<!-- Sticky footer inspired from Sticky Footer Examples -->
<!-- https://getbootstrap.com/docs/5.0/examples/sticky-footer/ -->
<footer class="footer mt-auto text-white bg-primary">
<div class="container">
<div class="row gy-2">
<div class="col-lg-8">
<p class="m-0">Copyright © 2021 Zhaoyu Guo.</p>
</div>
<!-- footer navigation -->
<div class="col-lg-4">
<nav class="navbar-footer">
<ul>
<li><a href="" class="text-white me-2">Footer</a></li>
<li><a href="" class="text-white me-2">Footer</a></li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"
></script>
<!-- AOS -->
<!--Obtained from: https://michalsnik.github.io/aos/ -->
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>