Blood or Tears (Blood)

<!--
    Blood or Tears (Blood) by Circlejourney. See my codes here:
    https://toyhou.se/orchestrator/characters/folder:524040
-->


    <div class="card" id="blood" style="background-image: linear-gradient(to bottom, #C8ADAF, #E1D7D7); background-size: 20%, cover; color: #0F0F12;">

		<!-- Pagedoll -->
		<img style="position: absolute; bottom: 5px; right: 5px; height: 120px;" src="https://rebuild.circlejourney.net/images/df/teambloodmascot.png">

		<!-- Credits -->
		<div style="position: absolute; bottom: 0; left: 5px; font-size: 9pt; opacity: 0.7;">
		    <a href="https://toyhou.se/orchestrator/characters/folder:524040" style="color: #24506B">Theme by Circlejourney</a>, art by @TenTen, logos by @YoctoCrunch
		</div>

        <div class="d-flex align-items-center py-2">
            <div class="flex-grow-1" style="border-top: 4px solid #0F0F12; border-bottom: 4px solid #0F0F12; height: 12px;"></div>

            <div class="team-title m-2 w-25 d-flex flex-column">

				<img class="d-block mb-2" src="https://rebuild.circlejourney.net/images/df/teambloodlogolong.png" style="min-width: 150px;">

				<p class="subheading text-center text-white d-inline-block" style="border-radius: 10px; background-color: #0F0F12;">
				    User • Your username
				</p>

			</div>

            <div class="flex-grow-1" style="border-top: 4px solid #0F0F12; border-bottom: 4px solid #0F0F12; height: 12px;"></div>
        </div>

        <div class="row p-4">

            <!-- Character 1 + 2 column -->
            <div class="col-12 col-lg-8">
                <div class="row no-gutters nav">
                    <div class="col-12 col-lg-4 flex-column">

                        <!-- Character 1 portrait. Update href, background-image to preference. Remove border if not ace character/pair. -->
                        <a href="#CHARACTER-1-LINK"
							style="background-image: url(https://rebuild.circlejourney.net/images/df/teambloodmascot.png);
							    border: 4px solid #A93354;

							    background-size: cover; background-position: top; text-decoration: none; background-color: grey; height: 300px;"
							class="flex-column justify-content-end text-center w-100"
							target="_blank">

                            <span class="char-label text-white pt-5 pb-3" style="font-size: 13pt; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); line-height: 1.2em;">

                                Character 1 Name

                                <span style="color: #FF6E97">⭑ace</span>
                                <span style="color: #FF6E97">⭑ace pair</span>

							</span>
                        </a>



						<!-- Clickable relationship button that opens the notes tab. Delete this block if you don't need it. -->
						<div class="d-flex align-items-center justify-content-center text-center" style="height: 0; z-index: 2;">
							<a href="#blood-1" class="d-block text-white" data-toggle="collapse" style="padding: 0.1rem; font-size: 13pt; border-radius: 10px; background-color: #A93354;">

								<i class="relationship-arrows fa fa-arrows-up-down"></i>

								Relationship 1

							</a>
						</div>



                        <!-- Character 2 portrait. Update href, background-image to preference. Remove border if not ace character/pair. -->
                        <a href="#CHARACTER-2-LINK"
							style="background-image: url(https://rebuild.circlejourney.net/images/df/teambloodmascot.png);
							    border: 4px solid #A93354;

							    background-size: cover; background-position: top; text-decoration: none; background-color: grey; height: 300px;"
							class="flex-column justify-content-end text-center w-100"
							target="_blank">

                            <span class="char-label text-white pt-5 pb-3" style="font-size: 13pt; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); line-height: 1.2em;">

                                Character 2 Name

                                <span style="color: #FF6E97">⭑ace pair</span>

							</span>
                        </a>
                    </div>



                    <!-- Character 3 + 4 column -->
					<div class="col-12 col-lg-4 flex-column">

                        <!-- Character 3 portrait. Update href, background-image to preference. Remove border if not ace character/pair. -->
                        <a href="#CHARACTER-3-LINK"
							style="background-image: url(https://rebuild.circlejourney.net/images/df/teambloodmascot.png);

							    background-size: cover; background-position: top; text-decoration: none; background-color: grey; height: 300px;"
							class="flex-column justify-content-end text-center w-100"
							target="_blank">

                            <span class="char-label text-white pt-5 pb-3" style="font-size: 13pt; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); line-height: 1.2em;">

                                Character 3 Name

							</span>
                        </a>


						<!-- Clickable relationship button that opens the notes tab. Delete this block if you don't need it. -->
						<div class="d-flex align-items-center justify-content-center text-center" style="height: 0; z-index: 2;">
							<a href="#blood-2" class="d-block text-white" data-toggle="collapse" style="padding: 0.1rem; font-size: 13pt; border-radius: 10px; background-color: #A93354;">

								<i class="relationship-arrows fa fa-arrows-up-down"></i>

								Relationship 2

							</a>
						</div>


                        <!-- Character 4 portrait. Update href, background-image to preference. -->
                        <a href="#CHARACTER-4-LINK"
							style="background-image: url(https://rebuild.circlejourney.net/images/df/teambloodmascot.png);

							    background-size: cover; background-position: top; text-decoration: none; background-color: grey; height: 300px;"
							class="flex-column justify-content-end text-center w-100"
							target="_blank">

                            <span class="char-label text-white pt-5 pb-3" style="font-size: 13pt; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); line-height: 1.2em;">

                                Character 4 Name

							</span>
                        </a>
					</div>



                    <!-- Character 5 + 6 column -->
                    <div class="col-12 col-lg-4 flex-column">

                        <!-- Character 5 portrait. Update href, background-image to preference. -->
                        <a href="#CHARACTER-5-LINK"
							style="background-image: url(https://rebuild.circlejourney.net/images/df/teambloodmascot.png);

							    background-size: cover; background-position: top; text-decoration: none; background-color: grey; height: 300px;"
							class="flex-column justify-content-end text-center w-100"
							target="_blank">

                            <span class="char-label text-white pt-5 pb-3" style="font-size: 13pt; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); line-height: 1.2em;">

                                Character 5 Name

							</span>
                        </a>


						<!-- Clickable relationship button that opens the notes tab. Delete this block if you don't need it. -->
						<div class="d-flex align-items-center justify-content-center text-center" style="height: 0; z-index: 2;">
							<a href="#blood-3" class="d-block text-white" data-toggle="collapse" style="padding: 0.1rem; font-size: 13pt; border-radius: 10px; background-color: #A93354;">

								<i class="relationship-arrows fa fa-arrows-up-down"></i>

								Relationship 3

							</a>
						</div>


                        <!-- Character 6 portrait. Update href, background-image to preference. -->
                        <a href="#CHARACTER-6-LINK"
							style="background-image: url(https://rebuild.circlejourney.net/images/df/teambloodmascot.png);

							    background-size: cover; background-position: top; text-decoration: none; background-color: grey; height: 300px;"
							class="flex-column justify-content-end text-center w-100"
							target="_blank">

                            <span class="char-label text-white pt-5 pb-3" style="font-size: 13pt; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); line-height: 1.2em;">

                                Character 6 Name

							</span>
                        </a>
                    </div>
				</div>

            </div>

            <div class="info col-12 col-lg-4" style="padding-bottom: 100px;">
				<p>Usage notes. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
				<p>Click on the relationship labels to view more info about the characters / relationship. Click on the portraits to open their Toyhouse profiles.</p>

				<br>
				<div id="blood-info">
					<div class="collapse" id="blood-1" data-parent="#blood-info">
						<h4 class="text-white d-inline-block p-1" style="padding: 0.1rem; background-color: #0F0F12;">
							Character 1 + Character 2
						</h4>
						<p>
							Relationship 1 info here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
						</p>
					</div>

					<div class="collapse" id="blood-2" data-parent="#blood-info">
						<h4 class="text-white d-inline-block p-1" style="padding: 0.1rem; background-color: #0F0F12;">
							Character 3 + Character 4
						</h4>
						<p>
							Relationship 2 info goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
						</p>
					</div>

					<div class="collapse" id="blood-3" data-parent="#blood-info">
						<h4 class="text-white d-inline-block p-1" style="padding: 0.1rem; background-color: #0F0F12;">
						    Character 5 + Character 6
						</h4>
						<p>
							Relationship 3 info here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
						</p>
					</div>
				</div>
            </div>

        </div>
	</div>