Updated Strawberry Cake HTML (CODE)

    <!-- 
 
Code made by mushroom_boar on TH, but feel free to frankenstein!
Don't remove my credits however!
 
 
The code is not theme friendly. It's a bit expected you know a little bit about coding.  But feel free to message me if you are struggling!
 
 
Make sure to use this website (https://th.circlejourney.net/) to edit the code.
 
For cool icons, use this website (https://fontawesome.com/icons/)
 
You can use this (https://toyhou.se/3536712.) as a tutorial on the use of Font Awesome Icons. I prefer to just plop down the icons from the website and just edit it as actual fonts.

 
Don't delete the credits, or I'll come for your firstborn >:(
 

 
It's based off an old code I made before. But this one is the updated version as of 28th of August 2022!
 
-->



<!--Change the background here -->
<!--Change the color of the font here too. It's the # after the text "color" -->
<div class="container" style="background-image: url('https://images.unsplash.com/photo-1581985430116-d8fba25256b0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80'); background-size: cover; background-position: center; font-family: 'garamond'; letter-spacing: 2px; color: #db7284">
    
    <div class="row">
        
        
        <!--Change the picture here -->
        <div class="col-md-6" style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/52026435_9sVS6gLRcoEfVeC.png'); background-size: cover; background-position: center;"></div>
        <div class="col-md-6" style="padding-top: 3em; padding-bottom: 2em;">
            
            <div class="row" style="text-align:center;">
                <div class="col-md-12" >
                    
                    <!--Change the name here -->
                    <h1 style="background-color: white; padding: 1em;">Mama Shortcake</h1>
                </div>
                
                
                <!--Divider-->
                <div class="col-md-4">
                    <hr style="border: 1px solid white;">
                </div>
                <div class="col-md-4">
                    <p style="text-align: center; font-size: 1.5em;"><i class="fa-solid fa-strawberry"></i></p>
                </div>
                <div class="col-md-4">
                    <hr style="border: 1px solid white;">
                </div>
                <!--Divider-->
                
                <div class="row p-4">
                     <div class="col-md-6" style="padding-top: 2em; padding-bottom: 2em; background-color: white;">
                         
                        <!--Change the name here --> 
                        <h1><i class="fa-thin fa-heart"></i> Nickname <i class="fa-thin fa-heart"></i></h1>
                        
                        <!--Change the text here -->
                        <p>Shortcake, Sweety, Mama</p>
                    </div>
                
                    <div class="col-md-6" style="padding-top: 2em; padding-bottom: 2em; background-color: white;">
                        
                        <!--Change the name here -->
                        <h1><i class="fa-thin fa-heart"></i> Pronouns <i class="fa-thin fa-heart"></i></h1>
                        
                        <!--Change the text here -->
                        <p>She/her</p>
                    </div>
                    
                    <div class="col-md-6" style="padding-top: 2em; padding-bottom: 2em; background-color: white;">
                        
                        <!--Change the name here -->
                        <h1><i class="fa-thin fa-heart"></i> Orientation <i class="fa-thin fa-heart"></i></h1>
                        
                        <!--Change the text here -->
                        <p>Sapphic pan</p>
                    </div>
                    
                    <div class="col-md-6" style="padding-top: 2em; padding-bottom: 2em; background-color: white;">
                        
                        <!--Change the name here -->
                        <h1><i class="fa-thin fa-heart"></i> Species <i class="fa-thin fa-heart"></i></h1>
                        
                        <!--Change the text here -->
                        <p>Highland Cow</p>
                    </div>
                </div>
                
                <!--Divider-->
                <div class="col-md-4">
                    <hr style="border: 1px solid white;">
                </div>
                <div class="col-md-4">
                    <p style="text-align: center; font-size: 1.5em;"><i class="fa-solid fa-strawberry"></i></p>
                </div>
                <div class="col-md-4">
                    <hr style="border: 1px solid white;">
                </div>
                <!--Divider-->
                
                <div class="row p-4">
                    <div class="col-md-12" style="text-align: left; background-color:white; padding-top:2em;  padding-bottom:2em; padding-right: 4em;">
                        
                    <!--Change the name of the title here -->    
                    <h1>Notes</h1>
                    
                    <!--Change the text in the "<li>"! -->
                    <!--Add or remove how many <li>'s you want -->
                    <ul>
                        <li>She has golden horns.</li>
                        <li>Very fluffy gal </li>
                        <li>The milk she produces is strawberry flavored! </li>
                        <li>Please refer to her ref sheet and not her art pieces!</li>
                        <li>She is a strawberry vendor that is all about organic foods.</li>
                    </ul>
                </div>
                </div>
                
                <!--Hold it, cowboy! This is the credit you're not supposed to touch. This is so people can find my code again! Pls don't remove it -->
                <div class="col-md-12" style="text-align: center; padding-top: .5em;">
                    <a href="https://toyhou.se/mushroom_boar/characters/folder:3413015" target="_BLANK" data-toggle="tooltip" data-placement="bottom" title="Code by mushroom_boar" style="color: #bf364e"> <span class="fa-stack fa-2x fa-bounce" style="font-size:11px;"> <i class="fa-solid fa-bat fa-stack-2x"></i> <i class="fa fa-code fa-stack-1x fa-inverse"></i> </span>
                    </a>
                </div>
                
                
               
                
                
            </div>
        </div>
    </div>
</div>