Semester-Project-1/index.html at main · mjohank/Semester-Project-1 · GitHub

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
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!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="Explore together! Community Science Museum is an interactive science museum with tons of fun exhibitions for both young and old"
    />
    <meta
      name="keywords"
      content="Museum, Science, Interactive, Exhibition, Cosmology, Evolution, Biology, Medicine, Robotics, AI, Ecology, kids, teachers, researchers, professor, Aeronautics, Energetica"
    />
    <script
      src="https://kit.fontawesome.com/5d47c883f3.js"
      crossorigin="anonymous"
    ></script>
    <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:wght@500;600;700&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="../css/styles.css" />
    <link rel="stylesheet" href="../css/queries.css" />
    <link
      rel="shortcut icon"
      type="image/png"
      href="../resources/icons/csm-favicon.png"
    />
    <title>Home | Community Science Museum</title>
  </head>

  <body>
    <!-- Navigation -->

    <header class="header flex-container_nowrap">
      <div class="logo-container">
        <a href="index.html">
          <img src="resources/logo/CSM_logo.svg" alt="CSM logo" class="logo" />
        </a>
      </div>

      <div class="navbar flex-container_nowrap">
        <label for="menu-checkbox" class="toggle-icon">
          <i class="fa-solid fa-bars"></i>
        </label>
        <input type="checkbox" id="menu-checkbox" class="menu-checkbox" />
        <nav>
          <ul class="nav-list flex-container">
            <li>
              <a href="index.html" class="current">Home</a>
            </li>
            <li>
              <a href="html/exhibitions.html">Exhibitions</a>
            </li>
            <li>
              <a href="html/visit.html">Visit</a>
            </li>
            <li>
              <a href="html/get_involved.html">Get involved</a>
            </li>
            <li>
              <a href="html/about.html">About</a>
            </li>
            <li>
              <a href="html/contact.html">Contact</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <!-- MAIN SECTION -->

    <main>
      <!-- HERO -->

      <section class="section-hero">
        <div class="hero-heading-container green-style">
          <h1 class="primary-heading hero-heading">Explore together</h1>
        </div>
      </section>

      <!-- Explore -->

      <section class="section-explore container_1600">
        <h2 class="secondary-heading explore-h2">Explore</h2>

        <div class="explore-cards-container flex-container">
          <a href="html/for_kids.html" class="explore-card ec1 purple-style">
            <p class="explore-card-txt">For Kids</p>
          </a>

          <a href="html/for_teachers.html" class="explore-card ec2 green-style">
            <p class="explore-card-txt">For teachers</p>
          </a>

          <a
            href="html/for_researchers.html"
            class="explore-card ec3 orange-style"
          >
            <p class="explore-card-txt">Researchers</p>
          </a>
        </div>
      </section>

      <!-- Special events and exhibitions -->

      <section class="section-specials container_1200">
        <h2 class="secondary-heading specials-H2">
          Special events and exhibitions
        </h2>

        <div class="specials-features flex-container green-style">
          <img
            src="/resources/images/professor_Widnall.jpg"
            alt="Image of Professor Widnall"
            class="specials-img"
          />
          <div class="specials-txt-container">
            <h3 class="tertiary-heading specials-H3">
              Visiting Professor of Aeronautics
            </h3>
            <p class="text specials-txt">
              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>
          </div>
        </div>

        <div
          class="specials-features flex-container specials-features-reverse flex-reverse orange-style"
        >
          <div class="specials-txt-container">
            <h3 class="tertiary-heading specials-H3">Night in the museum</h3>
            <p class="text specials-txt">
              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>
          </div>
          <img
            src="/resources/images/museum_night.jpg"
            alt="Image of kid enjoying museum exhibitions at night"
            class="specials-img specials-img-reverse"
          />
        </div>

        <div class="specials-features flex-container purple-style">
          <img
            src="/resources/images/energetica.jpg"
            alt="Image of the Energetica Exhibition"
            class="specials-img"
          />
          <div class="specials-txt-container">
            <h3 class="tertiary-heading specials-H3">
              Energetica Exhibition on Loan
            </h3>
            <p class="text specials-txt">
              On loan from the NEMO Science Museum in Amsterdam, the Energetica
              exhibition is coming to the Community Science Museum. It’s a
              series of installations that allow visitors to experience the
              power of the elements as we harness them. From solar energy
              powering lighting, to ‘Wind Island’ that shows how turbines are
              able to use and control wind to create power.
            </p>
          </div>
        </div>
      </section>
    </main>

    <!-- Footer -->

    <footer class="section-footer">
      <div class="footer-container flex-container">
        <div class="logo-address-container flex-container_nowrap">
          <a href="index.html">
            <img
              src="resources/logo/CSM_logo.svg"
              alt="logo"
              class="footer-logo"
          /></a>

          <div class="address-container flex-container">
            <p class="text_small address-txt">Community Science Museum</p>
            <p class="text_small address-txt">Jalapeno Road 1</p>
            <p class="text_small address-txt">5515 Bergen</p>
          </div>
        </div>

        <div class="opening-hours-container">
          <h4 class="hours-heading quaternary-heading">Opening hours:</h4>
          <div class="hours-container flex-container_nowrap">
            <p class="text_small day">Tuesday - Thursday:</p>
            <p class="text_small hours">10.00 - 16.00</p>
          </div>
          <div class="hours-container flex-container_nowrap">
            <p class="text_small day">Saturday:</p>
            <p class="text_small hours">09.00 - 16.00</p>
          </div>
          <div class="hours-container flex-container_nowrap">
            <p class="text_small day">Sunday:</p>
            <p class="text_small hours">09.00 - 13.00</p>
          </div>
          <div class="hours-container flex-container_nowrap">
            <p class="text_small day">Monday:</p>
            <p class="text_small hours">Closed</p>
          </div>
        </div>

        <div class="social-icons-container">
          <h4 class="social-heading quaternary-heading">Follow us</h4>
          <div class="icon-container flex-container_nowrap">
            <a href="https://www.tiktok.com/en/"
              ><img
                src="resources/tiktok_icon.svg"
                alt="tiktok icon"
                class="icon"
            /></a>
            <a href="https://www.instagram.com/"
              ><img
                src="resources/icons/instagram_icon.svg"
                alt="instagram icon"
                class="icon"
            /></a>
            <a href="https://www.snapchat.com/"
              ><img
                src="resources/icons/snapchat_icon.svg"
                alt="snapchat icon"
                class="icon"
            /></a>
          </div>
        </div>
      </div>
    </footer>
  </body>
</html>