HTML + CSS code, single page

			<!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="https://kattiara.neocities.org/" 
						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>

To use:

Click Text Area
Crtl+A (Select All)
Crtl+C (Copy Selected)
Crtl+V (Paste Elsewhere)

How to use as a NEOCITIES HOMEPAGE- [expanded tutorial]

	Create a new file to make your page! your index.html file can be your homepage, or you can make a new file called 'home' or 'main'.
	Remember! Any website page must be made as an .HTML file! You MUST include '.html' at the end of your 'New File' name.
	Once you create your file, it will appear on your dashboard. To add code to your page, you'll need to EDIT your file.
	Your page will have DEFAULT CODE to help you build your own webpage. For this use, we wont need any of this. Go ahead and delete anything already written out on this page. Careful not to CUT the text (Ctrl+X), or it will overwrite your previous COPY aciton.
	Now, CTRL+V (Paste) the copied layout code. It should end with a closing HTML tag. If you have issues after saving, try COPY and PASTING again to be sure you copied the entire textbox code.

	Now you can save your page! You can customize any of the layout code, or take some of it to learn/build your own layouts!

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

Credit:
^{Code by KATTI}

HTML/CSS/JS Resources -

w3schools

Image Credits -

HELLO WORLD;_

HELLO_WORLD: by KATTI

ABOUT

WEIRD WIDE WEB ETIQUETTE

band · width /ˈbandˌwidTH/ noun

IMAGES

Header 01

Header 02

Header 03

Credit: Code by KATTI

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

noun

Credit:
^{Code by KATTI}