Versatile Revamped

<!--Images used are from Unsplash, Playlist code snippet by AviCode! Guide on how to set up audio is here: https://toyhou.se/~literature/63904.misc-tutorials/3.direct-play-audio-code -->

<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 bg-faded p-2 rounded">About</h1>

                     <br>

                     <h6 class="text-primary">Content | Content | Content</h6>

                     <br>

                     <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 style="overflow:auto;">

                         <div class="col-sm-12" style="margin-top:25px;">

                         <div class="card" style="font-size:.75em">

                             <h3  style="margin-top:15px;">Likes</h3>

                             <ul style="text-align:left;">

                                 <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 class="col-sm-12" style="margin-top:25px;">

                         <div class="card" style="font-size:.75em">

                             <h3 style="margin-top:15px;">Dislikes</h3>

                             <ul style="text-align:left;">

                                 <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>

                </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">

                    <!--SONG 1-->

                        <h3 class="text-primary mb-1" style="letter-spacing:.15em;">Title by Artist</h3>
                        <h6 class="text-muted font-weight-lighter" style="letter-spacing:.15em;">Album Name</h6>

                        <!--AUDIO-->
                        <audio controls style="opacity:0.8; border-radius:1.5em;">
                        <source src="#" type="audio/TYPE">
                        </audio> <!--audio end-->

                    <!--song 1 end-->

                    <div class="card my-3" style="border-top:0; border-left:0; border-right:0;"></div> <!--divider-->

                    <!--SONG 2-->

                        <h3 class="text-primary mb-1" style="letter-spacing:.15em;">Title by Artist</h3>
                        <h6 class="text-muted font-weight-lighter" style="letter-spacing:.15em;">Album Name</h6>

                        <!--AUDIO-->
                        <audio controls style="opacity:0.8; border-radius:1.5em;">
                        <source src="#" type="audio/TYPE">
                        </audio> <!--audio end-->

                    <!--song 2 end-->

                    <div class="card my-3" style="border-top:0; border-left:0; border-right:0;"></div> <!--divider-->

                    <!--SONG 3-->

                        <h3 class="text-primary mb-1" style="letter-spacing:.15em;">Title by Artist</h3>
                        <h6 class="text-muted font-weight-lighter" style="letter-spacing:.15em;">Album Name</h6>

                        <!--AUDIO-->
                        <audio controls style="opacity:0.8; border-radius:1.5em;">
                        <source src="#" type="audio/TYPE">
                        </audio> <!--audio end-->

                    <!--song 3 end-->

                    <div class="card my-3" style="border-top:0; border-left:0; border-right:0;"></div> <!--divider-->

                    <!--SONG 4-->

                        <h3 class="text-primary mb-1" style="letter-spacing:.15em;">Title by Artist</h3>
                        <h6 class="text-muted font-weight-lighter" style="letter-spacing:.15em;">Album Name</h6>

                        <!--AUDIO-->
                        <audio controls style="opacity:0.8; border-radius:1.5em;">
                        <source src="#" type="audio/TYPE">
                        </audio> <!--audio end-->

                    <!--song 4 end-->

                    <div class="card my-3" style="border-top:0; border-left:0; border-right:0;"></div> <!--divider-->

                    <!--SONG 5-->

                        <h3 class="text-primary mb-1" style="letter-spacing:.15em;">Title by Artist</h3>
                        <h6 class="text-muted font-weight-lighter" style="letter-spacing:.15em;">Album Name</h6>

                        <!--AUDIO-->
                        <audio controls style="opacity:0.8; border-radius:1.5em;">
                        <source src="#" type="audio/TYPE">
                        </audio> <!--audio end-->

                    <!--song 5 end-->

                    <div class="card my-3" style="border-top:0; border-left:0; border-right:0;"></div> <!--divider-->

                    <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>