[f2u] Cozy Board (code - cc)

somnacanth

Profile


Select All

<!DOCTYPE HTML>
 
<!--Rules:
 
Cozy Board (literature/gimick code) custom colors vers.
 
You may 
-frankenstein with other codes (as long as the creator of said code allows it)
-edit/change as much as you need (example: making character codes into user codes, vice-versa)
 
You may not
-Redistribute, resell, and/or claim its yours
-Remove credit (you're allowed to move & edit it though, just keep it visible)
 
Misc Notes:
-When editing, remember to turn WYSIWYG off! My codes may break otherwise
-Some basic html knowledge is recommended for editing
 
Default Colors:
 - Forum banner placeholder, #a178c6
 - text: #ffffff
 - Real Links: #dfb36b
 - Fake links: #db8b4d
 - Post backgrounds: #1d1a2c
 - card borders: #3e3957
 - quote backgrounds: #2c2741
 
Change the colors: Ctrl+f and search for the color you want to change. 
 
 <div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background: url("image") repeat center; width: 100%; z-index: -1;'>.</div>
 
-->
 
<!--optional background (for gimick reasons)
    if using remember to set important text on a div with a background for visibility!-->
<div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background: url("https://images.pexels.com/photos/7736150/pexels-photo-7736150.jpeg") repeat center; background-size:contain; width: 100%; z-index: -1;'>.</div>
 
<div class="mx-auto" style="max-width:900px">
    
    <!-- /// Page Header /// -->
    
    <div class="card rounded-0 mb-2 p-2" style="min-height:150px;background-color:#a178c6;border-color:#3e3957;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
        <span style="color:#ffffff;font-size:3.5em;">The Cozy Board</span>
    </div>
    
    <!--mock forum directory-->
    <div class="card rounded-0 mb-2 px-2" style="background-color:#1d1a2c;border-color:#3e3957;color:#ffffff;min-height:25px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
        <p>
            <span style="color:#db8b4d">Forums</span> / 
            <span style="color:#db8b4d">Board</span> / 
            Sample Topic
            <br>
            <span style="font-size:1.75em">Sample Topic (emphasized)</span>
        </p>
    </div>
    
    <!-- /// End Page Header /// -->
    
    
    <!-- /// Post 1 /// -->
    <div class="card rounded-0 mb-2" style="background-color:#1d1a2c;border-color:#3e3957;color:#ffffff;min-height:200px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
        
        <!--Post info-->
        <div class="d-flex flex-wrap px-2" style="color:#ffffff;background-color:#a178c6;min-height:25px">
            <span>Author - Post date: 1st, January 20XX</span>
            <span class="ml-auto"> #1</span>
        </div>
        
        <div class="row">
            
            <!--user info-->
            <div class="col-lg-3">
                <div class="p-2" style="max-width:350px">
                    
                    <!--This section can be swapped out to anything; forum badges, 'socials', quotes, etc. -->
                    <a href="#" style="font-size:1.25em;font-weight:bold;color:#dfb36b">Member name</a><br>
                    <span>Member status</span>
                    
                    <!--Placeholder div - If you're swapping with an image, i recommend keeping it at a small size like 120x120-->
                    <div class="bg-secondary my-2" style="height:120px;width:120px;
                        background-image:url('oc-pfp');
                        background-size:cover;
                        background-position:center;"></div>
                    
                    <span>Post Count: #0000</span><br>
                    <span>Joined: 1st, January 20XX</span><br>
                    <span>Pro/nouns</span><br>
                    
                    <hr class="my-2 d-block d-lg-none" style="border-color:#3e3957;">
                    
                </div>
            </div>
            
            <!--post content-->
            <div class="col-lg-9 d-flex flex-wrap">
                <div class="p-2">
                    
                    <p>Hey gamers did you know: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                </div>
                <div class="p-2 mt-auto w-100">
                    
                    <!--Forum signature-->
                    <hr class="my-2"  style="border-color:#3e3957;">
                    <p>"Forum Signature"</p>
                    
                    <!--fake interaction buttons-->
                    <p style="text-align:right">
                        <span style="color:#db8b4d">Reply</span> / 
                        <span style="color:#db8b4d">Quote</span> / 
                        <span style="color:#db8b4d">Report</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- /// End Post 1 /// -->
    
    
    <!-- /// Post 2 /// -->
    <div class="card rounded-0 mb-2" style="background-color:#1d1a2c;border-color:#3e3957;color:#ffffff;min-height:200px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
        <div class="d-flex flex-wrap px-2" style="color:#ffffff;background-color:#a178c6;min-height:25px">
            
            <!--post info-->
            <span>Post date: 1st, January 20XX</span>
            <span class="ml-auto"> #2</span>
            
        </div>
        <div class="row">
            
            <!--User info-->
            <div class="col-lg-3">
                <div class="p-2" style="max-width:350px">
                    
                    <a href="#" style="font-size:1.25em;font-weight:bold;color:#dfb36b">Member name</a><br>
                    <span>Member status</span>
                    
                    <div class="bg-secondary my-2" style="height:120px;width:120px;
                        background-image:url('oc-pfp');
                        background-size:cover;
                        background-position:center;"></div>
                    
                    <span>Post Count: #0000</span><br>
                    <span>Joined: 1st, January 20XX</span><br>
                    <span>Pro/nouns</span><br>
                    
                    <hr class="my-2 d-block d-lg-none"  style="border-color:#3e3957;">
                    
                </div>
            </div>
            
            
            <!--post content-->
            <div class="col-lg-9 d-flex flex-wrap">
                <div class="p-2">
                    <p>Oh wow that reminds me of when i Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                    
                    <p>It was way back in 19XX. Back when Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                </div>
                <div class="p-2 mt-auto w-100">
                    
                    <!--forum signature-->
                    <hr class="my-2"  style="border-color:#3e3957;">
                    <p>"Forum Signature"</p>
                    
                    <!--fake interaction buttons-->
                    <p style="text-align:right">
                        <span style="color:#db8b4d">Reply</span> / 
                        <span style="color:#db8b4d">Quote</span> / 
                        <span style="color:#db8b4d">Report</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- /// End Post 2 /// -->
    
    
    <!-- /// Post 3 /// -->
    <div class="card rounded-0 mb-2" style="background-color:#1d1a2c;border-color:#3e3957;color:#ffffff;min-height:200px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
        <div class="d-flex flex-wrap px-2" style="color:#ffffff;background-color:#a178c6;min-height:25px">
            
            <!--post info-->
            <span>Post date: 1st, January 20XX</span>
            <span class="ml-auto"> #3</span>
            
        </div>
        <div class="row">
            
            <!--user info-->
            <div class="col-lg-3">
                <div class="p-2" style="max-width:350px">
                    
                    <a href="#" style="font-size:1.25em;font-weight:bold;color:#dfb36b">Member name</a><br>
                    <span>Member status</span>
                    
                    <div class="bg-secondary my-2" style="height:120px;width:120px;
                        background-image:url('oc-pfp');
                        background-size:cover;
                        background-position:center;"></div>
                        
                    <span>Post Count: #0000</span><br>
                    <span>Joined: 1st, January 20XX</span><br>
                    <span>Pro/nouns</span><br>
                    
                    <hr class="my-2 d-block d-lg-none"  style="border-color:#3e3957;">
                    
                </div>
            </div>
            
            <!--post content-->
            <div class="col-lg-9 d-flex flex-wrap">
                <div class="p-2">
                    
                    <!--quote example-->
                    <div class="card rounded-0 p-2 my-2" style="background-color:#2c2741;border-color:#3e3957;color:#ffffff;">
                        <p>Originally posted by 
                        <span style="color:#db8b4d">Member Name</span>:</p>
                        
                        <p>Oh wow that reminds me of when i Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                    </div>
                    
                    <p>Interesting, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                    
                </div>
                <div class="p-2 mt-auto w-100">
                    
                    <!--forum signature-->
                    <hr class="my-2"  style="border-color:#3e3957;">
                    <p>"Forum Signature"</p>
                    
                    <!--fake interaction buttons-->
                    <p style="text-align:right">
                        <span style="color:#db8b4d">Reply</span> / 
                        <span style="color:#db8b4d">Quote</span> / 
                        <span style="color:#db8b4d">Report</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- /// End Post 3 /// -->
    
    
    <!-- /// Post 4 /// -->
    <div class="card rounded-0 mb-2" style="background-color:#1d1a2c;border-color:#3e3957;color:#ffffff;min-height:200px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
        <div class="d-flex flex-wrap px-2" style="color:#ffffff;background-color:#a178c6;min-height:25px">
            
            <!--post info-->
            <span>Post date: 1st, January 20XX</span>
            <span class="ml-auto"> #4</span>
            
        </div>
        <div class="row">
            
            <!--user info-->
            <div class="col-lg-3">
                <div class="p-2" style="max-width:350px">
                    
                    <a href="#" style="font-size:1.25em;font-weight:bold;color:#dfb36b">Member name</a><br>
                    <span>Member status</span>
                    
                    <div class="bg-secondary my-2" style="height:120px;width:120px;
                        background-image:url('oc-pfp');
                        background-size:cover;
                        background-position:center;"></div>
                        
                    <span>Post Count: #0000</span><br>
                    <span>Joined: 1st, January 20XX</span><br>
                    <span>Pro/nouns</span><br>
                    
                    <hr class="my-2 d-block d-lg-none" style="border-color:#3e3957;">
                    
                </div>
            </div>
            
            <!--post content-->
            <div class="col-lg-9 d-flex flex-wrap">
                <div class="p-2">
                    <p>Spam comment.</p>
                </div>
                
                <div class="p-2 mt-auto w-100">
                    
                    <!--forum signatue-->
                    <hr class="my-2" style="border-color:#3e3957;">
                    <p>"Forum Signature"</p>
                    
                    <!--fake interaction buttons-->
                    <p style="text-align:right">
                        <span style="color:#db8b4d">Reply</span> / 
                        <span style="color:#db8b4d">Quote</span> / 
                        <span style="color:#db8b4d">Report</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- /// End Post 4 /// -->
    
    
    <!-- /// Thread footer /// -->
    <div class="card rounded-0 mb-2 px-2" style="background-color:#1d1a2c;border-color:#3e3957;color:#ffffff;min-height:25px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
        <p>
            You need to log in to post a reply! (or this thread has been locked)
        </p>
    </div>
    <!-- /// End Thread footer /// -->
    
    
    <!--Credit: You may move but please don't remove!-->
    <div class="card rounded-0 mb-2 px-2 ml-auto" style="background-color:#2c2741;border-color:#3e3957;color:#ffffff;min-height:25px;box-shadow:2px 2px 3px rgba(0,0,0,0.25);text-align:center;width:90px">
        <span>
            <a href="https://toyhou.se/20859790" data-toggle="tooltip" data-placement="bottom" title="HTML by Jade-Everstone" style="color:#dfb36b"><i class="fa-solid fa-code"></i> <i class="fa-solid fa-heart"></i></a> / 
            
            <a href="https://www.pexels.com/photo/constellation-in-dark-night-sky-7736150/" target="_blank" data-toggle="tooltip" data-placement="bottom" title="BG - Pexels" style="color:#dfb36b"><i class="fa-solid fa-image"></i></a>
        </span>
    </div>
    
    
</div>

Manual Select

<!DOCTYPE HTML>
 
<!--Rules:
 
Cozy Board (literature/gimick code) custom colors vers.
 
You may 
-frankenstein with other codes (as long as the creator of said code allows it)
-edit/change as much as you need (example: making character codes into user codes, vice-versa)
 
You may not
-Redistribute, resell, and/or claim its yours
-Remove credit (you're allowed to move & edit it though, just keep it visible)
 
Misc Notes:
-When editing, remember to turn WYSIWYG off! My codes may break otherwise
-Some basic html knowledge is recommended for editing
 
Default Colors:
 - Forum banner placeholder, #a178c6
 - text: #ffffff
 - Real Links: #dfb36b
 - Fake links: #db8b4d
 - Post backgrounds: #1d1a2c
 - card borders: #3e3957
 - quote backgrounds: #2c2741
 
Change the colors: Ctrl+f and search for the color you want to change. 
 
 <div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background: url("image") repeat center; width: 100%; z-index: -1;'>.</div>
 
-->
 
<!--optional background (for gimick reasons)
    if using remember to set important text on a div with a background for visibility!-->
<div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background: url("https://images.pexels.com/photos/7736150/pexels-photo-7736150.jpeg") repeat center; background-size:contain; width: 100%; z-index: -1;'>.</div>
 
<div class="mx-auto" style="max-width:900px">
    
    <!-- /// Page Header /// -->
    
    <div class="card rounded-0 mb-2 p-2" style="min-height:150px;background-color:#a178c6;border-color:#3e3957;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
        <span style="color:#ffffff;font-size:3.5em;">The Cozy Board</span>
    </div>
    
    <!--mock forum directory-->
    <div class="card rounded-0 mb-2 px-2" style="background-color:#1d1a2c;border-color:#3e3957;color:#ffffff;min-height:25px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
        <p>
            <span style="color:#db8b4d">Forums</span> / 
            <span style="color:#db8b4d">Board</span> / 
            Sample Topic
            <br>
            <span style="font-size:1.75em">Sample Topic (emphasized)</span>
        </p>
    </div>
    
    <!-- /// End Page Header /// -->
    
    
    <!-- /// Post 1 /// -->
    <div class="card rounded-0 mb-2" style="background-color:#1d1a2c;border-color:#3e3957;color:#ffffff;min-height:200px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
        
        <!--Post info-->
        <div class="d-flex flex-wrap px-2" style="color:#ffffff;background-color:#a178c6;min-height:25px">
            <span>Author - Post date: 1st, January 20XX</span>
            <span class="ml-auto"> #1</span>
        </div>
        
        <div class="row">
            
            <!--user info-->
            <div class="col-lg-3">
                <div class="p-2" style="max-width:350px">
                    
                    <!--This section can be swapped out to anything; forum badges, 'socials', quotes, etc. -->
                    <a href="#" style="font-size:1.25em;font-weight:bold;color:#dfb36b">Member name</a><br>
                    <span>Member status</span>
                    
                    <!--Placeholder div - If you're swapping with an image, i recommend keeping it at a small size like 120x120-->
                    <div class="bg-secondary my-2" style="height:120px;width:120px;
                        background-image:url('oc-pfp');
                        background-size:cover;
                        background-position:center;"></div>
                    
                    <span>Post Count: #0000</span><br>
                    <span>Joined: 1st, January 20XX</span><br>
                    <span>Pro/nouns</span><br>
                    
                    <hr class="my-2 d-block d-lg-none" style="border-color:#3e3957;">
                    
                </div>
            </div>
            
            <!--post content-->
            <div class="col-lg-9 d-flex flex-wrap">
                <div class="p-2">
                    
                    <p>Hey gamers did you know: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                </div>
                <div class="p-2 mt-auto w-100">
                    
                    <!--Forum signature-->
                    <hr class="my-2"  style="border-color:#3e3957;">
                    <p>"Forum Signature"</p>
                    
                    <!--fake interaction buttons-->
                    <p style="text-align:right">
                        <span style="color:#db8b4d">Reply</span> / 
                        <span style="color:#db8b4d">Quote</span> / 
                        <span style="color:#db8b4d">Report</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- /// End Post 1 /// -->
    
    
    <!-- /// Post 2 /// -->
    <div class="card rounded-0 mb-2" style="background-color:#1d1a2c;border-color:#3e3957;color:#ffffff;min-height:200px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
        <div class="d-flex flex-wrap px-2" style="color:#ffffff;background-color:#a178c6;min-height:25px">
            
            <!--post info-->
            <span>Post date: 1st, January 20XX</span>
            <span class="ml-auto"> #2</span>
            
        </div>
        <div class="row">
            
            <!--User info-->
            <div class="col-lg-3">
                <div class="p-2" style="max-width:350px">
                    
                    <a href="#" style="font-size:1.25em;font-weight:bold;color:#dfb36b">Member name</a><br>
                    <span>Member status</span>
                    
                    <div class="bg-secondary my-2" style="height:120px;width:120px;
                        background-image:url('oc-pfp');
                        background-size:cover;
                        background-position:center;"></div>
                    
                    <span>Post Count: #0000</span><br>
                    <span>Joined: 1st, January 20XX</span><br>
                    <span>Pro/nouns</span><br>
                    
                    <hr class="my-2 d-block d-lg-none"  style="border-color:#3e3957;">
                    
                </div>
            </div>
            
            
            <!--post content-->
            <div class="col-lg-9 d-flex flex-wrap">
                <div class="p-2">
                    <p>Oh wow that reminds me of when i Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                    
                    <p>It was way back in 19XX. Back when Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                </div>
                <div class="p-2 mt-auto w-100">
                    
                    <!--forum signature-->
                    <hr class="my-2"  style="border-color:#3e3957;">
                    <p>"Forum Signature"</p>
                    
                    <!--fake interaction buttons-->
                    <p style="text-align:right">
                        <span style="color:#db8b4d">Reply</span> / 
                        <span style="color:#db8b4d">Quote</span> / 
                        <span style="color:#db8b4d">Report</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- /// End Post 2 /// -->
    
    
    <!-- /// Post 3 /// -->
    <div class="card rounded-0 mb-2" style="background-color:#1d1a2c;border-color:#3e3957;color:#ffffff;min-height:200px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
        <div class="d-flex flex-wrap px-2" style="color:#ffffff;background-color:#a178c6;min-height:25px">
            
            <!--post info-->
            <span>Post date: 1st, January 20XX</span>
            <span class="ml-auto"> #3</span>
            
        </div>
        <div class="row">
            
            <!--user info-->
            <div class="col-lg-3">
                <div class="p-2" style="max-width:350px">
                    
                    <a href="#" style="font-size:1.25em;font-weight:bold;color:#dfb36b">Member name</a><br>
                    <span>Member status</span>
                    
                    <div class="bg-secondary my-2" style="height:120px;width:120px;
                        background-image:url('oc-pfp');
                        background-size:cover;
                        background-position:center;"></div>
                        
                    <span>Post Count: #0000</span><br>
                    <span>Joined: 1st, January 20XX</span><br>
                    <span>Pro/nouns</span><br>
                    
                    <hr class="my-2 d-block d-lg-none"  style="border-color:#3e3957;">
                    
                </div>
            </div>
            
            <!--post content-->
            <div class="col-lg-9 d-flex flex-wrap">
                <div class="p-2">
                    
                    <!--quote example-->
                    <div class="card rounded-0 p-2 my-2" style="background-color:#2c2741;border-color:#3e3957;color:#ffffff;">
                        <p>Originally posted by 
                        <span style="color:#db8b4d">Member Name</span>:</p>
                        
                        <p>Oh wow that reminds me of when i Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                    </div>
                    
                    <p>Interesting, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                    
                </div>
                <div class="p-2 mt-auto w-100">
                    
                    <!--forum signature-->
                    <hr class="my-2"  style="border-color:#3e3957;">
                    <p>"Forum Signature"</p>
                    
                    <!--fake interaction buttons-->
                    <p style="text-align:right">
                        <span style="color:#db8b4d">Reply</span> / 
                        <span style="color:#db8b4d">Quote</span> / 
                        <span style="color:#db8b4d">Report</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- /// End Post 3 /// -->
    
    
    <!-- /// Post 4 /// -->
    <div class="card rounded-0 mb-2" style="background-color:#1d1a2c;border-color:#3e3957;color:#ffffff;min-height:200px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
        <div class="d-flex flex-wrap px-2" style="color:#ffffff;background-color:#a178c6;min-height:25px">
            
            <!--post info-->
            <span>Post date: 1st, January 20XX</span>
            <span class="ml-auto"> #4</span>
            
        </div>
        <div class="row">
            
            <!--user info-->
            <div class="col-lg-3">
                <div class="p-2" style="max-width:350px">
                    
                    <a href="#" style="font-size:1.25em;font-weight:bold;color:#dfb36b">Member name</a><br>
                    <span>Member status</span>
                    
                    <div class="bg-secondary my-2" style="height:120px;width:120px;
                        background-image:url('oc-pfp');
                        background-size:cover;
                        background-position:center;"></div>
                        
                    <span>Post Count: #0000</span><br>
                    <span>Joined: 1st, January 20XX</span><br>
                    <span>Pro/nouns</span><br>
                    
                    <hr class="my-2 d-block d-lg-none" style="border-color:#3e3957;">
                    
                </div>
            </div>
            
            <!--post content-->
            <div class="col-lg-9 d-flex flex-wrap">
                <div class="p-2">
                    <p>Spam comment.</p>
                </div>
                
                <div class="p-2 mt-auto w-100">
                    
                    <!--forum signatue-->
                    <hr class="my-2" style="border-color:#3e3957;">
                    <p>"Forum Signature"</p>
                    
                    <!--fake interaction buttons-->
                    <p style="text-align:right">
                        <span style="color:#db8b4d">Reply</span> / 
                        <span style="color:#db8b4d">Quote</span> / 
                        <span style="color:#db8b4d">Report</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- /// End Post 4 /// -->
    
    
    <!-- /// Thread footer /// -->
    <div class="card rounded-0 mb-2 px-2" style="background-color:#1d1a2c;border-color:#3e3957;color:#ffffff;min-height:25px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
        <p>
            You need to log in to post a reply! (or this thread has been locked)
        </p>
    </div>
    <!-- /// End Thread footer /// -->
    
    
    <!--Credit: You may move but please don't remove!-->
    <div class="card rounded-0 mb-2 px-2 ml-auto" style="background-color:#2c2741;border-color:#3e3957;color:#ffffff;min-height:25px;box-shadow:2px 2px 3px rgba(0,0,0,0.25);text-align:center;width:90px">
        <span>
            <a href="https://toyhou.se/20859790" data-toggle="tooltip" data-placement="bottom" title="HTML by Jade-Everstone" style="color:#dfb36b"><i class="fa-solid fa-code"></i> <i class="fa-solid fa-heart"></i></a> / 
            
            <a href="https://www.pexels.com/photo/constellation-in-dark-night-sky-7736150/" target="_blank" data-toggle="tooltip" data-placement="bottom" title="BG - Pexels" style="color:#dfb36b"><i class="fa-solid fa-image"></i></a>
        </span>
    </div>
    
    
</div>