HELLO_WORLD: by KATTI
HTML + CSS code, single page
To use:
Click Text Area
Crtl+A (Select All)
Crtl+C (Copy Selected)
Crtl+V (Paste Elsewhere)
			<!DOCTYPE html>
<html>
<!-- 
/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\

			HELLO_WORLD_// by KATTI //2022//

/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ -->
	
<!-- HEAD
--------
			- <style> CSS Code Here </style>
			- <title> Website Title </title>
--------------------------/\/\/\/\/\/ -->
			<head>
			<meta charset="UTF-8">
			<meta name=		"viewport" 
						content="width=device-width, 
										 initial-scale=1.0">
			<title>HELLO_WORLD - KATTI</title>
<style>
/* Style the tab */
			body {		
				margin-top: 2%;
				background-image: url('https://crystal-lionheart.neocities.org/img/graphics/tile01%20(6).gif');
				font-family: 'Courier New', monospace;
				background-color: #000;
				text-decoration: 	none;
				color: 						#fff;
				padding-top: 			24px;
				overflow-x: hidden; }
			a { 			color: #999; }
			a:hover { color: #fff; }
			h1 {
				z-index: 										 2;
				font-family: 				 monospace;
				font-size: 								18px;
				color: 										#fff;
				margin-left: 							26px;
				margin-right: 						16px; 
				border-bottom: 1px dashed #666; }
			h1.header {
				position: 							sticky;
				top: 										 -18px;
				right: 										 0px;
				left: px;
				font-family: 				 monospace;
				font-size: 								26px;
				text-align: 						 right;
				background-color: 			  #000;
				height: 											;
				width: 										 100%;
				margin-top: 						 -22px;
				margin-bottom: 						 0px;
				margin-left: 							 0px;
				margin-right: 						 0px;
				padding-top: 							16px;
				padding-bottom: 					 8px;
				padding-left: 						 0px;
				padding-right: 						26px;
				border-bottom: 1px dashed #666;
				box-shadow: 36px 0px 10px 1px #000; }
			h2 {
			color: 													 #000;
			font-size: 											 22px;
			margin-left: 											8px;
			text-decoration: 						underline;
			filter: drop-shadow(2px 1px 2px #fff); }
			h2::after {	
			background-image: url('https://crystal-lionheart.neocities.org/img/gifs/txtbar.gif');	
		  animation: blinker 3s linear infinite;
			display: 	 							 inline-block;
			position: 									 relative;
			content:													"_"; }
			h2.title {
				font-size: 					24px;
				font-style: 		 oblique;
				letter-spacing: 		16px;
				position: 			absolute;
				left: 						-196px;
				top: 							 348px;
				transform: rotate(90deg); }
			h3 {
				box-shadow: 2px 0px 64px 1px #000 inset;
				background-color: 								 #000;
				width: 															35%;
				color: 														 #fff;
				font-variant-caps: 			all-petite-caps;
				font-family: 									monospace;
				text-align:  										  right;
				float: 														right;
				padding-right: 									 	 16px;
				padding-left: 										 16px; }
			h4 { 
				font-family: 				 monospace;
				font-size: 								18px;
				color: 										#fff;
				margin-left: 							16px;
				margin-right: 						16px; }
			hr {
				border-style: 				hidden;
				border-bottom-style:  dashed; }
			p { padding: 4px; }
			p::after {
					display: 	inline-block;
					position: 		relative;
					color: 						#000;
					content: 					 "|";
					background-image: url('https://crystal-lionheart.neocities.org/img/gifs/txtbar.gif');
				 	animation: 				blinker 1s linear infinite; }
			p.caplock {
				text-transform: uppercase; }
			p.lowercase {
				text-transform: lowercase; }
			p.footer {
				padding-top: 				  8px;
				padding-bottom: 			8px;}
/* ===== Icon Image CSS ===== */
			div.avvie {
				z-index: 				 3;
				position: absolute;
				top: 				 -24px;
				left: 			 -48px;
				width: 			 120px;
				height: 		 120px;
				border:  1px dashed #42ea9e;
				border-radius: 				 64px;
				background-image: url('https://crystal-lionheart.neocities.org/img/graphics/tile01%20(1).gif'); 
				background-color: 		 #000;
				background-position: center;
				background-repeat: 	 repeat;
				filter: 		 grayscale(74%); }
			img.avvie {
				width: 								100%;
				image-rendering: pixelated; }
/* ===== BG Image CSS ===== */
			div.BG {	
				z-index: 					 -2;
				position: 			fixed;
				bottom: 				-64px;
				right: 					 -4px;
				max-width: 		 	 100%;
				overflow: 		 hidden; 
				filter:  opacity(20%); }
			img.BG {
				width: 							 800px;
				filter: 		grayscale(80%);
				image-rendering: pixelated; }
/* ===== NavBar CSS ===== */
			div.header {	
				background-color: 			 #000;
				border-bottom: 1px solid #000; }
				.tab {
					box-shadow: 			   20px 0px 50px 10px #000 inset;
					border-bottom: 						 	  1px solid #555;
					overflow: 		 								  hidden;
					padding-left: 	 									76px; }
				.tab button {
					background-color: inherit;
					float: 			  	 left;
					border: 0px hidden #000;
					border-right: 1px solid #bbb;
					cursor: 		  	 pointer;
					text-decoration: 	 	none;
					color: 				 	#fff;
					text-align: 	   	  center;
					padding: 		14px 16px; }
				.tab button:hover {
					color: 		   #005bb6;
					background-color: #000; }
				.tab button.active {
					background-color: #000;
					color: 		   #005bb6; }
				.tablinks:last-child {
					border-right:   none;
					float: 		   right; }
/* ===== Main CSS ===== */
			.tabcontent {
				display: 			none;
				box-shadow: 20px 20px 50px 10px #000 inset;
							overflow: 			auto;
							position: 	relative;
							height: 			 560px;
							margin-right: 	 0px;
							margin-left: 		 0px;
							padding: 				16px;
							padding-bottom: 32px; }          
			div.parent {
			background-image: url('https://crystal-lionheart.neocities.org/img/graphics/tile01%20(7).gif');
			background-color: 					#312A41;
			background-blend-mode: 	color-dodge;
			background-size: 							100px;
						border: 						 8px ridge #333;
						border-radius: 								 16px;
			outline: 								 solid 1px #005bb6;
			box-shadow: 				20px 20px 50px 24px #000 inset;
			overflow: 										 visible;
			position: 										relative;
						left: 											  56px;
						height: 										  100%;
						min-height: 	600px;
						max-height: 	100%;
						width: 		 								 80%;
						max-width: 							1200px;
						min-width: 							 320px;
						text-shadow: 		1px 1px 0px #000;
						image-rendering: 			 pixelated; }
			div.body { 
				overflow: 			visible;
				position: 	relative;
				height: 			 560px;
				margin-right: 	 0px;
				margin-left: 		 0px;
				padding: 				16px;
				padding-bottom: 32px; }
			
/* ===== Footer CSS ===== */		
			div.footer {
					background-image: url('https://crystal-lionheart.neocities.org/img/graphics/tile01%20(7).gif');
					background-color: 								 #312a41;
					background-blend-mode: 					luminosity;
					box-shadow: 20px 20px 50px 10px #000 inset;
					position: 	relative;
					top: 					  24px;
					left: 				  56px;
					width: 		 		  80%;
					max-width: 	 1200px;
					min-width: 		320px;
					height: 		 	 56px;
					padding: 				4px;
					padding-bottom: 0px;
					margin-bottom: 48px;
					border: 		4px ridge #333;
					border-radius: 				16px;
					outline: solid 1px #005bb6; }
/* ===== Scrollbar CSS ===== */
* { scrollbar-width: 	 					auto;
 		scrollbar-color: #7a7a7a #000000; }
  *::-webkit-scrollbar {
    width: 			 					8px; }
  *::-webkit-scrollbar-track {
    background: 				 #000; }
  *::-webkit-scrollbar-thumb {
    background-color: #7a7a7a;
    border-radius: 				4px;
    border: 1px solid #3e4e8e; }
/* ============================ */
</style>
</head>
<body> 
<!-- Layout div.class guide:
----------------------------
<div class="___"> </div>
		 			="parent"		 > Page Container
					="header"		 > Navbar+Icon Container
					="avvie"		 > Icon <img src=""> code
					="tabcontent"> Main Container
					="body"			 > Main Content 
					="footer"		 > Bottom Textbox 
					="BG" 			 > Background Image
------------------------------------------
/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ -->	
<h2 class="title">HELLO WORLD;_</h2>
<!-- ------------------------------------------ -->
<div       class="parent">
	<div 	   class="header">
		<div   class="avvie">
		<img   class="avvie" 
					 src="https://crystal-lionheart.neocities.org/img/graphics/computer_explorer_2k-2.png"></div>
		<div   class="tab">
  <button class="tablinks" 
  		  onclick="openTab(event, 'tab1')" 
          id="defaultOpen">
          HOME	</button>
  <button class="tablinks" 
  		  onclick="openTab(event, 'tab2')">
          ABOUT	</button>
  <button class="tablinks" 
  		  onclick="openTab(event, 'tab3')">
          GALLERY</button>
	<a href="" target="blank">
  <button class="tablinks">
  		  LINK 	</button></a>
</div>
	</div>
<!-- /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
------------------------------------------
TAB CONTENT
------------------------------------------
/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ -->
	<!-- --------------TAB 01---------- -->
	<div id="tab1" 
			 class="tabcontent">			
	<h1  class="header">UPDATES</h1>
	<div class="body">
	<center>
	HELLO_WORLD: by KATTI<br>
	HTML + CSS code, single page
	<hr>
	</center>
	</div>
	</div>
	<!-- ----------------TAB 02---------- -->
	<div id="tab2" 
			 class="tabcontent">
	<h1  class="header">ABOUT</h1>
	<div class="body">
					<h1>WEIRD WIDE WEB ETIQUETTE</h1>
				<p> 
					.....*it is considered polite to 'SAVE' and 'UPLOAD' 
					a copy of a button/adoptable, as this saves on network bandwidth!
				</p>
					<h4>band · width<br>
						<sub>/ˈbandˌwidTH/</sub>
						<br>
						<br>
						<i>noun</i> 
					</h4>
						<sub> noun: 	<strong>bandwidth</strong>;  
									plural: <strong>bandwidths</strong>
						</sub>
					<ol>
						<li> the transmission capacity of a computer network 
							or other tele-communication system.
							<br>
							<br> 
							<i>
							<sup>
							"Posting separately wastes 
							<u>bandwidth</u> 
							<strong>and</strong> 
							disk space."
							</sup>
							</i>
						</li>
					<br>
						<li> the energy or mental capacity 
						required to deal with a situation.
						<br>
						<br>
						<i>
						<sup>
						"He lives alone, and says he doesn't have the 
						<u>bandwidth</u> 
							to handle a steady relationship."
						</sup>
						</i>
						</li>
					</ol>	
	</div>
	</div>
	<!-- -----------------------TAB 03---------- -->
	<div id="tab3" 
			 class="tabcontent">
	<h1  class="header">IMAGES</h1>
	<div class="body">
	<h1>Header 01</h1>
						<h2>Header 02</h2>
						<h3>Header 03</h3>
						<br>
					<a href="#">HyperLink</a> 
						<strong>Bold</strong> 
						<i>Italics</i> 
						<u>Underline</u> 

				<p class="caplock">
					CapLock paragraph
				<p class="lowercase">
					lowercase paragraph
				</p>
	</div>
	</div>
</div>
<!-- ------------------------------------------ -->
<!-- /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
------------------------------------------
FOOTER
------------------------------------------
/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ -->
	<div class="footer">
			<p align="center"
				 class="footer">
				<a 	href="#" 
						target="blank">Layout by Katti</a>
			</p>
	</div>
  <div class="BG">
		<img 	src="https://crystal-lionheart.neocities.org/img/gifs/cybermail.gif"	
					class="BG"></div>
</body>
<script>
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none"; }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", ""); }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active"; }
	document.getElementById("defaultOpen").click();
</script>
</html>
WEIRD WIDE WEB ETIQUETTE

.....*it is considered polite to 'SAVE' and 'UPLOAD' a copy of a button/adoptable, as this saves on network bandwidth!
band · width
_{/ˈbandˌwidTH/}

noun

_{noun: bandwidth;
plural: bandwidths}
the transmission capacity of a computer network or other tele-communication system.

^{"Posting separately wastes
bandwidth
and
disk space."}
the energy or mental capacity required to deal with a situation.

^{"He lives alone, and says he doesn't have the
bandwidth
to handle a steady relationship."}
Header 01

Header 02

Header 03

HyperLink Bold Italics Underline
CapLock paragraph
lowercase paragraph
HELLO WORLD;_

UPDATES

ABOUT

WEIRD WIDE WEB ETIQUETTE

band · width /ˈbandˌwidTH/ noun

IMAGES

Header 01

Header 02

Header 03

band · width
_{/ˈbandˌwidTH/}

noun
