Select All
<!DOCTYPE HTML>
<!--Rules:
Traveler (folder vers)
For the Coders Quarters October 2023 challenge
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:
- Photo Borders: #ffffff
- Character Links, Card header: #4f5a3f
- Info/Warning Buttons: #4f5a3f , #c46439
- Pins: #c46439 , #b3cecf
Change the colors: Ctrl+f and search for the color you want to change.
-->
<!-- /// BACKGROUND /// -->
<!--bg image sourced from transparent textures:
(https://www.transparenttextures.com/patterns/axiom-pattern.png)-->
<div style="position:absolute;
top:0px;bottom:0px;
left: 0px;
background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/72565784_TPO2Zi7szDbhC8D.png);
background-position:center;
background-attachment:fixed;
width: 100%;
z-index: -1;">.</div>
<!-- /// END BACKGROUND /// -->
<div class="container" style="max-width:800px">
<!-- /// HEADER/// -->
<div class="row align-items-center">
<!-- /// SIDE IMAGE /// -->
<div class="col-lg-3">
<!--Photo-->
<div class="mb-3" style="height:200px;width:200px;transform:rotate(-5deg);
border-style:solid;border-width:7px 7px 30px;border-color:#ffffff;
margin-left:auto;margin-right:auto;
background-image:url(https://images.unsplash.com/photo-1574260031597-bcd9eb192b4f?auto=format&fit=crop&q=80&w=1974&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
box-shadow:1px 1px 5px rgba(0,0,0,0.5)">
<!--image credit-->
<a href="https://unsplash.com/photos/camper-trailer-on-cliff-near-sea-ryfptJi3fAM" title="img - unsplash" data-toggle="tooltip" style="color:#ffffff;font-size:20px;text-shadow:1px 1px 3px rgba(0,0,0,0.5);position:absolute;left:3px" target="_blank">
<i class="fa-regular fa-compass"></i>
</a>
<!--Decorative pin-->
<div style="position:absolute;top:-20px;left:75px">
<i class="fa-solid fa-circle" style="color:#c46439 ;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
</div>
</div>
</div>
<!-- /// END SIDE IMAGE /// -->
<!-- /// TEXT INFO /// -->
<div class="col-lg-9">
<!--Header-->
<h1 style="font-size:2.5em"> <i class="fa-thin fa-compass"></i> Folder Name</h1>
<!--Info Card-->
<div style="height:10px;background-color:#4f5a3f;box-shadow:2px 2px 5px rgba(0,0,0,0.5)"></div>
<div class="bg-faded p-3 mb-1" style="box-shadow:2px 2px 5px rgba(0,0,0,0.5)">
<p>This section will Expand</p>
<p>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>
<!--Tags-->
<div class="d-flex flex-wrap mb-3">
<div class="p-1 px-2 m-1" style="background-color:#4f5a3f;color:#ffffff;box-shadow:2px 2px 5px rgba(0,0,0,0.5)">
Genre
</div>
<div class="p-1 px-2 m-1" style="background-color:#4f5a3f;color:#ffffff;box-shadow:2px 2px 5px rgba(0,0,0,0.5)">
Status
</div>
<div class="p-1 px-2 m-1" style="background-color:#c46439;color:#ffffff;box-shadow:2px 2px 5px rgba(0,0,0,0.5)">
Content Warning
</div>
<div class="p-1 px-2 m-1" style="background-color:#c46439;color:#ffffff;box-shadow:2px 2px 5px rgba(0,0,0,0.5)">
Warning
</div>
</div>
</div>
<!-- /// END TEXT INFO /// -->
</div>
<!-- /// END HEADER/// -->
<!-- /// CHARA LINKS /// -->
<div class="row my-3">
<!--link 1-->
<div class="col-sm-6 col-lg-3">
<div class="mb-3 p-2" style="min-height:200px;width:200px;transform:rotate(5deg);
background-color:#ffffff;
margin-left:auto;margin-right:auto;
box-shadow:1px 1px 5px rgba(0,0,0,0.5);
text-align:center;font-size:1.25em">
<!--Decorative pin-->
<div style="position:absolute;top:-20px;left:80px">
<i class="fa-solid fa-circle" style="color:#b3cecf;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
</div>
<!--charaimg-->
<div class="w-100 h-100" style="
background-image:url(https://images.unsplash.com/photo-1532154187607-d766ed024aac?auto=format&fit=crop&q=80&w=1974&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
min-height:180px;width:100%;"></div>
<!--link-->
<a href="#" style="color:#4f5a3f">Character Name</a>
</div>
</div>
<!--link 2-->
<div class="col-sm-6 col-lg-3">
<div class="mb-3 p-2" style="min-height:200px;width:200px;transform:rotate(-5deg);
background-color:#ffffff;
margin-left:auto;margin-right:auto;
box-shadow:1px 1px 5px rgba(0,0,0,0.5);
text-align:center;font-size:1.25em">
<!--Decorative pin-->
<div style="position:absolute;top:-20px;left:80px">
<i class="fa-solid fa-circle" style="color:#c46439 ;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
</div>
<!--charaimg-->
<div class="w-100 h-100" style="
background-image:url(https://images.unsplash.com/photo-1446034295857-c39f8844fad4?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
min-height:180px;width:100%;"></div>
<!--link-->
<a href="#" style="color:#4f5a3f">Character Name</a>
</div>
</div>
<!--link 3-->
<div class="col-sm-6 col-lg-3">
<div class="mb-3 p-2" style="min-height:200px;width:200px;transform:rotate(5deg);
background-color:#ffffff;
margin-left:auto;margin-right:auto;
box-shadow:1px 1px 5px rgba(0,0,0,0.5);
text-align:center;font-size:1.25em">
<!--Decorative pin-->
<div style="position:absolute;top:-20px;left:80px">
<i class="fa-solid fa-circle" style="color:#b3cecf;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
</div>
<!--charaimg-->
<div class="w-100 h-100" style="
background-image:url(https://images.unsplash.com/photo-1532154187607-d766ed024aac?auto=format&fit=crop&q=80&w=1974&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
min-height:180px;width:100%;"></div>
<!--link-->
<a href="#" style="color:#4f5a3f">Character Name</a>
</div>
</div>
<!--link 4-->
<div class="col-sm-6 col-lg-3">
<div class="mb-3 p-2" style="min-height:200px;width:200px;transform:rotate(-5deg);
background-color:#ffffff;
margin-left:auto;margin-right:auto;
box-shadow:1px 1px 5px rgba(0,0,0,0.5);
text-align:center;font-size:1.25em">
<!--Decorative pin-->
<div style="position:absolute;top:-20px;left:80px">
<i class="fa-solid fa-circle" style="color:#c46439 ;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
</div>
<!--charaimg-->
<div class="w-100 h-100" style="
background-image:url(https://images.unsplash.com/photo-1446034295857-c39f8844fad4?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
min-height:180px;width:100%;"></div>
<!--link-->
<a href="#" style="color:#4f5a3f">Character Name</a>
</div>
</div>
</div>
<!-- /// END CHARA LINKS /// -->
<!--Credit. You may move it, but please do not delete/remove-->
<p style="text-align:right">HTML by <a href="https://toyhou.se/24049872"><i class='fa-solid fa-compass'></i> Jade-Everstone</a> // img - <a href="https://www.transparenttextures.com/" target="_blank">Transparent Textures</a></p>
</div>
Manual Select
<!DOCTYPE HTML>
<!--Rules:
Traveler (folder vers)
For the Coders Quarters October 2023 challenge
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:
- Photo Borders: #ffffff
- Character Links, Card header: #4f5a3f
- Info/Warning Buttons: #4f5a3f , #c46439
- Pins: #c46439 , #b3cecf
Change the colors: Ctrl+f and search for the color you want to change.
-->
<!-- /// BACKGROUND /// -->
<!--bg image sourced from transparent textures:
(https://www.transparenttextures.com/patterns/axiom-pattern.png)-->
<div style="position:absolute;
top:0px;bottom:0px;
left: 0px;
background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/72565784_TPO2Zi7szDbhC8D.png);
background-position:center;
background-attachment:fixed;
width: 100%;
z-index: -1;">.</div>
<!-- /// END BACKGROUND /// -->
<div class="container" style="max-width:800px">
<!-- /// HEADER/// -->
<div class="row align-items-center">
<!-- /// SIDE IMAGE /// -->
<div class="col-lg-3">
<!--Photo-->
<div class="mb-3" style="height:200px;width:200px;transform:rotate(-5deg);
border-style:solid;border-width:7px 7px 30px;border-color:#ffffff;
margin-left:auto;margin-right:auto;
background-image:url(https://images.unsplash.com/photo-1574260031597-bcd9eb192b4f?auto=format&fit=crop&q=80&w=1974&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
box-shadow:1px 1px 5px rgba(0,0,0,0.5)">
<!--image credit-->
<a href="https://unsplash.com/photos/camper-trailer-on-cliff-near-sea-ryfptJi3fAM" title="img - unsplash" data-toggle="tooltip" style="color:#ffffff;font-size:20px;text-shadow:1px 1px 3px rgba(0,0,0,0.5);position:absolute;left:3px" target="_blank">
<i class="fa-regular fa-compass"></i>
</a>
<!--Decorative pin-->
<div style="position:absolute;top:-20px;left:75px">
<i class="fa-solid fa-circle" style="color:#c46439 ;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
</div>
</div>
</div>
<!-- /// END SIDE IMAGE /// -->
<!-- /// TEXT INFO /// -->
<div class="col-lg-9">
<!--Header-->
<h1 style="font-size:2.5em"> <i class="fa-thin fa-compass"></i> Folder Name</h1>
<!--Info Card-->
<div style="height:10px;background-color:#4f5a3f;box-shadow:2px 2px 5px rgba(0,0,0,0.5)"></div>
<div class="bg-faded p-3 mb-1" style="box-shadow:2px 2px 5px rgba(0,0,0,0.5)">
<p>This section will Expand</p>
<p>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>
<!--Tags-->
<div class="d-flex flex-wrap mb-3">
<div class="p-1 px-2 m-1" style="background-color:#4f5a3f;color:#ffffff;box-shadow:2px 2px 5px rgba(0,0,0,0.5)">
Genre
</div>
<div class="p-1 px-2 m-1" style="background-color:#4f5a3f;color:#ffffff;box-shadow:2px 2px 5px rgba(0,0,0,0.5)">
Status
</div>
<div class="p-1 px-2 m-1" style="background-color:#c46439;color:#ffffff;box-shadow:2px 2px 5px rgba(0,0,0,0.5)">
Content Warning
</div>
<div class="p-1 px-2 m-1" style="background-color:#c46439;color:#ffffff;box-shadow:2px 2px 5px rgba(0,0,0,0.5)">
Warning
</div>
</div>
</div>
<!-- /// END TEXT INFO /// -->
</div>
<!-- /// END HEADER/// -->
<!-- /// CHARA LINKS /// -->
<div class="row my-3">
<!--link 1-->
<div class="col-sm-6 col-lg-3">
<div class="mb-3 p-2" style="min-height:200px;width:200px;transform:rotate(5deg);
background-color:#ffffff;
margin-left:auto;margin-right:auto;
box-shadow:1px 1px 5px rgba(0,0,0,0.5);
text-align:center;font-size:1.25em">
<!--Decorative pin-->
<div style="position:absolute;top:-20px;left:80px">
<i class="fa-solid fa-circle" style="color:#b3cecf;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
</div>
<!--charaimg-->
<div class="w-100 h-100" style="
background-image:url(https://images.unsplash.com/photo-1532154187607-d766ed024aac?auto=format&fit=crop&q=80&w=1974&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
min-height:180px;width:100%;"></div>
<!--link-->
<a href="#" style="color:#4f5a3f">Character Name</a>
</div>
</div>
<!--link 2-->
<div class="col-sm-6 col-lg-3">
<div class="mb-3 p-2" style="min-height:200px;width:200px;transform:rotate(-5deg);
background-color:#ffffff;
margin-left:auto;margin-right:auto;
box-shadow:1px 1px 5px rgba(0,0,0,0.5);
text-align:center;font-size:1.25em">
<!--Decorative pin-->
<div style="position:absolute;top:-20px;left:80px">
<i class="fa-solid fa-circle" style="color:#c46439 ;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
</div>
<!--charaimg-->
<div class="w-100 h-100" style="
background-image:url(https://images.unsplash.com/photo-1446034295857-c39f8844fad4?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
min-height:180px;width:100%;"></div>
<!--link-->
<a href="#" style="color:#4f5a3f">Character Name</a>
</div>
</div>
<!--link 3-->
<div class="col-sm-6 col-lg-3">
<div class="mb-3 p-2" style="min-height:200px;width:200px;transform:rotate(5deg);
background-color:#ffffff;
margin-left:auto;margin-right:auto;
box-shadow:1px 1px 5px rgba(0,0,0,0.5);
text-align:center;font-size:1.25em">
<!--Decorative pin-->
<div style="position:absolute;top:-20px;left:80px">
<i class="fa-solid fa-circle" style="color:#b3cecf;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
</div>
<!--charaimg-->
<div class="w-100 h-100" style="
background-image:url(https://images.unsplash.com/photo-1532154187607-d766ed024aac?auto=format&fit=crop&q=80&w=1974&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
min-height:180px;width:100%;"></div>
<!--link-->
<a href="#" style="color:#4f5a3f">Character Name</a>
</div>
</div>
<!--link 4-->
<div class="col-sm-6 col-lg-3">
<div class="mb-3 p-2" style="min-height:200px;width:200px;transform:rotate(-5deg);
background-color:#ffffff;
margin-left:auto;margin-right:auto;
box-shadow:1px 1px 5px rgba(0,0,0,0.5);
text-align:center;font-size:1.25em">
<!--Decorative pin-->
<div style="position:absolute;top:-20px;left:80px">
<i class="fa-solid fa-circle" style="color:#c46439 ;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
</div>
<!--charaimg-->
<div class="w-100 h-100" style="
background-image:url(https://images.unsplash.com/photo-1446034295857-c39f8844fad4?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
min-height:180px;width:100%;"></div>
<!--link-->
<a href="#" style="color:#4f5a3f">Character Name</a>
</div>
</div>
</div>
<!-- /// END CHARA LINKS /// -->
<!--Credit. You may move it, but please do not delete/remove-->
<p style="text-align:right">HTML by <a href="https://toyhou.se/24049872"><i class='fa-solid fa-compass'></i> Jade-Everstone</a> // img - <a href="https://www.transparenttextures.com/" target="_blank">Transparent Textures</a></p>
</div>
