<!--------------------------------
B. TIMELINE SNIPPET [ F2U ]
--------------------------------->
<div class="container">
<!-- PHONE -->
<div class="card pt-3 pb-2 bg-dark col-md-6 col-12 mx-auto">
<!-- SCREEN -->
<div class="card p-3 bg-secondary border-0" style="height:500px; overflow:auto;">
<!-- POST; START -->
<div class="card bg-dark p-2 mx-auto">
<!-- POSTER INFO -->
<div class="row no-gutters">
<!-- ICON -->
<div class="card border-0 bg-dark" style="height:50px; width:50px; border-radius:100%; background-image:url(https://via.placeholder.com/50.png); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
<!-- NAME -->
<div class="card mr-1 border-0 pl-2 pr-2 justify-content-center text-white" style="background-color:rgba(0,0,0,0); font-size:16px;"><b>FIRST NAME</b></div>
<!-- TIME POSTED -->
<div class="card border-0 justify-content-center text-secondary" style="background-color:rgba(0,0,0,0); font-size:12px;"><i>MM/DD/YYYY</i></div>
</div>
<!-- POST -->
<div class="card mt-2 mb-2 pl-2 pr-2 border-0 rounded-0 text-white" style="background-color:rgba(0,0,0,0); max-height:150px; overflow:auto; font-size:14px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum massa risus, vel sodales lectus porttitor vel.</p>
</div>
<!-- LIKES + COMMENTS -->
<div class="row no-gutters text-secondary">
<!-- LIKE SYMBOL; To change to a full heart, replace fal with fas and add "text-primary" to class. -->
<div class="card p-1 justify-content-center border-0" style="background-color:rgba(0,0,0,0);">
<i class="fal fa-heart" style="font-size:20px;"></i>
</div>
<!-- LIKE NUMBER -->
<div class="card p-1 mr-2 justify-content-center border-0" style="background-color:rgba(0,0,0,0);">0</div>
<!-- COMMENT SYMBOL -->
<div class="card p-1 justify-content-center border-0" style="background-color:rgba(0,0,0,0);">
<i class="fal fa-comment" style="font-size:20px;"></i>
</div>
<!-- COMMENT NUMBER -->
<div class="card p-1 justify-content-center border-0" style="background-color:rgba(0,0,0,0);">0</div>
</div>
</div>
<!-- POST; END -->
<br>
<!-- POST; START -->
<div class="card bg-dark p-2 mx-auto">
<!-- POSTER INFO -->
<div class="row no-gutters">
<!-- ICON -->
<div class="card border-0 bg-dark" style="height:50px; width:50px; border-radius:100%; background-image:url(https://via.placeholder.com/50.png); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
<!-- NAME -->
<div class="card mr-1 border-0 pl-2 pr-2 justify-content-center text-white" style="background-color:rgba(0,0,0,0); font-size:16px;"><b>NAME</b></div>
<!-- TIME POSTED -->
<div class="card border-0 justify-content-center text-secondary" style="background-color:rgba(0,0,0,0); font-size:12px;"><i>MM/DD/YYYY</i></div>
</div>
<!-- POST -->
<div class="card mt-2 mb-2 pl-2 pr-2 border-0 rounded-0 text-white" style="background-color:rgba(0,0,0,0); max-height:150px; overflow:auto; font-size:14px;">
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque in nisl et massa interdum tincidunt quis pulvinar libero. In hac habitasse platea dictumst. Aenean mattis sollicitudin tempor.
<br>Donec sit amet tortor ornare, dignissim neque ut, luctus libero. Phasellus sed mauris dui. Maecenas iaculis lacus ac est dictum aliquet. Pellentesque ornare nulla vel arcu porttitor, non vestibulum nisl porta. Fusce semper pulvinar ipsum, eget condimentum diam aliquam sed. Donec congue efficitur nisl. In hendrerit nulla vel leo tincidunt vestibulum.</p>
</div>
<!-- LIKES + COMMENTS -->
<div class="row no-gutters text-secondary">
<!-- LIKE SYMBOL; To change to an empty heart, replace fas with fal and remove "text-primary" from class. -->
<div class="card p-1 justify-content-center border-0" style="background-color:rgba(0,0,0,0);">
<i class="fas fa-heart text-primary" style="font-size:20px;"></i>
</div>
<!-- LIKE NUMBER -->
<div class="card p-1 mr-2 justify-content-center border-0" style="background-color:rgba(0,0,0,0);">0</div>
<!-- COMMENT SYMBOL -->
<div class="card p-1 justify-content-center border-0" style="background-color:rgba(0,0,0,0);">
<i class="fal fa-comment" style="font-size:20px;"></i>
</div>
<!-- COMMENT NUMBER -->
<div class="card p-1 justify-content-center border-0" style="background-color:rgba(0,0,0,0);">0</div>
</div>
</div>
<!-- POST; END -->
</div>
<div class="mx-auto mt-2"><i class="fas fa-circle fa-2x text-white"></i></div>
</div>
</div>
