COA Color Swatches

Developer

Size

4,665 Kb

Views

16,192

COA Color Swatches Previews
COA Color Swatches HTML Codes
COA Color Swatches CSS Codes
COA Color Swatches JS Codes

How do I make an coa color swatches?

What is a coa color swatches? How do you make a coa color swatches? This script and codes were developed by JR Jenkins on 28 September 2022, Wednesday.

COA Color Swatches Previews

COA Color Swatches - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>COA Color Swatches</title> <!--[if gte IE 9]> <style type="text/css"> .gradient { filter: none; } </style>
<![endif]--> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <h1> Core Swatches </h1>
<div class="row"> <div class="span1 color01"></div> <div class="span1 color02"></div> <div class="span1 color03"></div> <div class="span1 color04"></div> <div class="span1 color05"></div>
</div>
<div class="row"> <div class="span1 color06"></div> <div class="span1 color07"></div> <div class="span1 color08"></div> <div class="span1 color09"></div> <div class="span1 color10"></div>
</div>
<div class="row"> <div class="span1 color11"></div> <div class="span1 color12"></div> <div class="span1 color13"></div> <div class="span1 color14"></div> <div class="span1 color15"></div>
</div>
<div class="row"> <div class="span1 color16"></div> <div class="span1 color17"></div> <div class="span1 color18"></div> <div class="span1 color19"></div> <div class="span1 color20"></div>
</div>
<div class="row"> <div class="span1 color21"></div> <div class="span1 color22"></div> <div class="span1 color23"></div> <div class="span1 color24"></div> <div class="span1 color25"></div>
</div>
<div class="row"> <div class="span1 color26"></div> <div class="span1 color27"></div> <div class="span1 color28"></div> <div class="span1 color29"></div> <div class="span1 color30"></div>
</div>
<div class="row"> <div class="span1 color31"></div> <div class="span1 color32"></div> <div class="span1 color33"></div> <div class="span1 color34"></div> <div class="span1 color35"></div>
</div> <h1> Gradients</h1> <div class="row"> <div class="span5 gradient1"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

COA Color Swatches - Script Codes CSS Codes

body { background-color: white;
}
body h1 { background-color: #005daa; color: white;
}
body div#container { background: url(http://www.uky.edu/~jrjenk5/checkerbackground.png); background-repeat: repeat; max-width: 960px; margin-left: auto; margin-right: auto; padding: 10px;
}
body .row { *zoom: 1; width: 100%; margin-left: auto; margin-right: auto; text-align: center;
}
body .row:before, body .row:after { content: " "; /* 1 */ display: table; /* 2 */
}
body .row:after { clear: both;
}
body .span1 { width: 150px; height: 11em; border: 1px solid #000; display: inline-block; margin-right: 1%; margin-top: 1%; position: relative;
}
body .span1 .colorid { color: white; background-color: black; position: absolute; bottom: 0; right: 0; margin: 0; width: 100%; height: 6em; text-align: left;
}
body .span5 { width: 750px; height: 11em; border: 1px solid #000; display: inline-block; margin-right: 1%; margin-top: 1%; position: relative;
}
body .span5 .colorid { color: white; background-color: black; position: absolute; bottom: 0; right: 0; margin: 0; width: 100%; height: 6em; text-align: left;
}
body div.row .color01 { background-color: transparent;
}
body div.row .color02 { background-color: rgba(0, 0, 0, 0.16);
}
body div.row .color03 { background-color: rgba(0, 0, 0, 0.3);
}
body div.row .color04 { background-color: rgba(0, 0, 0, 0.5);
}
body div.row .color05 { background-color: black;
}
body div.row .color06 { background-color: #005daa;
}
body div.row .color07 { background-color: #19466c;
}
body div.row .color08 { background-color: #1a4569;
}
body div.row .color09 { background-color: #2362a1;
}
body div.row .color10 { background-color: #245e95;
}
body div.row .color11 { background-color: rgba(36, 107, 167, 0.7);
}
body div.row .color12 { background-color: #2568ab;
}
body div.row .color13 { background-color: #2e597d;
}
body div.row .color14 { background-color: rgba(50, 50, 50, 0.09);
}
body div.row .color15 { background-color: rgba(50, 50, 50, 0.5);
}
body div.row .color16 { background-color: rgba(50, 50, 50, 0.75);
}
body div.row .color17 { background-color: #3282d2;
}
body div.row .color18 { background-color: #3a3a3a;
}
body div.row .color19 { background-color: #3d3d3d;
}
body div.row .color20 { background-color: #493505;
}
body div.row .color21 { background-color: #544534;
}
body div.row .color22 { background-color: #547150;
}
body div.row .color23 { background-color: #584836;
}
body div.row .color24 { background-color: #005daa;
}
body div.row .color25 { background-color: dimgray;
}
body div.row .color26 { background-color: #85a27e;
}
body div.row .color27 { background-color: #896c4a;
}
body div.row .color28 { background-color: #c7c7c7;
}
body div.row .color29 { background-color: #cccccc;
}
body div.row .color30 { background-color: #dacebc;
}
body div.row .color31 { background-color: #f1f1f1;
}
body div.row .color32 { background-color: #fbf8d7;
}
body div.row .color33 { background-color: #fdf8f2;
}
body div.row .color34 { background-color: rgba(255, 255, 255, 0.2);
}
body div.row .gradient1 { background-color: #3282d2; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF3282D2', endColorstr='#FF2568AB'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMyODJkMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI1NjhhYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3282d2), color-stop(100%, #2568ab)); background-image: -moz-linear-gradient(top, #3282d2 0%, #2568ab 100%); background-image: -webkit-linear-gradient(top, #3282d2 0%, #2568ab 100%); background-image: linear-gradient(to bottom, #3282d2 0%, #2568ab 100%);
}

COA Color Swatches - Script Codes JS Codes

$(".span1").each(function( ) { $color = $( this ).css( "background-color" ) ; $( this ).html("<p class='colorid'>" + $color.replace(/,/g, ",<br />").replace("(", "(<br />") + "</p>");
});

Home Page	Home
Developer	JR Jenkins
Username	jrjenk
Uploaded	September 28, 2022
Rating	3
Size	4,665 Kb
Views	16,192

Do you need developer help for COA Color Swatches?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

JR Jenkins (jrjenk) Script Codes

Name	Size
Working around OS X Dynamic Scrollbars	2,279 Kb
Reminder about Geolocation	1,875 Kb
UAC Decode Online	2,411 Kb
Simple jQuery Accordion Example	3,104 Kb
A Pen by JR Jenkins	2,697 Kb
Style Comments	3,229 Kb
BARcade Project Demo	254,852 Kb
Konami Code example	2,322 Kb
CSS Slide Show	2,856 Kb

Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Reviews and Ratings Star	Zbnmstry	1,591 Kb
Bloomberg Style Link Hover	Gil--	1,609 Kb
CSS 3D Radio buttons	Andreasnylin	1,650 Kb
Flat design iframe	Damienpm	1,819 Kb
A Pen by Moeid Saleem	Moeidsaleem	1,862 Kb
The Rope	Chribbe	2,886 Kb
Loading animation	Codeams	2,408 Kb
Algorithm practice	Abensur	5,620 Kb
Coming Soon	MariamMassadeh	1,680 Kb
Multi-step GSAP animation	Acacheung	2,668 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!