You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
3.9 KiB
131 lines
3.9 KiB
<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>
|
|
|