Special patterns and chunks of style for the find shakes area.

Find Shakes

<div class="page">
	<div class="wrapper">
		<div
			class="content content-with-sidebar content-with-sidebar-reversed content-find-shakes"
		>
			<div class="header">
				<h1>Find Shakes to Follow</h1>
			</div>
			<div class="sidebar">
				<div class="good-folk-block">
					<h3>Some Good Folks</h3>
					<div class="good-folk-block-content">
						<p>People who posted files you’ve liked.</p>
						<div class="user-follow">
							<a class="icon" href="#">
								<img
									class="avatar--img"
									src="https://mltshp-cdn.com/s3/account/14430/profile.jpg"
									width="50"
									height="50"
								/>
							</a>
							<div class="follow">
								<h4>
									<a href="#">Ed</a>
									<a href="#"
										><img
											alt="pro"
											src="https://mltshp-cdn.com/static/images/icon_plus.svg?v=dabd5508e1560e2bdcc7356c85ea8f10"
											width="12"
											height="12"
											border="0"
											valign="center"
									/></a>
								</h4>
								<form>
									<a
										href="#"
										class="submit-form btn btn-secondary btn-pastel btn-small"
										>+ Follow</a
									>
								</form>
							</div>
						</div>
						<div class="user-follow">
							<a class="icon" href="#">
								<img
									class="avatar--img"
									src="https://mltshp-cdn.com/s3/account/83351/profile.jpg"
									width="50"
									height="50"
								/>
							</a>
							<div class="follow">
								<h4><a href="#">Argie</a></h4>
								<form>
									<a
										href="#"
										class="submit-form btn btn-secondary btn-pastel btn-small"
										>+ Follow</a
									>
								</form>
							</div>
						</div>
						<div class="user-follow">
							<a class="icon" href="#">
								<img
									class="avatar--img"
									src="https://mltshp-cdn.com/s3/account/80/profile.jpg"
									width="50"
									height="50"
								/>
							</a>
							<div class="follow">
								<h4>
									<a href="#">Tonx</a>
									<a href="#"
										><img
											alt="pro"
											src="https://mltshp-cdn.com/static/images/icon_plus.svg?v=dabd5508e1560e2bdcc7356c85ea8f10"
											width="12"
											height="12"
											border="0"
											valign="center"
									/></a>
								</h4>
								<form>
									<a
										href="#"
										class="submit-form btn btn-secondary btn-pastel btn-small"
										>+ Follow</a
									>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="body">
				<ul class="find-shakes-navigation">
					<li class="selected"><a href="#">Group Shakes</a></li>
					<li><a href="#">People</a></li>
				</ul>
				<div class="featured-shakes">
					<h3>Featured Picks</h3>
					<ul>
						<li>
							<a href="#"
								><img
									src="https://mltshp-cdn.com/s3/account/951/shake_dontdead.jpg"
							/></a>
							<h4><a href="#">DON’T DEAD OPEN INSIDE</a></h4>
							<p>
								For all the misbegotten signmaking, typesetting and text-display
								disasters that lead to delightful confusion.
							</p>
						</li>
						<li>
							<a href="#"
								><img
									src="https://mltshp-cdn.com/s3/account/355/shake_covid.jpg"
							/></a>
							<h4><a href="#">COVID</a></h4>
							<p>Let’s all social distance!</p>
						</li>
						<li>
							<a href="#"
								><img
									src="https://mltshp-cdn.com/s3/account/2167/shake_fordad.jpg"
							/></a>
							<h4><a href="#">Hilarious and/or Awesome Things for Dad</a></h4>
							<p>
								This shake is for pictures, gifs and videos of animals and
								humans being hilarious and/or awesome. Rated PG.
							</p>
						</li>
					</ul>
				</div>
				<div class="shake-categories">
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#"
								>Animals &amp; Other Cute Stuff</a
							>
						</h4>
						<div class="shake-category-body"></div>
					</div>
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#">Art &amp; Design</a>
						</h4>
						<div class="shake-category-body"></div>
					</div>
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#">Beauty &amp; Fashion</a>
						</h4>
						<div class="shake-category-body"></div>
					</div>
					<div class="shake-category shake-category-selected">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#">Books</a>
						</h4>
						<div class="shake-category-body">
							<div class="friend">
								<div class="user-follow user-follow-extended">
									<a class="icon" href="#">
										<img
											class="avatar--img"
											src="https://mltshp-cdn.com/s3/account/2309/shake_bookcovers_small.jpg"
											width="50"
											height="50"
										/>
									</a>
									<div class="follow">
										<div class="details">
											<h4><a href="#">Book Covers</a></h4>
											<p class="about">Judge them. Or don’t.</p>
										</div>
										<form>
											<a
												href="#"
												class="submit-form btn btn-secondary btn-pastel btn-small"
												>+ Follow</a
											>
										</form>
									</div>
								</div>
							</div>
							<div class="friend">
								<div class="user-follow user-follow-extended">
									<a class="icon" href="#">
										<img
											class="avatar--img"
											src="https://mltshp-cdn.com/s3/account/417/shake_librarian_small.jpg"
											width="50"
											height="50"
										/>
									</a>
									<div class="follow">
										<div class="details">
											<h4><a href="#">librariana</a></h4>
											<p class="about">
												Who doesn’t love libraries? This is about books and
												libraries and the people who love them.
											</p>
										</div>
										<form>
											<a
												href="#"
												class="submit-form btn btn-secondary btn-pastel btn-small"
												>+ Follow</a
											>
										</form>
									</div>
								</div>
							</div>
							<div class="friend">
								<div class="user-follow user-follow-extended">
									<a class="icon" href="#">
										<img
											class="avatar--img"
											src="https://mltshp-cdn.com/s3/account/3/shake_library_small.jpg"
											width="50"
											height="50"
										/>
									</a>
									<div class="follow">
										<div class="details">
											<h4><a href="#">Library</a></h4>
											<p class="about">
												It smells like dusty books in here. Photo by Bu on
												Flickr http://bit.ly/k9MaLf
											</p>
										</div>
										<form>
											<a
												href="#"
												class="submit-form btn btn-secondary btn-pastel btn-small"
												>+ Follow</a
											>
										</form>
									</div>
								</div>
							</div>
							<div class="friend">
								<div class="user-follow user-follow-extended">
									<a class="icon" href="#">
										<img
											class="avatar--img"
											src="https://mltshp-cdn.com/s3/account/844/shake_thedarktower_small.jpg"
											width="50"
											height="50"
										/>
									</a>
									<div class="follow">
										<div class="details">
											<h4><a href="#">The Dark Tower</a></h4>
											<p class="about">
												Art from Stephen King’s The Dark Tower series.
											</p>
										</div>
										<form>
											<a
												href="#"
												class="submit-form btn btn-secondary btn-pastel btn-small"
												>+ Follow</a
											>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#">Cities</a>
						</h4>
						<div class="shake-category-body"></div>
					</div>
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#"
								>Conceptual (and at times a bit strange)</a
							>
						</h4>
						<div class="shake-category-body"></div>
					</div>
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#">Food</a>
						</h4>
						<div class="shake-category-body"></div>
					</div>
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#">Funny / LOL / Meme</a>
						</h4>
						<div class="shake-category-body"></div>
					</div>
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#">Games</a>
						</h4>
						<div class="shake-category-body"></div>
					</div>
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#"
								>Homes &amp; Interiors</a
							>
						</h4>
						<div class="shake-category-body"></div>
					</div>
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#">MLTSHP Related</a>
						</h4>
						<div class="shake-category-body"></div>
					</div>
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#">Music</a>
						</h4>
						<div class="shake-category-body"></div>
					</div>
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#">Nature</a>
						</h4>
						<div class="shake-category-body"></div>
					</div>
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#">Pop Culture</a>
						</h4>
						<div class="shake-category-body"></div>
					</div>
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#">Religion</a>
						</h4>
						<div class="shake-category-body"></div>
					</div>
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#">Science!</a>
						</h4>
						<div class="shake-category-body"></div>
					</div>
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#">Sports</a>
						</h4>
						<div class="shake-category-body"></div>
					</div>
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#"
								>Tech, Gadgets &amp; Geekery</a
							>
						</h4>
						<div class="shake-category-body"></div>
					</div>
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#">Transportation</a>
						</h4>
						<div class="shake-category-body"></div>
					</div>
					<div class="shake-category">
						<h4 class="category-title">
							<a class="shake-category-toggle" href="#">TV &amp; Movies</a>
						</h4>
						<div class="shake-category-body"></div>
					</div>
				</div>
				<p class="shake-tips">
					Got a great shake? Let us know about it! Send an email to
					<a href="#">hello@mltshp.com</a>.
				</p>
			</div>
		</div>
	</div>
