steps menu

steps menu

by iqbal pasha

HTML

<div class="landingMenu">
    <div id="introductionButton" class="miniNavButton" (click)="changeState('landing')">
        <a>
            <svg class="icon icon-user">
                <use xlink:href="symbol-defs.svg#icon-user"></use>
            </svg>
        </a>
    </div>
    <div id="skillsButton" class="miniNavButton" (click)="changeState('skills')">
        <a>
            <svg class="icon icon-book">
                <use xlink:href="symbol-defs.svg#icon-book"></use>
            </svg>
        </a>
    </div>
    <div id="contactButton" class="miniNavButton" (click)="changeState('contact')">
        <a>
            <svg class="icon icon-envelop">
                <use xlink:href="symbol-defs.svg#icon-envelop"></use>
            </svg>
        </a>
    </div> 
</div>

<div id="landingMenuOrangeLine"></div>

CSS

#landingMenuOrangeLine {
  width: 100%;
  height: 0.3em;
  background-color: #FF4C00;
  position : absolute ;
  top : 50px;
  z-index : -1;
}

.miniNavButton {
  background-color: #4DC594;
  border-radius: 50%;
  width : 50px;
  height : 50px;
  display: inline-block;
  margin : 2%;
  border : 4px solid #FF4C00;
}