360Bot Navbar

by Kirubel Girma

HTML

<div class="topnav">
  <div class="brand_icon">
    <div class="navttl">360&#176;BOT.</div>
    <div class="navttl2">Powered by Kirusoft Dev.</div>
  </div>

  <div class="navb">
    <input type="text">
    <div class="btnx">SEARCH</div>
    <div class="btnx">LIBRARY</div>
    <div class="uservar">
      <img alt="" class="ximg" src="https://avatars3.githubusercontent.com/u/8961475?v=3&u=c78f57cc515cb0df58fcae558b7c71702d9d235d&s=400">
      <div class="xtxt">
        <span class="xname">Kirubel Girma</span>
        <span class="xtitle">Courtland Partners</span>
      </div>
    </div>
  </div>
  
</div>

<div class="lfpanel">
    <div class="uservar">
      <img alt="" class="ximg" src="https://avatars3.githubusercontent.com/u/8961475?v=3&u=c78f57cc515cb0df58fcae558b7c71702d9d235d&s=400">
      <div class="xtxt">
        <span class="xname">Kirubel Girma</span>
        <span class="xtitle">Courtland Partners</span>
      </div>
    </div>
	</div>

CSS

* {
  font-family: arial;
  margin: 0em;
}

body{
    height: 100%;
    width: 100%;
    position: fixed;
  }

.topnav {
  position:relative;
  height: 4em;
  background: white;
  width: 100%;
  box-shadow: 0em -0.1em 0.5em black;
}

.navttl {
  padding: .9em .9em .2em .9em;
  cursor: pointer;
  color: #7f94a1;
}

.navttl2 {
  padding-left: 1.3em;
  font-size: .7em;
  color: #7f94a1;
}

.navttl:hover {
  color: #738088;
}

.brand_icon {
  float: left;
}

.navb {
  color: #7f94a1;
  cursor: pointer;
  float: right;
  margin: 1.7em 1em 1.7em 1em;
  font-size: .8em;
}

.btnx {
  padding: 0em .5em 0em .5em;
  display: inline-block;
}

.btnx:hover {
  color: #738088;
  padding: 0em .5em 0em .5em;
  display: inline-block;
  font-weight: bold;
}

.lfpanel{
  height: 100%;
  width: 23em;
  background: #f1f1f1;
}

.ximg{
  border: .2em solid white;
  border-radius: 50%;
  height:3em;
  float:left;
}

.xname{
  font-size:.8em;
}

.xtitle{
  font-size:.67em;
  display:block;
  padding-bottom:.2em;
}

.xtxt{
  float:left;
  padding-left:.5em;
  padding-top:.2em;
  display: inline-block;
}
.uservar{
   margin-top: -0.8em;
   float: right;
   color: #497273;
}