Select All
<!DOCTYPE HTML>
<!--Rules:
Cozy Board (literature/gimick code)
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, Post headers: bg-primary
- Banner text: #ffffff
- Fake links: text-danger
- Post backgrounds: bg-faded
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>
-->
<div class="mx-auto" style="max-width:900px">
<!-- /// Page Header /// -->
<div class="card rounded-0 bg-primary mb-2 p-2" style="min-height:150px;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 bg-faded mb-2 px-2" style="min-height:25px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
<p>
<span class="text-danger">Forums</span> /
<span class="text-danger">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 bg-faded mb-2" style="min-height:200px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
<!--Post info-->
<div class="bg-primary d-flex flex-wrap px-2" style="color:#ffffff;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">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">
</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">
<p>"Forum Signature"</p>
<!--fake interaction buttons-->
<p style="text-align:right">
<span class="text-danger">Reply</span> /
<span class="text-danger">Quote</span> /
<span class="text-danger">Report</span>
</p>
</div>
</div>
</div>
</div>
<!-- /// End Post 1 /// -->
<!-- /// Post 2 /// -->
<div class="card rounded-0 bg-faded mb-2" style="min-height:200px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
<div class="bg-primary d-flex flex-wrap px-2" style="color:#ffffff;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">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">
</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">
<p>"Forum Signature"</p>
<!--fake interaction buttons-->
<p style="text-align:right">
<span class="text-danger">Reply</span> /
<span class="text-danger">Quote</span> /
<span class="text-danger">Report</span>
</p>
</div>
</div>
</div>
</div>
<!-- /// End Post 2 /// -->
<!-- /// Post 3 /// -->
<div class="card rounded-0 bg-faded mb-2" style="min-height:200px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
<div class="bg-primary d-flex flex-wrap px-2" style="color:#ffffff;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">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">
</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 ">
<p>Originally posted by
<span class="text-danger">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">
<p>"Forum Signature"</p>
<!--fake interaction buttons-->
<p style="text-align:right">
<span class="text-danger">Reply</span> /
<span class="text-danger">Quote</span> /
<span class="text-danger">Report</span>
</p>
</div>
</div>
</div>
</div>
<!-- /// End Post 3 /// -->
<!-- /// Post 4 /// -->
<div class="card rounded-0 bg-faded mb-2" style="min-height:200px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
<div class="bg-primary d-flex flex-wrap px-2" style="color:#ffffff;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">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">
</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">
<p>"Forum Signature"</p>
<!--fake interaction buttons-->
<p style="text-align:right">
<span class="text-danger">Reply</span> /
<span class="text-danger">Quote</span> /
<span class="text-danger">Report</span>
</p>
</div>
</div>
</div>
</div>
<!-- /// End Post 4 /// -->
<!-- /// Thread footer /// -->
<div class="card rounded-0 bg-faded mb-2 px-2" style="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 style="text-align:right">
<a href="https://toyhou.se/20859790" data-toggle="tooltip" data-placement="bottom" title="HTML by Jade-Everstone"><i class="fa-duotone fa-code"></i> <i class="fa-duotone fa-heart"></i></a>
</div>
</div>
Manual Select
<!DOCTYPE HTML>
<!--Rules:
Cozy Board (literature/gimick code)
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, Post headers: bg-primary
- Banner text: #ffffff
- Fake links: text-danger
- Post backgrounds: bg-faded
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>
-->
<div class="mx-auto" style="max-width:900px">
<!-- /// Page Header /// -->
<div class="card rounded-0 bg-primary mb-2 p-2" style="min-height:150px;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 bg-faded mb-2 px-2" style="min-height:25px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
<p>
<span class="text-danger">Forums</span> /
<span class="text-danger">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 bg-faded mb-2" style="min-height:200px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
<!--Post info-->
<div class="bg-primary d-flex flex-wrap px-2" style="color:#ffffff;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">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">
</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">
<p>"Forum Signature"</p>
<!--fake interaction buttons-->
<p style="text-align:right">
<span class="text-danger">Reply</span> /
<span class="text-danger">Quote</span> /
<span class="text-danger">Report</span>
</p>
</div>
</div>
</div>
</div>
<!-- /// End Post 1 /// -->
<!-- /// Post 2 /// -->
<div class="card rounded-0 bg-faded mb-2" style="min-height:200px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
<div class="bg-primary d-flex flex-wrap px-2" style="color:#ffffff;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">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">
</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">
<p>"Forum Signature"</p>
<!--fake interaction buttons-->
<p style="text-align:right">
<span class="text-danger">Reply</span> /
<span class="text-danger">Quote</span> /
<span class="text-danger">Report</span>
</p>
</div>
</div>
</div>
</div>
<!-- /// End Post 2 /// -->
<!-- /// Post 3 /// -->
<div class="card rounded-0 bg-faded mb-2" style="min-height:200px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
<div class="bg-primary d-flex flex-wrap px-2" style="color:#ffffff;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">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">
</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 ">
<p>Originally posted by
<span class="text-danger">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">
<p>"Forum Signature"</p>
<!--fake interaction buttons-->
<p style="text-align:right">
<span class="text-danger">Reply</span> /
<span class="text-danger">Quote</span> /
<span class="text-danger">Report</span>
</p>
</div>
</div>
</div>
</div>
<!-- /// End Post 3 /// -->
<!-- /// Post 4 /// -->
<div class="card rounded-0 bg-faded mb-2" style="min-height:200px;box-shadow:2px 2px 3px rgba(0,0,0,0.25)">
<div class="bg-primary d-flex flex-wrap px-2" style="color:#ffffff;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">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">
</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">
<p>"Forum Signature"</p>
<!--fake interaction buttons-->
<p style="text-align:right">
<span class="text-danger">Reply</span> /
<span class="text-danger">Quote</span> /
<span class="text-danger">Report</span>
</p>
</div>
</div>
</div>
</div>
<!-- /// End Post 4 /// -->
<!-- /// Thread footer /// -->
<div class="card rounded-0 bg-faded mb-2 px-2" style="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 style="text-align:right">
<a href="https://toyhou.se/20859790" data-toggle="tooltip" data-placement="bottom" title="HTML by Jade-Everstone"><i class="fa-duotone fa-code"></i> <i class="fa-duotone fa-heart"></i></a>
</div>
</div>