<content>
  <left>
  <Icon name="twitter" color="var(--color)" />
  <h4># Explore</h4>
  <h4><Icon name="settings" color="var(--color-text)" /> Settings</h4>
  </left>

  <middle>
    <header>
      <nav>
        <back><Icon name="arrow-left" /></back>
        <name>
          <h4>Zed A. Shaw, Writer</h4>
          <span>7,754 Tweets</span>
        </name>
      </nav>
    </header>

    <images>
      <figure id="background">
        <img src="/header_pic.jpg">
      </figure>

      <figure id="avatar"> <img src="/profile_pic.jpg">
        <button id="follow">Follow</button>
      </figure>
    </images>

    <profile>
      <h3>Zed A. Shaw, Writer</h3>
      <p>@lzsthw</p>
      <p>Blah blah profile stuff.</p>
      <p><Icon name="map" size="24" color="var(--color-bg-secondary)" /> 
        Some Place, KY <Icon name="link" size="24" color="var(--color-bg-secondary)" />
        <a>learnjsthehardway.org</a>
        <Icon name="calendar" size="24" color="var(--color-bg-secondary)" />
        Joined Jan, 1999.
      </p>
      <p><b>167</b> Following <b>10.4k</b> Followers</p>
    </profile>

    <hr>

    <tweets>
    {#each tweets as tweet}
      <tweet>
        <figure id="avatar">
            <img alt="Stock photo" src="/profile_pic.jpg">
        </figure>
        <post>
          <h4>Zed A. Shaw, Writer</h4>

          <p>Lorem ipsum dolor siThe author of The Hard Way Series published by
             Addison/Wesley including Learn Python The Hard Way and many more.
             Follow me here for coding tips and book news.t amet, consectetur
             adipiscing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua. Ut enim ad minim veniam: <br>
             <a>quis nostrud exercitation</a> ullamco laboris nisi ut aliquip ex ea
             commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
             velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt
             mollit anim id est laborum.
          </p>

          <actions>
              <Icon size="16" name="message-circle" color="var(--color-inactive)" /> 2
              <Icon size="16" name="repeat" color="var(--color-inactive)" /> 1
              <Icon size="16" name="heart" color="var(--color-inactive)" /> 12
              <Icon size="16" name="upload" color="var(--color-inactive)" />
          </actions>
        </post>
        <Icon name="more-horizontal" />
      </tweet>
    {/each}
    </tweets>
  </middle>

  <right>
    <input placeholder="Search Twitter" />

    <section>
      <aside id="newperson">
      <h3>New to Twitter?</h3>
      <p>Sign up now to get your own personalized hate stream!</p>
      <button id="signup">Sign Up</button>
      </aside>

      <aside>
        <recent-media>
          <figure>
            <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
          </figure> 
          <figure>
            <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
          </figure> 
          <figure>
            <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
          </figure> 
          <figure>
            <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
          </figure> 
          <figure>
            <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
          </figure> 
          <figure>
            <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
          </figure> 
        </recent-media>
      </aside>

      <aside id="trending">
        <h3>You Might Like</h3>
        <ul>
          <li>Card Person</li>
          <li>Card Person</li>
          <li>Card Person</li>
        </ul>
        <a>Show More</a>
      </aside>

      <aside id="trending">
        <h3>What's Happening</h3>
        <ul>
          <li>News news news.</li>
          <li>News news news.</li>
          <li>News news news.</li>
          <li>News news news.</li>
          <li>News news news.</li>
        </ul>
      </aside>
    </section>
  </right>
</content>