<!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: 40%;
    }
    .box2{
      text-align: center;
      color: bleck;
      flex-basis: 60%;
    }

    @media(min-width: 900px){
      .main-box{
        display: flex;
      }
    }
/* The device with borders */
.smartphone {
  position: relative;
  width: 80%;
  height: 450px;
  margin: auto;
  border: 7px black solid;
  border-top-width: 20px;
  border-bottom-width: 20px;
  border-radius: 25px;
}

/* The horizontal line on the top of the device */
.smartphone:before {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 10px;
}

/* The circle on the bottom of the device */
.smartphone:after {
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50%;
}

/* The screen (or content) of the device */
.smartphone .content {
  width: 100%;
  height: 400px;
  background: white;
}

</style>
<body>
<br>
<div class="main-box">
  <div class="box1">
    <div>
  <div class="smartphone">
  <div class="content">
    <iframe src="//localhost/hardware" style="width:100%;border:none;height:100%" />
  </div>
</div>
</div>
</div>
  <div class="box2">
    <?php include("aboutdeveloper.html"); ?>
  </div></div>
  <br/>
</body>
</html>