jbevis / jb-comp-challenge-2 Goto Github PK

header class="main-head">
  <nav>
    <ul class="navbar">
      <li><img class="nav-icons" id="shares" src="icons/icon_share.png" alt="Share this page" /></li>
      <li class="nav-text">Share</li>
      <li><img class="nav-icons" id="conservation" src="icons/icon_tree.png" alt="conservation efforts" /></li>
      <li class="nav-text">Conservation</li>
      <li><img class="nav-icons" id="conditions" src="icons/icon_weather.png" alt="Check weather conditions" /></li>
      <li class="nav-text">Weather</li>
    </ul>
  </nav>
  <article class="header-logo">
    <img id="username" src="icons/icon_profile.png" alt="User profile"/>
    <p class="nav-text">Admin Username</p>
    <img id ="logo" src="images/icon_npslogo.png" alt="National Park Service logo"/>
  </article>

  ````CSS
  .main-head {
    background-color: #474544;
    display: flex;
    width: 100%;
    height: 100%;
  }

  h1 {
    margin-left: 15px;
    color: #474544;
  }

  nav {
    align-self: flex-end;
    display: flex;
    width: 66.67%;
    height: 100%;
    top: 45px;
    margin-bottom: 10px;
  }