Incoming
Special patterns and chunks of style for the incoming area.
Incoming
<div class="page">
<div class="wrapper">
<div class="content content-with-sidebar content-incoming">
<div class="incoming-header">
<h2 class="incoming-header--title">Our most recent files</h2>
</div>
<div class="sidebar">
<div class="sidebar-search-block fun-form">
<form>
<div class="field">
<div class="field-input">
<input
type="search"
class="input-text"
name="q"
placeholder="Search everything!"
autocorrect="off"
/>
</div>
</div>
</form>
<div class="clear"></div>
</div>
<div class="tip-block">
<h3>Did You Know?</h3>
<p>
For shake views like this, you can use your keyboard to view the
next post (<tt>J</tt>), previous post (<tt>K</tt>), jump to the
bottom of page (<tt>H</tt>) (and another <tt>H</tt> at the bottom to
go to the “Older” page of posts), jump to the top (<tt>L</tt>) (and
another
<tt>L</tt>
to go to the “Newer” page of posts).
<em>It’s been that way for years.</em>
</p>
</div>
</div>
<div class="body">
<div class="image-content-list meta hentry">
<div class="image-title image-title-with-poster">
<div class="image-poster">
<a href="#" title="Vidiot">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/1031/profile.jpg"
width="48"
height="48"
alt=""
/>
</a>
</div>
<h3>Beijing’s skyline taken from the Great Wall of China</h3>
<div class="clear"></div>
</div>
<div class="image-content">
<div class="the-image">
<a href="#"
><img
src="https://mltshp-cdn.com/r/1JPNB"
alt="Beijing's skyline taken from the Great Wall of China"
/></a>
</div>
<div class="image-content-footer">
<div class="description">
<div class="the-description">
source:
<a
href="#"
target="_blank"
rel="nofollow"
title="https://twitter.com/vandillenpek/status/1303713798067372032"
>https://twitter.com/vandille...</a
>
</div>
</div>
<div class="image-interactions">
<div class="like-this">
<form>
<button
type="button"
class="like-button btn btn-danger btn-small is-active"
>
<div class="btn--content">
<img
class="btn--icon"
src="https://mltshp-cdn.com/static/images/like-this.svg?v=b6b5d63ca476cb55e67c21965345e8db"
alt=""
/>
<span class="btn--text">Like</span>
</div>
</button>
<button
type="button"
class="unlike-button"
title="Unlike This"
aria-label="Unlike This"
>
<img
src="https://mltshp-cdn.com/static/images/liked-this.svg?v=e6f9810cfc8fa54a40073a3ddbaa90b5"
height="22"
width="25"
alt="Unlike This"
/>
</button>
</form>
</div>
<div class="save-this">
<form>
<button
type="button"
class="save-this-link save-this-link-multiple btn btn-warning btn-small"
>
<div class="btn--content">
<img
class="btn--icon"
src="https://mltshp-cdn.com/static/images/save-this.svg?v=5a6b71f0af47daac6eb1c038668c4b9b"
alt=""
/>
<span class="btn--text">Save</span>
<span class="btn--caret">▼</span>
</div>
</button>
</form>
</div>
</div>
<div class="inline-meta">
<span class="created-at">
<a href="#">
<time
datetime="2020-09-10 23:35:03"
title="Thu, 10 Sep 2020 23:35:03 "
>16 minutes ago</time
>
</a>
</span>
<ul class="stats">
<li class="views">23 Views</li>
<li class="saves">
<a href="#">0</a>
</li>
<li class="likes">
<a href="#">4</a>
</li>
<li class="comments"><a href="#">0</a></li>
</ul>
</div>
<div class="inline-details" style="display: none"></div>
<div class="clear"></div>
</div>
</div>
<div class="image-title image-title-with-poster">
<div class="image-poster">
<a href="#" title="macmanx">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/102505/profile.jpg"
width="48"
height="48"
alt=""
/>
</a>
</div>
<h3>Star Wars Zoom Backgrounds</h3>
<div class="clear"></div>
<div class="remove-from-shake">
<form>
<button
title="Delete from shake"
class="btn btn-warning btn-pastel btn-icon btn-tiny"
>
✕
</button>
</form>
</div>
</div>
<div class="image-content">
<div class="the-image">
<a href="#"
><img
src="https://mltshp-cdn.com/r/1IGIU"
alt="Star Wars Zoom Backgrounds"
/></a>
</div>
<div class="image-content-footer">
<div class="description">
<div class="the-description">
Star Wars is jumping on the Zoom background train. I’m looking
forward to showing how clean I’ve kept my office with this
one.<br /><br />You can find more at
<a
href="#"
target="_blank"
rel="nofollow"
title="https://www.starwars.com/news/star-wars-backgrounds"
>https://www.starwars.com/news...</a
>
</div>
</div>
<div class="image-interactions">
<div class="like-this">
<form>
<button
type="button"
class="like-button btn btn-danger btn-small is-active"
>
<div class="btn--content">
<img
class="btn--icon"
src="https://mltshp-cdn.com/static/images/like-this.svg"
alt=""
/>
<span class="btn--text">Like</span>
</div>
</button>
<button
type="button"
class="unlike-button"
title="Unlike This"
aria-label="Unlike This"
>
<img
src="https://mltshp-cdn.com/static/images/liked-this.svg"
height="22"
width="25"
alt="Unlike This"
/>
</button>
</form>
</div>
<div class="save-this">
<form>
<button
type="button"
class="save-this-link save-this-link-multiple btn btn-warning btn-small"
>
<div class="btn--content">
<img
class="btn--icon"
src="https://mltshp-cdn.com/static/images/save-this.svg"
alt=""
/>
<span class="btn--text">Save</span>
<span class="btn--caret">▼</span>
</div>
</button>
</form>
</div>
</div>
<div class="inline-meta">
<span class="created-at">
<a href="#">
<time
datetime="2020-04-17 21:54:53"
title="Fri, 17 Apr 2020 21:54:53 "
>6 days ago</time
>
</a>
</span>
<ul class="stats">
<li class="views">544 Views</li>
<li class="saves">
<a href="#">3</a>
</li>
<li class="likes">
<a href="#">22</a>
</li>
<li class="comments"><a href="#">1</a></li>
</ul>
</div>
<div class="inline-details" style="display: none">
<div class="comment">
<div class="avatar">
<a href="#">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/417/profile.jpg"
height="30"
width="30"
/>
</a>
</div>
<div class="comment-body">
<div class="meta">
<a class="user-name username link--primary" href="#"
>jessamyn</a
>
<a class="pro-badge" href="#">
<img
alt="pro"
src="https://mltshp-cdn.com/static/images/icon_plus.svg"
width="12"
height="12"
border="0"
valign="center"
/>
</a>
<span class="created-at">
<time
datetime="2020-04-19 17:37:45"
title="Sun, 19 Apr 2020 17:37:45 "
>5 days ago</time
>
</span>
<a class="reply-to" href="#">Reply</a>
</div>
<div class="comment-body-text">
Always up for some more good backgrounds
</div>
</div>
</div>
<div class="post-comment-inline">
<form>
<textarea name="body">Write a comment…</textarea>
<div class="button">
<input
class="submit-comment-button btn btn-primary btn-small"
type="submit"
value="Post It!"
/>
</div>
</form>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="linear-navigation">
<div class="older">
<a class="btn btn-secondary btn-shadow" href="#">« Older</a>
</div>
<div class="newer"></div>
</div>
</div>
</div>
</div>
</div>