Portfolio Hero Header With Logo

By Kevin Ball

F6
#
How do I use This?

A simple portfolio hero header with logo.

HTML
<header class="portfolio-hero-header">
  <img class="portfolio-hero-header-logo" src="https://placehold.it/200"/>
  <h1 class="portfolio-hero-header-h1">My Portfolio</h1>
  <ul class="portfolio-hero-header-description">
    <li>Portfolio Example</li>
    <li>Super Clean</li>
    <li>Super Simple</li>
  </ul>
  <ul class="portfolio-hero-header-menu">
    <li><a class="button primary" href="#">Link 1</a></li>
    <li><a class="button primary" href="#">Link 2</a></li>
    <li><a class="button primary" href="#">Link 3</a></li>
  </ul>
</header>

$portfolio-hero-header-background-color: $light-gray;

.portfolio-hero-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: $portfolio-hero-header-background-color;
  padding: 2rem 0;
}

.portfolio-hero-header-description {
  list-style-type: none;
  display: flex;
  justify-content: center;
  margin: 0;

  li {
    flex: 1 0 200px;
    text-align: center;
    padding: 0 1.25rem;
    position: relative;
    white-space: nowrap;

    &:before {
      content: "*";
      position: absolute;
      left: 0;
      top: 5px;
    }

    &:first-child:before {
      content: "";
    }
  }
}

.portfolio-hero-header-menu {
  list-style-type: none;
  display: flex;
  justify-content: center;
  margin: 0;

  li {
    margin: 1.25rem;

    a {
      padding-left: 1.875rem;
      padding-right: 1.875rem;
    }
  }
}


.portfolio-hero-header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #e6e6e6;
  padding: 2rem 0;
}

.portfolio-hero-header-description {
  list-style-type: none;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
}

.portfolio-hero-header-description li {
  -webkit-flex: 1 0 200px;
      -ms-flex: 1 0 200px;
          flex: 1 0 200px;
  text-align: center;
  padding: 0 1.25rem;
  position: relative;
  white-space: nowrap;
}

.portfolio-hero-header-description li:before {
  content: "*";
  position: absolute;
  left: 0;
  top: 5px;
}

.portfolio-hero-header-description li:first-child:before {
  content: "";
}

.portfolio-hero-header-menu {
  list-style-type: none;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
}

.portfolio-hero-header-menu li {
  margin: 1.25rem;
}

.portfolio-hero-header-menu li a {
  padding-left: 1.875rem;
  padding-right: 1.875rem;
}

JS