Shake
Composition example of a Shake page
Shake
<div class="page">
<div class="wrapper">
<div class="content content-with-sidebar content-shake">
<div class="sidebar">
<img
src="https://mltshp-cdn.com/s3/account/781/shake_dune.jpg"
width="284"
height="284"
/>
<div class="shake-details">
<h3 class="title">dune</h3>
<!-- prettier-ignore -->
<p class="description">the spice must flow. fear is the mind killer. the little death that brings about total obliteration.</p>
</div>
<div class="shake-sidebar-actions">
<div class="user-follow">
<a class="icon" href="#">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/781/shake_dune.jpg"
width="100"
height="100"
/>
</a>
<div class="follow">
<h4><a href="#">dune</a></h4>
<form>
<a
href="#"
class="submit-form btn btn-warning btn-pastel btn-small"
>- Unfollow</a
>
</form>
</div>
</div>
<div class="quit-shake">
<form>
<input
class="btn btn-danger btn-pastel btn-small"
type="submit"
value="Quit this shake?"
/>
</form>
</div>
</div>
<div class="shake-invite-member-block">
<div class="inner">
<h3>+ Invite A New Member</h3>
<form>
<div class="shake-input-wrapper">
<input type="text" class="input-text" name="name" />
<button
type="button"
class="invite-button btn btn-success btn-small"
disabled=""
>
Invite
</button>
<ul class="shake-results">
<li>
<img
src="https://mltshp-cdn.com/static/images/default-icon-venti.svg"
width="24"
height="24"
/><span>A124D520034</span>
</li>
<li>
<img
src="https://mltshp-cdn.com/s3/account/101519/profile.jpg"
width="24"
height="24"
/><span>A420N</span>
</li>
<li>
<img
src="https://mltshp-cdn.com/static/images/default-icon-venti.svg"
width="24"
height="24"
/><span>A4Awesome</span>
</li>
<li>
<img
src="https://mltshp-cdn.com/s3/account/1529/profile.jpg"
width="24"
height="24"
/><span>aa</span>
</li>
<li>
<img
src="https://mltshp-cdn.com/static/images/default-icon-venti.svg"
width="24"
height="24"
/><span>Aarondap</span>
</li>
<li>
<img
src="https://mltshp-cdn.com/static/images/default-icon-venti.svg"
width="24"
height="24"
/><span>AaronHal</span>
</li>
<li>
<img
src="https://mltshp-cdn.com/s3/account/101201/profile.jpg"
width="24"
height="24"
/><span>aaronschmidt</span>
</li>
<li>
<img
src="https://mltshp-cdn.com/static/images/default-icon-venti.svg"
width="24"
height="24"
/><span>Aaronsulky</span>
</li>
<li>
<img
src="https://mltshp-cdn.com/static/images/default-icon-venti.svg"
width="24"
height="24"
/><span>Abandonedbalt</span>
</li>
<li>
<img
src="https://mltshp-cdn.com/static/images/default-icon-venti.svg"
width="24"
height="24"
/><span>AbandonedBycle</span>
</li>
</ul>
</div>
</form>
</div>
</div>
<div class="notification-block notification-block-invitation-request">
<div class="notification-block-hd on-shake-page">
2 requests to join a shake
</div>
<div class="notification-block-bd">
<div class="notification">
<a href="#">Chuck Lauer Vose</a>
has requested to join Dance Party.
<div class="notification-actions">
<form>
<input
type="submit"
class="btn btn-secondary btn-pastel btn-small"
value="Approve"
/>
</form>
<form>
<input
type="submit"
class="btn btn-warning btn-pastel btn-small"
value="Decline"
/>
</form>
</div>
</div>
<div class="notification">
<a href="#">Art Wells</a>
has requested to join Fantastic Internet Art.
<div class="notification-actions">
<form>
<input
type="submit"
class="btn btn-secondary btn-pastel btn-small"
value="Approve"
/>
</form>
<form>
<input
type="submit"
class="btn btn-warning btn-pastel btn-small"
value="Decline"
/>
</form>
</div>
</div>
</div>
</div>
<div class="shake-sidebar-editor-block">
<div class="editor-image">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/781/profile.jpg"
width="48"
height="48"
/>
</div>
<div class="editor-details">
<a href="#">patrickneville</a> is this shake’s editor.
</div>
<div class="clear"></div>
</div>
<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 this shake!"
autocorrect="off"
/>
</div>
</div>
</form>
<div class="clear"></div>
</div>
<div class="following-wrapper">
<h3>Members</h3>
<div class="following">
<ul>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/45/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/67/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/184/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/197/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/208/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/254/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/277/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/357/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/387/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/505/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/844/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/921/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/2413/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/2540/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/2541/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/3245/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/5108/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/5876/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/6420/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/7367/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/10533/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/58837/profile.jpg"
/>
</a>
</li>
</ul>
</div>
</div>
<div class="following-wrapper">
<h3>Followed by <span class="count">(28)</span></h3>
<div class="following">
<ul>
<li>
<a href="#" title="patrick neville">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/781/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
<li>
<a href="#" title="billy">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/78/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
<li>
<a href="#" title="David Barry">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/5108/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
<li>
<a href="#" title="Foist">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/208/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
<li>
<a href="#" title="redfox">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/2540/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
<li>
<a href="#" title="B.A. Rosenblum">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/357/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
<li>
<a href="#" title="freqout">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/254/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
<li>
<a href="#" title="tonyb">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/67/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
<li>
<a href="#" title="finn">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/505/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
<li>
<a href="#" title="idogcow">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/277/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
</ul>
<br style="clear: both" />
<a class="view-all-following" href="#">view all</a>
</div>
</div>
</div>
<div class="body">
<div class="image-content-list">
<div class="image-title image-title-with-poster">
<div class="image-poster">
<a href="#" title="Lord_John_Whorfin">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/58837/profile.jpg"
width="48"
height="48"
alt=""
/>
</a>
</div>
<h3>Fremen</h3>
<div class="clear"></div>
</div>
<div class="image-content">
<div class="the-image">
<a href="#"
><img src="https://mltshp-cdn.com/r/1JPTU" alt="Fremen"
/></a>
</div>
<div class="image-content-footer">
<div class="description">
<div class="the-description">Moebius concept art for Dune</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="originally-posted-by">
originally
<a class="the-post" href="#">posted</a> by
<a class="avatar--link" href="#">
<img
class="avatar--img"
valign="bottom"
width="20"
height="20"
src="https://mltshp-cdn.com/s3/account/58282/profile.jpg"
alt=""
/>
</a>
<a class="user-name" href="#">stereoplex</a>
</div>
<div class="inline-meta">
<span class="created-at">
<a href="#">
<time
datetime="2020-09-11 18:27:34"
title="Fri, 11 Sep 2020 18:27:34 "
>2 days ago</time
>
</a>
</span>
<ul class="stats">
<li class="views">5 Views</li>
<li class="saves">
<a href="#">0</a>
</li>
<li class="likes">
<a href="#">1</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">
<h3 class="image-edit-title">dune 1984 bts</h3>
<form
method="post"
class="image-edit-title-form"
action="/p/1JJ4N/quick-edit-title"
>
<input
type="text"
class="title-input"
name="title"
autocomplete="off"
value=""
/>
<div class="buttons">
<input
type="submit"
class="save btn btn-primary"
value="Save"
/>
<span class="or">or</span>
<a href="#" class="cancel btn btn-secondary">Cancel</a>
</div>
</form>
</div>
<div class="image-content">
<div class="the-image">
<a href="#"
><img src="https://mltshp-cdn.com/r/1JJ4N" alt="dune 1984 bts"
/></a>
</div>
<div class="image-content-footer">
<div class="description description-edit">
<div class="the-description">
source:
<a
href="#"
target="_blank"
rel="nofollow"
title="https://twitter.com/TheSpaceshipper/status/1294605495098122240/photo/1"
>https://twitter.com/TheSpace...</a
>
</div>
<form
method="post"
class="description-edit-form"
action="/p/1JJ4N/quick-edit-description"
>
<textarea
name="description"
class="description-edit-textarea"
></textarea>
<div class="buttons">
<input
type="submit"
class="save btn btn-primary btn-small"
value="Save"
/>
<span class="or">or</span>
<a href="#" class="cancel btn btn-secondary btn-small"
>Cancel</a
>
</div>
</form>
</div>
<div class="image-interactions"></div>
<div class="originally-posted-by">
originally
<a class="the-post" href="#">posted</a> by
<a class="avatar--link" href="#">
<img
class="avatar--img"
valign="bottom"
width="20"
height="20"
src="https://mltshp-cdn.com/s3/account/158/profile.jpg"
alt=""
/>
</a>
<a class="user-name" href="#">O_C</a>
</div>
<div class="inline-meta">
<span class="created-at">
<a href="#">
<time
datetime="2020-08-17 16:17:19"
title="Mon, 17 Aug 2020 16:17:19 "
>3 weeks ago</time
>
</a>
</span>
<ul class="stats">
<li class="views">3 Views</li>
<li class="saves">
<a href="#">0</a>
</li>
<li class="likes">
<a href="#">0</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">
<h3 class="image-edit-title">WAP</h3>
<form
method="post"
class="image-edit-title-form"
action="/p/1JJ4M/quick-edit-title"
>
<input
type="text"
class="title-input"
name="title"
autocomplete="off"
value=""
/>
<div class="buttons">
<input
type="submit"
class="save btn btn-primary"
value="Save"
/>
<span class="or">or</span>
<a href="#" class="cancel btn btn-secondary">Cancel</a>
</div>
</form>
</div>
<div class="image-content">
<div class="the-image">
<a href="#"
><img src="https://mltshp-cdn.com/r/1JJ4M" alt="WAP"
/></a>
</div>
<div class="image-content-footer">
<div class="description description-edit">
<div class="the-description the-description-blank">
click here to edit description
</div>
<form
method="post"
class="description-edit-form"
action="/p/1JJ4M/quick-edit-description"
>
<textarea
name="description"
class="description-edit-textarea"
></textarea>
<div class="buttons">
<input
type="submit"
class="save btn btn-primary btn-small"
value="Save"
/>
<span class="or">or</span>
<a href="#" class="cancel btn btn-secondary btn-small"
>Cancel</a
>
</div>
</form>
</div>
<div class="image-interactions"></div>
<div class="originally-posted-by">
originally
<a class="the-post" href="#">posted</a> by
<a class="avatar--link" href="#">
<img
class="avatar--img"
valign="bottom"
width="20"
height="20"
src="https://mltshp-cdn.com/s3/account/80/profile.jpg"
alt=""
/>
</a>
<a class="user-name" href="#">tonx</a>
</div>
<div class="inline-meta">
<span class="created-at">
<a href="#">
<time
datetime="2020-08-17 16:16:50"
title="Mon, 17 Aug 2020 16:16:50 "
>3 weeks ago</time
>
</a>
</span>
<ul class="stats">
<li class="views">16 Views</li>
<li class="saves">
<a href="#">0</a>
</li>
<li class="likes">
<a href="#">0</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>
<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>