Html Theme
A small snippet that you can play with to test colour theme ideas for websites
I was working on some themes for a site when i decided to make this to help better visulise the themes:
Here is the site in an iframe, though to edit the colours you'll either have to save the site from this link or use your browsers inspector
Source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block Site</title>
<style>
/* Test Colours Here */
:root{
--link: #333;
--head: #666;
--nav: #999;
--text: #eee;
--background: #fff;
}
body, html{
margin: 0;
padding: 0;
}
body{
height:100vh;
background-color: var(--background);
}
header{
background-color: var(--head);
height: 4ch;
}
body section{
display: grid;
grid-template-columns: 1fr 9fr;
height: 100%;
}
.sidebar{
background-color: var(--nav);
min-width: 8ch;
}
.content{
font-size: 1.5em;
padding: 1ch;
}
.word {
display: inline-block;
width: calc(var(--l, 6)*1ch);
background-color: var(--text);
height: 1em;
margin-left: 0.5ch;
}
.word:nth-of-type(10){
background-color: var(--link);
}
</style>
</head>
<body onload='document.querySelectorAll(".word").forEach((el)=>{el.style.setProperty("--l", Math.floor((Math.random()*8)+3))})'>
<header></header>
<section>
<nav class="sidebar"></nav>
<article class="content">
<!-- 100 "Words"-->
<span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span><span class="word"></span>
</article>
</section>
</body>
</html>