website-project/contact.html at main · bmeyboom/website-project · 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
<!DOCTYPE html>

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact - Bridget Meyboom</title>
    <link rel="stylesheet" href="style.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=Pixelify+Sans:wght@400;700&display=swap" rel="stylesheet">
    <!--link below from searching font awesome cdn, for close icon for smaller devices -->
  </head>
  <body>
    <section class = "sub-header">
      <nav>
        <a href="index.html"><img src="images/bike.png"></a>
        <div class="nav-links" id="navLinks"> <!-- id identifies script? -->
          <i class="fa-solid fa-xmark" onclick="hideMenu()"></i> <!-- close icon for small device menu -->
          <ul>
            <li><a href = "index.html">HOME</a></li>
            <li><a href = "about.html">ABOUT</a></li>
            <li><a href = "projects.html">PROJECTS ETC.</a></li>
            <!-- <li><a href = "travel.html">TRAVEL</a></li> -->
            <li><a href = "contact.html">CONTACT</a></li>
          </ul>
        </div>
        <i class="fa-solid fa-bars" onclick="showMenu()"></i> <!-- menu icon for small devices -->
      </nav>
      <H1>Get in touch</H1>

    </section>


    <!---- Contact ----->
    <section class="contact-me">
      <div class="row">
        <div class="contact-col">
          <div>
            <i class="fa fa-home"></i>
            <span>
              <h5>Vancouver, BC</h5>
            </span>
          </div>
          <div>
            <i class="fa fa-envelope-o"></i>
            <span>
                <a href="mailto:bridgetmeyboom@gmail.com"><h5>bridgetmeyboom@gmail.com</h5></a>
            </span>
          </div>
          <div>
            <a href="https://www.linkedin.com/in/bridget-meyboom" style="color: #FF5733;"><i class="fa fa-linkedin"></i></a>
            <span>
              <h5>Connect with me on <a href="https://www.linkedin.com/in/bridget-meyboom" style="color: #FF5733;">LinkedIn</a>!</h5>
            </span>
          </div>
        </div>
        <div class="contact-col">
          <h2>Get in touch!</h2>
          <p>
          Don't hesitate to reach out if you have any questions, I'd be happy to answer them.
          </p>
        </div>
      </div>
    </section>

    <section class="location">

      <!---- Embedded map! ----->
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83327.37148313464!2d-123.2063048814462!3d49.2578181906132!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x548673f143a94fb3%3A0xbb9196ea9b81f38b!2sVancouver%2C%20BC!5e0!3m2!1sen!2sca!4v1698803319630!5m2!1sen!2sca" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

    </section>
    <!-------- JQuery for contact form submit ------->
    <script>
      function submitToAPI(e) {
       e.preventDefault();
       var URL = "https://xxxxxxxx.execute-api.us-east-1.amazonaws.com/01/contact";

            var Namere = /[A-Za-z]{1}[A-Za-z]/;
            if (!Namere.test($("#name-input").val())) {
                         alert ("Name can not less than 2 char");
                return;
            }
            var mobilere = /[0-9]{10}/;
            if (!mobilere.test($("#phone-input").val())) {
                alert ("Please enter valid mobile number");
                return;
            }
            if ($("#email-input").val()=="") {
                alert ("Please enter your email id");
                return;
            }
          }
    </script>


     <!-- Footer -->
     <!-- Footer -->
     <section class="footer">
      <h4>BRIDGET MEYBOOM</h4>
      <p>Engineering Physics</br>Environment and Social Sustainability</br>Cyclist and Adventurer</br><a href="projects.html" class="foot-btn">Explore Projects</a></p>
     </section>

    <!--------JavaScript for Toggle Menu ------->
    <script>

      var navLinks = document.getElementById("navLinks");

      function showMenu(){
        navLinks.style.right = "0"; // in java??!! changes style to show menu
      }

      function hideMenu(){
        navLinks.style.right = "-200px";
      }

    </script>
    <script src="https://kit.fontawesome.com/dfd5dc561d.js" crossorigin="anonymous"></script>
    <script>
      function onSubmit(token) {
        document.getElementById("demo-form").submit();
      }
    </script>
  </body>
</html>