BMW survey bar

by Vishnuprasad ps

HTML

<table width="100%">


<tr>
  <td>
    <div class="survey-bar">
      <div class="sb-col">
        <h3>Help make this site better!</h3>
        <p>Estimated time to complete is about 5 min.</p>
      </div>
      <div class="sb-col">
        <a href="#" class="btn-blue">Take the Survey</a>
      </div>
    </div>
  </td>
</tr>


</table>

CSS

.survey-bar {
  background: #F6F6F6;
  padding: 16px;
  width: 100%;
  float: left;
}

.survey-bar .sb-col {
  float: left;
  width: 50%;
  text-align: center;
}

.survey-bar .sb-col h3 {
  font-size: 20px;
  color: #000;
  margin: 0 0 10px;
  font-weight: normal;
}

.survey-bar .sb-col p {
  font-size: 12px;
  color: #4D4D4D;
  margin: 0 0 10px;
}

.survey-bar .sb-col .btn-blue {
  min-width: 290px;
}





.btn-blue {
  height: 50px;
  color: #FFF;
  font-size: 1rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #1C69D4;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  appearance: none;
  outline: 0;
  cursor: pointer;
  font-weight: bold;
}

.btn-blue:hover {
  background-image: linear-gradient(to bottom, #1c69d3, #2b87ff);
  color: #FFF;
}