[F2U] SHADOWY - USER

knockoutfangirl

Info

Created
4 months, 27 days ago
Creator
knockoutfangirl
Favorites
125
user free to use html f2u custom colors mobile friendly

Profile

shadowy.html

Mobile Friendly Custom Colors Free to Use

first ever th code under my new alias !!
also can u tell that i've been rewatchin ok ko lol
this one's a lil simpler uhh i'll prolly make a character code when i feel like it lol

NOTES
  • Please tell me if there's a bug in my codes or how to improve them, I appreciate every amount of feedback given!
  • I am not very good at helping others with coding, please refer to the forums or other coding resources.
  • Turn off WYSIWYG when editing your codes as it breaks the code.
  • I coded these on Circlejourney, so some aspects might look a little off compared to how it looks onsite.
DO
  • Frankenstein my codes with others as long as they give explicit permission to do so
  • Edit my codes however you want
  • Get inspired from my codes. (if taking heavy inspiration, please credit me!)
  • Change major aspects from my code (eg. turning a character code into a user code)
  • Use bits of my codes for your own (albeit with credit)
  • Move my credit or change what it looks like
  • Use my codes offsite (eg. on neocities sites)
DON'T
  • Remove my credits unless stated otherwise
  • Take my codes and claim it as your own
  • Sell my codes
OTHER CODES

FEATURED

SHADOWY VENOMOUS

Flavor Text !!

Name

 
 
 

prns | nationality | etc

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.

py461u.gif 27kbvf.png 360wqo.GIF gexpq7.png

Featured Characters

comms: closed | trades: moots only

code by katz

Manual Select

<!-- Free to use code, feel free to customize and frankenstein as you wish. Do not remove my credits. 
   Pls do not ask me 4 general coding help ^^"

   
   TURN OFF WYSIWYG PLZ 4 DA LOVE OF GOD
   
   
