Untitled

<!DOCTYPE html>
<html>
<head>
  <title> - </title>
  <meta charset="utf-8">
  <link rel="icon" type="image/x-icon" href="./assets/img/favicon.ico">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Abel|Amatic+SC|Charm|Dancing+Script|Gloria+Hallelujah|Indie+Flower|Major+Mono+Display|Noto+Sans+JP|Open+Sans+Condensed:300|Pacifico|Quicksand|Raleway|Shadows+Into+Light|Source+Code+Pro" rel="stylesheet">
  <style type="text/css">
    body {
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 15px;
    }
    .bg-image {
      background-image: url("http://orig14.deviantart.net/7584/f/2015/181/2/7/flat_mountains_landscape_by_ggiuliafilippini-d8zdbco.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
    }

    .title {
      font-family: 'Pacifico', cursive;
      font-size: 5rem;
      /*color: #fdded3;*/
    }
    /*
      imported font
      font-family: 'Major Mono Display', monospace;
      font-family: 'Charm', cursive;
      font-family: 'Raleway', sans-serif;
      font-family: 'Open Sans Condensed', sans-serif;
      font-family: 'Quicksand', sans-serif;
      font-family: 'Indie Flower', cursive;
      font-family: 'Dancing Script', cursive;
      font-family: 'Pacifico', cursive;
      font-family: 'Noto Sans JP', sans-serif;
      font-family: 'Abel', sans-serif;
      font-family: 'Shadows Into Light', cursive;
      font-family: 'Source Code Pro', monospace;
      font-family: 'Amatic SC', cursive;
      font-family: 'Gloria Hallelujah', cursive;
    */

  </style>
</head>
<body class="has-navbar-fixed-top">
  <div id="app">
    <nav class="navbar is-fixed-top is-dark">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item">
            <img src="https://bulma.io/images/bulma-type-white.png" alt="Logo">
          </a>
          <span class="navbar-burger burger">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </div>
        <div class="navbar-menu">
          <div class="navbar-end">
            <a
              class="navbar-item"
              @click="title = 'Mutsune'"
              :class="{'is-active': title === 'Mutsune'}"
              >
              Mutsune
            </a>
            <a
              class="navbar-item"
              @click="title = 'API'"
              :class="{'is-active': title === 'API'}"
              >
              API
            </a>
            <a
              class="navbar-item"
              @click="title = 'X'"
              :class="{'is-active': title === 'X'}"
              >
              X
            </a>
            <a
              class="navbar-item"
              @click="title = 'Y'"
              :class="{'is-active': title === 'Y'}"
              >
              Y
            </a>
          </div>
        </div>
      </div>
    </nav>
    <section class="hero is-fullheight-with-navbar bg-image">
      <div class="hero-head">
      </div>

      <div class="hero-body">
        <div class="container has-text-centered">
          <h1 class="title has-text-warning is-size-1-mobile">
            {{ title }}
          </h1>
          <h2 class="subtitle is-size-7-mobile" v-html='subtitle'>
            {{ subtitle }}
          </h2>
        </div>
      </div>

      <div class="hero-foot">
        <div class="container">
          <div class="tabs is-boxed is-fullwidth">
            <ul>
              <li class="is-active">
                <a>
                  <span>a</span>
                </a>
              </li>
              <li>
                <a>
                  <span>b</span>
                </a>
              </li>
              <li>
                <a>
                  <span>c</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        title: 'Mutsune',
        subtitle: '<a href="/">Something here Mutsune</a>'
      },
      watch: {
        title: function (value) {
          switch (this.title) {
            case 'Mutsune':
              this.subtitle = '<a href="/">Something here Mutsune</a>'
              break;
            case 'API':
              this.subtitle = '<a href="/">Something here API</a>'
              break;
            case 'X':
              this.subtitle = '<a href="/">Something here X</a>'
              break;
            case 'Y':
              this.subtitle = '<a href="/">Something here Y</a>'
              break;
          }
        }
      },
      methods: {
      }
    })
  </script>
</body>
</html>