Day 169

Working on building a new version of the codingphase logo with CSS.
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

**********

/* header {
  background: #000;
  display: flex;
  padding: 20px;
  justify-content: space-between;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
} */

.logo {
  display: block;
  position: fixed;
  height: 200px;
  background: #fff;
}

#logo-image {
  height: 95%;
}

.menu-toggle {
  padding: 1em;
  position: absolute;
  top: 14em;
  left: 1em;
  cursor: pointer;
}

.hamburger,
.hamburger::before/* ,
.hamburger::after */ {
  content: '';
  display: block;
  background: #EBEBD3;
  height: 20px;
  width: 5em;
  border-radius: 10px;
  transform: rotate(45deg);
  /* transition: all ease-in-out 500ms; */
}

.hamburger::before {
  transform: translate(30px,-25px);
}

.hamburger::after {
  transform: translateY(3px);
}

.open .hamburger {
  transform: rotate(45deg);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after {
  transform: translateY(-3px) rotate(-90deg);
}