Add contact

about/ani.js

@@ -22,7 +22,6 @@ document.addEventListener("DOMContentLoaded", () => {
           duration: 1,
           alpha: 1,
           scrollTrigger: {
-            markers: true,
             trigger: "#about",
             start: `top+=${10 + i * 160}px top`,
             end: "bottom center"

about/index.html

@@ -108,7 +108,7 @@ <h2>Projects</h2>
       <i class="nav-ele fa fa-search" aria-hidden="true"></i>
     </nav>
     <div style="height: 12.5vh"></div>
-    <section id="about" style="border: 2px solid red">
+    <section id="about">
       <div class="heading">
         <h2>ABOUT</h2>
         <div>SEDS BPHC</div>
@@ -128,7 +128,7 @@ <h2>ABOUT</h2>
           Engineering, Computer Science, Biology, Electronics and Communication
           Engineering, Physics are to name a few.
         </p>
-
+        <!-- 
         <p>
           This season, we aim to launch our first rocket on-site at the
           Spaceport America Cup 2022 and participate in the Cansat Competition
@@ -137,7 +137,7 @@ <h2>ABOUT</h2>
           established R&D division is testing solid rocket motors and intends to
           work with hybrid motors soon. Thrust Vector Control is also an area of
           research for the team.
-        </p>
+        </p> -->
       </div>
     </section>
     <section>

contact/contact.css

@@ -0,0 +1,186 @@
+body {
+  font-family: "Kanit";
+  font-weight: 400;
+  color: #fff;
+  margin: 0px;
+  background-color: #000;
+  padding-top: 12.5vh;
+}
+
+/* --- FOR TESTING --- */
+.navbar {
+  background-color: #fff;
+  height: 4.25em;
+  color: #000;
+}
+
+/* main {
+	padding: 0 5em 0 5em;
+	height: 100vh;
+} */
+
+.contact__main-header {
+  margin-top: 0.7em;
+  font-weight: 600;
+  text-align: center;
+}
+
+hr {
+  border: none;
+  height: 0.0625em;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: #fff;
+}
+.user__form {
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.user__info {
+  display: flex;
+  flex-direction: column;
+}
+
+.input__area,
+.input__area__text {
+  border-radius: 5px;
+  font-weight: 300;
+  padding: 1em;
+  /* padding-left: 0.7em; */
+  margin-bottom: 1em;
+}
+
+.input__area__text {
+  resize: none;
+  overflow: hidden;
+  width: 85%;
+  margin: auto;
+  height: 100%;
+  min-width: 5em;
+}
+
+.col {
+  display: flex;
+  flex-direction: column;
+  /* align-items: center; */
+}
+
+.input__area:focus,
+.input__area__text:focus {
+  outline: #4a93e0;
+  border: 2px #4a93e0 solid;
+}
+
+.user__info {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.button__row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+button {
+  text-align: center;
+  vertical-align: middle;
+}
+
+.submit__button {
+  /* width: 30%; */
+  overflow: hidden;
+  background-color: #4a93e0;
+  color: #fff;
+  border: none;
+  border-radius: 2px;
+  padding: 1em;
+  margin-top: 1.2em;
+}
+
+button:hover {
+  background-color: #4275e3;
+}
+
+@media (max-width: 768px) {
+  ::placeholder {
+    font-size: 1rem;
+  }
+
+  main {
+    font-size: 1.2rem;
+  }
+
+  .input__area__text {
+    resize: none;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    min-height: 8em;
+    min-width: 5em;
+  }
+
+  .contact__main-header {
+    font-size: 1.6em;
+    margin-top: 0.7em;
+    font-weight: 600;
+    text-align: center;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .input__area,
+  .input__area__text {
+    border-radius: 23px;
+  }
+
+  .submit__button {
+    padding-left: 2em;
+    padding-right: 2em;
+    min-width: 2em;
+    border-radius: 23px;
+  }
+}
+
+@media (max-width: 677px) {
+  .row {
+    display: flex;
+    flex-direction: column;
+  }
+}
+@media (max-width: 576px) {
+  ::placeholder {
+    font-size: 0.9rem;
+  }
+
+  main {
+    font-size: 0.8rem;
+  }
+
+  .input__area__text {
+    resize: none;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    min-width: 5em;
+  }
+
+  .contact__main-header {
+    font-size: 1.3em;
+    margin-top: 0.7em;
+    font-weight: 600;
+    text-align: center;
+  }
+
+  .row {
+    display: flex;
+    flex-direction: column;
+  }
+}

contact/contact.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+
+    <link rel="stylesheet" href="./contact.css" />
+    <title>Contact Us</title>
+  </head>
+  <body>
+    <!-- NAVBAR -->
+    <div class="menu" id="menu">
+      <div
+        class="close"
+        onclick="document.getElementById('menu').classList.remove('open')"
+      >
+        <i class="fa-solid fa-xmark"></i>
+      </div>
+      <h2>Projects</h2>
+      <div class="divider"></div>
+      <a class="nav-ele" href="../sacup/">Rocket</a>
+      <a class="nav-ele" href="../cansat/">CanSat</a>
+      <a class="nav-ele" href="../cubesat/">CubeSat</a>
+      <a class="nav-ele" href="../archangel/">R&D</a>
+    </div>
+    <nav class="navbar row">
+      <i
+        id="menu-open"
+        onclick="document.getElementById('menu').classList.add('open')"
+        class="nav-ele fa-solid fa-bars"
+      ></i>
+      <a class="nav-ele" href="../sacup/">Rocket</a>
+      <a class="nav-ele" href="../cansat/">CanSat</a>
+      <img src="../assets/images/seds_logo_w.png" alt="SEDS Logo" />
+      <a class="nav-ele" href="../cubesat/">CubeSat</a>
+      <a class="nav-ele" href="../archangel/">R&D</a>
+      <i class="nav-ele fa fa-search" aria-hidden="true"></i>
+    </nav>
+
+    <!-- MAIN CONTENT -->
+    <main>
+      <!-- MAIN HEADER -->
+      <h1 class="contact__main-header">Contact Us</h1>
+      <hr />
+
+      <div class="user__form">
+        <form action="">
+          <div class="container">
+            <div class="row">
+              <div class="col">
+                <div class="user__info">
+                  <input
+                    class="input__area"
+                    type="text"
+                    placeholder="Name"
+                    required
+                  />
+                  <input
+                    class="input__area"
+                    type="email"
+                    placeholder="Email"
+                    required
+                  />
+                  <input
+                    class="input__area"
+                    type="tel"
+                    placeholder="Phone Number"
+                    required
+                  />
+                </div>
+              </div>
+              <div class="col">
+                <textarea
+                  class="input__area__text"
+                  type="text"
+                  placeholder="Your message to us"
+                  required
+                ></textarea>
+              </div>
+            </div>
+            <div class="button__row">
+              <button class="submit__button" type="submit">Send Message</button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </main>
+  </body>
+</html>