colorpalette

colorpalette.markdown

colorpalette

defenition of color samples for text and hyperlinks. fitgrd CSS grid.

A Pen by Tankred on CodePen.

License.

index.html

	
	<!-- START sample content -->
	<article class="slide first-content">
		<div class="center">
			<div class="row">
        <section class="fg6">
<h1>Headline</h1>
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, <a href="#13">sanctus quaerendum</a> et vix, at vel paulo oratio. His enim choro cu, has erat adversarium ex. Vix ut minimum blandit, ea novum minimum sed. Sapientem tincidunt no pri, petentium intellegat constituam eam no. Cu quo velit nonumy.
</p><p>
<a href="#14">Mea id verear meliore tractatos</a>
</p>

				</section>		
				<section class="fg6"><h1>Headline</h1>
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, <a href="#4">sanctus quaerendum</a> et vix, at vel paulo oratio. His enim choro cu, has erat adversarium ex. Vix ut minimum blandit, ea novum minimum sed. Sapientem tincidunt no pri, petentium intellegat constituam eam no. Cu quo velit nonumy.
</p><p>
<a href="#5">Mea id verear meliore tractatos</a>
</p></section>
				<section class="fg2"><div class="colorpalette rgb01"></div><span class="url">color #01 <br/>hyperlink</span></section>
				<section class="fg2"><div class="colorpalette rgb03"></div><span class="vurl">color #03<br/>visited link</span></section>
				<section class="fg2"><div class="colorpalette rgb06"></div><span class="aurl">color #06 <br/>active link</span><br/></section>
				<section class="fg2"><div class="colorpalette rgb02"></div><span class="rgbf02">color #02  text</span></section>
				<section class="fg2"><div class="colorpalette rgb04"></div><span class="rgbf04">color #04 active txt</span></section>
				<section class="fg2"><div class="colorpalette rgb05"></div><span class="rgbf02">color #05<br/>background<br/>white</span></section>
				
			</div>
		</div>
	</article>
	<!-- END sample content -->	

style.css

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:transparent}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;vertical-align:top}.center{max-width:80em;margin:0 auto;position:relative}.row{margin:0 .5em;padding:2% 1em 0;overflow:hidden;height:1%;*zoom:1;min-height:1%}.clearfix{height:0;clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.fg1,.fg2,.fg3,.fg4,.fg5,.fg6,.fg7,.fg8,.fg9,.fg10,.fg11,.fg12{margin:0 2% 0;padding:0;float:left;position:relative}.fg12{width:96%}.fg11{width:87.66%}.fg10{width:79.33%}.fg9{width:71%}.fg8{width:62.66%}.fg7{width:54.33%}.fg6{width:46%}.fg5{width:37.66%}.fg4{width:29.33%}.fg3{width:21%}.fg2{width:12.66%}.fg1{width:4.33%}.push12{margin-left:100%}.push11{margin-left:93.66%}.push10{margin-left:85.33%}.push9{margin-left:77%}.push8{margin-left:68.66%}.push7{margin-left:60.33%}.push6{margin-left:52%}.push5{margin-left:43.66%}.push4{margin-left:35.33%}.push3{margin-left:27%}.push2{margin-left:18.66%}.push1{margin-left:10.33%}.fg-no-gutter{padding:0 3.5%;margin-top:0;margin-bottom:0}.fg-no-gutter > [class*="fg"]{margin:0;padding:0;float:left;position:relative}.fg-no-gutter img{max-width:100%;max-height:100%}.fg-no-gutter .fg12{width:100%}.fg-no-gutter .fg11{width:91.66%}.fg-no-gutter .fg10{width:83.33%}.fg-no-gutter .fg9{width:75%}.fg-no-gutter .fg8{width:66.66%}.fg-no-gutter .fg7{width:58.33%}.fg-no-gutter .fg6{width:50%}.fg-no-gutter .fg5{width:41.66%}.fg-no-gutter .fg4{width:33.33%}.fg-no-gutter .fg3{width:25%}.fg-no-gutter .fg2{width:16.66%}.fg-no-gutter .fg1{width:8.33%}.fg-no-gutter .push12{margin-left:100%}.fg-no-gutter .push11{margin-left:91.66%}.fg-no-gutter .push10{margin-left:83.33%}.fg-no-gutter .push9{margin-left:75%}.fg-no-gutter .push8{margin-left:66.66%}.fg-no-gutter .push7{margin-left:58.33%}.fg-no-gutter .push6{margin-left:50%}.fg12 .push5{margin-left:41.66%}.fg-no-gutter .push4{margin-left:33.33%}.fg-no-gutter .push3{margin-left:25%}.fg-no-gutter .push2{margin-left:16.66%}.fg-no-gutter .push1{margin-left:8.33%}.fg-no-mobile{display:block !important}.fg-no-desktop{display:none !important}@media screen and (max-width: 36.5em ){.row{padding:0 1em;margin:0}.fg1,.fg2{width:46%;margin-bottom:1em}.fg3,.fg4,.fg5,.fg6,.fg7,.fg8,.fg9,.fg10,.fg11,.fg12{margin:0 2% 1em;padding:0;width:96%}.fg-no-gutter > [class*="fg"]{width:50%}.fg-no-mobile{display:none !important}.fg-no-desktop{display:block !important}}
body {
  	font: 300 1em/1.5em 'Letter Gothic Std','Andala',sans-serif;
}
.slide{
	padding: 2em 0;
}
.first-content{
}
.fg1,.fg2,.fg3,.fg4,.fg5,.fg6,.fg7,.fg8,.fg9,.fg10,.fg11,.fg12 {
	background: #fff;
	color: #999;
  	padding: 2em 0;
	font-size: .9em;
	margin-bottom: 2%;
	font-weight: bold;
	text-align: center;
	color: white;
}

a:link, span.url {
    color: #3977AC;
}
a:visited, span.vurl {
    color: #234E6B;
}
a:hover {
    color: #3977AC;
}
a:active, span.aurl {
    color: #007FFF;
} 

p,h1,h2 {
	padding:0 16px;
}
p,h1,h2,li {
	text-align:left;
  color:#999;
}
.tabledata td {vertical-align:top;text-align:left;padding:0 3em;
	color:#999;
background-color:#f3f2ee;
}
.colorpalette {
	margin-left:1em;
	width: 6em;
	height: 6em;
	border:1px solid #000;
}
.rgbf01 {
	color:#f3f2ee;
}
.rgbf02 {
	color:#999;
}
.rgbf03 {
color:#717173;
}
.rgbf04 {
color:#333;
}
.rgbf05 {
	color:#fff;
}
.rgbf06 {
color:#000;
}
.rgb01 {
	color:#999;
background-color:#3977AC;
}
.rgb02 {
	color:#fff;
background-color:#999;
}
.rgb03 {
background-color:#234E6B;
}
.rgb04 {
background-color:#333;
}
.rgb05 {
	color:#999;
background-color:#fff;
}
.rgb06 {
background-color:#007FFF;
}