Vertour

topbar

by Kirubel Girma

HTML

<div class="topm">
  <div class="imlg">
    <div class="lgo" id="edg15"></div>
  </div>
  <div class="aitms">
    <a href="" class="actionitem">Register</a>
    <a href="" class="actionitem">Login</a>
    <a href="" class="actionitem">Contact Us</a>
  </div>
</div>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  max-width: 96em;
  margin: 0 auto;
  background: white;
}

.imlg {
  position: relative;
  width: 5.7em;
  height: 100%;
  float: left;
}

.lgo:active {
  transform: scale(.97);
}

.aitms {
  height: 100%;
  float: right;
}

.im_lgo {
  height: 3em;
}

.topm {
  height: 3em;
  width: 100%;
  padding-top: 1em;
  background: white;
  /* box-shadow: 0.1em 0.1em 1em #00000017; */
}

.aitms {
  display: table;
  padding: 0em 1em;
}

a.actionitem {
  font-size: small;
  display: table-cell;
  vertical-align: middle;
  text-decoration: none;
}

a.actionitem:active {}

a.actionitem:hover {
  transition: .145s ease-in;
  box-shadow: inset 0em -0.2em #fb4053;
}


/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* Styles */
  a.actionitem {
    padding: 0.3em 0.6em;
  }
  .lgo {
    margin: auto;
    margin-left: .5em;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 7.3em;
    height: 2.4em;
    background-image: url(https://image.ibb.co/e0DZpw/Vertour_00083.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
}


/* Smartphones (landscape) ----------- */

@media only screen and (min-width: 321px) {
  /* Styles */
  .lgo {
    margin: auto;
    margin-left: 1em;
    position: absolute;
    left: 0;
    right: 0;
    top: 15px;
    bottom: 0;
    width: 7.9em;
    height: 3em;
    background-image: url(https://image.ibb.co/e0DZpw/Vertour_00083.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
}


/* Smartphones (portrait) ----------- */

@media only screen and (max-width: 320px) {
  /* Styles */
}


/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Styles */
  a.actionitem {
    padding: 0.3em 1em;
  }
}


/* iPads (landscape) -----------...

JavaScript

document.getElementById('edg15').addEventListener('click', function(e) {

});