Community-Science-Museum/index.html at main · thislily/Community-Science-Museum · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Welcome explorers! The Community Science Museum is a fun and interactive place for young people to learn about science! Come join us for a day of experiments, exploration and excitement! We have been an important resource for the community for over 30 years, and we will remain focused on serving our local youth going forward."
    />
    <link rel="stylesheet" href="css/styles.css" />
    <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=Manjari:wght@400;700&family=Urbanist:wght@800&display=swap"
      rel="stylesheet"
    />
    <title>Home | Community Science Museum</title>
  </head>
  <body>
    <header class="light-blue">
      <div class="max-width">
        <a href="/index.html" class="home-link">
          <img
            class="logo"
            src="/images/logos+icons/csm-logo.svg"
            alt=" CSM Logo"
          />
        </a>

        <label class="menu-icon" for="checkbox">
          <img src="images/logos+icons/menu-icon.svg" alt="" />
        </label>
        <input type="checkbox" id="checkbox" />
        <nav>
          <a class="turn-yellow hover-underline" href="html/visit.html"
            >Visit</a
          >
          <a class="turn-blue hover-underline" href="html/explore.html"
            >Explore</a
          >
          <a class="turn-green hover-underline" href="html/exhibitions.html"
            >Exhibitions</a
          >
          <a class="turn-purple hover-underline" href="html/special-events.html"
            >Special Events</a
          >
          <a
            class="turn-orange hover-underline hide-tickets"
            href="html/checkout.html"
            >Tickets</a
          >
        </nav>
      </div>
    </header>

    <!--content begins-->

    <main class="light-purple">
      <a class="open-today med-orange" href="html/checkout.html">
        <h2 class="same-as-h3">Open today</h2>
        <p>9:00 - 18:00</p>
        <div class="button-top dark-blue">Get tickets</div>
      </a>

      <div class="home-grid">
        <div id="welcome-explorers" class="flex">
          <h1 class="dark-blue">Welcome Explorers!</h1>
          <p class="dark-blue">
            Come join us at the Community Science Museum where we're committed
            to making science accessible to all.
          </p>
        </div>

        <a href="html/checkout.html" id="get-15" class="button med-yellow">
          Get 15% off tickets when you order
          <span>online!</span>
        </a>

        <div id="its-fun" class="flex">
          <div class="row its-fun-title">
            <h2>It's great to learn, because knowledge is power!</h2>
          </div>

          <p>
            We believe science should not be confined to the textbook, but
            brought to live through exhibits. Many of these exhibits are designed for you to interact
            with and play around to see science come to life (apart from the
            dinosaur exhibits - they only come to life at night when everyone's
            gone home).
          </p>
          <a
            class="button light-green see-exhibits-button"
            href="html/exhibitions.html"
            >See exhibits</a
          >
        </div>

          <img
          id="museum-interior"
          src="images/index-images/museum-interior.jpg"
          alt="the main entrance hall of the museum"
        />


        <img
          id="museum-exterior"
          src="images/index-images/museum-exterior.jpg"
          alt="the exterior of the museum"
        />

        <img
          id="microscope-icon"
          src="images/index-images/microscope.svg"
          alt="a microscope"
        />
      </div>

      <section class="flex join-the-squad med-purple">
        <div class="flex join-the-squad-text">
          <h2>Ready to see something new?</h2>
          <p>
            With new exhibitions opening every month, you'll never run out of
            things to explore and discover!
          </p>

          <a class="button med-yellow" href="html/explore.html"
            >Join the Science Squad</a
          >
        </div>
        <img
          src="images/index-images/ready-to-see.jpg"
          alt="child looking through a virtual reality headset"
        />
      </section>

      <section class="flex want-more dark-blue">
        <h2>Want more? Follow us!</h2>
        <div class="social-display row wrap">
          <div class="row">
            <a
              class="flex social-box tiktok-bg"
              href="https://www.tiktok.com/foryou"
            >
              <img
                src="images/logos+icons/tiktok-white.svg"
                alt="tik tok logo"
              />
            </a>

            <a class="flex social-box instagram-bg" href="https://www.instagram.com">
              <img
                src="images/logos+icons/instagram-white.svg"
                alt="instagram logo"
              />
            </a>
          </div>

          <div class="row">
            <a class="flex social-box facebook-bg" href="https://www.facebook.com">
              <img
                src="images/logos+icons/facebook-white.svg"
                alt="facebook logo"
              />
            </a>

            <a class="flex social-box youtube-bg" href="https://www.youtube.com">
              <img
                src="images/logos+icons/youtube-white.svg"
                alt="youtube logo"
              />
            </a>
          </div>
        </div>
      </section>

      <section class="flex sign-up dark-purple">
        <div class="row">
          <h2 class="same-as-h3">
            Sign up now to get updates on future special events!
          </h2>
          <img
            src="images/index-images/computer.svg"
            alt="icon of a computer"
          />
        </div>
        <form class="row wrap">
          <div>
            <label for="email">Email</label>
            <input type="email" name="email" id="email" />
          </div>
          <div>
            <label for="name">Name</label>
            <input type="text" id="name" name="name" />
          </div>
        </form>

        <a class="button med-yellow" href="html/checkout.html">Sign up</a>
      </section>
    </main>

    <!--content ends-->

    <footer class="flex light-blue">
      <div class="socials-mini row wrap">
        <div>
          <a href="https://www.tiktok.com/foryou"
            ><img src="images/logos+icons/tiktok.svg" alt="tik tok logo"
          /></a>
          <a href="https://www.instagram.com"
            ><img src="images/logos+icons/instagram.svg" alt="instagram logo"
          /></a>
        </div>
        <div>
          <a href="https://www.facebook.com"
            ><img src="images/logos+icons/facebook.svg" alt="facebook logo"
          /></a>
          <a href="https://www.youtube.com"
            ><img src="images/logos+icons/youtube.svg" alt="youtube logo"
          /></a>
        </div>
      </div>

      <div class="footer-text">
        <p class="small-text">Supported by the Local Government</p>
        <p class="small-text">Copyright Community Science Museum</p>
      </div>

      <a
        class="med-blue flex contact-button"
        href="html/visit.html#contact-us-anchor"
        >Contact us</a
      >
    </footer>
  </body>
</html>