Contact us

In this example below you will see how to do a Contact us with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Miraes, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Miraes ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Contact us</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>


  <div class="top-nav navbar-static-top collapse navbar-collapse bs-example-navbar-collapse-1">
    <div class="container">
      <!--links-->
      <ul class="nav navbar-nav pull-left">
        <li><a href="#">CITY UNIVERSITY OF NEW YORK | GRADUATE STUDIES    </a></li>
      </ul>
      <ul class="facebook">
        <li><a href="#"><i class="fa fa-facebook-square fa-3x fb-icon"></i></a></li>
      </ul>

      <!--<form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>-->
    </div>
  </div>

  <div class="banner">
    <div class="container">

      <!--<div class="banner-logo">
        <img class="logo img-responsive" src="https://goo.gl/VND31g">
      </div>-->

      <div class="img">
        <div class="container">
          <p class="img-let">C U</p>
          <p class="img-let">N Y</p>


        </div>
      </div>

      <div class="collapse navbar-collapse bs-example-navbar-collapse-1 sub-menu">
        <ul="sub-menu-inside">
          <li><a href="#">Prospective Students</li>
        <li><a href="#">Current Students</a></li>
          <li><a href="#"><span class="apply">APPLY</span></a></li>
          </ul>
      </div>

    </div>
  </div>

  <div class="main-nav">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><i class="fa fa-spinner fa-spin-hover"></i> HPCS</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav" id="links">
            <li><a href="https://www.google.com">Home</a></li>
            <li><a href="#">Mission Statement </a></li>
            <li>
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Admissions<span class="sr-only">(current)</span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Requirements for Prospective Students</a></li>
                <li><a href="#">Apply Now</a></li>
                <li><a href="#">FAQ</a></li>
              </ul>
            </li>
            <li><a href="#">Faculty</a></li>
            <li><a href="#">Weekly Colloquium</a></li>
            <li><a href="#">Curriculum</a></li>
            <li class="active"><a href="#" role="button" aria-haspop="true" aria-expanded="false">Contact Us</a></li>
          </ul>

        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
  </div>

  <!-- same up / edit main-nav -->


  <div class="sub-jumbo sub-jumbo-intro">
    <div class="container">
      <h2>Contact Us</h2>
      
      <div class="contact">
        <div class="row">
          <div class="col-md-6">
            <h3><a href="#">Tracy Revenson (Health Psychology)</a></h3>
            <img src="https://goo.gl/dk7o9Y" class="img-rounded tracy">
          </div>
          <div class="col-md-6">
            <h3><a href="#">Doug Mennin (Clincal Science)</a></h3>
          <img src="https://goo.gl/NYklun" class="img-rounded doug">
          </div>
        </div>
      
       
        <p style="text-align: center; padding-top: 8%"><a href="#">The Graduate Center, CUNY</a><br></br>
          365 Fifth Avenue<br></br>
          New York, NY 10016 USA<br></br>
          1-877-428-6942<br></br>
          (212) 817-7000</p>
      
      </div>
     


    </div>
  </div>

  <div class="footer">
    <div class="container">
      <div class="col-md-4">
        <img class="foot-img img-responsive" src="https://goo.gl/tmJyXG">
        <p>The Graduate Center, CUNY </p>
        <p>365 Fifth Avenue</p>
        <p>New York, NY 10016 USA</p>
        <p> 1-877-428-6942 | (212) 817-7000</p>
      </div>
    </div>
  </div>

</body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Miraes/contact-us-dGLQrm */
/**Media queries **/

/** iphone 6 **/
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
    .container {
      margin: auto;
      max-width: 880px;
    }
}


/** iphone 5 **/
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
         .container {
      margin: auto;
      max-width: 880px;
           
           .sub-menu {
             margin: auto;
             max-width: 800px;
           }
    }
    
}
/************** MEDIA QUERIES ****************/
a {
  text-decoration: none !important;
}
/* top navbar */

.top-nav {
  opacity: .65;
  background-color: #000;
  width: 100%;
  position: absolute;
}

.top-nav li {
  display: inline;
  font-size: 1em;
}

