Food Recognition Challenge

<header class="masthead-challenge-banner">
  <div class="masthead-main" style="background-color: #15379F;">
    <div class="container-center">
      <div class="masthead-content">
        <div class="masthead-left">
          <a class="masthead-link" href="/">
            <i class="las la-arrow-left"></i>Challenges
          </a>
        </div>
        <!-- /masthead-left -->

        <div class="masthead-badges">
          <div class="badge-success">
            <i class="lar la-check-circle"></i>
            Round 1
          </div> 

          <div class="badge-success">
            <i class="lar la-check-circle"></i>
            Round 2
          </div>   

          <div class="badge-time-left">
            <i class="lar la-clock"></i>
            Round 3: 40 days left
          </div>
        </div>
        <!-- /masthead-badges -->

        <div class="masthead-text">
          <h1 class="masthead-title">
            Food Recognition Challenge
          </h1>

          <p class="masthead-paragraph">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
          </p>
        </div>
        <!-- /masthead-main -->

        <div class="masthead-image">
          <img src="./../../assets/images/challenge-banner-image-example.png" alt="Challenge image">
        </div>
        <!-- /masthead-image -->

      </div>
    </div>
  </div>
  <!-- /masthead-challenge-main -->

  <div class="masthead-challenge-details">
    <div class="container-center">
      <div class="masthead-content">
        <div class="masthead-section">
          <div class="preview-organizer">
            <span class="preview-organizer-text">
              Organized by
            </span> 

            <span class="preview-organizer-name">
              <a class="preview-organizer-link" href="/">OpenAI</a> &amp;
            </span>

            <a class="preview-organizer-avatar" href="/" aria-label="Organizer Name" data-balloon-pos="up">
              <img class="avatar" src="./../../assets/images/placeholder-organizer-avatar-1.png" alt="Organizer avatar">
            </a>

            <span class="preview-organizer-name">
              <a class="preview-organizer-link" href="/">AIcrowd</a>
            </span>

            <a class="preview-organizer-avatar" href="/" aria-label="Organizer Name" data-balloon-pos="up">
              <img class="avatar" src="./../../assets/images/placeholder-organizer-avatar-2.png" alt="Organizer avatar">
            </a>
          </div>
        </div>
        <!-- /masthead-section -->

        <div class="masthead-section">
          <h4 class="masthead-title-secondary">
            Prizes
          </h4>

          <ul class="masthead-list">
            <li class="masthead-list-item">
              1 Travel Grant
            </li>

            <li class="masthead-list-item">
              1 Authorship/Co-Authorship
          </ul>
        </div>
        <!-- /masthead-section -->

        <div class="masthead-section">
          <h4 class="masthead-title-secondary">
            Categories
          </h4>

          <ul class="masthead-list">
            <li class="masthead-list-item truncate">
              <a class="masthead-link" href="/">#category</a>
            </li>

            <li class="masthead-list-item truncate">
              <a class="masthead-link" href="/">#another_category</a>
            </li>
          </ul>
        </div>
        <!-- /masthead-section -->

        <div class="masthead-section">
          <h4 class="masthead-title-secondary">
            Participants
          </h4>

          <span class="masthead-value">
            567
          </span>
        </div>
        <!-- /masthead-section -->

        <div class="masthead-section">
          <h4 class="masthead-title-secondary">
            Teams
          </h4>

          <span class="masthead-value">
            556
          </span>
        </div>
        <!-- /masthead-section -->

        <div class="masthead-section">
          <h4 class="masthead-title-secondary">
            Submissions
          </h4>

          <span class="masthead-value">
            669
          </span>
        </div>
        <!-- /masthead-section -->

        <div class="masthead-options">
          <div class="options-challenge">
            <div class="options-group">
              <a class="btn-primary" href="/" role="button">
                Participate
              </a>  

              <a class="btn-secondary" href="/" role="button">
                Create Team
              </a>
            </div>

            <button class="btn-like" href="" type="button" aria-label="Like" data-balloon-pos="up">
              <i class="las la-heart"></i>

              <span class="like-counter">
                3
              </span>
            </button>    
          </div>
        </div>
        <!-- /masthead-options -->

      </div>
    </div>
  </div>
  <!-- /masthead-challenge-details -->

</header>