contact.html

<!DOCTYPE html><!--[if IE 8 ]>
<html lang="en" class="no-js ie8"></html><![endif]-->
<!--[if IE 9 ]>
<html lang="en" class="no-js ie9"></html><![endif]-->
<html class="no-js" lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="Hyperloop UC - Designing the future">
    <meta name="author" content="Hyperloop UC">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, shrink-to-fit=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="assets/images/HyperloopIcon.png">
    <link rel="apple-touch-icon" href="assets/images/HyperloopIcon.png">
    <title>Contact Us | Hyperloop UC</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/style.css"><!--[if lt IE 9]>
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <script src="assets/js/es5-shim.min.js"></script><![endif]-->
  </head>
  <body class="cssAnimate">
    <div id="ct-js-wrapper" class="ct-pageWrapper">
       

      <div id="header"></div>
      <header data-height="30%"  class="ct-u-display-tablex text-uppercase text-center whiteGradient paddingBottom60">
        <div class="inner text-uppercase" style="color: #000"> 
			<div class="container ct-u-color--black text-center">
			  <h1 class="h1 pageHeading">Contact Us</h1>
                <br>
              <h4 class="h4 text-capitalize fontBody" >Feel free to get in touch. We are listening!</h4>
			</div>
        </div>
      </header>
      <section id="contactus_form" data-height="50%"  class="tablex whiteGradient" style="background-color: #eee">
        <div class="ct-section ct-section-top" style="padding-top: 0px">
          
        </div>
        <div class="ct-section" style="padding-top: 50px;" >
          <div class="container" >
            <div class="row" >
        <form method="post" action="assets/mail/contact_me.php"  id="contactfrm" role="form" >
          <div class="col-sm-4" >
            <div class="form-group" >
              <!--<label for="name" style="font-family: 'Lato', sans-serif;">Name</label>-->
              <input type="text" class="form-control" name="name" id="name" placeholder="Enter name" title="Please enter your name (at least 2 characters)" required>
            </div>
            <div class="form-group">
              <!--<label for="email" style="font-family: 'Lato', sans-serif;">Email</label>-->
              <input type="text" class="form-control" name="company" id="company" placeholder="Enter Company Name"   title="Please enter a valid company name" required>
             
            </div>
            <div class="form-group">
              <!--<label for="email" style="font-family: 'Lato', sans-serif;">Email</label>-->
              <input type="email" class="form-control" name="email" id="email" placeholder="Enter email"   title="Please enter a valid email address" required>
             
            </div>
            <div class="form-group">
              <!--<label for="comments" style="font-family: 'Lato', sans-serif;">Comments</label>-->
              <textarea name="comments" class="form-control" id="comments" cols="3" rows="5"  placeholder="Enter your message…" title="Please enter your message (at least 10 characters)" required></textarea><br>
                <div class="col-lg-12 text-center">
                    <div id="success" class="fontBody" style="olor: #E00122"></div>
                   <br/>
               <input type="submit" value="Submit Message" class="btn btn-danger-o-style2 btn-sm fontBody" style="opacity: 1; width: auto; ">
                     </div>
            </div>
            
          </div>
         
           
        </form>
            <div class="row">
              <div class="text-center">
                
                    
                  <p class="fontBody" style=" padding-top: 40px; padding-left:10px;padding-right:10px;"><i>For general inquires, email us at: <i style="color: #E00122"><a href="mailto:info@hyperloopuc.com">info@hyperloopuc.com</a></i></i> 
                  <br/>
                  <i>For press inquires, contact us at: <i style="color: #E00122"><a href="mailto:press@hyperloopuc.com">press@hyperloopuc.com</a></i></i>
                  <br/>
              <br/>
                <i>For more information about sponsorships, visit our <i style="color: #e00122;"><a href="sponsors.html">sponsors page</a></i> to learn more</i>
                   <br/>
              <br/>
              <br/>
              <br/>
              <br/>
                  Hyperloop UC
                <br/>
                  523 Rhodes Hall
                <br/>
                  University of Cincinnati
                <br/>
                  Cincinnati, OH 45220
                    </p>
                
              </div>
            </div>
              </div>
            </div>
          </div>

      </section>

      <!-- Footer-->
      <footer class="ct-footer" >
        
          <div class="container" id="footerContainer">
            
       
         </div>
      </footer>
    
    <!-- JavaScripts-->
    <script src="assets/js/sella.min.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/form/js/contact-form.js"></script>
    <!--<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?"></script>
    <script>
      var map, bounds, marker, mapStyle;
      var mapSelector = $(".ct-js-googleMap");
      var marker_address = mapSelector.attr("data-address");
      var draggable = true;
      if (device_width <= 767){
        draggable = false;
      }
      mapStyle = [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#425a68"},{"visibility":"on"}]}]
      map = new google.maps.Map(mapSelector[0], {
        center: new google.maps.LatLng(0,0),
        mapTypeId: google.maps.MapTypeId.ROADMAP, //MapTypeId.ROADMAP, MapTypeId.SATELLITE, MapTypeId.HYBRID, MapTypeId.TERRAIN
        styles: mapStyle,
        scrollwheel: false,
        draggable: true,
        zoom: 15
      });
      bounds = new google.maps.LatLngBounds();
      var geocoder = new google.maps.Geocoder();
      geocoder.geocode({'address': marker_address}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
          marker = new google.maps.Marker({
            position : new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
            map : map,
            icon: "../assets/images/content/marker.png"
          });
      
          bounds.extend(marker.position);
          map.setCenter(results[0].geometry.location);
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      });
	  
    </script>-->
    <script>
    var s = getParameterByName('s');
        if(s=="sent"){
            $("#success").html("Your message has been sent successfully.");
        }
    function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
	$(function(){
      $("#footerContainer").load("footer.html"); 
      });
	  $(function(){
		$("#header").load("header.html");
	  });
	</script>
  </body>
</html>