css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <wrapper>
	<header>
		<section>
			<article>
				<div><a href=""><h1>Haishoku Soukan</h1></a></div>
			</article>

			<aside class="sidebar">
				<ul>
					<li><a href="">Colors</a></li>
					<li> | </li>
					<li><a href="">Combinations</a></li>
					<li> | </li>
					<li><a href="">Register</a></li>
					<li> | </li>
					<li><a href="">Login</a></li>
					<li> | </li>
					<li><a href="">Guest</a></li>
				</ul>
			</aside>
		</section>
	</header>

	<main>
		<section>
			<article>
				<form method="POST" action="searchCombination.php">
<button title="Hermosa Pink" style="background-color:#f7c9d5" name="hexaQuery" value="#f7c9d5"></button><button title="Corinthian Pink" style="background-color:#f6bdc0" name="hexaQuery" value="#f6bdc0"></button><button title="Cameo Pink" style="background-color:#e5bcbc" name="hexaQuery" value="#e5bcbc"></button><button title="Fawn" style="background-color:#d6b8aa" name="hexaQuery" value="#d6b8aa"></button><button title="Light Brown Drab" style="background-color:#c1a19e" name="hexaQuery" value="#c1a19e"></button><button title="Coral Red" style="background-color:#f09082" name="hexaQuery" value="#f09082"></button><button title="Fresh Color" style="background-color:#f1947c" name="hexaQuery" value="#f1947c"></button><button title="Grenadine Pink" style="background-color:#ef805f" name="hexaQuery" value="#ef805f"></button><button title="Eosine Pink" style="background-color:#ed7e93" name="hexaQuery" value="#ed7e93"></button><button title="Spinel Red" style="background-color:#eb6e8d" name="hexaQuery" value="#eb6e8d"></button><button title="Old Rose" style="background-color:#d46a75" name="hexaQuery" value="#d46a75"></button><button title="Euginia Red" style="background-color:#e05e53" name="hexaQuery" value="#e05e53"></button><button title="Eugenia Red" style="background-color:#db4f58" name="hexaQuery" value="#db4f58"></button><button title="Law Sienna" style="background-color:#c37608" name="hexaQuery" value="#c37608"></button><button title="Vinaceous Tawny" style="background-color:#cb6012" name="hexaQuery" value="#cb6012"></button><button title="Jasper Red" style="background-color:#e74d0b" name="hexaQuery" value="#e74d0b"></button><button title="Spectrum Red" style="background-color:#df0716" name="hexaQuery" value="#df0716"></button><button title="Red Orange" style="background-color:#db3915" name="hexaQuery" value="#db3915"></button><button title="Etruscan Red" style="background-color:#ca503c" name="hexaQuery" value="#ca503c"></button><button title="Burnt Sienna" style="background-color:#b65115" name="hexaQuery" value="#b65115"></button><button title="Ocher Red" style="background-color:#b45446" name="hexaQuery" value="#b45446"></button><button title="Scarlet" style="background-color:#cf2438" name="hexaQuery" value="#cf2438"></button><button title="Carmine" style="background-color:#ce002d" name="hexaQuery" value="#ce002d"></button><button title="Indian Lake" style="background-color:#ca3464" name="hexaQuery" value="#ca3464"></button><button title="Rosolanc Purple" style="background-color:#b8366d" name="hexaQuery" value="#b8366d"></button><button title="Pomegranate Purple" style="background-color:#bc0b50" name="hexaQuery" value="#bc0b50"></button><button title="Hydrangea Red" style="background-color:#ab3a45" name="hexaQuery" value="#ab3a45"></button><button title="Brick Red" style="background-color:#b03f16" name="hexaQuery" value="#b03f16"></button><button title="Carmine Red" style="background-color:#ad252f" name="hexaQuery" value="#ad252f"></button><button title="Pompeian Red" style="background-color:#b21931" name="hexaQuery" value="#b21931"></button><button title="Red" style="background-color:#ad163b" name="hexaQuery" value="#ad163b"></button><button title="Brown" style="background-color:#86431f" name="hexaQuery" value="#86431f"></button><button title="Hays Russet" style="background-color:#833121" name="hexaQuery" value="#833121"></button><button title="Vandyke Red" style="background-color:#8c1d19" name="hexaQuery" value="#8c1d19"></button><button title="Pansy Purple" style="background-color:#870836" name="hexaQuery" value="#870836"></button><button title="Pale Burnt Lake" style="background-color:#8a2421" name="hexaQuery" value="#8a2421"></button><button title="Violet Red" style="background-color:#5e2657" name="hexaQuery" value="#5e2657"></button><button title="Vistoris Lake" style="background-color:#784244" name="hexaQuery" value="#784244"></button><button title="Sulphur Yellow" style="background-color:#f8f2c7" name="hexaQuery" value="#f8f2c7"></button><button title="Pale Lemon Yellow" style="background-color:#fff4b3" name="hexaQuery" value="#fff4b3"></button><button title="Naples Yellow" style="background-color:#fdeca3" name="hexaQuery" value="#fdeca3"></button><button title="Ivory Buff" style="background-color:#eedaa5" name="hexaQuery" value="#eedaa5"></button><button title="Seashell Pink" style="background-color:#fbdbc4" name="hexaQuery" value="#fbdbc4"></button><button title="Light Pinkish Cinnamon" style="background-color:#face9d" name="hexaQuery" value="#face9d"></button><button title="Pinkish Cinnamon" style="background-color:#f0bc7e" name="hexaQuery" value="#f0bc7e"></button><button title="Cinnamon Buff" style="background-color:#fbcc79" name="hexaQuery" value="#fbcc79"></button><button title="Cream Yellow" style="background-color:#fac55e" name="hexaQuery" value="#fac55e"></button><button title="Golden Yellow" style="background-color:#f3a94b" name="hexaQuery" value="#f3a94b"></button><button title="Vinaceous Cinnamon" style="background-color:#efae8d" name="hexaQuery" value="#efae8d"></button><button title="Ochraceous Salmon" style="background-color:#dcab76" name="hexaQuery" value="#dcab76"></button><button title="Isabella Color" style="background-color:#d0b06b" name="hexaQuery" value="#d0b06b"></button><button title="Maple" style="background-color:#d1ac6b" name="hexaQuery" value="#d1ac6b"></button><button title="Olive Buff" style="background-color:#ced19a" name="hexaQuery" value="#ced19a"></button><button title="Ecru" style="background-color:#ccb997" name="hexaQuery" value="#ccb997"></button><button title="Yellow" style="background-color:#fff100" name="hexaQuery" value="#fff100"></button><button title="Lemon Yellow" style="background-color:#faee2c" name="hexaQuery" value="#faee2c"></button><button title="Apricot Yellow" style="background-color:#ffe100" name="hexaQuery" value="#ffe100"></button><button title="Pyrite Yellow" style="background-color:#d0ba48" name="hexaQuery" value="#d0ba48"></button><button title="Olive Ocher" style="background-color:#dabb27" name="hexaQuery" value="#dabb27"></button><button title="Yellow Ocher" style="background-color:#e5bc2a" name="hexaQuery" value="#e5bc2a"></button><button title="Orange Yellow" style="background-color:#f9b900" name="hexaQuery" value="#f9b900"></button><button title="Yellow Orange" style="background-color:#f5a200" name="hexaQuery" value="#f5a200"></button><button title="Apricot Orange" style="background-color:#f18f43" name="hexaQuery" value="#f18f43"></button><button title="Orange" style="background-color:#ed7100" name="hexaQuery" value="#ed7100"></button><button title="Peach Red" style="background-color:#ea5521" name="hexaQuery" value="#ea5521"></button><button title="English Red" style="background-color:#d86310" name="hexaQuery" value="#d86310"></button><button title="Cinnamon Rufous" style="background-color:#c97938" name="hexaQuery" value="#c97938"></button><button title="Orange Rufous" style="background-color:#c76c0f" name="hexaQuery" value="#c76c0f"></button><button title="Sulphine Yellow" style="background-color:#c9a800" name="hexaQuery" value="#c9a800"></button><button title="Khaki" style="background-color:#c49007" name="hexaQuery" value="#c49007"></button><button title="Citron Yellow" style="background-color:#b7bc22" name="hexaQuery" value="#b7bc22"></button><button title="Citrine" style="background-color:#ad9d13" name="hexaQuery" value="#ad9d13"></button><button title="Buffy Citrine" style="background-color:#9e8d43" name="hexaQuery" value="#9e8d43"></button><button title="Dark Citrine" style="background-color:#978c56" name="hexaQuery" value="#978c56"></button><button title="Light Grayish Olive" style="background-color:#8e885e" name="hexaQuery" value="#8e885e"></button><button title="Kronbergs Green" style="background-color:#8c8d58" name="hexaQuery" value="#8c8d58"></button><button title="Olive" style="background-color:#8a8520" name="hexaQuery" value="#8a8520"></button><button title="Orange Citrine" style="background-color:#a37721" name="hexaQuery" value="#a37721"></button><button title="Sudan Brown" style="background-color:#ad6b4c" name="hexaQuery" value="#ad6b4c"></button><button title="Olive Green" style="background-color:#71773a" name="hexaQuery" value="#71773a"></button><button title="Light Brownish Olive" style="background-color:#8b7445" name="hexaQuery" value="#8b7445"></button><button title="Deep Grayish Olive" style="background-color:#6c6036" name="hexaQuery" value="#6c6036"></button><button title="Pale Raw Umber" style="background-color:#7a5329" name="hexaQuery" value="#7a5329"></button><button title="Sepia" style="background-color:#6d4e14" name="hexaQuery" value="#6d4e14"></button><button title="Madder Brown" style="background-color:#802911" name="hexaQuery" value="#802911"></button><button title="Mars Brown" style="background-color:#70350a" name="hexaQuery" value="#70350a"></button><button title="Vandyke Brown" style="background-color:#523412" name="hexaQuery" value="#523412"></button><button title="Turquoise Green" style="background-color:#c0e1ce" name="hexaQuery" value="#c0e1ce"></button><button title="Glaucous Green" style="background-color:#bed4c7" name="hexaQuery" value="#bed4c7"></button><button title="Dark Greenish Glaucous" style="background-color:#bfc9ac" name="hexaQuery" value="#bfc9ac"></button><button title="Yellow Green" style="background-color:#b6d565" name="hexaQuery" value="#b6d565"></button><button title="Light Green Yellow" style="background-color:#ccd63d" name="hexaQuery" value="#ccd63d"></button><button title="Night Green" style="background-color:#89c122" name="hexaQuery" value="#89c122"></button><button title="Olive Yellow" style="background-color:#aba64c" name="hexaQuery" value="#aba64c"></button><button title="Artemisia Green" style="background-color:#749793" name="hexaQuery" value="#749793"></button><button title="Andover Green" style="background-color:#708277" name="hexaQuery" value="#708277"></button><button title="Rainette Green" style="background-color:#84925e" name="hexaQuery" value="#84925e"></button><button title="Chromium Green" style="background-color:#7b9c6e" name="hexaQuery" value="#7b9c6e"></button><button title="Pistachio Green" style="background-color:#649278" name="hexaQuery" value="#649278"></button><button title="Sea Green" style="background-color:#00ac95" name="hexaQuery" value="#00ac95"></button><button title="Benzol Green" style="background-color:#009086" name="hexaQuery" value="#009086"></button><button title="Light Porcelain Green" style="background-color:#008e89" name="hexaQuery" value="#008e89"></button><button title="Green" style="background-color:#3a9864" name="hexaQuery" value="#3a9864"></button><button title="Dull Viridian Green" style="background-color:#008e5c" name="hexaQuery" value="#008e5c"></button><button title="Oil Green" style="background-color:#849626" name="hexaQuery" value="#849626"></button><button title="Diamine Green" style="background-color:#00873a" name="hexaQuery" value="#00873a"></button><button title="Cossack Green" style="background-color:#3a793c" name="hexaQuery" value="#3a793c"></button><button title="Lincoln Green" style="background-color:#5a5c2f" name="hexaQuery" value="#5a5c2f"></button><button title="Blackish Olive" style="background-color:#48583e" name="hexaQuery" value="#48583e"></button><button title="Deep Slate Olive" style="background-color:#263121" name="hexaQuery" value="#263121"></button><button title="Nile Blue" style="background-color:#c8e7e9" name="hexaQuery" value="#c8e7e9"></button><button title="Pale Kings Blue" style="background-color:#b4daea" name="hexaQuery" value="#b4daea"></button><button title="Light Glaucous Blue" style="background-color:#b0cfd7" name="hexaQuery" value="#b0cfd7"></button><button title="Salvia Blue" style="background-color:#a2b3ce" name="hexaQuery" value="#a2b3ce"></button><button title="Cobalt Green" style="background-color:#a0d2a8" name="hexaQuery" value="#a0d2a8"></button><button title="Calamine Blue" style="background-color:#83ccd2" name="hexaQuery" value="#83ccd2"></button><button title="Venice Green" style="background-color:#69c3be" name="hexaQuery" value="#69c3be"></button><button title="Cerulian Blue" style="background-color:#008ea5" name="hexaQuery" value="#008ea5"></button><button title="Peacock Blue" style="background-color:#008c97" name="hexaQuery" value="#008c97"></button><button title="Green Blue" style="background-color:#008f97" name="hexaQuery" value="#008f97"></button><button title="Olympic Blue" style="background-color:#5981b5" name="hexaQuery" value="#5981b5"></button><button title="Blue" style="background-color:#0065b3" name="hexaQuery" value="#0065b3"></button><button title="Antwarp Blue" style="background-color:#006e93" name="hexaQuery" value="#006e93"></button><button title="Helvetia Blue" style="background-color:#00558e" name="hexaQuery" value="#00558e"></button><button title="Dark Medici Blue" style="background-color:#527177" name="hexaQuery" value="#527177"></button><button title="Dusky Green" style="background-color:#005147" name="hexaQuery" value="#005147"></button><button title="Deep Lyons Blue" style="background-color:#003983" name="hexaQuery" value="#003983"></button><button title="Violet Blue" style="background-color:#393f68" name="hexaQuery" value="#393f68"></button><button title="Vandar Poel Blue" style="background-color:#00486c" name="hexaQuery" value="#00486c"></button><button title="Dark Tyrian Blue" style="background-color:#043451" name="hexaQuery" value="#043451"></button><button title="Dull Violet Black" style="background-color:#001b45" name="hexaQuery" value="#001b45"></button><button title="Deep Indigo" style="background-color:#001231" name="hexaQuery" value="#001231"></button><button title="Deep Slate Green" style="background-color:#0c2f2c" name="hexaQuery" value="#0c2f2c"></button><button title="Grayish Lavender Blue" style="background-color:#c0b8db" name="hexaQuery" value="#c0b8db"></button><button title="Grayish Lavender" style="background-color:#c7b0b8" name="hexaQuery" value="#c7b0b8"></button><button title="Laelia Pink" style="background-color:#cf97ab" name="hexaQuery" value="#cf97ab"></button><button title="Lilac" style="background-color:#bf87b0" name="hexaQuery" value="#bf87b0"></button><button title="Eupatorium Purple" style="background-color:#c1518d" name="hexaQuery" value="#c1518d"></button><button title="Light Mauve" style="background-color:#a070a8" name="hexaQuery" value="#a070a8"></button><button title="Aconite Violet" style="background-color:#aa66a1" name="hexaQuery" value="#aa66a1"></button><button title="Dull Blue Violet" style="background-color:#816e9d" name="hexaQuery" value="#816e9d"></button><button title="Dark Soft Violet" style="background-color:#635b98" name="hexaQuery" value="#635b98"></button><button title="Blue Violet" style="background-color:#624498" name="hexaQuery" value="#624498"></button><button title="Purple Drab" style="background-color:#8e585a" name="hexaQuery" value="#8e585a"></button><button title="Plumbeous" style="background-color:#72737c" name="hexaQuery" value="#72737c"></button><button title="Vernonia Purple" style="background-color:#94495e" name="hexaQuery" value="#94495e"></button><button title="Dark Slate Purple" style="background-color:#703e51" name="hexaQuery" value="#703e51"></button><button title="Taupe Brown" style="background-color:#854558" name="hexaQuery" value="#854558"></button><button title="Violet Carmine" style="background-color:#713645" name="hexaQuery" value="#713645"></button><button title="Violet" style="background-color:#453580" name="hexaQuery" value="#453580"></button><button title="Red Violet" style="background-color:#561c68" name="hexaQuery" value="#561c68"></button><button title="Cotinga Purple" style="background-color:#520f44" name="hexaQuery" value="#520f44"></button><button title="Dasky Madder Violet" style="background-color:#4c194a" name="hexaQuery" value="#4c194a"></button><button title="White" style="border:1px solid black; background-color:#ffffff" name="hexaQuery" value="#ffffff"></button><button title="Neutral Gray" style="background-color:#c0c7c6" name="hexaQuery" value="#c0c7c6"></button><button title="Mineral Gray" style="background-color:#afbbb5" name="hexaQuery" value="#afbbb5"></button><button title="Warm Gray" style="background-color:#acac9e" name="hexaQuery" value="#acac9e"></button><button title="Slate Color" style="background-color:#2d424a" name="hexaQuery" value="#2d424a"></button><button title="Black" style="background-color:#191210" name="hexaQuery" value="#191210"></button>
</form>
			</article>

			<!--
			<aside class="sidebar">
				<div>sidebar right</div>
			</aside>
			-->
		</section>
	</main>

	<aside class="bottom">
		<div class="add" title="Click To Add A New Color"><a href="#">+</a></div>
	</aside>
	
	<footer>
		<div>All rights reserved</div>
	</footer>
