-
Notifications
You must be signed in to change notification settings - Fork 0
/
chatgpt.html
150 lines (144 loc) · 5.79 KB
/
chatgpt.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aquarium Adventure</title>
<!-- Import Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style>
/* Custom styles */
body {
background-color: #e0f7fa; /* light blue ocean-like background */
}
.nav-wrapper {
background-color: #004d40; /* dark teal */
}
.brand-logo {
font-family: 'Pacifico', cursive; /* playful, aquatic feel */
}
.hero-section {
background-color: #00695c; /* darker teal for better contrast */
padding: 80px 20px;
color: white;
border-bottom: 5px solid #00796b;
}
.container {
margin-left: 5%; /* slightly aligned to the left */
}
.card-image img {
height: 200px; /* set image height */
object-fit: cover;
}
.card {
background-color: #b2ebf2;
}
.footer {
background-color: #004d40;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo left">Aquarium Adventure</a>
<ul class="right hide-on-med-and-down">
<li><a href="#about">About</a></li>
<li><a href="#exhibits">Exhibits</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<div class="hero-section">
<div class="container">
<h2>Discover the Underwater World</h2>
<p>Explore the wonders of marine life at our aquarium, featuring a diverse range of exhibits and interactive events for all ages.</p>
</div>
</div>
<!-- Main Content Section -->
<div class="container">
<h4>Our Exhibits</h4>
<div class="row">
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="https://via.placeholder.com/300x200?text=Coral+Reef" alt="Coral Reef Exhibit">
<span class="card-title">Coral Reef</span>
</div>
<div class="card-content">
<p>Experience the vibrant colors and diverse marine life of the coral reefs.</p>
</div>
<div class="card-action">
<a href="#">Learn More</a>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="https://via.placeholder.com/300x200?text=Shark+Tank" alt="Shark Tank Exhibit">
<span class="card-title">Shark Tank</span>
</div>
<div class="card-content">
<p>Get up close with the ocean’s most fascinating predators in our Shark Tank.</p>
</div>
<div class="card-action">
<a href="#">Learn More</a>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="https://via.placeholder.com/300x200?text=Jellyfish" alt="Jellyfish Exhibit">
<span class="card-title">Jellyfish</span>
</div>
<div class="card-content">
<p>Discover the mesmerizing world of jellyfish in our tranquil jellyfish gallery.</p>
</div>
<div class="card-action">
<a href="#">Learn More</a>
</div>
</div>
</div>
</div>
<!-- Fish Image Example -->
<div class="row">
<div class="col s12 center-align">
<img src="https://via.placeholder.com/400x200?text=Fish+Exhibit" alt="Fish Exhibit" style="width: 100%; max-width: 400px;">
<p>Explore the colorful fish species that make our aquarium unique!</p>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">About Our Aquarium</h5>
<p class="grey-text text-lighten-4">Our mission is to inspire a love of marine life and a commitment to ocean conservation through engaging exhibits and interactive experiences.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Follow Us</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Facebook</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Instagram</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Twitter</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2024 Aquarium Adventure
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<!-- Import Materialize JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>