OH MOTHER [FTU] (CODE [EB Version])

Coturnix

Info


Created
2 years, 2 months ago
Creator
Nor
Favorites
0

Profile


<!---This version is the 'Earthbound' version, which is essentially the same as the 'III' version- but if you're unfamiliar with coding/want to change the colours easily, I suggest using the 'III' version. Here's the colours used for Mother 3's menus anyways if you need them, they're all authentic to the game!

FLAVOURS:

PLAIN: #E3CABC
MINT: #DFEFF7
STRAWBERRY: #F7C8E0
BANANA: #f7f7b0
PEANUT: #F7D7B7
GRAPE: #E0D1F0
MELON: #D8F0D8
--->

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card border-0 p-1 mx-auto" style="background: white;background-size: cover; background-position: justify; max-width: 500px; min-height: 150px; box-shadow: inset 0px 0px 1px 1px;">
	<div class="card" style="background: #000; background-size: cover; background-position: justify; justify; max-width: 500px; min-height: 42px;">
		<div class="row">
			<div class="col-md-7">
				<div style="margin-left: 4px;">
					<div class="mt-2"></div>
					<!--Feel free to change the icons/descriptions of any of these to your liking. If you want something less authentic to the games/more accurate to the actual roles of these tabs, copy and paste this starting at <a data toggle:
					
					<a data-toggle="collapse" href="#stats" role="button" aria-expanded="false" aria-controls="collapse"><i class="fas fa-pencil fa-lg tooltipster" style="color: white" title="Stats"></i></a>
					<a data-toggle="collapse" href="#p2" role="button" aria-expanded="false" aria-controls="collapse"><i class="fas fa-book fa-lg tooltipster" style="color: white" title="Story"></i></a>
					<a data-toggle="collapse" href="#p3" role="button" aria-expanded="false" aria-controls="collapse"><i class="fas fa-palette fa-lg tooltipster" style="color: white" title="Design Notes"></i></a>
					<a data-toggle="collapse" href="#p4" role="button" aria-expanded="false" aria-controls="collapse"><i class="fas fa-heart fa-lg tooltipster" style="color: white" title="Relationships"></i></a>
					<a data-toggle="collapse" role="button" href="#run" aria-expanded="false" aria-controls="collapse"><i class="fas fa-sign-out-alt fa-lg tooltipster" style="color: white" title="Run"></i></a>
					
					And replace everything until you get to </div> (do NOT remove that).-->
					<a data-toggle="collapse" href="#stats" role="button" aria-expanded="false" aria-controls="collapse"><i class="fas fa-music fa-lg tooltipster" style="color: white" title="Bash"></i></a>
					<a data-toggle="collapse" href="#p2" role="button" aria-expanded="false" aria-controls="collapse"><i class="fas fa-suitcase fa-lg tooltipster" style="color: white" title="Goods"></i></a>
					<a data-toggle="collapse" href="#p3" role="button" aria-expanded="false" aria-controls="collapse"><i class="fas fa-compress fa-lg tooltipster" style="color: white" title="PSI"></i></a>
					<a data-toggle="collapse" href="#p4" role="button" aria-expanded="false" aria-controls="collapse"><i class="fas fa-plus-square fa-lg tooltipster" style="color: white" title="Guard"></i></a>
					<a data-toggle="collapse" role="button" href="#run" aria-expanded="false" aria-controls="collapse"><i class="fas fa-sign-out-alt fa-lg tooltipster" style="color: white" title="Run"></i></a>
					<!--Additionally, if you'd like this to function as an actual 'run' tab, change the href="#run" to href="LINK URL YOU WANT TO REDIRECT TO" (fill in the link.) I reccomend either your previous folder, or just your page!-->
				</div>
			</div>
			<div class="col-md-2"></div>
			<div class="col-md-1">
				<div class="mt-1"></div>
				<div class ="p-1" style="font-size:15px; font-family:Monospace; letter-spacing:5px; font-weight: normal; color: white;">Name</div>
				<div class="mt-1"></div>
			</div>
		</div>
	</div>
	<div class="col-md-0">
		<div class="card border-0 p-2" style="background: url(IMAGE URL HERE); background-size: justify; background-position: center; min-he repeat;ight: 200px; min-width: 150px;">
			<!---Place your background image's URL here! It should fit regardless of size- but if 'justify' doesn't look good, change the background-size:justify to background-size: cover.--->
			
			<!---Pagedoll's image URL goes here- feel free to use either a non transparent image, or even a chibi fullbody. It should fit in, regardless of size.--->
			<div class="mt-4"></div>
			<center>
				<img src="IMAGE URL HERE, KEEP THE QUOTATION MARKS INTACT" style="max-height:200px;">
			</center><div class="mt-2"></div>
			
			<!--accordion-->
			<div id="accordion">
				<div class="collapse" data-parent="#accordion" data-toggle="collapse" id="stats" aria-expanded="false" aria-controls="collapse">
					<div class="col-md-12">
						<div class="card border-0 p-1 mx-auto" style="background: white;background-size: cover; background-position: justify; box-shadow: inset 0px 0px 1px 1px;">
							<div class="col-md-0">
								<div class="card border-0 p-2" style="background: #000;background-size: cover; background-position: justify; box-shadow: inset 0px 0px 1px 1px;">
									<div style="font-size:small; font-family:Monospace; letter-spacing:5px; color: white">
										<center><strong>STATS:</strong></center>
									</div>
									<!---If you'd like to add additional stats/stat bars, copy and paste from <div style to top:0;"> below "HP" (or whatever you substitute there. You can also remove stats, just be sure to erase the same <div to top:0;> area as written above. It will scroll when more are added, though...--->
									<div style="font-size:small; font-family:Monospace; letter-spacing:5px; color: white">
										<center>
											<em>A short blurb goes here.</em>
										</center>
										<div class="mt-2"></div>
										<hr style="border-color: white; margin-bottom:0; margin-top:0;">
										<div style="line-height: 1.75em; overflow-x: hidden; height:100px;">
											<div class="col-sm"><strong>PRONOUNS</strong><span class="pull-right"><em>???</em></span></div>
											<hr style="border-color: white; margin-bottom:0; margin-top:0;">
											<div class="col-sm"><strong>SPECIES</strong><span class="pull-right"><em>???</em></span></div>
											<hr style="border-color: white; margin-bottom:0; margin-top:0;">
											<div class="col-sm"><strong>ALIAS</strong><span class="pull-right"><em>???</em></span></div>
											<hr style="border-color: white; margin-bottom:0; margin-top:0;">
											<div class="col-sm"><strong>HP</strong><span class="pull-right"><em>12345</em></span></div>
											<hr style="border-color: white; margin-bottom:0; margin-top:0;">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
			<!--Story-->
				<div class="collapse" data-parent="#accordion" id="p2">
					<div class="col-md-12">
						<div class="card border-0 p-1 mx-auto" style="background: white;background-size: cover; background-position: justify; box-shadow: inset 0px 0px 1px 1px;">
							<div class="col-md-0">
								<div class="card border-0 p-2" style="background: #000;background-size: justify; background-position: justify; box-shadow: inset 0px 0px 1px 1px;">
									<div style="font-size:small; font-family:Monospace; letter-spacing:5px; color: white">
										<center><strong>STORY:</strong></center>
									</div>
									<div style="font-size:small; font-family:Monospace; letter-spacing:5px; color: white">
										<center>
											<em>Put a short blurb here.</em>
										</center>
										<div class="mt-2"></div>
										<hr style="border-color: white; margin-bottom:0; margin-top:0;">
										<div class="mt-2"></div>
										<div style="line-height: 1.75em; overflow-x: hidden; height:100px;">
											<em>
												You can write a story here. It will scroll, so you can write as much (or as little) as you need.
												<div class="mt-3"></div>
												<center>Here is a header.</center>
												<div class="mt-2"></div>
												On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
											</em>
										</div>
										<hr style="border-color: white; margin-bottom:0; margin-top:0;">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

     <!--Design Notes-->
				<div class="collapse" data-parent="#accordion" id="p3">
					<div class="col-md-12">
						<div class="card border-0 p-1 mx-auto" style="background: white;background-size: cover; background-position: justify; box-shadow: inset 0px 0px 1px 1px;">
							<div class="col-md-0">
								<div class="card border-0 p-2" style="background: #000;background-size: justify; background-position: justify; box-shadow: inset 0px 0px 1px 1px;">
									<div style="font-size:small; font-family:Monospace; letter-spacing:5px; color: white">
										<center><strong>DESIGN NOTES:</strong></center>
									</div>
									<div style="font-size:small; font-family:Monospace; letter-spacing:5px; color: white">
										<div class="mt-2"></div>
										<hr style="border-color: white; margin-bottom:0; margin-top:0;">
										<div class="mt-2"></div>
										<div style="line-height: 1.75em; overflow-x: hidden; height:100px;">
											<div class="row">
												<div class="col-md-6">
													<em>
														<ul>
															<li>Design note...</li>
															<li>Another note!</li>
														</ul>
													</em>
												</div>
												<div class="col-md-6">
													<em>
														<ul>
															<li>Another note..</li>
															<li>You can add more, too.</li>
														</ul>
													</em>
												</div>
											</div>
											<div class="mt-2"></div>
											<em>You can also write more here, too, if you prefer written notes (or just want to add some things.) As much as you need! (Or as little... Both are fine.)</em>
										</div>
										<hr style="border-color: white; margin-bottom:0; margin-top:0;">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				
			<!--Relationships-->	
				<div class="collapse" data-parent="#accordion" id="p4">
					<div class="col-md-12">
						<div class="card border-0 p-1 mx-auto" style="background: white;background-size: cover; background-position: justify; box-shadow: inset 0px 0px 1px 1px;">
							<div class="col-md-0">
								<div class="card border-0 p-2" style="background: #000;background-size: cover; background-position: justify; box-shadow: inset 0px 0px 1px 1px;">
									<div style="font-size:small; font-family:Monospace; letter-spacing:5px; color: white">
										<center><strong>RELATIONSHIPS:</strong></center>
									</div>
									<div style="font-size:small; font-family:Monospace; letter-spacing:5px; color: white">
										<div class="mt-2"></div>
										<hr style="border-color: white; margin-bottom:0; margin-top:0;">
										<div style="line-height: 1.75em; overflow-x: hidden; height:100px;">
											<div class="col-sm"><strong>NAME</strong>
												<span class="pull-right"><i class="fas fa-heart fa-xs" style="color: white"></i><i class="fal fa-heart fa-xs" style="color: white"></i><i class="fal fa-heart fa-xs" style="color: white"></i><i class="fal fa-heart fa-xs" style="color: white"></i><i class="fal fa-heart fa-xs" style="color: white"></i>
												</span>
											</div>
											<div class="col-sm">
											  <!--Like the intial pagedoll you used, I reccomend using a transparent pixel, chibi, or even fullbody. It will fit, but the larger/more detailed the file, the smaller it'll be rendered here, so keep that in mind.-->
												<center><a href="LINK URL HERE"><img src="IMAGE URL HERE" style="max-height:100px;"></a></center>
												<div class="mt-2"></div>
												<em>Write about the relationship here.</em>
											</div>
											<hr style="border-color: white; margin-bottom:0; margin-top:0;">
											<div class="col-sm"><strong>NAME</strong>
												<span class="pull-right"><i class="fas fa-heart fa-xs" style="color: white"></i><i class="fas fa-heart fa-xs" style="color: white"></i><i class="fas fa-heart fa-xs" style="color: white"></i><i class="fal fa-heart fa-xs" style="color: white"></i><i class="fal fa-heart fa-xs" style="color: white"></i>
												</span>
											</div>
											
								<!--Relationship 2-->
											
											<div class="col-sm">
												<center><a href="LINK URL HERE"><img src="IMAGE URL HERE" style="max-height:100px;"></a></center>
												<div class="mt-2"></div>
												<em>Write about the relationship here.</em>
											</div>
											<hr style="border-color: white; margin-bottom:0; margin-top:0;">
											<div class="col-sm"><strong>NAME</strong>
												<span class="pull-right"><i class="fal fa-heart fa-xs" style="color: white"></i><i class="fal fa-heart fa-xs" style="color: white"></i><i class="fal fa-heart fa-xs" style="color: white"></i><i class="fal fa-heart fa-xs" style="color: white"></i><i class="fal fa-heart fa-xs" style="color: white"></i>
												</span>
											</div>
											
								<!--Relationship 3-->
											
											<div class="col-sm">
												<center><a href="LINK URL HERE"><img src="IMAGE URL HERE" style="max-height:100px;"></a></center>
												<div class="mt-2"></div>
												<em>Write about the relationship here. You can keep adding relationships, too.</em>
											</div>
										</div>
										<hr style="border-color: white; margin-bottom:0; margin-top:0;">
									</div>
									
								<!--End Relationship 3-->
									
								</div>
							</div>
						</div>
					</div>
				</div>
		<!--End relationship tab-->
				
		<!--Run tab-->
			<div class="collapse" data-parent="#accordion" id="run">
					<div class="col-md-12">
						<div class="card border-0 p-1 mx-auto" style="background: white;background-size: cover; background-position: justify; box-shadow: inset 0px 0px 1px 1px;">
							<div class="col-md-0">
								<div class="card border-0 p-2" style="background: #000;background-size: cover; background-position: justify; box-shadow: inset 0px 0px 1px 1px;">
									<div style="font-size:small; font-family:Monospace; letter-spacing:5px; color: white">
										<center><strong>YOU TRIED RUNNING AWAY, BUT IT FAILED!</strong></center>
									</div>
									<hr style="border-color: white; margin-bottom:0; margin-top:0;">
									</a>
									</center>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		    <!--End Run tab-->
		    
			<!--end accordion-->
			
		</div>
		<div class="card" style="background: #000; background-size: cover; background-position: justify; justify; max-width: 500px; min-height: 42px;">
		</div>
	</div>
</div>
<!---CREDIT LINE, PLEASE DO NOT REMOVE--->
<div style="font-size:x-small;">
	<center>
		<a href="https://toyhou.se/Coturnix"><i class="fas fa-moon-stars tooltipster" title="Code cooked up by Quail"></i></a> ◈
		<!---Background and icon credits go here.--->
		<a href="PAGEDOLL CREDIT URL HERE"><i class="fas fa-icons  tooltipster" title="PAGEDOLL CREDIT HERE"></i></a>
		◈ <a href="BACKGROUND CREDIT URL HERE"><i class="fas fa-window-maximize tooltipster" title="BACKGROUND CREDIT HERE"></i></a>
	</center>
</div>