-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (153 loc) · 6.83 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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Evolution of Knowledge</title>
<!-- Google Fonts for Enhanced Typography -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<!-- Main CSS -->
<link rel="stylesheet" href="style.css">
<!-- Animations CSS -->
<link rel="stylesheet" href="animations.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#timeline">Timeline</a></li>
<li><a href="discoveries.html">Discoveries</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
<!-- Header Section -->
<header id="home">
<h1>🌟Welcome to the Science Discoveries Website!🌟</h1>
<p>The Evolution of Knowledge: A Legacy of Discoveries. 🌟</p>
<h1>🌍🔬</h1>
<a href="#timeline" class="cta-button">Discover More</a>
</header>
<!-- Interactive Timeline Section -->
<section id="timeline">
<h2>Scientific Discoveries Timeline</h2>
<div class="timeline-roadmap">
<div class="timeline-line"></div>
<!-- Timeline Item 1 -->
<div class="timeline-item">
<div class="timeline-content" onclick="openDiscovery('Galileo Telescope')">
<h3>1609 - Galileo's Telescope</h3>
<p>Changed how we view the universe.</p>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="timeline-item">
<div class="timeline-content" onclick="openDiscovery('Penicillin')">
<h3>1928 - Discovery of Penicillin</h3>
<p>Revolutionized modern medicine.</p>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="timeline-item">
<div class="timeline-content" onclick="openDiscovery('Discovery of Electricity')">
<h3>1752 - Discovery of Electricity</h3>
<p>Benjamin Franklin’s discovery sparked the modern world.</p>
</div>
</div>
<!-- Timeline Item 4 -->
<div class="timeline-item">
<div class="timeline-content" onclick="openDiscovery('Theory of Relativity')">
<h3>1905 - Theory of Relativity</h3>
<p>Einstein’s famous equation reshaped our understanding of space and time.</p>
</div>
</div>
<!-- Timeline Item 5 -->
<div class="timeline-item">
<div class="timeline-content" onclick="openDiscovery('DNA Structure')">
<h3>1953 - Discovery of DNA Structure</h3>
<p>Unlocked the mysteries of life.</p>
</div>
</div>
<!-- Timeline Item 6 -->
<div class="timeline-item">
<div class="timeline-content" onclick="openDiscovery('The Internet')">
<h3>1969 - The Internet</h3>
<p>The invention that connected the world like never before.</p>
</div>
</div>
<!-- Timeline Item 7 (Example for expansion) -->
<div class="timeline-item">
<div class="timeline-content" onclick="openDiscovery('Quantum Computing')">
<h3>1980 - Quantum Computing</h3>
<p>Revolutionizing computational power.</p>
</div>
</div>
<!-- Add more timeline items here as needed -->
</div>
<!-- Hover Image -->
<img id="hover-image" src="" alt="Hover Image" />
</section>
<!-- About Section -->
<section id="about">
<h2>About Us</h2>
<p>Welcome to the Science Discovery Club! 🌟 We are dedicated to exploring and sharing the wonders of science, making complex concepts accessible and engaging for everyone. Our mission is to inspire curiosity through curated discoveries, interactive resources, and a vibrant community. Join us as we delve into the incredible breakthroughs that shape our understanding of the universe!</p>
</section>
<!-- Contact Section -->
<section id="contact">
<h2>Contact Us</h2>
<p>If you have any questions or suggestions, feel free to reach out to us!</p>
<p>@[email protected]</p>
</section>
<!-- Footer Section -->
<footer id="foot">
<div class="social-media">
<p>© 2024 SVCE Science Club | Spark 2 Science - UI Design Competition</p>
<a href="https://www.facebook.com/SVCEScienceClub" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://www.instagram.com/svce.science_club/" target="_blank">
<i class="fab fa-instagram"></i>
</a>
</div>
<p>© 2024 science club</p>
</footer>
<!-- External JavaScript -->
<script src="script.js"></script>
<script>
// Show image near cursor on hover
function showImage(image) {
const hoverImage = document.getElementById('hover-image');
hoverImage.src = `images/${image}`;
hoverImage.style.display = 'block';
// Position the image near the cursor with slight offset
hoverImage.style.top = `${event.clientY + 10}px`;
hoverImage.style.left = `${event.clientX + 10}px`;
}
// Hide the hover image
function hideImage() {
const hoverImage = document.getElementById('hover-image');
hoverImage.style.display = 'none';
}
// Handle hover events for timeline items
document.querySelectorAll('.timeline-item').forEach((item, index) => {
item.addEventListener('mouseover', () => {
const images = [
'galileo-telescope.jpg',
'penicillin.jpg',
'electricity.jpg',
'relativity.jpg',
'dna.jpg',
'internet.jpg',
'quantum-computing.jpg' // Add corresponding image for the 7th item
];
if (images[index]) {
showImage(images[index]);
}
});
item.addEventListener('mouseout', hideImage);
});
</script>
</body>
</html>