-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
109 lines (99 loc) · 4.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
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tribute to the Internet Revolution</title>
<link rel="stylesheet" href="css/styles.css">
<!-- Font Awesome for Social Media Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Sticky Navigation Bar -->
<nav id="navbar">
<a href="#main">Home</a>
<a href="#timeline">Timeline</a>
<a href="#contact-form">Contact</a>
</nav>
<!-- Main Container -->
<main id="main">
<!-- Title -->
<h1 id="title">The Internet Revolution</h1>
<!-- Image Division -->
<div id="img-div">
<img id="image" src="images/network.png" alt="Internet of Things">
<div id="img-caption">An illustration of Internet of Things devices in use today</div>
</div>
<!-- Tribute Information -->
<div id="tribute-info">
<h2>The Internet Revolution: A Timeline</h2>
<p>
The Internet Revolution refers to the rapid advancement of digital technology and the widespread adoption of the Internet in the late 20th and early 21st centuries. This revolution has transformed how we communicate, access information, and conduct business, leading to unprecedented global connectivity and the rise of the information age.
</p>
</div>
<!-- Expanded Timeline Section -->
<div id="timeline">
<h3>The Internet Revolution: Key Milestones</h3>
<ul>
<li><strong>1969:</strong> The first ARPANET message was sent between UCLA and Stanford, marking the birth of the internet.</li>
<li><strong>1983:</strong> ARPANET adopted the TCP/IP protocol, which still serves as the foundation of the internet today.</li>
<li><strong>1989:</strong> Tim Berners-Lee invented the World Wide Web, creating the first web browser and server.</li>
<li><strong>1998:</strong> Google was founded, revolutionizing search on the internet.</li>
<li><strong>2004:</strong> Facebook launched, bringing social networking into the mainstream.</li>
<li><strong>2007:</strong> The release of the iPhone changed how we interact with the internet, ushering in the mobile revolution.</li>
</ul>
</div>
<!-- Tribute Link -->
<div id="tribute-background">
<p>If you want to learn more, you can click here to learn more about the
<a id="tribute-link" href="https://www.internetsociety.org/internet/history-internet/brief-history-internet/" target="_blank">
History of the Internet
</a>.
</p>
</div>
</main>
<!-- Contact Form Section -->
<div id="contact-form">
<h3>Contact Me</h3>
<form>
<!-- Full Name Fields -->
<div class="name-fields">
<div>
<label for="first-name">First Name<span class="required">*</span></label>
<input type="text" id="first-name" name="first-name" placeholder="First Name" required>
</div>
<div>
<label for="last-name">Last Name<span class="required">*</span></label>
<input type="text" id="last-name" name="last-name" placeholder="Last Name" required>
</div>
</div>
<!-- Email Field -->
<label for="email">E-mail<span class="required">*</span></label>
<input type="email" id="email" name="email" placeholder="[email protected]" required>
<!-- Message Field -->
<label for="message">Message<span class="required">*</span></label>
<textarea id="message" name="message" rows="5" placeholder="Your Message" required></textarea>
<!-- Submit Button -->
<input type="submit" value="Send">
</form>
</div>
<!-- Footer Section -->
<footer id="footer">
<p>© 2024 Henry Zeng</p>
<p>
<a href="#main">Back to Top</a> |
<a href="mailto:[email protected]">Contact Me</a>
</p>
<p>
References: <a href="https://www.internetsociety.org/" target="_blank">Internet Society</a>,
<a href="https://www.webfoundation.org/" target="_blank">Web Foundation</a>
</p>
<p>
<a href="https://github.com/yourusername" target="_blank"><i class="fab fa-github"></i> GitHub</a> |
<a href="https://www.linkedin.com/in/yourprofile" target="_blank"><i class="fab fa-linkedin"></i> LinkedIn</a>
</p>
</footer>
</body>
</html>