contact-us.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Contact Us</title>
  <link rel="stylesheet" href="css/contact-us.css">
  <link rel="stylesheet" href="css/base.css">
  <link href="https://fonts.googleapis.com/css?family=Blinker&display=swap" rel="stylesheet">
</head>
<style media="screen">
  @media (max-width: 1200px) {
    .x {
      font-size: 45px;
    }
    .sidebar {
      width: 40vw;
    }
    .links-list li {
      font-size: 40px;
    }
    .first-name, .last-name {
      grid-column: 1/3;
    }
    .contact-image {
      width: auto;
    }
    .sidebar-button {
      height: 125px;
      width: 125px;
      font-size: 75px;
    }
    .sidebar-item {
      padding: 17.5px 20px;
    }
    #contact-form h1 {
      font-size: 85px;
    }
    #contact-form {
      width: 85vw;
      height: 65vh;
      grid-gap: 22.5px;
      padding: 15px;
    }
    .contact-input {
      font-size: 50px;
      padding: 30px;
    }
  }
</style>
<body>
  <div id="sidebar" class="sidebar">
      <ul style="margin-bottom: none;" class="links-list">
        <li style="color: lightgrey; font-size: 20px; background-color: rgb(60,60,60);" class="sidebar-item sidebar-header"><a class="x" href="#">&#9776;</a><a class="x hackspace" href="#">HackSpace</a></li>
        <li class="sidebar-item">
          <div class="slider" onclick="window.location.href = 'index.html';"></div>
          <a href="index.html" class="sidebar-link">Home</a>
        </li>
        <li class="sidebar-item">
          <div class="slider" onclick="window.location.href = 'our-mission.html';"></div>
          <a href="our-mission.html" class="sidebar-link">Our Mission</a>
        </li>
        <li class="sidebar-item">
          <div class="slider" onclick="window.location.href = 'join.html';"></div>
          <a href="join.html" class="sidebar-link">Why Join?</a>
        </li>
        <li class="sidebar-item">
          <div class="slider" onclick="window.location.href = 'about-us.html';"></div>
          <a href="about-us.html" class="sidebar-link">About Us</a>
        </li>
        <li class="sidebar-item">
          <div class="slider" onclick="window.location.href = 'contact-us.html';"></div>
          <a href="contact-us.html" class="sidebar-link">Contact Us</a>
        </li>
        <li class="sidebar-item">
          <div class="slider" onclick="window.location.href = 'requirements.html';"></div>
          <a href="requirements.html" class="sidebar-link">Requirements</a>
        </li>
        <li class="sidebar-item">
          <div class="slider" onclick="window.location.href = 'projects.html';"></div>
          <a href="projects.html" class="sidebar-link">Our Projects</a>
        </li>
        <li class="sidebar-item">
          <div class="slider" onclick="window.location.href = 'faq.html';"></div>
          <a href="faq.html" class="sidebar-link">FAQ</a>
        </li>
      </ul>
    </div>
  <div class="overlay"></div>
  <a class="sidebar-button" href="#sidebar"><span class="center">&#9776;</span></a>
  <img class="contact-image" src="https://images.unsplash.com/photo-1484807352052-23338990c6c6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
  <div class= "container">
      <form id="contact-form" action="https://formspree.io/calix.huang1@gmail.com" method="POST" autocomplete="off">
        <h1>Have any questions?</h1>
        <input class="contact-input first-name" type="text" name="First Name" placeholder="First Name">
        <input class="contact-input last-name" type="text" name="Last Name" placeholder="Last Name">
        <input class="contact-input email" type="email" name="Email" placeholder="Email">
        <textarea class="contact-input message" rows="8" cols="80" placeholder="Message" name="Message"></textarea>
        <input class="contact-input contact-btn" type="submit" value="Submit">
      </form>
  </div>
</body>
</html>