.top-nav a:link {
  color: #8080ff;
  transition: all 0.3s ease 0s;
  text-decoration: none;
}

.top-nav a:visited {
  text-decoration: none;
}

.top-nav .nav a:hover {
  color: #0f0f0a;
  font-weight: bold;
}

.top-nav .facebook a:hover {
  color: #0000ff;
}

.fb-icon {
  position: absolute;
  top: 12%;
  left: 70%;
}


/* navbar */

.navbar-default {
  background-color: #d9d9d9;
  border-top: 5px solid #00004d;
  width: 100%;
}


/* title */

.navbar-default .navbar-brand {
  color: #000;
  font-size: 1em;
  transition: all 0.3s ease 0s;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #00004d;
  font-weight: bold;
}


/* link */

.navbar .navbar-nav {
  display: inline-block;
  float: none;
}

.navbar .navbar-collapse {
  text-align: center;
}

.navbar-default .navbar-nav > .dropdown ul {
  background-color: #d9d9d9;
  fonts-family: "Tahoma", Geneva, sans-serif;
  font-size: 1em;
  letter-spacing: .10em;
}

.navbar-default .navbar-nav > li > a {
  color: #000;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 1em;
  letter-spacing: .10em;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #0066ff;
  transition: all 0.3s ease 0s;
}

.navbar-default .navbar-nav > li > a:active {
  color: #8080ff;
}

.navbar-default .navbar-nav > li > a:visited {
  text-decoration: none;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #fff;
  background-color: #00004d;
}

.navbar-default .navbar-nav > .active > a:visited {
  text-decoration: none;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #000066;
  background-color: #D5D5D5;
}


/*banner*/

.banner {
  background-image: radial-gradient(rgba(0, 0, 0, 0.3) 5%, rgba(0, 0, 0, 0.3) 16%), radial-gradient(rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.5) 16%), url('https://goo.gl/U3DBMs');
  background-size: 5px 5px, 6px 10px, cover;
  background-repeat: repeat, repeat, no-repeat;
  height: 300px;
}


.sub-menu {
  position: absolute;
  top: 20%;
  left: 40%;
  font-color: #fff;
  font-family: "Courier New", Courier, monospace;
  padding: 50px 0px 50px 0px;
}

.sub-menu li {
  display: inline;
  padding: 8px 15px 8px;
  font-size: 18px;
  font-color: #fff;
}

.sub-menu a:link,
.sub-menu a:visited {
  text-decoration: none;
  color: #fff;
}

.sub-menu a:hover,
.sub-menu a:focus {
  color: #99c2ff;
  transition: all 0.3s ease 0s;
}

.apply {
  border: 2px solid #000066;
  border-radius: 5px;
  padding: 8px;
}

.logo {
  -moz-transform: scale(0.26);
  -webkit-transform: scale(0.26);
  transform: scale(0.26);
  position: relative;
}

.img {
  position: absolute;
  top: 10%;
}

.img-let {
  color: #fff;
  font-size: 4em;
}


/* body*/

body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}


/*main header*/

.main-jumbo {
  background-color: #fff;
  height: 800px;
  background-attachment: fixed;
}


/*video*/

.video {
  width: 500px;
  height: 400px;
}


/*news */

.news {
  background-color: #e6ecff;
  height: 1000px;
}

.news h2 {
  font-size: 50px;
  color: #660066;
  border-bottom-style: dotted;
  border-color: gray;
  border-width: 2px;
}

.article {
  padding-top: 8px;
  padding-bottom: 25px;
}


/* footer */

.footer {
  background-color: #ffe6f;
  padding-top: 2%;
  padding-bottom: 3%;
}

.footer p {
  font-size: .9em;
  color: #000066;
  font-family: "Tahoma",Segoe,sans-serif;
}
.foot-img {
  float: left;
  padding: 0 2% 2% 0;
}


/********** sub pages ************/

/**** news ***/
.pg-bk {
  height: 2000px;
  background-color: #e6ecff;
  border-left-style: dotted;
  border-color: #000066;
  border-width: 2px;
}

.sub-pg-news {
  padding-left: 15%;
  padding-top: 3%;
}

