Twitter Tutorial
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
>
<a href="#" role="button" class="btn btn-secondary" id="next_button"
>Next</a
>
</p>
</div>
</div>
</div>