FinalProject/contact.html at master · benjamin-shuster/FinalProject · 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
<!-- DEVELOPER: Benjamin Shuster, IS117-002, Spring 2023 -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="description" content="How to do better on exams by drinking alcoholic beverages ">
  <meta name="keywords" content="Alcohol, Studying, Exam, Testing, Beer, Wine">
  <meta name="author" content="Benjamin Shuster">
  <!--    https://www.w3schools.com/tags/tag_meta.asp   -->
  <title>Contact Us</title>
  <!--  bootstraps css code  -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

  <link rel="stylesheet" href="Styles/contact.css">
  <link rel="stylesheet" href="Styles/global.css">
  <link rel="shortcut icon" href="Images/logo.png" type="image/x-icon">
</head>
<body>

<script src="Scripts/navigation.js"></script>
<!--this injects the navbar using js so I can modify it in one file-->

<main>
  <h1 class="text-center my-5 inspiration ">Contact Us</h1>
  <div class="mt-5 container d-flex justify-content-center" >
    <p class="lh-lg w-75">
      Welcome to our website! Here, you can find helpful information about our organization and the services we offer. If you have any questions or would like to learn more, please don't hesitate to reach out to us.<br><br>
      You can contact us by filling out the contact form on our website. We are also available to speak with you over the phone at
      <a href="tel:973-596-2865">973-596-2865</a> during our business hours of 11pm - 12:am M-F.<br><br>
      We want to make it clear that our organization does not distribute alcohol. Our mission is to make you get it your self. If you are looking for alcohol-related services or products, we recommend that you seek out a licensed vendor or professional.
      <br><br>
      Thank you for visiting our website. We look forward to hearing from you and helping you in any way we can.<br>
    </p>
  </div>
  <form id="contactForm" onsubmit="return false" class="d-flex flex-column justify-content-center align-items-center container card my-xl-5">
<!--    https://getbootstrap.com/docs/5.3/forms/floating-labels/-->
    <h3 class=" text-center mt-5">Contact Us</h3>
    <div class="d-flex flex-column align-items-end w-50">
      <div class="form-floating my-3 w-100">
        <input type="text" class="form-control" id="name" placeholder="Joe Doe">
        <label for="name">Name</label>
      </div>
      <div class="form-floating my-3 w-100">
        <input type="email" class="form-control" id="email" placeholder="name@example.com">
        <label for="email">Email address</label>
      </div>
      <div class="form-floating my-3 w-100">
        <input type="tel" class="form-control" id="phone" placeholder="1+123-456-7890">
        <label for="phone">Phone Number</label>
      </div>
      <div class="form-floating my-3 w-100" >
        <textarea style="height: 150px" class="form-control" placeholder="Leave a comment here" id="comment"></textarea>
        <label for="comment">Comments</label>
      </div>
      <button data-bs-toggle="modal" data-bs-target="#formModal" class="btn btn-outline-secondary mt-4 ml-auto mb-5">Submit</button>
    </div>


  </form>


  <!-- Modal -->
  <div class="modal fade" id="formModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog  modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Thanks ! We will get back to you soon</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <img class="img-fluid" src="Images/adam_grading.webp" alt="Beer! cheers">
        </div>
        <div class="modal-footer justify-content-between">
          <p>
            Have one on the house!
          </p>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

</main>

<script src="Scripts/footer.js"></script>
<!--this injects the footer using js so I can modify it in one file-->
<!--bootstraps javascript code-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="Scripts/global.js"></script>
<script type="module">
  import { rainbowCursor  } from "https://unpkg.com/cursor-effects@latest/dist/esm.js";

  new rainbowCursor({
    length: 25,
    size: 5,
  });
</script>
</body>
</html>