.sub-pg-news h2 {
  color: #660066;
  font-size: 50px;
  border-bottom-style: dotted;
  border-color: gray;
  border-width: 2px;
}

.sub-pg-news h4 {
  color: #000066;
}

/**** mission ***/
.sub-jumbo-intro {
  background-color: #e6eeff;
  border: 2px solid #e6eeff;
  border-radius: 5px;
  padding: 8px;
  
}
.sub-jumbo-intro h2 {
  text-align: center;
  font-weight: bold;
  font-family: "Verdana", Geneva, sans-serif;
  
}
.sub-jumbo-intro p {
  font-size: 1.2em;
  padding-top: 15px;
}

.sub-jumbo-intro .mis-img {
  float:right;
  padding: 5px 25px 8px 25px;
}


.sub-jumbo-intro-bot h4 {
  margin-top: 50px;
  text-indent: 20px;
  font-weight: bold;
  color: #000066;
}
.sub-jumbo-intro-bot h5 {
  text-indent: 20px;
  font-size: 1.2em;
  border-bottom-style: dotted;
  border-color: grey;
  border-width: 1px;
}

.goals {
  padding-top: 2%;
  font-size: 1.2em;
  padding: 8px;
  height: 1200px;
}
.goals p {
  padding-top: 10px;
  padding-bottom: 20px;
}

.goal-text {
  color: #e68a00;
  font-weight: bold;
}

/***** FAQ ****/
.sub-jumbo-faq .question {
  padding: .4em;
}

.sub-jumbo-faq h3 {
  color: #800080;
  text-weight: bold;
  padding-top: .5em;
}

.sub-jumbo-faq h4 {
  color: #000;
}

.sub-jumbo-faq p {
  display: none;
}
    

/*********** Faculty ******/

.first-row {
  font-size: 2em;
   color:   #6b00b3;
  padding-bottom: 3%;
}

.sub-jumbo .row {
  padding: 1em;
}

/******** Current Students *******/

.sub-jumbo-cstudents .row {
  text-align: center;
  padding: 2em;
}

.student-info h4  {
  text-align: center;
}
.student-info p {
  text-align: left;
  display: none;
}

/******** Curriculum *****/
.sub-jumbo-cur h3 {
  color:  #660066;
}

.sub-jumbo .row-section {
  font-style: italic;
  font-weight: bold;
  font-size: 1.1em;
  padding-bottom: .8em;
}
 /** cur chart **/

.cur-chart {
  padding: 0;
}

.cur-chart h3 {
  font-weight: bold;
  text-align: center;
}
.cur-chart p {
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  padding: none;
  color: #660066;
}

.cur-chart .block {
  border-style: solid; 
 
}

.cur-chart .top {
  font-weight: bold;
  color:  #006bb3;
}

.cur-chart .block-top {
  border-style: solid;
  border-top-style: dotted;
  
}

.chart-footnote {
  background-color:  #e6ffff;
}
.chart-footnote h4 {
  text-weight: bold;
  padding: 2%;
}

/******** Colloquium *******/
.colloq {
  height: 600px;
}
.colloq h3 {
  padding-top: 5%;
  font-weight: bold;
  color:  #000066;
}

.colloq p {
  text-indent: 2em;
}


/**** contact us *****/
.contact h3{
  text-align: center;
}
.contact {
  height: 1300px;
}
.doug {
  display: block;
   height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
    margin-left: auto;
}

.tracy {
   
}

/*Downloaded from https://www.codeseek.co/Miraes/contact-us-dGLQrm */
$(document).ready(function() {
  $(".navbar-brand").mouseover(function () {
  $(".fa-spinner").addClass("fa-spin");
   setTimeout(function () {
       $(".fa-spinner").removeClass("fa-spin")
    }, 2000);  
});
  
  
  $(".question").click(function () {
    $(this).children('p').slideToggle("slow"); 
  });
  
  
 $(".student-info").click(function () {
   $(this).children('p').slideToggle("slow");
   
   
 });
  
  
  
  
  
  
  
  
  
  
  
  
  
  
});

Comments