My favorite palettes

Developer

Size

4,751 Kb

Views

24,288

My favorite palettes Previews
My favorite palettes HTML Codes
My favorite palettes CSS Codes
My favorite palettes JS Codes

How do I make an my favorite palettes?

Arrays experiment on sass, using @for y nth(). Also some beautiful color palettes.. What is a my favorite palettes? How do you make a my favorite palettes? This script and codes were developed by Alejandro Montañez on 01 October 2022, Saturday.

My favorite palettes Previews

My favorite palettes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>My favorite palettes</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:400,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>my favorite palettes</h1>
<div id="container"> <div class="palette" id="palette-#{p}"> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> </div> <div class="palette" id="palette-#{p}"> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> </div> <div class="palette" id="palette-#{p}"> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> </div> <div class="palette" id="palette-#{p}"> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> </div> <div class="palette" id="palette-#{p}"> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> </div> <div class="palette" id="palette-#{p}"> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></div> <div class="color color-#{c}"></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>

My favorite palettes - Script Codes CSS Codes

@charset "UTF-8";
#palette-1 .color-1 { background: #DDFFBD;
}
#palette-1 .color-1:after { content: "#DDFFBD";
}
#palette-1 .color-2 { background: #B7FAA5;
}
#palette-1 .color-2:after { content: "#B7FAA5";
}
#palette-1 .color-3 { background: #95E0D7;
}
#palette-1 .color-3:after { content: "#95E0D7";
}
#palette-1 .color-4 { background: #A7A5E2;
}
#palette-1 .color-4:after { content: "#A7A5E2";
}
#palette-1 .color-5 { background: #816C95;
}
#palette-1 .color-5:after { content: "#816C95";
}
#palette-1 .color-6 { background: #FF85FE;
}
#palette-1 .color-6:after { content: "#FF85FE";
}
#palette-1:before { content: "primavera";
}
#palette-2 .color-1 { background: #E9C698;
}
#palette-2 .color-1:after { content: "#E9C698";
}
#palette-2 .color-2 { background: #FE8856;
}
#palette-2 .color-2:after { content: "#FE8856";
}
#palette-2 .color-3 { background: #E0404B;
}
#palette-2 .color-3:after { content: "#E0404B";
}
#palette-2 .color-4 { background: #6C3F77;
}
#palette-2 .color-4:after { content: "#6C3F77";
}
#palette-2 .color-5 { background: #AA64D6;
}
#palette-2 .color-5:after { content: "#AA64D6";
}
#palette-2 .color-6 { background: #D9B5B9;
}
#palette-2 .color-6:after { content: "#D9B5B9";
}
#palette-2:before { content: "fireworks";
}
#palette-3 .color-1 { background: #F2EAE2;
}
#palette-3 .color-1:after { content: "#F2EAE2";
}
#palette-3 .color-2 { background: #EBD4B7;
}
#palette-3 .color-2:after { content: "#EBD4B7";
}
#palette-3 .color-3 { background: #F0B452;
}
#palette-3 .color-3:after { content: "#F0B452";
}
#palette-3 .color-4 { background: #D48C25;
}
#palette-3 .color-4:after { content: "#D48C25";
}
#palette-3 .color-5 { background: #6F89BF;
}
#palette-3 .color-5:after { content: "#6F89BF";
}
#palette-3 .color-6 { background: #BEC3E3;
}
#palette-3 .color-6:after { content: "#BEC3E3";
}
#palette-3:before { content: "playa";
}
#palette-4 .color-1 { background: #FAE2BE;
}
#palette-4 .color-1:after { content: "#FAE2BE";
}
#palette-4 .color-2 { background: #C2BABA;
}
#palette-4 .color-2:after { content: "#C2BABA";
}
#palette-4 .color-3 { background: #8D8C9C;
}
#palette-4 .color-3:after { content: "#8D8C9C";
}
#palette-4 .color-4 { background: #C9D998;
}
#palette-4 .color-4:after { content: "#C9D998";
}
#palette-4 .color-5 { background: #E3F1B7;
}
#palette-4 .color-5:after { content: "#E3F1B7";
}
#palette-4 .color-6 { background: #EEE5E0;
}
#palette-4 .color-6:after { content: "#EEE5E0";
}
#palette-4:before { content: "estambre";
}
#palette-5 .color-1 { background: #B0D164;
}
#palette-5 .color-1:after { content: "#B0D164";
}
#palette-5 .color-2 { background: #476E4D;
}
#palette-5 .color-2:after { content: "#476E4D";
}
#palette-5 .color-3 { background: #6BB071;
}
#palette-5 .color-3:after { content: "#6BB071";
}
#palette-5 .color-4 { background: #B2DEA6;
}
#palette-5 .color-4:after { content: "#B2DEA6";
}
#palette-5 .color-5 { background: #DAE0DE;
}
#palette-5 .color-5:after { content: "#DAE0DE";
}
#palette-5 .color-6 { background: #F7F7E4;
}
#palette-5 .color-6:after { content: "#F7F7E4";
}
#palette-5:before { content: "jardín";
}
#palette-6 .color-1 { background: #A7E376;
}
#palette-6 .color-1:after { content: "#A7E376";
}
#palette-6 .color-2 { background: #E2EB67;
}
#palette-6 .color-2:after { content: "#E2EB67";
}
#palette-6 .color-3 { background: #EBED9F;
}
#palette-6 .color-3:after { content: "#EBED9F";
}
#palette-6 .color-4 { background: #8EE8C0;
}
#palette-6 .color-4:after { content: "#8EE8C0";
}
#palette-6 .color-5 { background: #3CBA90;
}
#palette-6 .color-5:after { content: "#3CBA90";
}
#palette-6 .color-6 { background: #C298E0;
}
#palette-6 .color-6:after { content: "#C298E0";
}
#palette-6:before { content: "celebration";
}
body, div, h1 { margin: 0; padding: 0;
}
body { width: 100%; height: 100%; background: #30252E; color: #E9EDE0;
}
h1 { display: table; margin: 15px auto; letter-spacing: 5px; text-transform: uppercase; text-align: center; font: 300 44px/1 "Open Sans Condensed", sans-serif; opacity: 0;
}
#container { width: 648px; margin: 0 auto;
}
.palette { position: relative; overflow: visible;
}
.palette:before { display: block; width: 100px; height: 18px; position: absolute; top: calc(50% - 8px); left: -58px; text-align: center; letter-spacing: 2px; font: 300 18px/1 "Open Sans Condensed", sans-serif; opacity: 0; -webkit-transform: rotate(-90deg) translate3d(0, 0, 0); transform: rotate(-90deg) translate3d(0, 0, 0);
}
.palette:after { display: block; content: ""; clear: both;
}
.color { display: inline-block; width: 92px; height: 100px; position: relative; float: left; margin: 14px 8px; border-radius: 5px; text-align: center; opacity: 0; -webkit-transition: all 150ms; transition: all 150ms;
}
.color:after { position: relative; top: calc(50% - 11px); padding: 2px 5px; border-radius: 2px; text-transform: uppercase; font: 300 22px/1 "Open Sans Condensed", sans-serif; opacity: 0; background: rgba(255, 255, 255, 0.5); color: #362a34; -webkit-animation: fadeOut 200ms ease-in forwards; animation: fadeOut 200ms ease-in forwards;
}
.color:hover { -webkit-transform: scale(1.15); transform: scale(1.15);
}
h1.in, .color.in, .color:hover:after { -webkit-animation: bounceIn 450ms ease-in; animation: bounceIn 450ms ease-in; opacity: 1;
}
.palette.in:before { -webkit-animation: fadeIn 300ms ease-in forwards; animation: fadeIn 300ms ease-in forwards;
}
@-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 0.9; -webkit-transform: scale(1.1); transform: scale(1.1); } 80% { opacity: 1; -webkit-transform: scale(0.89); transform: scale(0.89); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 0.9; -webkit-transform: scale(1.1); transform: scale(1.1); } 80% { opacity: 1; -webkit-transform: scale(0.89); transform: scale(0.89); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes fadeOut { from { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } to { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); }
}
@keyframes fadeOut { from { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } to { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); }
}
@-webkit-keyframes fadeIn { from { letter-spacing: -6px; opacity: 0; } to { letter-spacing: 2px; opacity: 1; }
}
@keyframes fadeIn { from { letter-spacing: -6px; opacity: 0; } to { letter-spacing: 2px; opacity: 1; }
}

