-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (124 loc) · 4.92 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hedvig+Letters+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Dig Deeper Project</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #ebebeb;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Hedvig Letters Sans', sans-serif;
}
.section {
height: 65vh;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s, transform 0.5s;
}
.section img {
width: 25%;
height: 25%;
top: 20px;
border-radius: 10px;
margin: 0 auto;
}
.tran-1 {
transform: scale(85%);
}
.tran-2 {
opacity: 1;
}
.tran-end {
transform: scale(100%);
}
.container {
width: 66.66%;
margin: 0 40px;
height: 100%;
background-color: #ffffff;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1 style="margin-left: 35px;">Welcome to Dig Deeper</h1>
<p style="margin-left: 35px;">Scroll down to explore more</p>
</div>
<div id="section1" class="section">
<div class="content">
<h2>The Athenian Navy - Asset Importance</h2>
<p>Athens developed a strong navy during its struggle against the Persian Empire. At the Battle of Marathon in 490 BC, Athenian soldiers helped halt a Persian invading army. Soon after, Themistocles, an Athenian politician, rose to power.</p>
<img src="assets/image1.jpeg" alt="Image 1">
</div>
</div>
<div id="section2" class="section">
<div class="content">
<h2>The War Against Persia - Athenian Smarts</h2>
<p>Themistocles aimed to make Athens great by exploiting what he saw as Persia's major weakness – their navy. He convinced the Athenians to build their own navy using money from their silver deposits. This marked the beginning of their legendary naval power.</p>
<img src="assets/image2.jpeg" alt="Image 2">
</div>
</div>
<div id="section3" class="section">
<div class="content">
<h2>Athenian Devotion - Naval Reputation</h2>
<p>Athens is known for its devotion to maritime life, recognized for its superior skills at sea. Its naval reputation was solidified by the defeat of the Persians at Salamis in 480 and the subsequent Athenian maritime empire in the Aegean.</p>
<img src="assets/image3.jpeg" alt="Image 3">
</div>
</div>
<div id="section4" class="section">
<div class="content">
<h2>Athenian Devotion - Naval Reputation 2</h2>
<p>Athens was famous for its strong connection to the sea, and it was well-regarded for its exceptional abilities in maritime activities. The city's naval reputation was firmly established after the decisive victory over many, such as the battle at Marathon and Salamis, which led to the subsequent rise of the Athenian maritime empire in the Aegean region.</p>
<img src="assets/image4.jpeg" alt="Image 4">
</div>
</div>
<div id="section5" class="section">
<div class="content">
<h2>Athenian Naval Speed - Attributes</h2>
<p>The Ancient Greek navy's remarkable speed and agility were a result of their advanced ship design, skilled sailors, and effective naval tactics, which allowed them to swiftly navigate the seas with their long and narrow triremes, utilizing a combination of oars and sails to take advantage of favorable wind and water conditions.</p>
<img src="assets/image5.jpeg" alt="Image 5">
</div>
</div>
</div>
<!-- Add more sections as needed -->
<script>
document.addEventListener('DOMContentLoaded', function() {
window.addEventListener('scroll', function() {
var sections = document.querySelectorAll('.section');
sections.forEach(function(section) {
var positionFromTop = section.getBoundingClientRect().top;
var positionFromBottom = section.getBoundingClientRect().bottom;
var windowHeight = window.innerHeight;
if (positionFromTop < windowHeight / 2 && positionFromBottom > windowHeight / 2) {
setTimeout(function() {
section.classList.add('tran-1');
}, 100);
setTimeout(function() {
section.classList.add('tran-2');
}, 100);
setTimeout(function() {
section.classList.add('tran-end');
}, 100);
}
});
});
});
</script>
</body>
</html>