<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
</head>
<style type="text/css">
  
  .main-box{
      max-width: 1400px;
      background-color: white;
      
    }
    .box1{
      text-align: center;
      flex-basis: 30%;
    }
    .box2{
      text-align: center;
      color: bleck;
      flex-basis: 70%;
    }

    @media(min-width: 900px){
      .main-box{
        display: flex;
      }
    }
.btn{
  color: white;
  padding: 10px 20px;
  border:none;
  background-color:#73AD21;
  border-radius: 10px 10px 10px 10px;
  margin-bottom: 10px;
}
.flip-card {
  background-color: transparent;
  width: 250px;
  height: 300px;
  perspective: 1000px;
  margin-left: 10px;
  margin-right: 10px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}
</style>
<body>
<br>
<div class="main-box">
  <div class="box1">
    <br>
    <div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="images/whyps.jpg" alt="developer" style="width:100%;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>Ken Whyps</h1> 
      <p>Software engineer</p> 
      <p>We love that guy</p>
    </div>
  </div>
</div>
<br>
    <button class="btn" onclick="location.href = 'index.php?link=portfolio'; return false;">VIEW PORTFOLIO</button><br>
  </div>
  <div class="box2">
    <?php include("aboutdeveloper.html"); ?>
  </div></div>
  <br/>
</body>
</html>