My favorite palettes - Script Codes JS Codes

$('h1, .palette, .color')
.each(function(i, e){ setTimeout(function(){ $(e).addClass('in') }, i * 200)
})

Home Page	Home
Developer	Alejandro Montañez
Username	codeams
Uploaded	October 01, 2022
Rating	4.5
Size	4,751 Kb
Views	24,288

Do you need developer help for My favorite palettes?

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!

Alejandro Montañez (codeams) Script Codes

Name	Size
Loading	1,859 Kb
Random	3,604 Kb
Progressbar test	2,727 Kb
Such Spinners, Much Loading	3,133 Kb
My favorite colors	3,221 Kb
Sticky navigation sample	3,642 Kb
Another loading animation	2,463 Kb
Random color	2,362 Kb
Bounce-in css animation	2,313 Kb
Minimalist Wordpress login	3,993 Kb

Create amazing art & images 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
A Pen by Kevin	Kevinkenger	2,642 Kb
Flexbox playground	Enxaneta	5,418 Kb
RRC wrapSwitch	Pshrmn	2,922 Kb
Magnus 3	ARocketfish	7,944 Kb
Canvas Fireworks	Jackrugile	6,200 Kb
Apple website	Jds317	1,835 Kb
Bootstrap Responsive Menu Drawer	JesseGlacken	3,777 Kb
Simple Weather App	Cmwebby	0 Kb
Calculator - codevember 08 - 2016	Caiocares	3,260 Kb
Faux column absolute wrapper	Yurimorini	1,823 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!