[F2U] Simple Card (html code)

<!--
 __                    __
(__  -  _   _  |  _   /    _   _  _|
 __) | ||| |_) | (/_  \__ (_\ |  (_|
           |

Layout by mrpuppychow

Made for the Advent 2021 Coding Calendar!

-->

<!-- custom whole page background -->
<div class="yupperz col-sm-12 col-md-9 col-lg-10" style="background:url(image_link) fixed repeat;width:100%;position:fixed;top:0;bottom:0;right:0;z-index:-10;"></div>
<div class="py-0 px-5 px-md-0 m-0">
    <div style="overflow:hidden;box-shadow:0 0 30px rgba(0,0,0,0.5)" class="rounded col-12 col-md-8 col-lg-6 mx-auto my-5 p-0">
        
        
        <!-- card header background gradient -->
        <div style="background:linear-gradient(#008cba, #7bc2d9);height:100px;"></div>
        <div style="position:relative;">
            <div style="position:absolute;top:-50px;width:100%;text-align:center;z-index:5;">
            
            
                <!-- card avatar -->
                <img class="img-thumbnail" src="image_link" style="height:100px;">
            </div>
            <div style="padding-top:70px;" class="bg-faded px-3 pb-3 text-center">
            
            
                <!-- card infomation -->
                <h1 class="display-3 font-weight-bold mb-4">name</h1>
                <p class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra laoreet ullamcorper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce fringilla purus lorem, ac condimentum.</p>
                <div>
                
                
                    <!-- social media links -->
                    <!-- 
                        - this sample set that includes links to twitter, insta and deviantart
                        - feel free to customize with different links and fontawesome icons
                        - you can add more than three links
                    -->
                    <a href="twitter_link" target="_blank" style="border-radius:50px;" class="btn btn-outline-primary m-1"><span class="fab fa-twitter mr-2"></span>Twitter</a>
                    <a href="instagram_link" target="_blank" style="border-radius:50px;" class="btn btn-outline-primary m-1"><span class="fab fa-instagram mr-2"></span>Instagram</a>
                    <a href="deviantart_link" target="_blank" style="border-radius:50px;" class="btn btn-outline-primary m-1"><span class="fab fa-deviantart mr-2"></span>DeviantArt</a>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- footer -->
<div class="text-muted text-center p-3 footer" style="position:fixed;bottom:0;left:0;width:100%;">
    <span class="mx-1">© cyancrows 2017</span>
    <div>
        <span class="mx-2"><a href="https://toyhou.se/~about">About</a></span>
        <span class="mx-2"><a href="https://toyhou.se/~faq/general">FAQ</a></span>
        <span class="mx-2"><a href="https://toyhou.se/~tickets">HelpDesk</a></span>
        <span class="mx-2"><a href="https://toyhou.se/~rules">Rules</a></span>
        <span class="mx-2"><a href="https://toyhou.se/~tos">TOS</a></span>
        <span class="mx-2"><a href="https://toyhou.se/~browse/search">Search</a></span>
        <span class="mx-2"><a href="https://toyhou.se/13806248.-f2u-simple-card">&lt;/<i class="fas fa-paw"></i>&gt;</a></span>
    </div>
</div>