[F2U] SUGARCOAT

<!--

THEME: SUGARCOAT by artbymaxm

    TOU: (see full here: https://bit.ly/artbymaxm-tos)

    > TURN WYSIWIG OFF IN SETTINGS AND TURN ON CODE EDITOR BEFORE USING THIS THEME!
    > DO NOT REMOVE OR MOVE THE CREDIT AND DO NOT REDISTRIBUTE
    > Use Circlejourney (https://th.circlejourney.net/) to see the changes you make in real time.
    > I've done my best to make this easy to understand and edit, but if you have any questions (that Google isn't answering), feel free to message me!

    DONATE: https://ko-fi.com/artbymaxm

///

Use CTRL+H to replace the following colors:
    Quote/dark: #000217
    Main text: #fff
    Accent color: rgba(0,2,23,0.3) (basically rgba of the quote color, to make it low opacity)
    Background: #870C0D

-->

<!-- OVERALL CONTAINER -->
<div class="container">

	<!-- QUOTE 1 -->
    <div class="col-md-8 mx-auto m-2 display-flex align-items-center mb-1">
        <h1 style="font-family: georgia, serif; color: #000217; text-transform: lowercase;">lorem ipsum <i>dolor</i>, sit amet</h1>
        <!-- This is the line/dash that goes after the quote. You can change the border-top properties, but be careful with the margins and flex. -->
		<div style="border-top: 2px solid #000217; flex-grow: 1; margin: 0 10px;"></div>
    </div>
	<!-- END QUOTE 1 -->

	<!-- MAIN BODY -->
    <div class="col-md-8 mx-auto p-3" style="background-color: #870C0D; color: #fff; border-radius: 3px 25px;">
        <div class="row no-gutters">

            <div class="col-sm-5"
			style="background-image: url(https://64.media.tumblr.com/5f3770de0c3ebe2e27c9cebf9019fc8c/2e30609ffc575b1b-fa/s1280x1920/4a8a535aca5390b33310814c1c4aa43a9cd85c8d.jpg);
			background-size: cover;
			background-position: center top;
			border-radius: 3px 20px;
			height: 530px;">
				<!-- CREDITS -->
                <div style="position: absolute; right: 5px; bottom: 1px; color: #000217;">
					<!-- IMG SOURCE -->
                    <a style="color: #000217;" href="URL" data-toggle="tooltip" title="photo by SOURCE"><i class="fas fa-image"></i></a>
                    |
					<!-- CODE CREDIT - you can edit/move it, but please don't remove it! -->
                    <a style="color: #000217;" href="https://toyhou.se/22486548" data-toggle="tooltip" title="code by artbymaxm"><i class="fas fa-cat"></i><i class="fas fa-stars"></i></a>
                </div>

            </div>

			<!-- BASIC INFO -->
            <div class="col-sm-7 pr-1">
            <h1 class="text-right" style="font-family: georgia, serif; font-weight: bold; font-style: italic; font-size: 2.5em;">name</h1>

                <div class="col-12 p-2 m-2 text-right" style="background-color: rgba(0,2,23,0.3);">
                <b>age:</b> content
                </div>

                <div class="col-12 p-2 m-2 text-right">
                <b>pronouns:</b> content
                </div>

                <div class="col-12 p-2 m-2 text-right" style="background-color: rgba(0,2,23,0.3);">
                <b>species:</b> content
                </div>

				<!-- MUSIC PLAYER -->
                <div class="col-12 p-2 m-2 text-right">
                <b>now playing:</b> sugarcoat - natty
                <a class="mx-2">
                    <!-- This uses YT and plays while on the page! Simply replace "VIDEOID" with the code after "watch?v=" in a regular YT url -->
                    <iframe allowfullscreen class="m-auto" frameborder="0" style="height:45px; width:45px; opacity:0.001; position:absolute; z-index:1000;" src="https://www.youtube.com/embed/VIDEOID?controls=0"></iframe>

					<!-- This is the actual play "button." You can replace it with any icon from fontawesome. -->
                    <i class="fa-solid fa-compact-disc fa-spin" style="color: #fff;"></i>
                </a>
                </div>
				<!-- END MUSIC PLAYER -->

				<!-- MAIN TEXT - It scrolls, but it's not meant to hold too much text. -->
                <div class="col-md-12 p-2 m-2" style="background-color: rgba(0,2,23,0.3); height: 300px; overflow: auto;">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet massa sit amet lacus dignissim pulvinar eget sed risus. Cras pharetra finibus nulla, vitae congue mauris tincidunt lobortis. Suspendisse potenti. Donec tincidunt, eros a molestie ultrices, felis lorem consectetur nisi, ac feugiat sem odio at est. Nam varius nisl a suscipit convallis. Pellentesque cursus nibh varius nisi convallis ullamcorper. Phasellus nec vehicula risus. Donec posuere ullamcorper purus, scelerisque mollis massa blandit varius. Curabitur eu enim pellentesque, ultricies ipsum non, feugiat justo.</p>
                </div>

            </div>

        </div>
    </div>

	<!-- QUOTE 2 -->
    <div class="col-md-8 mx-auto m-2 display-flex align-items-center mb-1">
	<!-- This is the line/dash that goes before the quote. You can change the border-top properties, but be careful with the margins and flex. -->
        <div style="border-top: 2px solid #000217; flex-grow: 1; margin: 0 10px;"></div>
        <h1 class="text-right" style="font-family: georgia, serif; color: #000217; text-transform: lowercase;">consectetur <i>adipiscing</i> elit</h1>
    </div>
	<!-- END QUOTE 2 -->

</div>
<!-- END OVERALL CONTAINER -->
<!-- END CODE -->