fsckcss/public/code/Twitter.html

<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>