Versatile

<!--Images used are from Unsplash, Playlist code snippet by Wicked-->

<div class="container-fluid">

    <div class="row">

        <div class="col-12">

            <div class="card-deck" style="max-height:700px; overflow:auto;">

                <div class="card text-center">

                     <h1 class="display-4 text-primary">About</h1>
                     <h6 class="text-primary">Content | Content | Content</h6>

                     <p class="p-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                     <p class="p-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                     <div class="card-deck p-2" style="overflow:auto;">

                         <div class="card" style="font-size:12px">

                             <h1>Likes</h1>

                             <ul>

                                 <li>Lorem ipsum</li>
                                 <li>dolor sit amet</li>
                                 <li>consectetur</li>
                                 <li>sed do eiusmod</li>
                                 <li>Lorem ipsum</li>
                                 <li>dolor sit amet</li>

                             </ul>

                         </div>

                         <div class="card" style="font-size:12px;">

                             <h1>Dislikes</h1>

                             <ul>

                                 <li>Lorem ipsum</li>
                                 <li>dolor sit amet</li>
                                 <li>consectetur</li>
                                 <li>sed do eiusmod</li>
                                 <li>Lorem ipsum</li>
                                 <li>dolor sit amet</li>

                             </ul>

                         </div>

                     </div>

                </div>

                <!--Change the url below to change the middle image-->

                <div class="col" style="background-attachment: fixed; background-image:url(https://i.imgur.com/OJHhrOT.jpg); background-size:40%;">

                </div>

                <div class="card">

                    <h1 class="display-4 text-uppercase text-primary bg-faded p-2 rounded"><i class="fas fa-music pull-right m-1"></i>Playlist</h1>
            <div class="card-block pt-2">
                <p>Song title
                    <a href="LINK" target="_BLANK"><i class="fas fa-play pull-right m-1"></i></a>
                </p>
                <hr>
                <p>Song title
                    <a href="LINK" target="_BLANK"><i class="fas fa-play pull-right m-1"></i></a>
                </p>
                <hr>
                <p>Song title
                    <a href="LINK" target="_BLANK"><i class="fas fa-play pull-right m-1"></i></a>
                </p>
                <hr>
                <p>Song title
                    <a href="LINK" target="_BLANK"><i class="fas fa-play pull-right m-1"></i></a>
                </p>
                <hr>
                <p>Song title
                    <a href="LINK" target="_BLANK"><i class="fas fa-play pull-right m-1"></i></a>
                </p>
                <br>
                <h1 class="display-4 text-primary text-center">Design Notes:</h1>

                    <ul>
                        <li>Lorem ipsum dolor sit amet consectetur sed do eiusmod.</li>
                        <li>Lorem ipsum dolor sit amet consectetur sed do eiusmod.</li>
                        <li>Lorem ipsum dolor sit amet consectetur sed do eiusmod.</li>
                        <li>Lorem ipsum dolor sit amet consectetur sed do eiusmod.</li>
                        <li>Lorem ipsum dolor sit amet consectetur sed do eiusmod.</li>
                        <li>Lorem ipsum dolor sit amet consectetur sed do eiusmod.</li>


                    </ul>

            </div>

                </div>

            </div>

        </div>

    </div>

</div>


<!--CREDIT DO NOT REMOVE-->
<a href="https://toyhou.se/Ellteo"><i class="fas fa-leaf" style="opacity:0.25"></i></a>