reddit toyhou.se code

<!--
REDDIT HTML by https://toyhou.se/~starsailor

i'd love to see it if you use it! leave me a comment :-)
go here for copy/pastable snippets to help build it!
https://toyhou.se/17410614.-code-reddit-aita/17410846.copy-paste-resources

UPVOTED ARROW: <h2><i class="fa fa-up" style="color:#ff4500"></i></h2>
DOWNVOTED ARROW: <h2><i class="fa fa-down" style="color:#7193ff;"></i></h2>
-->

<div class="container">

    <div class="card bg-faded mb-1"> <!-- original post -->
        <div class="row py-1 pr-2 pl-1">
            <div class="d-flex flex-row">
              <div class="p ml-3" align="center">
                  <h1><i class="fa-light fa-up text-muted"></i></h1>
                <h6>1.2k</h6>
                <h1><i class="fa-light fa-down text-muted"></i></h1>
              </div>
              <div class="p-2">
                <span class="text-muted">Posted by u/username in r/subreddit 1 week ago
                    <img src="https://www.redditstatic.com/gold/awards/icon/platinum_32.png" style="height:20px">2
                    <img src="https://www.redditstatic.com/gold/awards/icon/gold_32.png" style="height:20px">3
                    <img src="https://preview.redd.it/award_images/t5_q0gj4/ks45ij6w05f61_oldHugz.png?width=32&height=32&auto=webp&s=50f2f16e71d2929e3d7275060af3ad6b851dbfb1" style="height:20px">
                </span>
                <h1><b>AITA for whaever?</b></h1>

                <div class="card border-0 rounded font-weight-bold mb-1" style="width:70px; background-color:#B8001F; color:white;" align="center">Asshole</div>

                <div class="card border-0 rounded font-weight-bold mb-1" style="width:115px; background-color:#7193FF; color:white;" align="center">Not the A-hole</div>

                <div class="card border-0 rounded font-weight-bold mb-1" style="width:115px; background-color:#CC3600; color:white;" align="center">Everyone Sucks</div>

                <div class="card border-0 rounded font-weight-bold mb-1" style="width:120px; background-color:#7193FF; color:white;" align="center">No A-holes here</div>

                <p>text text text</p>
                <p>text text text</p>
                <div class="row text-muted pr-2 py-2">
                    <div class="col">
                        <div class="d-flex pb-1">
                            <span class="mr-auto pr-3">
                                <i class="fa-regular fa-message"></i> 123 comments
                                <i class="fa-regular fa-share pl-3"></i> Share
                                <i class="fa-regular fa-bookmark pl-3"></i> Bookmark
                                <i class="fa-regular fa-eye-slash pl-3"></i> Hide
                                <i class="fa-regular fa-flag pl-3"></i> Report
                            </span>
                            <span>69% Upvoted</span>
                        </div>

                    </div>
                </div>
            </div>
            </div>
        </div>
    </div> <!-- end original post -->


    <div class="card bg-faded mb-1">
        <div class="row py-1 pr-2 pl-1">
            <div class="d-flex flex-row">
                <div class="p-2"> <!-- side line -->
                    <div class="card card-outline-secondary bg:text-muted h-100 w-15 ml-4" style="width:0"></div>
                </div>
                <div class="p-2"> <!-- comment -->
                    <div class="d-flex flex-row">
                        <p><b>username</b></p>
                        <p><span class="text-muted pl-2"> · 6 days ago
                        </span></p>
                    </div>
                    comment
                    <div class="d-flex flex-row pt-2"> <!-- bottom bar -->
                        <p>
                            <h2><i class="fa-light fa-up text-muted"></i></h2>
                        </p>
                        <p class="px-1"><b>6</b></p>
                        <p>
                            <h2><i class="fa-light fa-down text-muted"></i></h2>
                        </p>
                        <p class="text-muted pl-2">Share</p>
                        <p class="text-muted pl-2">Report</p>
                        <p class="text-muted pl-2">Save</p>
                        <p class="text-muted pl-2">Follow</p>
                    </div>

                    <!-- put replies/"continue this thread" here -->
                    <div class="d-flex flex-row">
                        <div class="p-2"> <!-- side line -->
                            <div class="card card-outline-secondary bg:text-muted h-100 w-15 ml-4" style="width:0"></div>
                        </div>
                        <div class="p-2"> <!-- comment -->
                            <div class="d-flex flex-row">
                                <p><b>originalposter</b></p>
                                <p class="pl-1 text-primary"><b>OP</b></p>
                                <p><span class="text-muted pl-2"> · 4 days ago
                                    <!-- put badges here -->
                                </span></p>
                            </div>
                            comment from op
                            <div class="d-flex flex-row pt-2"> <!-- bottom bar -->
                                <p>
                                    <h2><i class="fa-light fa-up text-muted"></i></h2>
                                </p>
                                <p class="px-1"><b>3</b></p>
                                <p>
                                    <h2><i class="fa-light fa-down text-muted"></i></h2>
                                </p>
                                <p class="text-muted pl-2">Share</p>
                                <p class="text-muted pl-2">Report</p>
                                <p class="text-muted pl-2">Save</p>
                                <p class="text-muted pl-2">Follow</p>
                            </div>


                        </div>
                    </div>

                </div>
            </div>


        </div>

    </div>

    <!-- credit - do not delete! <3-->
    <div class="pull-right">
        <a href="https://toyhou.se/17410614.-code-reddit-aita" class="far fa-code" data-toggle="tooltip" title="code by starsailor" data-original-title="code by starsailor"></a>
    </div> <!-- credit end -->

</div>