-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (102 loc) · 4.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yuquan Portfolio Website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="logo">
<img src="img/mylogo.jpg" alt="my logo pic">
</div>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="#home" class="nav__link">Home</a></li>
<li class="nav__item"><a href="#services" class="nav__link">My Service</a></li>
<li class="nav__item"><a href="#about" class="nav__link">About Me</a></li>
<li class="nav__item"><a href="#work" class="nav__link">My Work</a></li>
</ul>
</nav>
</header>
<!-- Introduction -->
<section class="intro" id="home">
<h1 class="section__title section__title--intro">
Hi, I am <strong>Yuquan Xu</strong>
</h1>
<p class="section__subtitile section__subtitle--intro">front-end dev</p>
<img src="img/intro_pic.jpg" alt="intro pic" class="intro__img">
</section>
<!-- My services -->
<section class="my-services" id="services">
<h2 class="section__title section__title--services">What I do</h2>
<div class="services">
<div class="service">
<h3>service01</h3>
<p>This is my service 01This is my service 01This is my service 01This is my service 01This is my service 01This is my service 01</p>
</div>
<div class="service">
<h3>service02</h3>
<p>This is my service 02This is my service 02This is my service 02This is my service 02This is my service 02This is my service 02</p>
</div>
<div class="service">
<h3>service03</h3>
<p>This is my service 03This is my service 03This is my service 03This is my service 03This is my service 03This is my service 03</p>
</div>
</div>
<a href="#work" class="btn">My Work</a>
</section>
<!-- About me -->
<section class="about-me" id="about">
<h2 class="section__title section__title--about">Who I am</h2>
<p class="section__subtitle section__subtitle--about">coooooooooooooooooooool</p>
<div class="about-me__body">
<p>This is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about me</p>
</div>
<img src="img/aboutme.jpg" alt="about_me pic" class="about-me__img">
</section>
<!-- My Work -->
<section class="my-work" id="work">
<h2 class="section__title">My Work</h2>
<p class="section__subtitle--work">this is my work</p>
<div class="portfolio">
<a href="#" class="portfolio__item">
<img src="img/portfolio-01.jpg" alt="mywork-01 pic" class="portfolio__img">
</a>
<a href="#" class="portfolio__item">
<img src="img/portfolio-02.jpg" alt="mywork-02 pic" class="portfolio__img">
</a>
<a href="#" class="portfolio__item">
<img src="img/portfolio-03.jpg" alt="mywork-03 pic" class="portfolio__img">
</a>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<a href="mailto:[email protected]" class="footer__link">[email protected]</a>
<ul class="social-list">
<li class="social-list__item">
<a class="social-list__link" href="https://github.com">
<i class="fab fa-github"></i>
</a>
</li>
<li class="social-list__item">
<a class="social-list__link" href="https://twitter.com">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="social-list__item">
<a class="social-list__link" href="https://facebook.com">
<i class="fab fa-facebook-f"></i>
</a>
</li>
</ul>
</footer>
</body>
</html>