Select All
<!DOCTYPE HTML>
<!--Rules:
Traveler (character 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">
<!-- /// BASIC INFO /// -->
<div class="row align-items-center">
<!-- /// SIDE IMAGE /// -->
<div class="col-lg-3 order-lg-2">
<!--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 - credit" 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;text-align:right">
<i class="fa-thin fa-compass"></i> Character 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>
<!--Basic Trivia-->
<div class="d-flex flex-wrap justify-content-end 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)">
<i class="fa-regular fa-transgender"></i> Gender
</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)">
<i class="fa-regular fa-comment"></i> (pro/noun)
</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)">
<i class="fa-regular fa-cake"></i> Birthday (00/00)
</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)">
<i class="fa-regular fa-paw"></i> Species or Race
</div>
</div>
</div>
<!-- /// END TEXT INFO /// -->
</div>
<!-- /// END BASIC INFO/// -->
<!-- /// MOODBOARD /// -->
<div class="row my-3">
<!--Photo 1-->
<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-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;
box-shadow:1px 1px 5px rgba(0,0,0,0.5)">
<!--image credit-->
<a href="https://unsplash.com/photos/green-trees-covering-with-fog-during-daytime-NQSWvyVRIJk" 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>
<!--Photo 2-->
<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-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;
box-shadow:1px 1px 5px rgba(0,0,0,0.5)">
<!--image credit-->
<a href="https://unsplash.com/photos/maps-on-top-of-each-other-BkbbuOdX06A" 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:#b3cecf ;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
</div>
</div>
<!--Photo 3-->
<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-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;
box-shadow:1px 1px 5px rgba(0,0,0,0.5)">
<!--image credit-->
<a href="https://unsplash.com/photos/green-trees-covering-with-fog-during-daytime-NQSWvyVRIJk" 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>
<!--Photo 4-->
<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-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;
box-shadow:1px 1px 5px rgba(0,0,0,0.5)">
<!--image credit-->
<a href="https://unsplash.com/photos/maps-on-top-of-each-other-BkbbuOdX06A" 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:#b3cecf ;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
</div>
</div>
</div>
<!-- /// END MOODBOARD /// -->
<!-- /// SUMMARY /// -->
<div class="row my-3 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-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;
box-shadow:1px 1px 5px rgba(0,0,0,0.5)">
<!--image credit-->
<a href="https://unsplash.com/photos/green-trees-covering-with-fog-during-daytime-NQSWvyVRIJk" 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-caravan"></i> Summary
</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>
<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>
</div>
<!-- /// END TEXT INFO /// -->
</div>
<!-- /// END SUMMARY/// -->
<!-- /// TRIVIA /// -->
<div class="row my-3 align-items-center">
<!-- /// SIDE IMAGE /// -->
<div class="col-lg-3 order-lg-2">
<!--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-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;
box-shadow:1px 1px 5px rgba(0,0,0,0.5)">
<!--image credit-->
<a href="https://unsplash.com/photos/maps-on-top-of-each-other-BkbbuOdX06A" 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;right: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;text-align:right">
<i class="fa-thin fa-map-location"></i> Trivia
</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><i class="fa-solid fa-location-dot"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p><i class="fa-solid fa-location-dot"></i> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p><i class="fa-solid fa-location-dot"></i> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</div>
<!-- /// END TEXT INFO /// -->
</div>
<!-- /// END TRIVIA/// -->
<!--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 (character 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">
<!-- /// BASIC INFO /// -->
<div class="row align-items-center">
<!-- /// SIDE IMAGE /// -->
<div class="col-lg-3 order-lg-2">
<!--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 - credit" 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;text-align:right">
<i class="fa-thin fa-compass"></i> Character 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>
<!--Basic Trivia-->
<div class="d-flex flex-wrap justify-content-end 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)">
<i class="fa-regular fa-transgender"></i> Gender
</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)">
<i class="fa-regular fa-comment"></i> (pro/noun)
</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)">
<i class="fa-regular fa-cake"></i> Birthday (00/00)
</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)">
<i class="fa-regular fa-paw"></i> Species or Race
</div>
</div>
</div>
<!-- /// END TEXT INFO /// -->
</div>
<!-- /// END BASIC INFO/// -->
<!-- /// MOODBOARD /// -->
<div class="row my-3">
<!--Photo 1-->
<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-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;
box-shadow:1px 1px 5px rgba(0,0,0,0.5)">
<!--image credit-->
<a href="https://unsplash.com/photos/green-trees-covering-with-fog-during-daytime-NQSWvyVRIJk" 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>
<!--Photo 2-->
<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-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;
box-shadow:1px 1px 5px rgba(0,0,0,0.5)">
<!--image credit-->
<a href="https://unsplash.com/photos/maps-on-top-of-each-other-BkbbuOdX06A" 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:#b3cecf ;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
</div>
</div>
<!--Photo 3-->
<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-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;
box-shadow:1px 1px 5px rgba(0,0,0,0.5)">
<!--image credit-->
<a href="https://unsplash.com/photos/green-trees-covering-with-fog-during-daytime-NQSWvyVRIJk" 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>
<!--Photo 4-->
<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-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;
box-shadow:1px 1px 5px rgba(0,0,0,0.5)">
<!--image credit-->
<a href="https://unsplash.com/photos/maps-on-top-of-each-other-BkbbuOdX06A" 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:#b3cecf ;font-size:30px;text-shadow:2px 2px 5px rgba(0,0,0,0.75)"></i>
</div>
</div>
</div>
<!-- /// END MOODBOARD /// -->
<!-- /// SUMMARY /// -->
<div class="row my-3 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-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;
box-shadow:1px 1px 5px rgba(0,0,0,0.5)">
<!--image credit-->
<a href="https://unsplash.com/photos/green-trees-covering-with-fog-during-daytime-NQSWvyVRIJk" 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-caravan"></i> Summary
</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>
<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>
</div>
<!-- /// END TEXT INFO /// -->
</div>
<!-- /// END SUMMARY/// -->
<!-- /// TRIVIA /// -->
<div class="row my-3 align-items-center">
<!-- /// SIDE IMAGE /// -->
<div class="col-lg-3 order-lg-2">
<!--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-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;
box-shadow:1px 1px 5px rgba(0,0,0,0.5)">
<!--image credit-->
<a href="https://unsplash.com/photos/maps-on-top-of-each-other-BkbbuOdX06A" 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;right: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;text-align:right">
<i class="fa-thin fa-map-location"></i> Trivia
</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><i class="fa-solid fa-location-dot"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p><i class="fa-solid fa-location-dot"></i> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p><i class="fa-solid fa-location-dot"></i> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</div>
<!-- /// END TEXT INFO /// -->
</div>
<!-- /// END TRIVIA/// -->
<!--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>
