-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (109 loc) · 5.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Henry's Personal Webpage!</title>
<link rel="stylesheet" type="text/css" href="css/grid.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/printstyle.css" media="print">
</head>
<body>
<!-- This HTML5 main element was needed to keep the footer at the bottom of the page on mobile-->
<div id="main">
<!-- This HTML5 header element will contain a picture, title of the page, and the nav element -->
<header>
<figure>
<img src="images/profile.jpg" alt="Picture of myself and Cooper and Penny" title="Picture of myself and Cooper and Penny"
width="600" height="450"/>
<figcaption>Picture of myself and Cooper and Penny</figcaption>
</figure>
<h1>Henry's Personal Webpage - Home</h1>
<!-- This HTML5 nav element will contain the nav bar -->
<nav>
<ul>
<li><a class="active" href="index.html">Home</a> </li>
<li><a href="academic.html">School</a> </li>
<li><a href="professional.html">Work</a> </li>
<li class="dropdown">
<a href="#">Play</a>
<ul>
<li><a href="hiking.html">Hiking</a></li>
<li><a href="music.html">Music</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Apps</a>
<ul>
<li><a href="weather.html">Weather</a></li>
<li><a href="stocks.html">Stocks</a></li>
<li><a href="covid.html">Covid</a></li>
<li><a href="todo.html">To-Do</a></li>
<li><a href="reviews.html">Reviews</a></li>
</ul>
</li>
</ul>
</nav>
<hr>
</header>
<!-- This HTML5 section element will my article(s) for this page -->
<section>
<h2>Welcome to my webpage!</h2>
<article class="no-aside">
<h3>Introduction</h3>
<p>
<span id="greeting"></span> My name is Henry Choy and this is the first webpage that I've built from scratch using <strong>HTML</strong>,
<strong>CSS</strong>, and <strong>JavaScript</strong>. As I learn more about web development, I'm hoping that I will be able to add more
content and make things look nicer, so please check back often! In the navigation sections you can view pages about my academic and
professional background, as well as my hobbies.
<br>
<br>
<a href="https://github.com/henrychoy/github.io" target ="_blank">Click Here</a> to view my GitHub repository which contains all the source
code for this website.
</p>
<br>
<h3>Contact Info</h3>
<p>
Please feel free to contact me using the channels below. I would love to hear from you!
</p>
<a href="https://www.linkedin.com/in/henrychoylinkedin/" target="_blank"><img src="images/linkedin.png" alt="Linkedin icon"></a>
<a href="mailto:[email protected]" target="_blank"><img src="images/gmail.png" alt="Gmail icon"></a>
<a href="https://github.com/henrychoy/github.io" target="_blank"><img src="images/github.png" alt="GitHub icon"></a>
<a href="https://www.youtube.com/chocotiger" target="_blank"><img src="images/youtube.png" alt="YouTube icon"></a>
<br>
<sub>
Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a>
</sub>
</article>
</section>
<br>
<br>
<br>
<!-- This HTML5 footer element will contain my name, email, and last updated date, as well as printed from line -->
<footer>
<div id="footer-left"><p>© 2020 Henry Choy</p></div>
<div id="footer-center"><p><a href="mailto:[email protected]">[email protected]</a></p></div>
<div id="footer-right"><p id="last-updated"></p></div>
<p class="printed-from">Printed from http://henrychoy.com/</p>
</footer>
</div>
<script>
timeGreeting();
// determine time of day and display proper greeting
function timeGreeting() {
let time = new Date().getHours();
let greeting;
if (time >= 5 && time < 12){ //morning = 5AM - 12PM
greeting = "Good morning!";
}
else if (time >= 12 && time < 17) { //afternoon = 12pm - 5pm
greeting = "Good afternoon!";
}
else if (time >= 17 || time < 5) { //evening = 5pm - 5am
greeting = "Good evening!";
}
document.getElementById("greeting").innerHTML = greeting;
// last updated in footer
document.getElementById("last-updated").textContent = "Last Updated: " + document.lastModified;
}
</script>
</body>
</html>