Semester-Project-1/explore.html at main · Veronicabrun/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
<!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="Explore what the Nordics' largest Community science museum for children, teenagers and adults
    has to offer in terms of activities.">
    <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 | Explore</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">Home</a></li>
            <li><a href="events.html">Events</a></li>
            <li><a href="exhibition.html">Exhibition</a></li>
            <li><a href="explore.html" class="active">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>
  </header>
    <main>
      <h1 class="explore-heading">Explore</h1>
        <hr class="line-explore-heading">
      <section class="explore-container">
          <div class="explore-image">
            <img class="explore_image" src="images/explore-kids.jpg" alt="Two children with safety glasses sitting next to each other exploring chemistry.">
          </div>
          <div class="explore-text">
            <h2>For kids</h2>
            <hr class="line-explore">
            <p>Are you a young person looking to learn more about science? Come on down to our museum, there’s plenty to see and do.</p>
            <p>You can learn about Newtonian physics from our bumper swing, or why not travel back in time and meet our resident Woolly Mammoth? Our
              exhibits are designed to be accessible for interested minds, so make sure you comeready to learn and explore.</p>
            <p>We also have the Young Stars club which meets once a week on a Saturday between 10:00 and 13:00 where you’ll get to explore and
              experiment with our team of experts.</p>
          </div>
      </section>
          <hr class="line-explore-container">
      <section class="explore-container">
          <div class="explore-text">
            <h2>For teachers</h2>
            <hr class="line-explore">
            <p>As a community-driven museum, we want to work with schools to create places of learning and exploring.</p>
            <p>Our team are on hand to give your students guided tours of the museum, teach them in our learning laboratory, and provide great video
              presentations that will excite and inspire them.
              Please get in touch with us here to find out more about our facilities and to arrange a time to bring your students through for a visit.</p>
          </div>
          <div class="explore-image">
            <img class="explore_image" src="images/explore-teachers.jpg" alt="A group of people with their backs turned are looking at a painting.">
          </div>
      </section>
          <hr class="line-explore-container">
      <section class="explore-container">
          <div class="explore-image">
            <img class="explore_image" src="images/explore-museum-dino.jpg" alt="A large dinosaur hanging down from a beautiful old museum ceiling.">
          </div>
          <div class="explore-text">
            <h2>Researchers</h2>
            <hr class="line-explore">
            <p>Are you looking to get involved with our team of researchers and academics? Our museum offers various ways for you to use our resources
               and contribute towards them.</p>
            <p>We have online records, laboratory space, and a working relationship with a number of universities around the country.
              Contact us if you have any questions or for more information about this.</p>
          </div>
      </section>
      <div class="cta-item">
        <a href="index.html" class="cta-back">Back</a>
        <a href="contact.html" class="cta-tickets">Buy tickets</a>
    </div>
    </main>
    <footer>
      <div class="footer-container">
          <div class="help">
            <h3 class="footer-heading">Help</h3>
              <ul>
                <li><a href="contact.html">Contact</a></li>
                <li>Accessibility</li>
                <li>Get involved</li>
              </ul>
          </div>
          <div class="follow-us">
            <h3 class="footer-heading">Follow us</h3>
              <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">
            <h3 class="footer-heading">Visit us</h3>
              <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>