-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
105 lines (105 loc) · 3.6 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
<!DOCTYPE html>
<html>
<head>
<title>it's me</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<div id="header">
<h2>Edward Qian</h2>
</div>
<div id="content">
<!-- The '#content' div is a flexbox containing divs '#left' and '#right' -->
<!-- The left portion of the profile page -->
<div id="left">
<img class="profile-picture" src="img/profile.png" />
<h1>Edward Qian</h1>
<h4>Trainee 4 Lead</h4>
<div class="icons">
<a href="https://github.com/jedwed/basic-profile-page">
<img src="img/github-icon.png" class="icon" />
</a>
<a href="#">
<img src="img/linkedin-icon.png" class="icon" />
</a>
<a href="#">
<img src="img/twitter-icon.png" class="icon" />
</a>
</div>
<div id="contact">
<div class="contact-info">
<i class="fa fa-envelope contact-icon"></i>
<div class="contact-text">Email: [email protected]</div>
</div>
<hr />
<div class="contact-info">
<i class="fa fa-phone contact-icon"></i>
<div class="contact-text">Phone: 0324u23942323</div>
</div>
<hr />
<div class="contact-info">
<i class="fa fa-fax contact-icon"></i>
<div class="contact-text">FAX: hahahahahahah</div>
</div>
<hr />
</div>
</div>
<!-- The right portion of the profile page -->
<div id="right">
<h1>About me</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
consectetur lorem non lectus rutrum, eu placerat eros vulputate.
Integer urna lacus, bibendum eget mattis sit amet, egestas laoreet
nisl. Fusce mollis dictum lacinia. Ut lectus neque, varius at ante eu,
vehicula semper orci. Integer ut erat vitae augue pulvinar maximus.
Donec id porta est. Aliquam dictum mi massa, non pellentesque magna
bibendum at. Nullam dictum tortor vitae metus commodo, sed laoreet
diam tristique. In convallis euismod augue. Nam mauris ante, tincidunt
et mi ut, blandit molestie nunc. Nulla nec tempor lorem, et placerat
ligula. Nullam ultrices libero eget nisi sodales finibus. Maecenas
volutpat tellus non metus auctor imperdiet.
</p>
<hr />
<!-- The following div is another flexbox -->
<div id="more-about-me">
<div id="skills-container">
<h2>Skills</h2>
<!-- Unordered List of dot points -->
<ul>
<li>i</li>
<li>have</li>
<li>absolutely</li>
<li>no</li>
<li>skills</li>
<li>waa</li>
<li>aaa</li>
<li>aaaaa</li>
<li>aaa</li>
<li>ahhhh</li>
</ul>
</div>
<div id="secret-container">
<h2>Secret</h2>
<button
id="toggle-secret"
class="button"
type="button"
onclick="display_secret()"
>
Click to reveal my darkest secret
</button>
<div id="secret">
a0wjf023j093jogwijgowj34pg9wj34gp98wj34gp98w3j4gowi34jglwo3i4jgse
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>