</div>

Find People

<div class="page">
	<div class="wrapper">
		<div
			class="content content-with-sidebar content-with-sidebar-reversed content-find-shakes"
		>
			<div class="header">
				<h1>Find Shakes to Follow</h1>
			</div>
			<div class="sidebar">
				<div class="good-folk-block">
					<h3>Some Good Folks</h3>
					<div class="good-folk-block-content">
						<p>People who posted files you’ve liked.</p>
						<div class="user-follow">
							<a class="icon" href="#">
								<img
									class="avatar--img"
									src="https://mltshp-cdn.com/s3/account/6222/profile.jpg"
									width="50"
									height="50"
								/>
							</a>
							<div class="follow">
								<h4><a href="#">Jay Fallon</a></h4>
								<form>
									<a
										href="#"
										class="submit-form btn btn-secondary btn-pastel btn-small"
										>+ Follow</a
									>
								</form>
							</div>
						</div>
						<div class="user-follow">
							<a class="icon" href="#">
								<img
									class="avatar--img"
									src="https://mltshp-cdn.com/s3/account/1141/profile.jpg"
									width="50"
									height="50"
								/>
							</a>
							<div class="follow">
								<h4>
									<a href="#">Dr. Butts Manly</a>
									<a href="#"
										><img
											alt="pro"
											src="https://mltshp-cdn.com/static/images/icon_plus.svg?v=dabd5508e1560e2bdcc7356c85ea8f10"
											width="12"
											height="12"
											border="0"
											valign="center"
									/></a>
								</h4>
								<form>
									<a
										href="#"
										class="submit-form btn btn-secondary btn-pastel btn-small"
										>+ Follow</a
									>
								</form>
							</div>
						</div>
						<div class="user-follow">
							<a class="icon" href="#">
								<img
									class="avatar--img"
									src="https://mltshp-cdn.com/s3/account/123/profile.jpg"
									width="50"
									height="50"
								/>
							</a>
							<div class="follow">
								<h4>
									<a href="#">Mazen Kerbaj</a>
									<a href="#"
										><img
											alt="pro"
											src="https://mltshp-cdn.com/static/images/icon_plus.svg?v=dabd5508e1560e2bdcc7356c85ea8f10"
											width="12"
											height="12"
											border="0"
											valign="center"
									/></a>
								</h4>
								<form>
									<a
										href="#"
										class="submit-form btn btn-secondary btn-pastel btn-small"
										>+ Follow</a
									>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="body">
				<ul class="find-shakes-navigation">
					<li><a href="#">Group Shakes</a></li>
					<li class="selected"><a href="#">People</a></li>
				</ul>
				<div class="friend">
					<div class="user-follow user-follow-extended">
						<a class="icon" href="#">
							<img
								class="avatar--img"
								src="https://mltshp-cdn.com/s3/account/686/profile.jpg"
								width="50"
								height="50"
							/>
						</a>
						<div class="follow">
							<div class="details">
								<h4><a href="#">keli</a></h4>
								<p class="about">keli almost everywhere</p>
								<p class="website"></p>
							</div>
							<form>
								<a
									href="#"
									class="submit-form btn btn-secondary btn-pastel btn-small"
									>+ Follow</a
								>
							</form>
						</div>
					</div>
				</div>
				<div class="friend">
					<div class="user-follow user-follow-extended">
						<a class="icon" href="#">
							<img
								class="avatar--img"
								src="https://mltshp-cdn.com/s3/account/2/profile.jpg"
								width="50"
								height="50"
							/>
						</a>
						<div class="follow">
							<div class="details">
								<h4>
									<a href="#">Andre Torrez</a>
									<a href="#" title="upgraded their account!"
										><img
											alt="pro"
											src="https://mltshp-cdn.com/static/images/icon_plus.svg?v=dabd5508e1560e2bdcc7356c85ea8f10"
											width="12"
											height="12"
											border="0"
											valign="center"
									/></a>
								</h4>
								<p class="about">I am very excited to work here.</p>
								<p class="website">
									<a href="#" rel="nofollow" target="_blank"
										>http://torrez.org</a
									>
								</p>
							</div>
							<form>
								<a
									href="#"
									class="submit-form btn btn-warning btn-pastel btn-small"
									>- Unfollow</a
								>
							</form>
						</div>
					</div>
				</div>
				<div class="friend">
					<div class="user-follow user-follow-extended">
						<a class="icon" href="#">
							<img
								class="avatar--img"
								src="https://mltshp-cdn.com/s3/account/71/profile.jpg"
								width="50"
								height="50"
							/>
						</a>
						<div class="follow">
							<div class="details">
								<h4>
									<a href="#">Matt Jacobs</a>
									<a href="#" title="upgraded their account!"
										><img
											alt="pro"
											src="https://mltshp-cdn.com/static/images/icon_plus.svg?v=dabd5508e1560e2bdcc7356c85ea8f10"
											width="12"
											height="12"
											border="0"
											valign="center"
									/></a>
								</h4>
								<p class="about">
									I’m a designer, product manager, and professional favoriter.
								</p>
								<p class="website">
									<a href="#" rel="nofollow" target="_blank"
										>http://capndesign.com</a
									>
								</p>
							</div>
							<form>
								<a
									href="#"
									class="submit-form btn btn-secondary btn-pastel btn-small"
									>+ Follow</a
								>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>