Semester-project-1-html-css/contact.html at master · TorMagne/Semester-project-1-html-css · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Do you have any questions or cant find what you are looking for. Ask us down below, and we will get back to you." />
    <meta name="keywords" content="contact us, find answers, opening hours, location" />
    <meta name="author" content="Tor Magne Brekken" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact us / Visit us</title>
    <link rel="icon" href="img/Science-logo.png" type="image/x-icon" />
    <!-- material icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <!-- navigation css -->
    <link rel="stylesheet" href="css/navigation.css" />
    <!-- footer css -->
    <link rel="stylesheet" href="css/footer.css" />
    <!-- contact custom css -->
    <link rel="stylesheet" href="css/contact.css" />
  </head>
  <body>
    <!-- navigation -->
    <nav role="navigation" class="navigation">
      <a href="index.html">
        <img
          class="navigation__img"
          src="img/logo.png"
          alt="logo, atomic electron illustration"
      /></a>
      <i class="material-icons"> menu </i>
      <!-- <input type="checkbox" id="hamburger-menu" /> -->

      <ul class="navigation__list slide">
        <li>
          <a
            tabindex="0"
            class="navigation__link "
            href="index.html"
            >Home</a
          >
        </li>
        <li>
          <a tabindex="0" class="navigation__link" href="exhibition.html"
            >Exhibitions</a
          >
        </li>
        <li>
          <a tabindex="0" class="navigation__link" href="teachers-kids.html"
            >Teachers & Kids</a
          >
        </li>
        <li>
          <a tabindex="0" class="navigation__link navigation--active" href="contact.html"
            >Contact us / Visit Us</a
          >
        </li>
        <li>
          <a tabindex="0" class="navigation__link" href="gallery.html"
            >Gallery</a
          >
        </li>
      </ul>
    </nav>

    <!-- contact form section -->
    <div class="form-container">
      <h1 class="form__title">Community Science Museum.</h1>
      <p class="form__txt">You got a guestion. Or looking for something. Send us a message!</p>
      <hr class="border-purple">
      <div class="form__wrapper">
        <div class="csm__info">
          <h3 class="csm__title">We are happy to talk to you</h3>
          <h4 class="csm__sub-title">Opening times</h4>
        <ul>
          <li>Monday: Closed</li>
          <li>Tuesday: 10:00 – 16:00</li>
          <li>Wednesday: 10:00 – 16:00</li>
          <li>Thursday: 10:00 – 16:00</li>
          <li>Friday: 10:00 – 19:00</li>
          <li>Saturday: 9:00 – 16:00</li>
          <li>Sunday: 9:00 – 13:00</li>
        </ul>
        </div>
        <div class="contact">
          <h3 class="contact__title">Contact us!</h3>
          <form action="">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" placeholder="Your name" required/>

            <label for="name">Company/School:</label>
            <input type="text" id="company/school" name="company/school" placeholder="Your Company/School" required/>

            <label for="email">Email Adress:</label>
            <input type="email" id="email" name="email" placeholder="Your email" required/>

            <label for="phone">Phone Number:</label>
            <input type="tel" id="phone" name="phone" placeholder="Your phone number" required/>

            <label class="full-length" for="message">Message:</label>
            <textarea class="full-length name="message" rows="5" placeholder="Your message here...." required></textarea>

            <button class="full-length contact--button type="submit">Submit</button>
          </form>
        </div>
      </div>
    </div>

    <footer class="footer">
      <div class="column-center-w">
        <h4>Location</h4>
        <p class="footer-p">The museum is located at: North science Road. 6790 Street</p>
        <hr class="footer-border" />

        <h4>Accessibility</h4>
        <p>The museum has wheelchair accessibility ramps. It also has audio guides and braille display signs for the visually impaired.</p>
        <hr class="footer-border" />

        <h4>Food and drink</h4>
        <p>There is a café attached to the museum where you can get light lunches, soft drinks, coffee, snacks and more.</p>
        <hr class="footer-border" />

        <h4>Shop</h4>
        <p>Our shop offers a range of memorabilia from the museum as well as great gifts and activity packs that allow you to continue to explore science even after you’ve left the museum.</p>
        <hr class="footer-border" />
      </div>

      <p class="copyright">
        &copy; Designed & coded by brekkenmedia.no
      </p>
    </footer>
    <script src="js/nav.js"></script>
  </body>
</html>