contact.html

<!DOCTYPE html>
<html>
<head>
	<title>SHEP AI</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="shortcut icon" href="assets/test1.ico" type="favicon/ico">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
</head>
<body class="backgroundC">
<div class="topnav">
<p class="title" align="center">Dexter Shepherd</p>
<a align="left" class="topnavlogo"><img src="assets/eyeT.png" width="50px" height="50px"></a>
<a class="topnavleft" href="index.html">Home</a>
<a class="topnavleft" href="index.html#about">About</a>
<a class="topnavleft" href="downloads.html">Downloads</a>
<a class="topnavleft" href="contact.html">Contact</a>
<br>
<!-- <a align="right" href="https://www.facebook.com/SHEP-AI-101118428133298/" class="fa fa-facebook"></a>
<a align="right" href="https://twitter.com/ai_shep" class="fa fa-twitter"></a>
<a align="right" href="https://www.instagram.com/shep.ai/" class="fa fa-instagram"></a> -->
<!-- <a align="right" href="https://www.youtube.com/channel/UCQr_MHaJ53feVK19lDKDxCQ?view_as=subscriber" class="fa fa-youtube"></a> -->
<a align="right" href="https://scholar.google.com/citations?hl=en&user=hJSy6CYAAAAJ" class="ai ai-google-scholar ai-2x"></a>
<a align="right" href="https://github.com/shepai" class="fa fa-github"></a>
<a align="right" href="https://www.linkedin.com/in/dexter-shepherd-1a4a991b8/" class="fa fa-linkedin"></a>
<a class="topnavright" class="search-container"><input id="searchbar" type="text" placeholder="Search.." name="search"></a>

<a href="#" class="topnavright"><i onclick="search()" class="icon fa fa-search"></i></a>
  <style>
    /* ONLY page-specific styles */
    .contactPage {
      max-width: 850px;
      margin: auto;
      padding: 40px 20px;
      text-align: center;
    }

    .contactHero {
      margin-bottom: 30px;
    }

    .contactHero h1 {
      font-size: 3rem;
      margin-top: 15px;
      margin-bottom: 10px;
    }

    .contactSub {
      font-size: 1.1rem;
      opacity: 0.85;
      max-width: 600px;
      margin: auto;
      line-height: 1.6;
    }

    .contactCard {
      margin-top: 40px;
      padding: 35px;
      border-radius: 22px;
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(12px);
      box-shadow: 0 15px 40px rgba(0,0,0,.12);
    }

    .contactForm {
      display: flex;
      flex-direction: column;
      gap: 18px;
      margin-top: 25px;
    }

    .contactRow {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .contactForm input,
    .contactForm textarea {
      width: 100%;
      padding: 14px 16px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.03);
      font-size: 15px;
      outline: none;
    }

    .contactForm textarea {
      resize: vertical;
      min-height: 150px;
    }

    .contactForm input:focus,
    .contactForm textarea:focus {
      border-color: #4f9dff;
      box-shadow: 0 0 0 3px rgba(79,157,255,.15);
    }

    .contactButton {
      padding: 14px;
      border: none;
      border-radius: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: .2s ease;
    }

    .contactButton:hover {
      transform: translateY(-2px);
    }

    .socialLinks {
      display: flex;
      justify-content: center;
      gap: 18px;
      margin-top: 28px;
    }
  </style>
<script src="search.js">
    
</script>

</div>
	<!-- the main content -->
	<br>
	
	  <div class="main contactPage">

    <div class="iconPage contactHero">
      <img class="imageCircle" src="assets/robot2.jpg" alt="Robot image">
      <h1 class="headerText">Contact</h1>
      <p class="contactSub">
        Interested in robotics, AI research, collaboration, or building something ambitious? Drop me a message.
      </p>
    </div>

    <div class="contactCard">
      <form class="contactForm" action="https://formspree.io/f/mpqnqgbo" method="POST">

        <div class="contactRow">
          <input type="text" name="name" placeholder="Your Name" required>
          <input type="email" name="email" placeholder="Email Address" required>
        </div>

        <input type="text" name="subject" placeholder="Subject">

        <textarea name="message" placeholder="Tell me about your project, question, or idea..." required></textarea>

        <button class="buttonF contactButton" type="submit">Send Message</button>
      </form>

      <div class="socialLinks">
        <a href="https://scholar.google.com/citations?hl=en&user=hJSy6CYAAAAJ" title="Google Scholar"><i class="ai ai-google-scholar"></i></a>
        <a href="https://github.com/shepai" title="GitHub"><i class="fa fa-github"></i></a>
        <a href="https://www.linkedin.com/in/dexter-shepherd-1a4a991b8/" title="LinkedIn"><i class="fa fa-linkedin"></i></a>
      </div>

      <p class="contactFooter">
        Open to research collaborations, technical consulting, and interesting AI ideas.
      </p>
    </div>
  </div>
</body>

</html>