-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
187 lines (187 loc) · 8.89 KB
/
index.html
File metadata and controls
187 lines (187 loc) · 8.89 KB
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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!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">
<menta name="description" content="Visit the nordics largest and coolest Community science museum for children, teenagers and adults.">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/b318972c4d.js" crossorigin="anonymous"></script>
<title>Community Science Museum | Home</title>
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<header>
<div class="header-container">
<label for="menu-checkbox" class="hamburger-icon"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="menu-checkbox">
<a href="index.html" class="logo">Community Science Museum</a>
<div class="nav-bottom">
<nav>
<ul class="nav-ul">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="exhibition.html">Exhibition</a></li>
<li><a href="explore.html">Explore</a></li>
<li><a href="visit.html">Visit</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<input type="text" placeholder="Search here..." class="search">
<a href="contact.html" class="cta_nav">Tickets</a>
</div>
</div>
<section class="banner-img-container">
<div class="banner-container">
<p class="open-text">Now open.</p>
<p class="banner-lare-text">Explore together</p>
<p class="banner-text">Come join us at the community science<br>museum where we're committed
to making<br> science accessible to all.</p>
<a href="index.html" class="cta-banner">More</a>
</div>
</section>
</header>
<main>
<section class="events-container">
<div class="circle-container">
<div class="circle-text">
<h1>Today's Event</h1>
<p>10:30-11:30</p>
</div>
</div>
<div class="events-info">
<h2>Visiting professor of aeronautics</h2>
<hr class="events-info-line">
<p>It is our pleasure to announce that Prof Sheila Widnall fromthe 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 href="contact.html" class="cta_events">Sign up</a>
</div>
</section>
<h3 class="explore">Explore</h3>
<hr class="line-explore-heading">
<section class="info-container">
<div class="info-card">
<h4 class="text_card">Explore</h4>
<hr class="line_card">
<a href="explore.html">
<img class="info_image" src="images/gallery-robot.jpg" alt="A white robot raising one arm up surrounded by a light blue background."></a>
</div>
<div class="info-card">
<h4 class="text_card">Plan your visit</h4>
<hr class="line_card">
<a href="visit.html">
<img class="info_image hand_img" src="images/home-visit.jpg" alt="A blue robotic hand with a turquoise green-blue background that
extends vertically upwards with the palm facing us."></a>
</div>
<div class="info-card">
<h4 class="text_card">Events</h4>
<hr class="line_card">
<a href="events.html">
<img class="info_image" src="images/home-events.jpg" alt="A beautiful polar bear in an aquarium, where two small children with their backs
turned look at the beautiful polar bear through the aquarium glass.."></a>
</div>
<div class="info-card">
<h4 class="text_card">Exhibition</h4>
<hr class="line_card">
<a href="exhibition.html">
<img class="info_image" src="images/home-exhibition.jpg" alt="a girl stands in the middle of the floor surrounded by lots of
different lighting effects in blue tones and a touch of purple."></a>
</div>
</section>
<section class="welcome-container">
<div class="left-container">
<div class="welcome-text">
<h5 class="welcome-heading">Welcome to community</h5>
<p class="welcome-heading">science museum</p>
</div>
<p class="welcome-small-text">Over the course of human history, science has developed from our early understanding of fire, wind, water, and earth to exploring
everything from galaxies far away to the very building blocks of life itself. The aim of our museum is to create a space
where everyone can experience the wonders of our discoveries and perhaps even ignite a lifelong passion to continue the
exploration of the world around us.
</p>
</div>
<div class="right-container">
<img class="about-us_image" src="images/home-main-vr.jpg" alt="a boy standing with a paintbrush and paint where he wears vr glasses.">
</div>
</section>
<section class="information-container">
<div class="information-card">
<i class="fa-solid fa-users"></i>
<p>230</p>
<hr class="information-line">
<p>Daily visitor</p>
</div>
<div class="information-card">
<i class="fa-solid fa-user"></i>
<p>310</p>
<hr class="information-line">
<p>Members</p>
</div>
<div class="information-card">
<i class="fa-solid fa-utensils"></i>
<p>10</p>
<hr class="information-line">
<p>Food menus</p>
</div>
<div class="information-card">
<i class="fa-solid fa-palette"></i>
<p>12</p>
<hr class="information-line">
<p>Activities</p>
</div>
</section>
<h6 class="gallery-heading">Gallery</h6>
<hr class="line-gallery-heading">
<section class="gallery-container">
<div class="gallery-img">
<img src="images/gallery-museum.jpg" alt="Beautiful construction of a curved museum roof seen from the inside. Sunlight is let in
through the roof windows.">
<img src="images/gallery-planet.jpg" alt="Planet earth taken from space where you see the lights from the planet light up">
</div>
<div class="gallery-img">
<img src="images/gallery-scientist.jpg" alt="A girl in a white coat and glasses, experimenting with chemistry.">
<img src="images/gallery-astronaut.jpg" alt="An astronomer who has landed on the moon wearing a white suit.">
</div>
<div class="gallery-img">
<img src="images/gallery-vr.jpg" alt="A girl driving a simulator car with VR glasses.">
<img src="images/gallery-dino.jpg" alt="A dinosaur on display in a museum.">
</div>
<div class="gallery-img">
<img src="images/gallery-polarbear.jpg" alt="Two beautiful polar bears swimming in ice blue water seen from below and up">
<img src="images/gallery-robot.jpg" alt="A white robot raising one arm up surrounded by a light blue background.">
</div>
</section>
</main>
<footer>
<div class="footer-container">
<div class="help">
<h6 class="footer-heading">Help</h6>
<ul>
<li><a href="contact.html">Contact</a></li>
<li>Accessibility</li>
<li>Get involved</li>
</ul>
</div>
<div class="follow-us">
<h6 class="footer-heading">Follow us</h6>
<div>
<a href="#" class="icon"><i class="fa-brands fa-facebook"></i> Facebook</a>
</div>
<div>
<a href="#" class="icon"><i class="fa-brands fa-twitter"></i> Twitter</a>
</div>
<div>
<a href="#" class="icon"><i class="fa-brands fa-instagram"></i> Instagram</a>
</div>
</div>
<div class="visit-us">
<h6 class="footer-heading">Visit us</h6>
<div>
<a href="#" class="icon"><i class="fa-solid fa-location-dot"></i>633 Washington George WTX 0598</a>
</div>
</div>
</div>
<hr class="line-footer">
</footer>
</body>
</html>