git215_final/contact.html at main · GriffinFlowers/git215_final · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="Griffin Flowers">
  <meta name="description" content="Contact Gröttnäs Lodge for inquiries, support, and booking assistance.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gröttnäs Lodge | Contact</title>
  <link rel="icon" href="images/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="wrapper">
    <header class="hero">
      <h1><a href="index.html">Gröttnäs Lodge</a></h1>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="#">Accommodations</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main class="contact-grid">
      <section class="contact-info">
        <h2 class="intro-heading">Contact Us</h2>
        <p>
          Please reach out to us with any questions or concerns. We are happy to help you plan your dream vacation with us!<br>
          <strong>Required fields marked with a *</strong>
        </p>
        <img src="images/swiss-peak.jpg" alt="Snowy peak of the Swiss Alps" width="400" height="300">
      </section>

      <section class="contact-form">
        <form action="https://wp.zybooks.com/form-viewer.php" method="post">
          <label for="name">Full Name: *</label>
          <input type="text" id="name" name="name" required>

          <label for="email">Email Address: *</label>
          <input type="email" id="email" name="email" required>

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

          <fieldset>
            <legend>Preferred Contact Method *</legend>
            <label><input type="radio" name="contact-method" value="email" required> Email</label>
            <label><input type="radio" name="contact-method" value="phone"> Phone</label>
          </fieldset>

          <label for="comments">Comments: *</label>
          <textarea id="comments" name="comments" required></textarea>

          <input type="submit" value="Submit">
        </form>
      </section>
    </main>

    <footer>
      <p>&copy; 2023 - Gröttnäs Lodge</p>
      <p>This site is for educational purposes only</p>
    </footer>
  </div>
</body>
</html>