-->
<!-- CODE START -->
<!-- COLORS -->
<div style="
--bg-color:rgba(85,70,107,0.83);
--border:2px solid #17153B;
--bg-gradient:linear-gradient(0deg,#2E236C 60%, #8862A1 100%);
--text-shadow:0px 0px 10px #17153B;
--bg-faded:rgba(85,70,107,0.83);
--text-color:#EBD3F8;
--drop-shadow:drop-shadow(0px 0px 10px #7626c4);">
	<!-- COLORS END -->
	<div class="container  mx-auto p-2" style="width:100%;max-width:800px;font-family:arial narrow;text-shadow:var(--text-shadow);color:var(--text-color)">
		<div class="row no-gutters">
			<div class="p-1 col-lg-8">
				<div class="card mx-auto p-2" style="background:var(--bg-gradient);height:3rem;border-radius:0px 20px 0px 0px;border:var(--border);">
					<div class="justify-content-between">
						<!-- FLAVOR TEXT -->
						<p style="font-family:impact;font-size:20px;">Flavor Text !!</p>
						<!-- FLAVOR TEXT END -->
						<span>
							<div class="btn btn-square d-inline-block" style="position:relative;">
								<!-- MUSIC PLAYER -->
								<i class="fas fa-radiation fa-spin"></i>
								<!--EMBED CONTAINER-->
								<div data-toggle="tooltip" title="Song - Artist" class="card-img-overlay p-0 overflow-hidden" style="opacity:.01;">
									<iframe class="card-img-overlay p-0" style="width:800%; height:800%; top:-200%; left:-200%;" src="https://www.youtube.com/embed/EMBEDURLHERE"></iframe>
								</div> <!-- MUSIC PLAYER END -->
							</div>
						</span>
					</div>
				</div>
				<div class="card mx-auto p-2" style="background:var(--bg-color);border:var(--border);border-top:0px;border-bottom:0px;border-radius:0px;background-image: url(https://www.transparenttextures.com/patterns/asfalt-light.png);">
					<div class="row no-gutters">
						<!-- NAME -->
						<div class="p-1 col-sm-9">
							<h2>Name</h2>
							<!-- NAME END -->
							<!-- FLAGS -->
							<div data-toggle="tooltip" title="LABEL" class="rounded d-inline-block" style="background-image:linear-gradient(#e40303,#e40303 16.7%,#ff8c00 16.7%,#ff8c00 33.4%,#ffed00 33.3%,#ffed00 50.1%,#008026 50.1%,#008026 66.8%,#004dff 66.8%,#004dff 83.5%,#750787 83.5%);line-height:20px;width:26px;">&nbsp;</div>
							<div data-toggle="tooltip" title="LABEL" class="rounded d-inline-block" style="background-image:linear-gradient(#e40303,#e40303 16.7%,#ff8c00 16.7%,#ff8c00 33.4%,#ffed00 33.3%,#ffed00 50.1%,#008026 50.1%,#008026 66.8%,#004dff 66.8%,#004dff 83.5%,#750787 83.5%);line-height:20px;width:26px;">&nbsp;</div>
							<div data-toggle="tooltip" title="LABEL" class="rounded d-inline-block" style="background-image:linear-gradient(#e40303,#e40303 16.7%,#ff8c00 16.7%,#ff8c00 33.4%,#ffed00 33.3%,#ffed00 50.1%,#008026 50.1%,#008026 66.8%,#004dff 66.8%,#004dff 83.5%,#750787 83.5%);line-height:20px;width:26px;">&nbsp;</div>
							<!-- ADD OR REMOVE ABOVE THIS LINE -->
							<!-- FLAGS END -->
							<!-- BASIC INFO -->
							<p class="faded">prns | nationality | etc</p>
							<!-- BASIC INFO END -->
							<!-- LINKS -->
							<a data-toggle="tooltip" title="LINK" href="LINK_HERE" target="_blank" style="color:var(--text-color)">
								<i class="fas fa-link" style="font-size:17px"></i>
							</a>
							<a data-toggle="tooltip" title="LINK" href="LINK_HERE" target="_blank" style="color:var(--text-color)">
								<i class="fas fa-link" style="font-size:17px"></i>
							</a>
							<a data-toggle="tooltip" title="LINK" href="LINK_HERE" target="_blank" style="color:var(--text-color)">
								<i class="fas fa-link" style="font-size:17px"></i>
							</a>
							<!-- ADD OR REMOVE ABOVE THIS LINE -->
							<!-- LINKS END -->
							<!-- DESCRIPTION -->
							<p class="mt-2" style="overflow-y:scroll;height:100px;">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>
							<!-- DESCRIPTION END -->
							<!-- BLINKIES -->
							<p class="mx-auto text-center my-2" style="max-width:100%;">
								<img alt="" style="max-height:20px;" src="https://placehold.co/150x20">
								<img alt="" style="max-height:20px;" src="https://placehold.co/150x20">
								<img alt="" style="max-height:20px;" src="https://placehold.co/150x20">
								<img alt="" style="max-height:20px;" src="https://placehold.co/150x20">
								<!-- ADD OR REMOVE ABOVE THIS LINE -->
							</p> <!-- BLINKIES END -->
						</div>
						<div class="col-sm-3">
							<!-- STAMPS -->
							<p class="mx-auto text-center my-2" style="max-width:100%;">
								<img class="p-1" style="max-height:56px;" src="https://placehold.co/99x56">
								<img class="p-1" style="max-height:56px;" src="https://placehold.co/99x56">
								<img class="p-1" style="max-height:56px;" src="https://placehold.co/99x56">
								<img class="p-1" style="max-height:56px;" src="https://placehold.co/99x56">
								<!-- ADD OR REMOVE ABOVE THIS LINE -->
							</p> <!-- STAMPS END-->
						</div>
					</div>
				</div>
				<div class="card mx-auto bg-faded p-2" style="background:var(--bg-faded);border:var(--border);border-top:0px;border-bottom:0px;border-radius:0px;background-image: url(https://www.transparenttextures.com/patterns/asfalt-light.png);">
					<h4>Featured Characters</h4>
					<!-- FEATURED CHARACTERS -->
					<div class="mt-2 p-2">
						<div class="row d-flex justify-content-center">
							<!-- CHARACTER -->
							<div class="column ml-2">
								<!-- ICON -->
								<div class="card mx-auto" style="background-image: url(https://placehold.co/90);background-size:cover; height:90px;width:90px;background-position: center;background-repeat: no-repeat;border:var(--border)"></div>
								<!-- ICON END -->
								<!-- CHARACTER LINK -->
								<div style="text-align:center;">
									<a href="LINK_HERE" style="font-size:12px;font-weight:bold;color:var(--text-color)">CHARACTER</a>
								</div>
								<!-- CHARACTER LINK END -->
							</div>
							<!-- CHARACTER END -->
							<!-- CHARACTER -->
							<div class="column ml-2">
								<!-- ICON -->
								<div class="card mx-auto" style="background-image: url(https://placehold.co/90);background-size:cover; height:90px;width:90px;background-position: center;background-repeat: no-repeat;border:var(--border)"></div>
								<!-- ICON END -->
								<!-- CHARACTER LINK -->
								<div style="text-align:center;">
									<a href="LINK_HERE" style="font-size:12px;font-weight:bold;color:var(--text-color)">CHARACTER</a>
								</div>
								<!-- CHARACTER LINK END -->
							</div>
							<!-- CHARACTER END -->
							<!-- CHARACTER -->
							<div class="column ml-2">
								<!-- ICON -->
								<div class="card mx-auto" style="background-image: url(https://placehold.co/90);background-size:cover; height:90px;width:90px;background-position: center;background-repeat: no-repeat;border:var(--border)"></div>
								<!-- ICON END -->
								<!-- CHARACTER LINK -->
								<div style="text-align:center;">
									<a href="LINK_HERE" style="font-size:12px;font-weight:bold;color:var(--text-color)">CHARACTER</a>
								</div>
								<!-- CHARACTER LINK END -->
							</div>
							<!-- CHARACTER END -->
							<!-- CHARACTER -->
							<div class="column ml-2">
								<!-- ICON -->
								<div class="card mx-auto" style="background-image: url(https://placehold.co/90);background-size:cover; height:90px;width:90px;background-position: center;background-repeat: no-repeat;border:var(--border)"></div>
								<!-- ICON END -->
								<!-- CHARACTER LINK -->
								<div style="text-align:center;">
									<a href="LINK_HERE" style="font-size:12px;font-weight:bold;color:var(--text-color)">CHARACTER</a>
								</div>
								<!-- CHARACTER LINK END -->
							</div>
							<!-- CHARACTER END -->
							<!-- CHARACTER -->
							<div class="column ml-2">
								<!-- ICON -->
								<div class="card mx-auto" style="background-image: url(https://placehold.co/90);background-size:cover; height:90px;width:90px;background-position: center;background-repeat: no-repeat;border:var(--border)"></div>
								<!-- ICON END -->
								<!-- CHARACTER LINK -->
								<div style="text-align:center;">
									<a href="LINK_HERE" style="font-size:12px;font-weight:bold;color:var(--text-color)">CHARACTER</a>
								</div>
								<!-- CHARACTER LINK END -->
							</div>
							<!-- CHARACTER END -->
							
							<!-- ADD OR REMOVE ABOVE THIS LINE -->
						</div>
					</div>
					<!-- FEATURED CHARACTERS END -->
				</div>
				<div class="card mx-auto p-2" style="border-radius:00px 0px 0px 20px;background:var(--bg-gradient);border:var(--border);">
					<div style="justify-content:between">
						<!-- STATUS -->
						<span>
							<p class="faded pull-left" style="font-size:12px;">comms: closed | trades: moots only</p>
						</span>
						<!-- STATUS END -->
						<!-- CREDIT DO NOT REMOVE -->
						<span><a href="https://toyhou.se/knockoutfangirl/characters/folder:6438563" target="_blank" class="faded pull-right" style="font-size:12px;color:var(--text-color)">code by katz</a></span>
						<!-- CREDIT END -->
					</div>
				</div>
			</div>
			<!-- PAGEDOLL (hidden on mobile) -->
			<div class="p-1 col-lg-4 hidden-sm-down">
				<div style="position: absolute;right: 120px;z-index: -1;background-image:url(https://placehold.co/500);background-position:center;background-size:contain;background-repeat:no-repeat;min-height:500px;width:100%;filter:var(--drop-shadow);"></div>
				<!-- PAGEDOLL END -->
			</div>
		</div>
	</div>
</div>
<!-- CODE END -->

Select all

<!-- Free to use code, feel free to customize and frankenstein as you wish. Do not remove my credits. 
   Pls do not ask me 4 general coding help ^^"

   
   TURN OFF WYSIWYG PLZ 4 DA LOVE OF GOD
   
   
-->
<!-- CODE START -->
<!-- COLORS -->
<div style="
--bg-color:rgba(85,70,107,0.83);
--border:2px solid #17153B;
--bg-gradient:linear-gradient(0deg,#2E236C 60%, #8862A1 100%);
--text-shadow:0px 0px 10px #17153B;
--bg-faded:rgba(85,70,107,0.83);
--text-color:#EBD3F8;
--drop-shadow:drop-shadow(0px 0px 10px #7626c4);">
	<!-- COLORS END -->
	<div class="container  mx-auto p-2" style="width:100%;max-width:800px;font-family:arial narrow;text-shadow:var(--text-shadow);color:var(--text-color)">
		<div class="row no-gutters">
			<div class="p-1 col-lg-8">
				<div class="card mx-auto p-2" style="background:var(--bg-gradient);height:3rem;border-radius:0px 20px 0px 0px;border:var(--border);">
					<div class="justify-content-between">
						<!-- FLAVOR TEXT -->
						<p style="font-family:impact;font-size:20px;">Flavor Text !!</p>
						<!-- FLAVOR TEXT END -->
						<span>
							<div class="btn btn-square d-inline-block" style="position:relative;">
								<!-- MUSIC PLAYER -->
								<i class="fas fa-radiation fa-spin"></i>
								<!--EMBED CONTAINER-->
								<div data-toggle="tooltip" title="Song - Artist" class="card-img-overlay p-0 overflow-hidden" style="opacity:.01;">
									<iframe class="card-img-overlay p-0" style="width:800%; height:800%; top:-200%; left:-200%;" src="https://www.youtube.com/embed/EMBEDURLHERE"></iframe>
								</div> <!-- MUSIC PLAYER END -->
							</div>
						</span>
					</div>
				</div>
				<div class="card mx-auto p-2" style="background:var(--bg-color);border:var(--border);border-top:0px;border-bottom:0px;border-radius:0px;background-image: url(https://www.transparenttextures.com/patterns/asfalt-light.png);">
					<div class="row no-gutters">
						<!-- NAME -->
						<div class="p-1 col-sm-9">
							<h2>Name</h2>
							<!-- NAME END -->
							<!-- FLAGS -->
							<div data-toggle="tooltip" title="LABEL" class="rounded d-inline-block" style="background-image:linear-gradient(#e40303,#e40303 16.7%,#ff8c00 16.7%,#ff8c00 33.4%,#ffed00 33.3%,#ffed00 50.1%,#008026 50.1%,#008026 66.8%,#004dff 66.8%,#004dff 83.5%,#750787 83.5%);line-height:20px;width:26px;">&nbsp;</div>
							<div data-toggle="tooltip" title="LABEL" class="rounded d-inline-block" style="background-image:linear-gradient(#e40303,#e40303 16.7%,#ff8c00 16.7%,#ff8c00 33.4%,#ffed00 33.3%,#ffed00 50.1%,#008026 50.1%,#008026 66.8%,#004dff 66.8%,#004dff 83.5%,#750787 83.5%);line-height:20px;width:26px;">&nbsp;</div>
							<div data-toggle="tooltip" title="LABEL" class="rounded d-inline-block" style="background-image:linear-gradient(#e40303,#e40303 16.7%,#ff8c00 16.7%,#ff8c00 33.4%,#ffed00 33.3%,#ffed00 50.1%,#008026 50.1%,#008026 66.8%,#004dff 66.8%,#004dff 83.5%,#750787 83.5%);line-height:20px;width:26px;">&nbsp;</div>
							<!-- ADD OR REMOVE ABOVE THIS LINE -->
							<!-- FLAGS END -->
							<!-- BASIC INFO -->
							<p class="faded">prns | nationality | etc</p>
							<!-- BASIC INFO END -->
							<!-- LINKS -->
							<a data-toggle="tooltip" title="LINK" href="LINK_HERE" target="_blank" style="color:var(--text-color)">
								<i class="fas fa-link" style="font-size:17px"></i>
							</a>
							<a data-toggle="tooltip" title="LINK" href="LINK_HERE" target="_blank" style="color:var(--text-color)">
								<i class="fas fa-link" style="font-size:17px"></i>
							</a>
							<a data-toggle="tooltip" title="LINK" href="LINK_HERE" target="_blank" style="color:var(--text-color)">
								<i class="fas fa-link" style="font-size:17px"></i>
							</a>
							<!-- ADD OR REMOVE ABOVE THIS LINE -->
							<!-- LINKS END -->
							<!-- DESCRIPTION -->
							<p class="mt-2" style="overflow-y:scroll;height:100px;">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>
							<!-- DESCRIPTION END -->
							<!-- BLINKIES -->
							<p class="mx-auto text-center my-2" style="max-width:100%;">
								<img alt="" style="max-height:20px;" src="https://placehold.co/150x20">
								<img alt="" style="max-height:20px;" src="https://placehold.co/150x20">
								<img alt="" style="max-height:20px;" src="https://placehold.co/150x20">
								<img alt="" style="max-height:20px;" src="https://placehold.co/150x20">
								<!-- ADD OR REMOVE ABOVE THIS LINE -->
							</p> <!-- BLINKIES END -->
						</div>
						<div class="col-sm-3">
							<!-- STAMPS -->
							<p class="mx-auto text-center my-2" style="max-width:100%;">
								<img class="p-1" style="max-height:56px;" src="https://placehold.co/99x56">
								<img class="p-1" style="max-height:56px;" src="https://placehold.co/99x56">
								<img class="p-1" style="max-height:56px;" src="https://placehold.co/99x56">
								<img class="p-1" style="max-height:56px;" src="https://placehold.co/99x56">
								<!-- ADD OR REMOVE ABOVE THIS LINE -->
							</p> <!-- STAMPS END-->
						</div>
					</div>
				</div>
				<div class="card mx-auto bg-faded p-2" style="background:var(--bg-faded);border:var(--border);border-top:0px;border-bottom:0px;border-radius:0px;background-image: url(https://www.transparenttextures.com/patterns/asfalt-light.png);">
					<h4>Featured Characters</h4>
					<!-- FEATURED CHARACTERS -->
					<div class="mt-2 p-2">
						<div class="row d-flex justify-content-center">
							<!-- CHARACTER -->
							<div class="column ml-2">
								<!-- ICON -->
								<div class="card mx-auto" style="background-image: url(https://placehold.co/90);background-size:cover; height:90px;width:90px;background-position: center;background-repeat: no-repeat;border:var(--border)"></div>
								<!-- ICON END -->
								<!-- CHARACTER LINK -->
								<div style="text-align:center;">
									<a href="LINK_HERE" style="font-size:12px;font-weight:bold;color:var(--text-color)">CHARACTER</a>
								</div>
								<!-- CHARACTER LINK END -->
							</div>
							<!-- CHARACTER END -->
							<!-- CHARACTER -->
							<div class="column ml-2">
								<!-- ICON -->
								<div class="card mx-auto" style="background-image: url(https://placehold.co/90);background-size:cover; height:90px;width:90px;background-position: center;background-repeat: no-repeat;border:var(--border)"></div>
								<!-- ICON END -->
								<!-- CHARACTER LINK -->
								<div style="text-align:center;">
									<a href="LINK_HERE" style="font-size:12px;font-weight:bold;color:var(--text-color)">CHARACTER</a>
								</div>
								<!-- CHARACTER LINK END -->
							</div>
							<!-- CHARACTER END -->
							<!-- CHARACTER -->
							<div class="column ml-2">
								<!-- ICON -->
								<div class="card mx-auto" style="background-image: url(https://placehold.co/90);background-size:cover; height:90px;width:90px;background-position: center;background-repeat: no-repeat;border:var(--border)"></div>
								<!-- ICON END -->
								<!-- CHARACTER LINK -->
								<div style="text-align:center;">
									<a href="LINK_HERE" style="font-size:12px;font-weight:bold;color:var(--text-color)">CHARACTER</a>
								</div>
								<!-- CHARACTER LINK END -->
							</div>
							<!-- CHARACTER END -->
							<!-- CHARACTER -->
							<div class="column ml-2">
								<!-- ICON -->
								<div class="card mx-auto" style="background-image: url(https://placehold.co/90);background-size:cover; height:90px;width:90px;background-position: center;background-repeat: no-repeat;border:var(--border)"></div>
								<!-- ICON END -->
								<!-- CHARACTER LINK -->
								<div style="text-align:center;">
									<a href="LINK_HERE" style="font-size:12px;font-weight:bold;color:var(--text-color)">CHARACTER</a>
								</div>
								<!-- CHARACTER LINK END -->
							</div>
							<!-- CHARACTER END -->
							<!-- CHARACTER -->
							<div class="column ml-2">
								<!-- ICON -->
								<div class="card mx-auto" style="background-image: url(https://placehold.co/90);background-size:cover; height:90px;width:90px;background-position: center;background-repeat: no-repeat;border:var(--border)"></div>
								<!-- ICON END -->
								<!-- CHARACTER LINK -->
								<div style="text-align:center;">
									<a href="LINK_HERE" style="font-size:12px;font-weight:bold;color:var(--text-color)">CHARACTER</a>
								</div>
								<!-- CHARACTER LINK END -->
							</div>
							<!-- CHARACTER END -->
							
							<!-- ADD OR REMOVE ABOVE THIS LINE -->
						</div>
					</div>
					<!-- FEATURED CHARACTERS END -->
				</div>
				<div class="card mx-auto p-2" style="border-radius:00px 0px 0px 20px;background:var(--bg-gradient);border:var(--border);">
					<div style="justify-content:between">
						<!-- STATUS -->
						<span>
							<p class="faded pull-left" style="font-size:12px;">comms: closed | trades: moots only</p>
						</span>
						<!-- STATUS END -->
						<!-- CREDIT DO NOT REMOVE -->
						<span><a href="https://toyhou.se/knockoutfangirl/characters/folder:6438563" target="_blank" class="faded pull-right" style="font-size:12px;color:var(--text-color)">code by katz</a></span>
						<!-- CREDIT END -->
					</div>
				</div>
			</div>
			<!-- PAGEDOLL (hidden on mobile) -->
			<div class="p-1 col-lg-4 hidden-sm-down">
				<div style="position: absolute;right: 120px;z-index: -1;background-image:url(https://placehold.co/500);background-position:center;background-size:contain;background-repeat:no-repeat;min-height:500px;width:100%;filter:var(--drop-shadow);"></div>
				<!-- PAGEDOLL END -->
			</div>
		</div>
	</div>
</div>
<!-- CODE END -->

Recent Images

No images.

4419 Users Online 3:10 pm
About FAQ Rules TOS