header.html

<header>
  <nav>
    <div class="nav-wrapper blue-grey">
      <!-- <a href="#" class="left brand-logo "><span style="padding-left: 10px">[<span class="light-blue-text">Dial</span>|<span class="orange-text">Doc</span>]</span></a> -->

      <a href="#" class="left brand-logo" style="padding-left: 10px">
        <!-- <img src="{{url_for('static', filename='img/dd_light.png')}}" alt="" height="80"> -->
        <b><span class="orange-text">&#x2145;ial</span><span class="light-blue-text">&#x2145;oc</span></b>
        </span>
      </a>
      <ul class="right hide-on-med-and-down">
        <li><a href="index.html">HOME</a></li>
        <li><a href="data.html">Doc2Dial</a></li>
        <li><a href="multidoc2dial">MultiDoc2Dial</a></li>
        <li><a href="workshop2022#shared">SHARED TASK at <b><span>&#x2145;ial</span><span>&#x2145;oc2022</span></b></a></li>
      </ul>
    </div>
  </nav>
  <div class='themes-banner blue-grey'>
    <h2 class="white-text"><img src="img/dialdoc.png" alt="" height="80"> Document-grounded Dialogue - <b stype="color: blue; text-shadow: 2px 2px 4px #000000;">Doc2Dial</b></h2>
    <p class="white-text">
      <i class="fa fa-envelope-o" aria-hidden="true"></i> <b> <a class="amber-text" href="https://groups.google.com/g/dialdoc" target="_blank">dialdoc@googlegroups.com</a></b>
    </p>
  </div>
</header>