-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
207 lines (182 loc) · 10.3 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
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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>CSM | Home page </title>
<meta name="description" content="" />
<!-- SEO Specific Meta
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="description" content="Community Science Museum homepage. Here it is multiple options to navigate between what our museum is offering. All from exhibition, events and how you can get involved with our work." />
<meta name="robots" content="index, follow" />
<!-- Mobile Specific Meta
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="../config/style/main-style.css" rel="stylesheet" type="text/css">
<link href="../config/style/content-style.css" rel="stylesheet" type="text/css">
<!-- Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<!-- Header -->
<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=Martel+Sans:wght@200;300;400;600;700;800;900&display=swap" rel="stylesheet" />
<!-- Copy -->
<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=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
<!-- Button and links -->
<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" />
<!-- Favicon/icons
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="assets/fontawesome/css/all.css" rel="stylesheet">
<!-- JavaScript
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script defer src="assets/fontawesome/js/all.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
$(function () {
$("#page-header").load("../config/page-template/header.html");
$("#page-footer").load("../config/page-template/footer.html");
});
</script>
<!-- Hotjar Tracking Code for https://noroff-project-csm.netlify.app/ -->
<script src="./config/javascript/hotjar.js"></script>
</head>
<body>
<div id="page-header"></div>
<main>
<div class="breadcrumb-container">
<ul class="breadcrumb">
<li><a href="../index.html" class="active-link">Home</a></li>
</ul>
</div>
<div class="wrapper">
<div class="grid-container grid-col-1">
<div class="top">
<div class="ratio-box">
<img class="image" src="/assets/images/cosmology/star-and-hands-min.jpg"
alt="Image of Community Science museum logo" width="350" height="250" loading="lazy">
</div>
<div class="header-background">
<h1>Come down, let's explore together</h1>
</div>
</div>
<div class="middle">
<div class="textarea">
<p>Here at your Community Science museum, you can explore life. You can explore the past, the
present and even parts of the future.</p>
<span class="text-breaker"></span>
<p>Travel to the universe, or see the life of a single seed grow. When the museum got built, we
invited down <strong>Morgan Freeman</strong> to plant our own tree that is located in the
center of our museum.</p>
<span class="text-breaker"></span>
</div>
<div class="polaroid">
<div>
<div class="ratio-box">
<img class="image" src="/assets/images/tree-garden-inside.jpg"
alt="Image of tree of life" width="600" height="400" loading="lazy">
</div>
</div>
<p><strong>"The tree of life"</strong></p>
</div>
<div class="textarea">
<span class="text-breaker"></span>
<p>And it is growing strong. Drop by and see if the tree have enough water, oxygen and light.
Have a look at the display by the tree and you can see when the first root came, and how
many it is grown.</p>
</div>
</div>
<div class="bottom">
</div>
</div>
<div class="grid-container grid-col-4">
<div class="card-container">
<div class="card-header header-bg">
<h2>Kids</h2>
</div>
<div class="card-image">
<div class="ratio-box">
<img class="image" src="/assets/images/kids/kids.jpg"
alt="Image of a girl looking at a glowing atom ball" width="960" height="720"
loading="lazy">
</div>
</div>
<div class="card-content textarea">
<p>At our museum we have a large range of activates for kids, ranging from 7 to 15.</p>
</div>
<div class="card-footer">
<a href="/static/kids.html" class="cta btn-1">
<span class="border-bottom"><i class="fas fa-binoculars"></i> View More</span>
</a>
</div>
</div>
<div class="card-container">
<div class="card-header header-bg">
<h2>Exhibition</h2>
</div>
<div class="card-image">
<div class="ratio-box">
<img class="image" src="/assets/images/evolution/evolution-4.jpg" alt="Graphic design of the human evolution" width="1400" height="787" loading="lazy">
</div>
</div>
<div class="card-content textarea">
<p>Let us take you back in time, or bring you into the future. Come explore what you can experience in our museum</p>
</div>
<div class="card-footer">
<a href="/static/explore.html" class="cta btn-1">
<span class="border-bottom"><i class="fas fa-binoculars"></i> View More</span>
</a>
</div>
</div>
<div class="card-container">
<div class="card-header header-bg">
<h2>Events</h2>
</div>
<div class="card-image">
<div class="ratio-box">
<img class="image" src="/assets/images/show/show_2-min.jpg" alt="Image of a smoke show performance" width="1500" height="1000" loading="lazy">
</div>
</div>
<div class="card-content textarea">
<p>We try to create a atmosphere that you and you family will remember for years to come.</p>
</div>
<div class="card-footer">
<a href="/static/events.html" class="cta btn-1">
<span class="border-bottom"><i class="fas fa-binoculars"></i> View More</span>
</a>
</div>
</div>
<div class="card-container">
<div class="card-header header-bg">
<h2>Get Involved</h2>
</div>
<div class="card-image">
<div class="ratio-box">
<img class="image" src="/assets/images/museum/scientific-2040795_1280-min.jpg" alt="Image of a museum worker inspecting a object given to us as support" width="1280" height="851" loading="lazy">
</div>
</div>
<div class="card-content textarea">
<p>Interested to get involved and support us?</p>
<span class="text-breaker"></span>
<p>Take a look into how you can get involved.</p>
</div>
<div class="card-footer">
<a href="/static/involvment.html" class="cta btn-1">
<span class="border-bottom"><i class="fas fa-binoculars"></i> View More</span>
</a>
</div>
</div>
</div>
</div>
</main>
<div id="page-footer"></div>
<script src="../config/javascript/dropdown.js"></script>
<!-- <script src="/config/JavaScript/modal.js"></script> -->
</body>
</html>