Destinations (Circle Journey version)

<!--
    Destinations (Circle Journey version) by Circlejourney. See my codes here:
    https://toyhou.se/orchestrator/characters/folder:524040

    Based on a moodboard from Coders Quarters' October 2023 challenge:
    https://toyhou.se/~world/82691.coders-quarters/page/102256.october-challenge
    This version was made as a joke, but maybe you'll enjoy it too.

    Placeholder theme color (use Ctrl + F to replace): #b3cecf
-->


<!-- Change background-image property to change main BG.
     You can also change the font-family property here to change fonts for the entire map.
-->
<div
    style="background-image: url(https://images.unsplash.com/photo-1532154187607-d766ed024aac);
        background-size: cover;
        background-position: center;
        font-family: 'Times New Romans', serif;
        position: relative;
        overflow: hidden;">

    <div class="text-white py-4 px-5" style="background-color: rgba(0,0,0,0.4); ">
        <div class="row no-gutters my-4" style="border: 1px dashed #b3cecf; border-radius: 10px;">

            <!-- CORNER ACCENT ICON -->
            <div style="font-size: 200px; line-height: 1em; position: absolute; bottom: -5%; right: -2%; text-shadow: 0 0 30px rgba(0,0,0,0.5); color: #b3cecf;">
                <i class="fad fa-compass"></i>
            </div>

            <!-- BEGIN LEFT NOTE -->
            <div class="col-12 col-lg-3">
                <div class="p-2" style="color: #333; height: calc(100% + 2em); margin: -1em; transparent; border: 10px solid transparent; border-image: url(https://i.postimg.cc/43CdK6y6/paper-sheet-ragged-edges.png) 4% stretch; border-image-outset: 5px; background-color: #E4E3DC; transform: rotate(-1deg); box-shadow: 1px 1px 10px #333;">


                    <!-- PHOTO
                         Change the src property to chang ehte photo on the left column
                    -->
                    <div class="text-center">
                        <img src="https://i.postimg.cc/jdMKVr4Q/harshil-gudka-unsplash.jpg"
                            class="my-2 w-75 rounded"
                            style="transform: rotate(2deg); box-shadow: 1px 1px 2px grey; border: 10px solid white;">
                    </div>

                    <h2 class="mt-2 pt-3 pb-2 text-center" style="border-bottom: 1px dashed;">
                        <i class="fal fa-compass"></i> Journey
                    </h2>

                    <p>This is the journey that we took. 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.</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.</p>


                    <h2 class="mt-2 pt-3 pb-2 text-center" style="border-bottom: 1px dashed;">
                        <i class="fal fa-compass"></i> Legend
                    </h2>

                    <!--
                        You may wish to change the FA icons to represent other kinds of landmarks.
                    -->
                    <div style="font-size: 14pt;">
                        <div class="d-flex justify-content-between">
                            <i class="fal fa-home"></i> Home
                        </div>

                        <div class="d-flex justify-content-between">
                            <i class="fal fa-landmark"></i> Town
                        </div>

                        <div class="d-flex justify-content-between">
                            <i class="fal fa-caravan"></i> Route
                        </div>

                        <div class="d-flex justify-content-between">
                            <i class="fal fa-trees"></i> Wilderness
                        </div>
                    </div>

                </div>
            </div>
            <!-- END LEFT NOTE -->


            <!-- BEGIN JOURNEY MAP AREA -->
            <div class="col-12 col-lg-8 m-auto row no-gutters p-5">


            <!--  BEGIN COPYABLE SECTION:
                  To add more than 4 places, duplicate everything from here to "END COPYABLE SECTION". -->


                <!-- BEGIN PLACE -->
                <div class="col-12 col-lg-4">
                    <div class="text-center">
                        <h3 class="text-center" style="font-size: 22pt;">
                            <i class="fal fa-house"></i>
                            Place 1
                        </h3>
                    </div>

                    <div class="text-center">
                        <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 PLACE -->


                <!-- BEGIN MAP LINE -->
                <div class="col-12 col-lg-4 d-flex flex-lg-column justify-content-center" style="min-height: 80px;">
                    <div style="border: 4px dashed white; transform: rotate(3deg);"></div>
                </div>
                <!-- END MAP LINE -->


                <!-- BEGIN PLACE -->
                <div class="col-12 col-lg-4 mt-lg-4 p-2">
                    <h3 class="text-center" style="font-size: 22pt;">
                        <i class="fal fa-caravan"></i>
                        Place 2
                    </h3>

                    <div class="text-center">
                        <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 PLACE -->


                <!-- MAP LINE -->
                <div class="col-12 col-lg-4  d-none d-lg-flex flex-row justify-content-center" style="min-height: 80px;">
                    <div style="border: 4px dashed white; transform: rotate(2deg);"></div>
                </div>
                <div class="col-lg-4 d-flex justify-content-center" style="font-size: 60pt;"></div>
                <div class="col-12 col-lg-4 d-flex flex-row justify-content-center" style="min-height: 80px;">
                    <div style="border: 4px dashed white; transform: rotate(-5deg);"></div>
                </div>
                <!-- END MAP LINE -->


                <!-- BEGIN PLACE -->
                <div class="col-12 col-lg-4 mt-lg-4 p-2 order-2 order-lg-0">
                    <h3 class="text-center" style="font-size: 22pt;">
                        <i class="fal fa-landmark"></i>
                        Place 4
                    </h3>

                    <div class="text-center">
                        <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>
                <!-- BEGIN PLACE -->


                <!-- BEGIN MAP LINE -->
                <div class="MAP-LINE col-12 col-lg-4 d-flex flex-lg-column justify-content-center order-1" style="min-height: 80px;">
                    <div style="border: 4px dashed white; transform: rotate(-5deg);"></div>
                </div>
                <!-- END MAP LINE -->


                <!-- BEGIN PLACE -->
                <div class="col-12 col-lg-4 p-2 order-0 order-lg-2">

                    <h3 class="text-center" style="font-size: 22pt;">
                        <i class="fal fa-trees"></i>
                        Place 3
                    </h3>

                    <div class="text-center">
                        <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>

            </div>
            <!-- END JOURNEY MAP AREA -->
        </div>
    </div>
</div>

<div id="CREDIT" class="text-right" style="z-index:3;font-size:9pt;opacity:.5;">
    <a href="https://toyhou.se/~forums/16.htmlcss-graphics/75580.circlejourney-s-code-creations-free-"><i class="fa fa-code"></i> Theme by Circlejourney</a>
</div>