Dashboard 360bot

Clean looking dashboard frontend

by Kirubel Girma

HTML

<script src="https://use.fontawesome.com/76425b88a5.js"></script>
<div class="shadow" id="xtopnav">
  <div class="bret" id="brndmain" onclick="tgmnu()">My <strong>360bot</strong></div>
</div>

<div class="shadow xsidenav" id="xsidenav">
  <div class="icons" id="ic_home"><i class="fa fa-home" aria-hidden="true"></i> <span class="icontxts" id="hme">Home</span></div>
  <div class="icons" id="ic_lib"><i class="fa fa-book" aria-hidden="true"></i> <span class="icontxts" id="lib">Library</span></div>
  <div class="icons" id="ic_home"><i class="fa fa-plus" aria-hidden="true"></i> <span class="icontxts" id="cre">Create</span></div>
  <div class="icons" id="ic_lib"><i class="fa fa-money" aria-hidden="true"></i> <span class="icontxts" id="sub">Subscription</span></div>
</div>`
<script>function tgmnu() {
var xmnu = document.getElementById('xsidenav');
xmnu.classlist.toggle('xhide');
}</script>

CSS

* {
  margin: 0em;
  font-family: Open Sans, Arial, Helvetica, sans-serif;
}
.xhide{
  display:none;
  width: 6em;
}
.fa {
  padding-right: 1em;
}

.brnd {
  cursor: pointer;
  float: left;
  height: 1.3em;
  width: 5.1em;
  margin: 0.6em 0.9em;
}

.bret{
  cursor: pointer;
  float: left;
  height: 1.3em;
  width: 5.1em;
  margin: 0.6em 0.9em;
}

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

.shadow {
  box-shadow: 0 2px 2px rgba(0, 0, 0, .05), 0 1px 0 rgba(0, 0, 0, .05);
}

#xtopnav {
  width: 100%;
  height: 3em;
}

.xsidenav {
  padding-top:2em;
  width: 15em;
  height: 100%;
  float: left;
  background: #23272d;
}

.icons {
  color: rgba(255, 255, 255, 0.29);
  padding: 0.5em 0.9em;
}

.icons:hover {
  cursor: pointer;
  color: white;
  box-shadow: inset 1em 0em 0em -0.7em cornflowerblue;
  -webkit-animation: jump 0.145s ease 0s 1 normal;
  animation: jump 0.145s ease 0s 1 normal;
}

.shadow:after {
  height: 2em;
  width: 3em;
  background: red;
}

@-webkit-keyframes jump {
  0% {
    opacity: .3;
  }
  100% {
    opacity: 1;
  }
}

@keyframes jump {
  0% {
    opacity: .3;
  }
  100% {
    opacity: 1;
  }
}