-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
162 lines (161 loc) · 8.08 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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Unleash your inner scientist at our dynamic museum! Discover, play, and learn with our engaging exhibits designed for kids of all ages. Open Monday to Saturday ">
<title>Community Science Museum | Home</title>
<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=Bruno+Ace&family=Overpass+Mono:wght@700&family=Play:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<script src="https://kit.fontawesome.com/6a870feefe.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="header">
<div class="logo">
<a href="index.html">
<img src="images/Logo.png" alt="science community museum logo">
</a>
</div>
<div class="header-content">
<input type="checkbox" id="menu-checkbox">
<div class="header-border">
<a href="#">Tickets</a>
</div>
<label for="menu-checkbox" class="hamburger-icon" aria-label="menu"><i class="fas fa-bars"></i></label>
<nav>
<ul>
<li><a href="html/explore.html">Explore</a></li>
<li><a href="html/school.html">School</a></li>
<li><a href="html/about.html">About</a></li>
<li><a href="html/contact.html">Contact</a></li>
</ul>
<div class="search-box">
<input type="checkbox" id="search-checkbox">
<input type="search" class="search" placeholder="Search" aria-label="search">
<label for="search-checkbox" class="search-icon" aria-label="search"><i class="fas fa-search"></i></label>
</div>
<div class="header-content header-border">
<p>Status</p>
<p class="green">OPEN</p>
<p class="closing-time">closes 19:00</p>
</div>
</nav>
</div>
</div>
</header>
<main>
<div class="hero-background">
<section class="hero">
<h1>COMMUNITY SCIENCE MUSEUM</h1>
<p>Lets explore together</p>
<a href="#" class="button">BOOK NOW</a>
<div class="hero-images">
<img src="images/Enterance.jpg" class="hero-image-one" alt="museum enterance with pictures, benches and a rocket">
<img src="images/Playing_with_rocket.jpg" class="hero-image-two" alt="three children running outside with a homemade rocket">
<img src="images/Learning.jpg" class="hero-image-three" alt="child facinated by mathematical equations">
</div>
</section>
</div>
<section class="rows">
<h2>EXPLORE OUR ATTRACTIONS</h2>
<div class="two-columns" >
<a href="html/attractions/evolution.html" class="wrapper highlighted">
<div class="info-box">
<h3>Evolution</h3>
<p>Discover the origins of life on this planet and how the species we know today have evolved over time.</p>
</div>
</a>
<a href="#" class="wrapper intro-robotics-ai">
<div class="info-box">
<h3>Robotics & AI</h3>
<p>The information revolution is here and robotics and artificial intelligence are the science of the future.</p>
</div>
</a>
<a href="#" class="wrapper intro-cosmology">
<div class="info-box">
<h3>Cosmology</h3>
<p>Follow the journey of our solar exploration: from early Arab traders, to Galileos telescope, to the latest exploration of the planets in our solar system.</p>
</div>
</a>
</div>
</section>
<div class="light">
<section class="two-columns">
<div class="introduction">
<h2>LETS EXPLORE TOGETHER</h2>
<p>We believe science should not be confined to the textbook, but brought to live through exhibits. This is why we have over 1000 different exhibits on the many varied subjects of science to explore. Many of these exhibits are designed for you to interact with and play around to see science come to life </p>
</div>
<div class="intro-image">
<img src="images/Children_working.jpg" alt="woman teaching children how to build a robot">
</div>
</section>
</div>
<section class="rows">
<h2>WHATS HAPPENING</h2>
<div class="rows article-wrapper">
<a href="#" class="article">
<div class="rocket-race">
<p class="tag purple">Event: 2/5-19/5</p>
</div>
<h3 class="purple">Rocket Race 2023</h3>
<p>The yearly competition to see who can build the best rocket. Our workshop will be open to design and build a rocket for two weeks and ends with a race on friday the 19th of may</p>
</a>
<a href="#" class="article">
<div class="night-museum">
<p class="tag green">Event 13/5</p>
</div>
<h3 class="green">Night in the Museum</h3>
<p>Get your family together for an exciting night in the museum as you sleep over beside dinosaurs and science displays. Bring your own sleeping bag and get ready to rough it as we go exploring the wonders of science.</p>
</a>
<a href="#" class="article">
<div class="aeronautics">
<p class="tag purple">Seminar: 2/5</p>
</div>
<h3 class="purple">Visiting Professor of Aeronautics</h3>
<p>It is our pleasure to announce that Prof Sheila Widnall from the Massachusetts Institute of Technology will be delivering 3 lectures on the development of aeronautics and where the future lies in this exciting space.</p>
</a>
</div>
</section>
</main>
<footer>
<div class="orange">
<section class="newsletter">
<h3>Subscribe to our newsletter</h3>
<form action="#top" class="subscribe">
<input type="text" id="email" placeholder="Email" aria-label="write your email">
<button class="button">Send</button>
</form>
</section>
</div>
<div class="light">
<section class="footer">
<div>
<h3>Located</h3>
<p>Fantasyroad 353</p>
<p>BERGEN</p>
</div>
<div>
<h3>Opening hours</h3>
<p>Monday-Friday: 10:00-19:00</p>
<p>Saturday: 10:00-17:00</p>
<p>Sunday: Closed</p>
</div>
<div>
<h3>See more</h3>
<div class="social-media_icons">
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-tiktok"></i>
<i class="fa-brands fa-discord"></i>
</div>
</div>
<h3>© All rights reserved</h3>
</section>
</div>
</footer>
</body>
</html>