<header>
  <nav>
    <nav-left>
      <a><Icon name="menu" /> <Icon name="youtube" /> <logo>Youtube</logo></a>
    </nav-left>
    <input id="search" placeholder="Search" name="search">
    <ul>
      <li><Icon name="camera" color="#000" /></li>
      <li><Icon name="more-vertical" color="#000" /></li>
      <li><Icon name="grid" color="#000" /></li>
      <li><button><Icon name="user" /> Sign In</button></li>
    </ul>
  </nav>
</header>
<main>
  <left>
    <figure>
      <a href="/demos/google" use:link>
        <img src="https://via.placeholder.com/800x450?text=Video">
      </a>
      <figcaption>
        <a>#tag</a> <a>#anothertag</a>
        <p>Title And Stuff</p>
        <video-actions>
          <likes>Stats Stats</likes>
          <video-buttons>
            <Icon name="thumbs-up" color="#999" /> 1.1K
            <Icon name="thumbs-down" color="#999" /> 22
            <Icon name="corner-up-right" color="#999" /> SHARE
            <Icon name="menu" color="#999" /> SAVE
            <Icon name="vertical-more" />
          </video-buttons>
        </video-actions>
      </figcaption>
    </figure>
    <hr>
    <promotion>
      <nav>
        <card>
          <img src="https://via.placeholder.com/64x64?text=ME">
          <info>
          <h4>Zed A. Shaw</h4>
          <subs>1 subscriber</subs>
        </card>
        <button id="subscribe">SUBSCRIBE</button>
      </nav>

      <content>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
        ab illo inventore veritatis et quasi architecto beatae vitae dicta
        sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
        aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
        qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
        dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
        quia non numquam eius modi tempora incidunt ut labore et dolore magnam
        aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
        exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
        ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in
        ea voluptate velit esse quam nihil molestiae consequatur, vel illum
        qui dolorem eum fugiat quo voluptas nulla pariatur </content>

    </promotion>
    <hr>

    <comments>
      <nav>
        <span>125 Comments</span> <sort><Icon name="bar-chart" color="var(--sub-color)" /> SORT BY</sort>
      </nav>

      {#each cards as card}
      <card>
        <img src="https://via.placeholder.com/64x64?text=Person">
        <info>
          <h4>Guys</h4>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium, totam rem aperiam, eaque</p>
          <nav>
            <Icon name="thumbs-up" color="var(--sub-color)" /> 233
            <Icon name="thumbs-down" color="var(--sub-color)" /> 1
          </nav>
          <reply><Icon name="chevron-down" /> View replies</reply>
        </info>
      </card>
      {/each}
    </comments>
  </left>

  <right>
    {#each cards as card}
    <card class="small">
      <img src="https://via.placeholder.com/120x80?text=Thumb">
      <info>
        <h4>Video Thumb Title</h4>
        <author>Zed</author>
        <views>1.1M views</views>
        <date>2 years ago</date>
      </info>
    </card>
    {/each}

    <figure>
      <a href="/demos/google" use:link>
        <img src="https://via.placeholder.com/300x150?text=Advert">
      </a>
    </figure>

    {#each cards as card}
    <card>
      <img src="https://via.placeholder.com/120x80?text=Thumb">
      <info>
        <h4>Video Thumb Title</h4>
        <author>Zed</author>
        <views>1.1M views</views>
        <date>2 years ago</date>
      </info>
    </card>
    {/each}
  </right>
</main>