エンジニアスタンプラリー～フロントエンド編＃6

<header class="header">
  <h1 class="header__title">Frontend Developer Roadmap スタンプラリー</h1>
  <nav class="top-bar row justify-content-center">
    <h2 class="top-bar__item top-bar__item_active col-sm-6"><a class="top-bar__link top-bar__link_front" href="#">フロントエンド</a></h2>
    <h2 class="top-bar__item top-bar__item_inactive col-sm-6"><a class="top-bar__link top-bar__link_back" href="#"> バックエンド</a></h2>
  </nav>
</header>

.header {
  &__title {
    font-size: 3em;
    text-align: center;
    margin: 0;
    padding: 30px 0;
    color: #00539f;
    animation: fadeInTitle 3s ease-in;
  }
}

.top-bar {
  &__item {
    margin: 0;
    padding: 20px 0;
    text-align: center;

    &_active{ background-color: $bg-color; }
    &_inactive{ background-color: white; }
  }

  &__link {
    display: block;
    text-align: center;
    &:hover { text-decoration: none; }
  }
}