-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
162 lines (140 loc) · 4.52 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 Enchanted Ocean</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f0f8ff;
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #005f73;
color: white;
text-align: center;
padding: 1rem 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
header h1 {
font-size: 2.5rem;
margin: 0;
}
nav {
text-align: center;
background-color: #0a9396;
padding: 0.5rem;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
font-size: 1.2rem;
}
nav a:hover {
text-decoration: underline;
}
.intro {
padding: 3rem;
text-align: center;
background: linear-gradient(to bottom, #00b4d8, #caf0f8);
color: #023047;
}
.intro h2 {
font-size: 2.2rem;
margin-bottom: 1rem;
}
.intro p {
font-size: 1.2rem;
line-height: 1.8;
}
.features {
padding: 2rem;
background-color: #f8f9fa;
text-align: center;
}
.features h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
}
.feature-list {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.feature-item {
background-color: white;
width: 30%;
margin: 1rem;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
.feature-item img {
max-width: 100%;
border-radius: 6px;
margin-bottom: 1rem;
}
footer {
background-color: #005f73;
color: white;
text-align: center;
padding: 1rem;
margin-top: 3rem;
}
footer p {
margin: 0;
}
@media (max-width: 768px) {
.feature-item {
width: 100%;
}
.intro h2 {
font-size: 1.8rem;
}
nav a {
display: block;
margin: 10px 0;
}
}
</style>
</head>
<body>
<header>
<h1>Abyssia: the Chemosynthetic ocean</h1>
</header>
<section id="intro" class="intro">
<h2>Discover an ocean independent from the Sun</h2>
<p>
Abyssia is a wonderful oceanic ecosystem that relies purely on Chemosynthesis, by concequence, it doesnt need light to live healthy
</p>
</section>
<section id="features" class="features">
<h2>Features of Abyssia</h2>
<div class="feature-list">
<div class="feature-item">
<img src="https://i.imgur.com/DERQsAa.jpeg" alt="Mystical Creatures">
<h3>Mystical bacteria</h3>
<p>In this ocean lives Blob, a friendly creature from the "chemobacteria" species that told us about this thriving ecosystem</p>
</div>
<div class="feature-item">
<img src="https://i.imgur.com/IqXWjqb.jpeg" alt="Wonderful enviroment">
<h3>Wonderful enviroment</h3>
<p>The coral reefs of this ocean are truly wonderful, kept healthy from ingesting sugars from the Chemosynthesis process</p>
</div>
<div class="feature-item">
<img src="https://teara.govt.nz/files/large_images/8960-enz_0.jpg" alt="Chemosynthesis, the source of all the energy">
<h3>Chemosynthesis, the source of all the energy</h3>
<p>Chemosynthesis is a process where sugar (energy) gets produced by chemical reactions from bacteria, and thats how all the organisms of this ecosystem live healthy</p>
</div>
</div>
</section>
<footer id="contact">
<p>© 2024 Ctrl + Alt + Elite Team | Contact Us: abyssia@gmail.com</p>
</footer>
</body>
</html>