Special patterns and chunks of style for the Twitter Tutorial page.

This page is a JS-driven carousel.

Twitter Tutorial

<div class="page">
	<div class="wrapper">
		<div class="content content-narrow">
			<h1>Using Twitter with MLTSHP</h1>

			<div class="steps" id="step-1">
				<p>
					Note: Twitter app doesn‘t do this anymore but apps like Tweetbot do.
				</p>
				<p>Tap your user avatar at the top left</p>
				<p>
					<img
						src="https://mltshp-cdn.com/static/images/twitter1.png"
						width="320"
						height="568"
					/>
				</p>
			</div>

			<div class="steps" id="step-2" style="display: inline">
				<p>Tap the gear icon at the bottom to open the settings</p>
				<p>
					<img
						src="https://mltshp-cdn.com/static/images/twitter2.png"
						width="320"
						height="568"
					/>
				</p>
			</div>

			<div class="steps" id="step-3">
				<p>Tap on your user account settings (personal name)</p>
				<p>
					<img
						src="https://mltshp-cdn.com/static/images/twitter3.png"
						width="320"
						height="568"
					/>
				</p>
			</div>

			<div class="steps" id="step-4">
				<p>Tap on Image Upload</p>
				<p>
					<img
						src="https://mltshp-cdn.com/static/images/twitter4.png"
						width="320"
						height="568"
					/>
				</p>
			</div>

			<div class="steps" id="step-5">
				<p>Tap on Custom</p>
				<p>
					<img
						src="https://mltshp-cdn.com/static/images/twitter5.png"
						width="320"
						height="568"
					/>
				</p>
			</div>

			<div class="steps" id="step-6">
				<p>Enter the MLTSHP upload URL and tap Done</p>
				<p>
					<img
						src="https://mltshp-cdn.com/static/images/twitter6.png"
						width="320"
						height="568"
					/>
				</p>
			</div>

			<p style="text-align: center">
				<a href="#" role="button" class="btn btn-secondary" id="previous_button"
					>Previous</a
				>&nbsp;&nbsp;
				<a href="#" role="button" class="btn btn-secondary" id="next_button"
					>Next</a
				>
			</p>
		</div>
	</div>
</div>