Ghost Town

<div class="m-3 mx-auto row no-gutters text-monospace" style="max-width: 1000px">
    <!-- ..................................... LEFT -->
    <div class="p-1 col-lg-3">
        <div class="pt-1 bg-dark shadow"></div>
        <div class="my-1 p-2 bg-dark text-light shadow overflow-auto" style="height: 500px">

            <div style="background: url('IMG_LINK') center;
                background-size: cover; padding-top: 70%; width: 100%;" class="mb-2"></div>

            <h1 class="m-0 text-primary"><i class="fal fa-map-marked-alt"></i> Name</h1>

            <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 class="pt-1 bg-dark shadow"></div>
    </div>
    <!-- ..................................... RIGHT -->
    <div class="p-1 col-lg-9">
        <div class="pt-1 bg-dark shadow"></div>
        <div class="my-1 p-2 bg-dark shadow overflow-auto" style="height: 500px">
            <!-- PLACE -->
            <div class="mb-1 p-2 bg-faded"> <div>
                <!-- IMAGE - any size-->
                <img src="IMG_LINK"
                class="m-1 float-left" style="height: 140px; width: 140px; object-fit: cover; object-position: center">

                <h1 class="m-0 text-info"> <i class="fal fa-chevron-right"></i> Place Name</h1>
                <p>Description here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan purus sed commodo imperdiet. Fusce eros sem, eleifend ut quam ac, cursus finibus risus. Phasellus sagittis eleifend nunc sit amet porttitor. Vivamus eget dignissim velit. Nullam quis lobortis enim. Vestibulum a ante elit. Vestibulum condimentum, mi vel pulvinar cursus, diam orci molestie purus, a tincidunt dolor nibh in dolor. Phasellus ut leo eu erat bibendum iaculis. Ut aliquet ipsum id vestibulum vehicula. Sed tellus nisi, tempus eget consectetur id, tristique non enim. Vivamus arcu tortor, lobortis vitae facilisis eget, sollicitudin sed neque. </p>
            </div> </div>
            <!-- PLACE -->
            <div class="mb-1 p-2 bg-faded"> <div>
                <!-- IMAGE - any size-->
                <img src="IMG_LINK"
                class="m-1 float-right" style="height: 140px; width: 140px; object-fit: cover; object-position: center">

                <h1 class="m-0 text-info"> <i class="fal fa-chevron-right"></i> Place Name</h1>
                <p>Description here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan purus sed commodo imperdiet. Fusce eros sem, eleifend ut quam ac, cursus finibus risus. Phasellus sagittis eleifend nunc sit amet porttitor. Vivamus eget dignissim velit. Nullam quis lobortis enim. Vestibulum a ante elit. Vestibulum condimentum, mi vel pulvinar cursus, diam orci molestie purus, a tincidunt dolor nibh in dolor. Phasellus ut leo eu erat bibendum iaculis. Ut aliquet ipsum id vestibulum vehicula. Sed tellus nisi, tempus eget consectetur id, tristique non enim. Vivamus arcu tortor, lobortis vitae facilisis eget, sollicitudin sed neque. </p>
            </div> </div>
            <!-- PLACE -->
            <div class="mb-1 p-2 bg-faded"> <div>
                <!-- IMAGE - any size-->
                <img src="IMG_LINK"
                class="m-1 float-left" style="height: 140px; width: 140px; object-fit: cover; object-position: center">

                <h1 class="m-0 text-info"> <i class="fal fa-chevron-right"></i> Place Name</h1>
                <p>Description here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan purus sed commodo imperdiet. Fusce eros sem, eleifend ut quam ac, cursus finibus risus. Phasellus sagittis eleifend nunc sit amet porttitor. Vivamus eget dignissim velit. Nullam quis lobortis enim. Vestibulum a ante elit. Vestibulum condimentum, mi vel pulvinar cursus, diam orci molestie purus, a tincidunt dolor nibh in dolor. Phasellus ut leo eu erat bibendum iaculis. Ut aliquet ipsum id vestibulum vehicula. Sed tellus nisi, tempus eget consectetur id, tristique non enim. Vivamus arcu tortor, lobortis vitae facilisis eget, sollicitudin sed neque. </p>
            </div> </div>
            <!-- PLACE -->
            <div class="mb-1 p-2 bg-faded"> <div>
                <!-- IMAGE - any size-->
                <img src="IMG_LINK"
                class="m-1 float-right" style="height: 140px; width: 140px; object-fit: cover; object-position: center">

                <h1 class="m-0 text-info"> <i class="fal fa-chevron-right"></i> Place Name</h1>
                <p>Description here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan purus sed commodo imperdiet. Fusce eros sem, eleifend ut quam ac, cursus finibus risus. Phasellus sagittis eleifend nunc sit amet porttitor. Vivamus eget dignissim velit. Nullam quis lobortis enim. Vestibulum a ante elit. Vestibulum condimentum, mi vel pulvinar cursus, diam orci molestie purus, a tincidunt dolor nibh in dolor. Phasellus ut leo eu erat bibendum iaculis. Ut aliquet ipsum id vestibulum vehicula. Sed tellus nisi, tempus eget consectetur id, tristique non enim. Vivamus arcu tortor, lobortis vitae facilisis eget, sollicitudin sed neque. </p>
            </div> </div>
            <!-- ADD MORE ABOVE HERE - copy the last two for the alternating pattern! -->
        </div>
        <div class="pt-1 bg-dark shadow"></div>
    </div>
    <!-- ..................................... CREDIT -->
    <div class="col-12 order-12 text-center">
        <a data-toggle="tooltip" title="HTML by SparlyCodes" href="/SparklyCodes"> <i class="fal fa-code"></i></a>
    </div>
</div>