Rendaman

by icoxfog417

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div class="top container" style="text-align:center">
  <h1 class="title">Renda Man</h1>
</div>
<div>
  <!-- Menu -->
  <nav class="navbar has-shadow">
    <div class="container">
      <div class="navbar-tabs">
        <a class="navbar-item is-tab is-active" href="">
          Top
        </a>
        <a class="navbar-item is-tab " href="">
          Weekly Meeting
        </a>
        <a class="navbar-item is-tab " href="">
          Customer Meeting
        </a>
        <a class="navbar-item is-tab " href="">
          <span class="annotation">(会議体ごとに表示)<span>
            </a>
            </div>
          </div>
        </nav>
      <!-- Keywords -->
      <div class="container" style="margin-top:15px;">
        <a class="button is-outlined">新発注システム</a>
        <a class="button is-outlined">月末監視</a>
        <a class="button is-primary is-outlined">新発注システム</a>
        <a class="button is-danger is-outlined">バッチ障害</a>

        <span class="annotation">(キーワードを表示/Sentimentでcoloring)<span>
          </div>
          <hr/>
          <!-- Body -->
          <section class="section">
            <div class="container">
              <a><h3 class="title is-3">新発注システム、パフォーマンス改善要求</h3></a>
              <p class="subtitle">
                <span class="tag">新発注システム</span>
              </p>
              <div class="columns">
                <div class="column is-half">
                  <span class="caption">Todo</span>
                  <ul>
                    <li>中山が<span class="weight">11/9</span>にデータベースのインデックスを再作成する。</li>
                    <li>藤田がパフォーマンスの計測を行う。</li>
                  </ul>                                
                  <span class="caption">Focus</span>
                  <ul>
                    <li>午前中、新発注システムのパフォーマンスが悪い。<span...

CSS

body{
    margin-top:5px;
}

.annotation{
    font-weight: bold;
    color: gray;
}

.caption{
    font-weight: bold;
}

.slide-image{
    width: 250px;
    color: slategray;
}

.weight{
    background-color: wheat;
}