<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
  box-sizing: border-box;
}
a {
  text-decoration: none;
  font-size: 18px;
  color: black;
}

/* Create three equal columns that floats next to each other */
.columnh1 {
  float: left;
  width: 20%;
  padding: 2px;
  text-align: center;
}
.columnh2 {
  float: left;
  width: 50%;
  padding: 2px;
  text-align: center;
}
.columnh3 {
  float: left;
  width: 30%;
  padding: 2px;
  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) {
  .columnh1 {
    width: 100%;
  }
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .columnh2 {
    width: 100%;
    padding: 0px;
  }
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .columnh3 {
    width: 100%;
    padding: 1px;
  }
}
</style>
</head>
<body>
<div class="row" style="background-color:#73AD21;">
  <div class="columnh1" >
    <img src="images/ken.PNG" style="height: 95px; width: 95px; border-radius: 50px; padding-top: 5px;">
  </div>
  <div class="columnh2">
    <h1>E-CITES<sup style="font-size: 16px;">TM</sup></h1>
    <font>Responsive.Inovative.Creative</font>
  </div>
  <div class="columnh3" >
    <div style="margin: 24px 0;">
    <a href="#"><i class="fa fa-dribbble"></i></a> 
    <a href="#"><i class="fa fa-twitter"></i></a>  
    <a href="#"><i class="fa fa-linkedin"></i></a>  
    <a href="#"><i class="fa fa-facebook"></i></a> 
  </div>
  </div>
</div>

</body>
</html>
