final_team.php

<?php /* Template Name: TeamV2 */ ?>

<!DOCTYPE html>
<html>
<head>
    <title>Our Team</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.column {
  float: left;
  width: 50%;
  margin-bottom: 16px;
  padding: 0 8px;
}

@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 0 16px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #3C5A99;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: #555;
}
</style>
</head>
<body>

<h2 align="center">Our Team</h2>
<br>

<div class="row">
  <div class="column">
    <div class="card">
      <img src="https://houwenfrontier.onlinewebshop.net/wp-content/uploads/2018/11/Jack.jpg" alt="Jack" style="width:100%">
      <div class="container" align="center">
        <h2>Jack Reacher</h2>
        <p class="title">Founder and Administrator</p>
        <p>Jack is a security professional, an ethical hacker.He loves to help people,teach people and learn something new everyday.</p>
        <p>Email:revailace@gmail.com</p>
        <p><a href="https://www.facebook.com/jack.richer.1865904" class="button">Facebook</a></p>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <img src="https://houwenfrontier.onlinewebshop.net/wp-content/uploads/2018/11/Mahdi.jpg" alt="Mahdi" style="width:100%">
      <div class="container" align="center">
        <h2>AL Mahdi</h2>
        <p class="title">Administrator</p>
        <p>A learner.Always try to learn something.Currently studying Computer Technology.</p>
        <p>Email:virtualmahdi@gmail.com</p>
        <p><a href="https://www.facebook.com/M4hd1BD" class="button">Facebook</a></p>
      </div>
    </div>
  </div>
</div>
<div class ="row">
  <div class="column">
    <div class="card">
      <img src="https://houwenfrontier.onlinewebshop.net/wp-content/uploads/2018/11/Nafiul.jpg" alt="Nafiul" style="width:100%">
      <div class="container" align="center">
        <h2>Md Nafiul Islam</h2>
        <p class="title">Moderator</p>
        <p>Intentionally left blank.</p>
        <p>Email:nillyhan.xt@gmail.com</p>
        <p><a href="https://www.facebook.com/WentOffline" class="button">Facebook</a></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="https://houwenfrontier.onlinewebshop.net/wp-content/uploads/2018/11/Johnny.jpg" alt="Johnny" style="width:100%">
      <div class="container" align="center">
        <h2>Johnny Snow Agoeson</h2>
        <p class="title">Moderator</p>
        <p>A hacker, a teacher.Always motivate people using his stories.Stay connected with him.</p>
        <p>Email:Agoe.halo@yahoo.com</p>
        <p><a href="https://www.facebook.com/john.adjei.186" class="button">Facebook</a></p>
      </div>
    </div>
  </div>
</div>
<div class ="row">
  <div class="column">
    <div class="card">
      <img src="https://houwenfrontier.onlinewebshop.net/wp-content/uploads/2018/11/Hamza.jpg" alt="Hamza" style="width:100%">
      <div class="container" align="center">
        <h2>Hamza Maqsood</h2>
        <p class="title">Moderator</p>
        <p>He's another passionate learner and teacher but not mysterious like the others here. He can guide you on some topics like Android, Hacking, Troubleshooting and some other stuff.</p>
        <p>Email:hamzamaqsood877@gmail.com</p>
        <p><a href="https://www.facebook.com/john.adjei.186" class="button">Facebook</a></p>
      </div>
    </div>
  </div>
</div>
</body>
</html>