https://codeforgoodberkeley.github.io/contact.html

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8" />
5    <meta
6      name="viewport"
7      content="width=device-width, initial-scale=1, shrink-to-fit=no"
8    />
9    <title>Contact | CFG</title>
10    <link rel="icon" href="images/CFGIcon.png" />
11
12    <!--Google Fonts CSS-->
13    <link rel="preconnect" href="https://fonts.googleapis.com" />
14    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
15    <link
16      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap"
17      rel="stylesheet"
18    />
19    <link
20      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
21      rel="stylesheet"
22      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
23      crossorigin="anonymous"
24    />
25    <!--Custom CSS-->
26    <link rel="stylesheet" href="css/contact.css?v=2" />
27    <link rel="stylesheet" href="css/header.css" />
28    <link rel="stylesheet" href="css/footer.css" />
29
30    <!--Airtable Link-->
31    

31<script src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script>

31
32  </head>
33  <body>
34    <nav class="navbar navbar-expand-md sticky-top">
35      <div class="container-fluid">
36        <a href="index"
37          ><img
38            class="ps-2 pe-4"
39            height="60"
40            src="images/cfglogo_transparent.png"
41            alt="Code For Good"
42        /></a>
43        <button
44          class="navbar-toggler"
45          type="button"
46          data-bs-toggle="collapse"
47          data-bs-target="#navbarSupportedContent"
48          aria-controls="navbarSupportedContent"
49          aria-expanded="false"
50          aria-label="Toggle navigation"
51        >
52          <span class="navbar-toggler-icon"></span>
53        </button>
54        <div
55          class="collapse navbar-collapse justify-content-end"
56          id="navbarSupportedContent"
57        >
58          <div class="navbar-nav">
59            <a class="nav-link pe-lg-4 pe-xxl-5" href="index">HOME</a>
60            <a class="nav-link pe-lg-4 pe-xxl-5" href="about">ABOUT</a>
61            <a class="nav-link pe-lg-4 pe-xxl-5" href="projects"
62              >PROJECTS</a
63            >
64            <a class="nav-link pe-lg-4 pe-xxl-5 active" href="contact"
65              >CONTACT</a
66            >
67            <a class="nav-link pe-lg-4 pe-xxl-5" href="apply">APPLY</a>
68          </div>
69        </div>
70      </div>
71    </nav>
72
73    <div id="contact-title">
74      <div id="contact-title-overlay">
75        <div id="contact-title-box">
76          <h1>CONTACT</h1>
77        </div>
78      </div>
79    </div>
80    <div class="container">
81      <div class="tabs">
82        <div class="tab" id="student">For Students</div>
83        <div class="tab" id="nonprofit">For Nonprofits & Organizations</div>
84      </div>
85    </div>
86    <div class="mainbox-wrapper">
87      <div class="border">
88        <div id="studentForm">
89          <iframe
90            class="airtable-embed airtable-dynamic-height"
91            src="https://airtable.com/embed/shr9hV7GleP6WtDS2?backgroundColor=cyan"
92            frameborder="10"
93            onmousewheel=""
94            width="70%"
95            height="755"
96            style="
97              background-color: transparent;
98              border: 1px solid rgb(204, 204, 204);
99              margin-top: 0px !important;
100              margin-right: auto;
101              margin-bottom: 50px;
102              margin-left: auto;
103            "
104          ></iframe>
105        </div>
106        <div id="contactForm">
107          <iframe
108            class="airtable-embed airtable-dynamic-height"
109            src="https://airtable.com/embed/shrNgB1ni6VFvbGcz?backgroundColor=cyan"
110            frameborder="10"
111            onmousewheel=""
112            width="70%"
113            height="755"
114            style="
115              background-color: transparent;
116              border: 1px solid #ccc;
117              margin-top: 0px !important;
118              margin-right: auto;
119              margin-bottom: 50px;
120              margin-left: auto;
121            "
122          ></iframe>
123        </div>
124      </div>
125    </div>
126
127    <!-- footer -->
128    <div id="footer"></div>
129    

129<script>
130    fetch('footer.html')
131      .then(response => response.text())
132      .then(data => {
133        document.getElementById('footer').innerHTML = data;
134      });
135    </script>

135
136
137    

137<script src="js/contact.js"></script>

137
138    

138<script
139      src="https://kit.fontawesome.com/ee32c60bd9.js"
140      crossorigin="anonymous"
141    ></script>

141
142    

142<script
143      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
144      integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
145      crossorigin="anonymous"
146    ></script>

146
147    

147<script src="js/footer.js"></script>

147
148  </body>
149</html>