<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
.main2{
  min-height: 120px;
}
.main1{
  border-radius: 0px;
text-align: left;
background-color: black;
  min-height: 120px;

}
/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
  text-align: center;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
/* Create two equal columns that floats next to each other */
.columncm1 {
  float: left;
  width: 60%;
  padding:2px;
  text-align: center;
}
.columncm2 {
  float: left;
  width: 40%;
  padding: 2px;
  text-align: center;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .columncm1 {
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  .columncm2 {
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
.copyright{
font-size: 13px;
}
}

</style>
</head>
<body>
<div class="row" style="background-color:black">
  <div class="column">
    <hr width="90%" color="#ccc">
      <div class="main1" style="padding-left: 15px; padding-right:15px ">
  <i class="fa fa-check" style='font-size:20px;color:white;padding: 2px;'></i><font style="color: white; font-size: 18px;">  <font><b>0+</b></font>  Completed projects</font><br><br>
  <i class="fa fa-clock-o" style='font-size:20px;color:white;padding: 2px;'></i><font style="color: white; font-size: 18px;">  <font><b>5+</b></font>  Projects in Progress</font><br><br>
  <i class="fa fa-calendar" style='font-size:20px;color:white;padding: 2px;'></i><font style="color: white; font-size: 18px;"> <font><b>3weeks</b></font> Project Time</font><br>
   </div>
   <hr width="90%" color="#ccc">
  </div>
  <div class="column" >
    <hr width="90%" color="#ccc">
   <div class="main2">
     <div class="row" >
  <div class="columncm1">
    <font style="color: blue;font-weight: bold;">Android App</font><br>
    <font style="color: orange; font-weight: bold;font-size: 20px;">Development</font>
  </div>
  <div class="columncm2">
     <i class="fa fa-android" style="font-size:80px;color:brown;"></i>
  </div>
</div>
     <font style="font-size: 20px; color: white">Hurry!!!Get one now</font>
</div>
<hr width="90%" color="#ccc">
  </div>
  <div class="column">
    <hr width="90%" color="#ccc">
    <div class="main1">
      <nav style="padding-left: 40px; padding-right : 40px; color: white;">
      <br>
      <a href="https://www.facebook.com/Kewnhyps.Muthui" target="_blank"><i class="fa fa-facebook" style="
  color:#3B5998;font-size: 18px;"></i></a><font style="font-size: 16px;"> FACEBOOK</font><br><br>
      <a href="https://twitter.com/Kewnhyps"  target="_blank"><i class="fa fa-twitter" style="
  color:#55ACEE;font-size: 18px;"></i></a><font style="font-size: 16px;">
    TWITTER</font><br><br>
     <a href="https://instagram.com/kewnest" target="_blank"><i class="fa fa-instagram" style="
  color:#3B5998;font-size: 18px;"></i></a><font style="font-size: 16px;">
    INSTAGRAM</font>
  </nav>
</div>
<hr width="90%" color="#ccc">
  </div>
  <div style="text-align: center;margin-bottom: 5px;">
    <a href="tel:070-475-3346" style="text-decoration: none"><i class="fa fa-phone" style='font-size:20px;color:green;padding: 3px;'></i><font style="color: white; font-size: 20px;">Call Now</font></a>
  </div>
</div>
  <br>
</body>
</html>
