header with text box

canvas engagement strategies space

by Jordan Dayton

HTML

<div id="header">
  <div class="header-text-wrapper">
    <img class="icon" src="https://maxcdn.icons8.com/windows8/PNG/26/Gaming/knight-26.png" title="Knight" width="20" />
    <span class="header-text">HOME</span>
  </div>
</div>
<div id="body">
  <div class="body-text-wrapper">
    <div class="body-text">
      <p>Bacon ipsum dolor amet tenderloin tail spare ribs drumstick pork chop. Ball tip brisket meatloaf ham hock. Kielbasa short loin short ribs leberkas brisket. Boudin tri-tip ground round, jowl cow beef ribs pork chop.</p>
      <p>Cow tail pork loin meatloaf. Ham hock pig bresaola shankle doner hamburger. Shank hamburger leberkas drumstick picanha, short loin pork belly doner jerky meatloaf landjaeger biltong tenderloin shankle sirloin.</p>
    </div>
  </div>
  <div>

CSS

/* ///////// HEADER ///////// */

#header {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  height: 60px;
  width: 100%;
  background-color: #58585B;
}

.header-text-wrapper {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 16px;
  text-align: center;
  padding-top: 20px;
}

.icon {
  vertical-align: top;
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.header-text {
  vertical-align: middle;
  color: #fff;
  padding: 5px;
}


/* ///////// BODY ///////// */

#body {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  height: auto;
  width: 100%;
  background-color: #e5e5e6;
}

.body-text-wrapper {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 16px;
  text-align: left;
}

.body-text {
  color: #58585B;
  padding: 6px 20px 6px 20px;
}