headerimage

by kireeti123

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <img src="https://medialib.aafp.org/content/dam/AAFP/images/logos_internal/[email protected]" class="span10 img-responsive logo vcenter" alt="AAFP LMS" />
  <a href="#" class="span2 vcenter lnkbtn">
    Logout
  </a>
</div>

CSS

.logo {
  height: 62px;
  width: 140px;
  vertical-align: middle;
  margin-top: 5px;
  margin-bottom: 5px;
}

.vcenter{
  vertical-align:middle;
}

.span2 {
  padding: 0 0 0 0;
  width: 55px;
}

.lnkbtn {
  background-color: #cf7f00;
  border-color: #cf7f00;
  text-align: center;
  border-radius: 3px;
  padding: 2px;
  text-decoration:none;
  float: right;
}

.lnkbtn:hover {
  color: #fff;
}

body {
  background: #f6f6f6;
}

.border-me {
  border: 1px solid grey;
}

body.main-layout {
  min-width: 100%;
  position: relative;
}

.vcenter {
  display: inline-block;
  vertical-align: middle;
  float: none;
}

.vright {
  display: inline-block;
  vertical-align: middle;
  text-align: right;
  float: none;
}

.bg-dark {
  color: #eee;
}


/************THIS IS HEADER SECTION**************/

header {
  border-top: 4px solid #cf7f00;
}

.topnavigation {
  background-color: #444;
}

.topnavigation .nav-pills li a {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  margin: 0 0 0 0;
  padding-top: 4px;
  padding-bottom: 4px;
  text-decoration: none;
  text-shadow: none;
}

.topnavigation ul.nav a {
  color: #fff;
  font: 400 14px/20px Arial, sans-serif;
}

.topnavigation ul.nav li {
  border-right: 1px solid #666;
  margin: 0;
}

.topnavigation ul.nav li:last-child {
  border-right: 0px solid #666;
}

.topnavigation ul.nav a:hover {
  background-color: #cf7f00 !important;
  color: #4f758b
}

.headerlogo {
  float: left;
  text-align: center;
}

#search {
  display: inline;
}

#btn-search {
  border: 2px solid;
  padding: 5px 5px 5px 5px;
  border-color: #cf7f00;
  border-top-right-radius: 0.2em;
  border-bottom-right-radius: 0.2em;
}

.span-override-padding {
  padding: 0 0 0 0;
}

#search {
  background-image: url(https://img.aafp.net/spritesheet-icons-retina46.png);
  background-position: -203px -145px;
  background-size: 229px 219px;
  width: 25px;
  height: 25px;
}


/*.btn-primary {
  background-color: #cf7f00;
  color: #fff;
  text-decoration:...