contact page

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>contact page</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

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

  
</head>

<body>

  <div class="page6">
  
  <div class="header">
    <p><a href="https://codepen.io/dusanrandjelovic/full/mpMXjB/" target="_blank">Dušan Ranđelović |</a></p>
    <ul>
      <li><a href="https://codepen.io/dusanrandjelovic/full/XVevGq/" target="_blank">How I Started</a></li>
      <li><a href="https://codepen.io/dusanrandjelovic/full/PErdNZ/" target="_blank">CodePen Websites</a></li>
      <li><a href="https://codepen.io/dusanrandjelovic/full/aEgXXB/" target="_blank">Atom Websites and Logos</a></li>
      <li><a href="https://codepen.io/dusanrandjelovic/full/WdVzgb/" target="_blank">WordPress Websites</a></li>
      <li><a href="#" style="text-transform: uppercase;">Contact</a></li>
    </ul>
  </div>
  
  <img src="https://izradavebsajtova.files.wordpress.com/2017/07/ja.jpg?w=135&h=167" class="slika" />
  
  <div class="srediste">
  <p>Author: Dušan Ranđelović <br />Diploma: Master Andragog</p>
  </div>
  
  <div class="col">
    <div class="col-sm-4">
      <div class="kvadrat">
        <p>Email: <br />dusanrandjelovic92@gmail.com</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="kvadrat">
        <p>Phone: <br />065-888-11-96</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="kvadrat">
        <p>City: <br />Kruševac</p>
      </div>
    </div>
  </div>
  
  <div class="footer">
    <div class="levo">
    <p>&copy; Dusan Randjelovic |</p>
      <p class="te">dusanrandjelovic92@gmail.com</p>
    </div>
    <div class="desno">
      <p>My LinkedIn profile:</p>
      <a href="https://www.linkedin.com/in/dusan-randjelovic-98a170134/" target="_blank"><img src="https://cdn4.iconfinder.com/data/icons/bubble-gradient-social-media-1/200/linkedin-128.png" /></a>
    </div>
  </div>
  
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/dusanrandjelovic/contact-page-goVBPm */
* {
  margin: 0;
  padding: 0;
}
body {
  color: black;
  background-color: Snow;
  font-family: Times;
}
.header {
  height: 70px;
  width: 100%;
  background-color: OrangeRed;
  color: Snow;
  position: fixed;
  z-index: 1000;
  opacity: 0.9;
  top: -8px;
}
.header p {
  padding-left: 50px;
  padding-top: 20px;
  float: left;
  font-size: 150%;
}
ul {
  list-style-type: none;
  float: right;
}
li {
  display: inline-block;
  padding-right: 50px;
  padding-top: 24px;
  font-size: 130%;
  letter-spacing: 0.02em;
}
a {
  color: Snow;
}
a:hover {
  color: SaddleBrown;
  text-decoration: none;
}
.slika {
  margin: auto;
  display: block;
  margin-top: 130px;
}
.srediste {
  width: 17%;
  margin-left: auto;
  margin-right: auto;
  background-color: Snow;
}
.srediste p {
  margin-top: 60px; 
  border: 1px solid OrangeRed;
  border-bottom: 15px solid OrangeRed;
  padding: 17px;
  color: OrangeRed;
  font-size: 16px;
}
.col {
  margin: 40px 100px 40px 100px;
}
.kvadrat {
  width: 61%;
  margin-left: auto;
  margin-right: auto;
  background-color: Snow;
  margin-bottom: 130px;
}
.kvadrat p { 
  border: 1px solid OrangeRed;
  border-bottom: 15px solid OrangeRed;
  padding: 17px;
  color: OrangeRed;
  font-size: 15px;
}
.footer {
  clear: both;
  height: 110px;
  width: 100%;
  background-color: OrangeRed;
}
.levo {
  float: left;
  padding-left: 80px;
  padding-top: 30px;
}
.levo p {
  float: left;
  color: Snow;
  font-size: 140%;
}
.te {
  padding-left: 300px;
}
.desno {
  float: right;
}
.desno a img {
  height: 50px;
  padding-left: 44px;
}
.desno p {
  color: Snow;
  padding-top: 17px;
  padding-right: 70px;
  font-size: 16px;
}

Comments