Header bar

header-bar.markdown

Header bar

Just a little learning project for myself, but wanted to create a application header bar template in order to standardized our custom tools.

A Pen by Mike on CodePen.

License.

index.html

<div class="navbar">
  <div class="appname">
    <a href="" class="home">Application name</a>
  </div>
  <div class="menu">
    <a href="help.html" class="menuitem" target="_blank"><span title="help"><i class="fa fa-question"></i></span></a>
    <a href="mailto:[email protected]?subject=Feedback/bug report%20for%20{Appname}" class="menuitem" title="Feedback"><span title="feedback/bug report"><i class="fa fa-envelope"></i></span></a>
    <a href="#" class="menuitem" title="change log"><i class="fa fa-book"></i></span></a>
  </div>

</div>
<div class="appcontent">
  <div class="search">
    <input type="text" class="searchTerm" placeholder="Search">
    <button type="submit" class="searchButton">
      <i class="fa fa-search"></i>
    </button>
  </div>
  </br>
  <!--/br>
  <div class="search">
    <input type="text" class="searchTerm" placeholder="Search">
    <button type="submit" class="searchButton">
      <i class="fa fa-search"></i>
    </button>
  </div-->
  </br>
  <h1>Chocolate gingerbread gummies soufflé wafer tiramisu</h1>
  <p>Sweet jelly beans candy canes gummies chocolate bar macaroon sweet. caramels halvah chocolate apple pie marshmallow danish dragée caramels candy canes. candy chupa chups bonbon tiramisu. sugar macaroon marzipan powder toffee chocolate bar soufflé
    cupcake croissant tart bear claw. candy cake candy chocolate bar cake cotton <a href="">candy croissant powder</a>. pudding dessert halvah soufflé dragée tiramisu snaps bear claw gummi bears brownie.</p>
  <p><img src="https://media.giphy.com/media/OqprHEhrBpmdq/giphy.gif"></p>
  <h2>Marzipan topping cake...gummi bears!?</h2>
  <p>Tart candy wafer tiramisu fruitcake pudding sesame apple pie cookie lollipop. croissant candy pudding chocolate bar cotton candy donut brownie tiramisu. cookie pudding dragée caramels sugar. cupcake.</p>
</div>

style.css

/* Header bar */

.navbar {
  width: 100%;
  background: #AB0336;
  overflow: auto;
}

.appname {
  float: left;
  margin-left: 25px;
  font-family: open sans, helvetica, arial;
  font-size: 1em;
  line-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu {
  line-height:50px;
  float: right;
}

.menuitem, .home {
  font-family: open sans, helvetica, arial;
  color: white;
  text-decoration: none;
  font-size: 14pt;
  font-size: 1em;
  margin-right: 15px;
}

.home:hover, .help:hover, .profile:hover, .feedback:hover {
  color: white;
}

.search {
  position: ablsolute;
  max-width: 300px;
  min-width: 100px;
}

.searchTerm {
  float: left;
  width: 100%;
  border: 1px solid gray;
  padding: 5px;
  height: 20px;
  border-radius: 3px;
  color: black;
  font-size: 0.9em;
}

.searchTerm:focus {
  color: gray;
}

.searchButton {
  position: absolute;
  float: right;
  margin-left: 10px;
  width: 60px;
  height: 32px;
  border: 1px solid #2CE963;
  background: #2CE963;
  text-align: center;
  color: white;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.9em;
}

.tooltip:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

/* Content */

body {
  font-family: "Open Sans", "helvetica", sans-serif;
  color: #666666;
}

.appcontent {
  font-weight: 300;
  margin: 25px;
  font-size: 15px;
  line-height: 1.5;
  display: block;
  max-width: 900px;
  position: absolulte;
}

h1 {
  font-size: 2em;
  color: #999999;
  font-weight: lighter;
  padding-top: 20px;
}

h2 {
  font-size: 1.5em;
  font-weight: lighter;
  color: #999999;
  padding-top: 5px;
}

blockquote {
  font-style: italic;
  color: #999999;
  font-weight: lighter;
  font-size: 1.3em;
}

img {
  margin: auto;
  display: block;
  padding: 10px;
}

a {
  color: gray;
  font-weight: normal;
}

li {
  line-height: 1.5;
}

.headerlink {
  font-size: 12pt;
  color: #cccccc;
  font-weight: lighter;
  text-decoration: none;
  padding-left: 5px;
}

a:hover {
  color: #992135;
}