</wrapper>

            
          
!
            
              * {
	font-size:12px;
	font-family:Trebuchet MS;
}

html, body {
	width:100%;
	height:100%; //sticky footer required
}

wrapper {
	min-height:100%; //sticky footer required
	display:grid;
	grid-template-rows:repeat(1, auto) 1fr;//sticky footer
	grid-row-gap:1rem;
}
//you only need to explicity define sizes (auto), until the row that will fill the entire space left (main 1fr)

wrapper > * {
	display:grid;
	grid-auto-rows:min-content;
	grid-template-columns:2fr 1fr minmax(auto, 768px) 1fr 2fr; //your meat & potatoes 1
	padding-left:1rem;
	padding-right:1rem;
	//border:1px solid red;
	//background-color:#ccc;
}

wrapper > * > * {
	grid-column:3; //your meat & potatoes 2
}

header {
	//background-color:#ccc;
}

section {
	display:flex;
	display:inline-flex;
	flex-direction:column;
	align-items:center;
}

article {
	//order:1;
	//border:1px solid blue;
}

aside {
	//border:1px solid orange;
	flex-grow:1;
}

ul {
	margin:0;
	padding:0;
	display:flex;
	justify-content:flex-end;
	list-style-type:none;
	flex-direction:column;
	flex-wrap:wrap;
}

li {
	margin-right:0.5rem;
}



@media screen and(min-width:768px) {	
	section {
		flex-direction:row;
	}
	
	ul {
		flex-direction:row;
	}
}


///////////////////////////////////////////
// HAISHOKU CUSTOM

a {
	color:gray;
	text-decoration:none;
}

a:hover {
	color:black;
}

button {box-sizing:border-box; width:4.125rem; height:4.125rem; margin:1em; border:none; border-radius:50%; transition:ease 0.1s;}
button:hover {cursor:pointer; transform:scale(2.0,2.0)}

.add {
	display:flex;
	justify-content:center;
}

.add a {
	font-size:10rem;
	text-decoration:none;
	color:silver;
}

.add a:hover {
	box-sizing:border-box;
	transition:ease 0.1s;
	color:black;
	font-size:11rem;
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console