.container
	.paletteWrap.clearfix
	
		mixin paletteItemMix(firstColorMix, secondColorMix, thirdColorMix, fourthColorMix, firstHexColorMix, seconHexdColorMix, thirdHexColorMix, fourtHexhColorMix)
			.paletteItem
				.paletteItem__schemeBox
					.paletteItem__colorScheme.paletteItem__colorScheme_square
						each val in [`${firstColorMix}`, `${secondColorMix}`, `${thirdColorMix}`, `${fourthColorMix}`]
							.paletteItem__colorItem(class=`paletteItem__colorItem_${val}`)
					.paletteItem__colorScheme.paletteItem__colorScheme_vertical
						each val in [`${firstColorMix}`, `${secondColorMix}`, `${thirdColorMix}`, `${fourthColorMix}`]
							.paletteItem__colorItem(class=`paletteItem__colorItem_${val}`)
					.paletteItem__colorScheme.paletteItem__colorScheme_horizontal
						each val in [`${firstColorMix}`, `${secondColorMix}`, `${thirdColorMix}`, `${fourthColorMix}`]
							.paletteItem__colorItem(class=`paletteItem__colorItem_${val}`)
				.paletteItem__infoBox
					each val in [`${firstHexColorMix}`, `${seconHexdColorMix}`, `${thirdHexColorMix}`, `${fourtHexhColorMix}`]
						.paletteItem__colorBox
							p.paletteItem__colorName ##{val}

		+paletteItemMix('1', '2', '3', '4', 'f5f4e8', 'c50d66', 'f07810', 'eec60a')
		+paletteItemMix('5', '6', '7', '8', '13334c', '005792', 'f6f6e9', 'fd5f00')
		+paletteItemMix('9', '10', '11', '12', '57D1C9', 'ED5485', 'FFFBCB', 'FFE869')
		+paletteItemMix('13', '14', '15', '16', 'F8F9FC', 'C00000', 'DE3C3C', 'F7B32D')
		+paletteItemMix('17', '18', '19', '20', '003246', 'E4491C', '0387B1', 'F5F5F5')
		+paletteItemMix('21', '22', '23', '24', 'ff5108', 'fffdf8', 'ff2321', '000000')
		+paletteItemMix('25', '26', '27', '28', '7abed1', 'f05945', 'f7f3e9', 'f05945')
		+paletteItemMix('29', '30', '31', '32', 'FFFC31', 'F6F7EB', 'E94F37', '393E41')
		+paletteItemMix('33', '34', '35', '36', '518f8b', 'e3e1c8', '472c33', 'e6462d')
		+paletteItemMix('37', '38', '39', '40', 'c12127', '2a333c', 'ffffff', '8f9299')
		+paletteItemMix('41', '42', '43', '44', 'EDEDE4', 'F74906', '554E44', 'FFFFFF')
		+paletteItemMix('45', '46', '47', '48', '221E1D', 'ECEAE0', '63AA9C', 'E9633B')
		+paletteItemMix('49', '50', '51', '52', 'a10015', 'd52b15', 'efeee9', 'beb1b4')
		+paletteItemMix('53', '54', '55', '56', '222831', '393E46', 'FD7013', 'EEEEEE')
		+paletteItemMix('57', '58', '59', '60', 'FF7260', '9BD7D5', 'FFF5C3', '505050')
		+paletteItemMix('61', '62', '63', '64', 'FF3B1D', '7BDFF2', '000000', 'FFFFFF')
		
		
//--- Social links
.social
	ul.socialList
		li.socialList__item
			a.socialList__link(href="https://github.com/Kerthin?tab=overview&from=2021-05-01&to=2021-05-05" target="_blank")
				svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
					path(d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22")
		li.socialList__item
			a.socialList__link(href="https://codepen.io/Astap" target="_blank")
				svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
					polygon(points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2")
					line(x1="12" y1="22" x2="12" y2="15.5")
					polyline(points="22 8.5 12 15.5 2 8.5")
					polyline(points="2 15.5 12 8.5 22 15.5")
					line(x1="12" y1="2" x2="12" y2="8.5")
		li.socialList__item
			a.socialList__link(href="https://twitter.com/BelichenkoRoden" target="_blank")
				svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
					path(d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z")
View Compiled
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

::-webkit-scrollbar {
	width: 0;
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

@import 'https://rawcdn.githack.com/Kerthin/links/e23c46b4fa25b5672245c51fca29213232d5e883/css/fontLinks.css';

.container {
	position: absolute;
	width: 100%;
	height: auto;
	background-image: linear-gradient(135deg, rgb(240, 105, 102), rgb(250, 214, 166));
}

.paletteWrap {
	position: relative;
	width: 1230px;
	margin: 50px auto;
}

.paletteItem {
	float: left;
	padding: 20px;
	margin-bottom: 50px;
	margin-right: 50px;
	background-color: #f7e0b5;
	box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
	
	&:nth-child(4n) {
		margin-right: 0;
	}
}
.paletteItem__schemeBox {
	position: relative;
	margin-bottom: 15px;
	width: 230px;
	height: 310px;
	background-color: #fff8e7;
}

.paletteItem__colorScheme {
	position: absolute;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	
	&_square {
		top: 65px;
		left: 15px;
		width: 100px;
		height: 100px;

		.paletteItem__colorItem {
			width: 50%;
			height: 50%;
		}
	}

	&_vertical {
		top: 15px;
		right: 15px;
		width: 50px;
		height: 200px;

		.paletteItem__colorItem {
			width: 100%;
			height: 25%;
		}
	}

	&_horizontal {
		bottom: 20px;
		left: 15px;
		width: 200px;
		height: 50px;

		.paletteItem__colorItem {
			width: 25%;
			height: 100%;
		}
	}
}
.paletteItem__colorItem {
	float: left;
}

.paletteItem__infoBox {
	width: 230px;
	height: 50px;
}
.paletteItem__colorBox {
	float: left;
	width: 50%;
	height: 25px;
}
.paletteItem__colorName {
	text-align: center;
	font-family: 'Galeria-Medium';
}

$colorPalette: (
	1	: #f5f4e8,
	2	: #c50d66,
	3	: #f07810,
	4	: #eec60a,

	5	: #13334c,
	6	: #005792,
	7	: #f6f6e9,
	8	: #fd5f00,

	9	: #57D1C9,
	10	: #ED5485,
	11	: #FFFBCB,
	12	: #FFE869,

	13	: #F8F9FC,
	14	: #C00000,
	15	: #DE3C3C,
	16	: #F7B32D,

	17	: #003246,
	18	: #E4491C,
	19	: #0387B1,
	20	: #F5F5F5,

	21	: #ff5108,
	22	: #fffdf8,
	23	: #ff2321,
	24	: #000000,

	25	: #7abed1,
	26	: #f05945,
	27	: #f7f3e9,
	28	: #f05945,

	29	: #FFFC31,
	30	: #F6F7EB,
	31	: #E94F37,
	32	: #393E41,

	33	: #518f8b,
	34	: #e3e1c8,
	35	: #472c33,
	36	: #e6462d,

	37	: #c12127,
	38	: #2a333c,
	39	: #ffffff,
	40	: #8f9299,

	41	: #EDEDE4,
	42	: #F74906,
	43	: #554E44,
	44	: #FFFFFF,

	45	: #221E1D,
	46	: #ECEAE0,
	47	: #63AA9C,
	48	: #E9633B,

	49	: #a10015,
	50	: #d52b15,
	51	: #efeee9,
	52	: #beb1b4,

	53	: #222831,
	54	: #393E46,
	55	: #FD7013,
	56	: #EEEEEE,

	57	: #FF7260,
	58	: #9BD7D5,
	59	: #FFF5C3,
	60	: #505050,

	61	: #FF3B1D,
	62	: #7BDFF2,
	63	: #000000,
	64	: #FFFFFF
);

@each $hex, $color in $colorPalette {
	.paletteItem__colorItem_#{$hex} {
		background-color: $color;
	}
}


@media only screen and (max-width: 1280px) {
	.paletteWrap {
		width: 910px;
	}

	.paletteItem {

		&:nth-child(3n) {
			margin-right: 0;
		}
		&:nth-child(4n) {
			margin-right: 50px;
		}
		&:nth-child(12n) {
			margin-right: 0;
		}
	}
}

@media only screen and (max-width: 960px) {
	.paletteWrap {
		width: 590px;
	}
	
	.paletteItem {

		&:nth-child(2n) {
			margin-right: 0;
		}
		&:nth-child(3n) {
			margin-right: 50px;
		}
		&:nth-child(6n) {
			margin-right: 0;
		}
	}
}

@media only screen and (max-width: 642px) {
	.paletteWrap {
		width: 270px;
	}
	
	.paletteItem {
		margin-bottom: 50px;
		margin-right: 0;
	}
}


/*____________________________________________________________
## Developer Links
____________________________________________________________*/
.social {
	position: fixed;
	bottom: 0;
	left: 30px;
}
.socialList {
	list-style: none;
	
	&:after {
		content: '';
		display: block;
		margin: 0 auto;
		width: 1px;
		height: 40px;
		background: #f7e0b5;
	}
}
.socialList__item {
	margin-bottom: 10px;
	width: 20px;
	height: 20px;
	transition: transform .2s;
	
	&:hover {
		transform: translateY(-3px);
		
		.socialList__icon {
			stroke: #7dcbd8;
		}
	}
}

.socialList__icon {
	fill: none;
	stroke: #f7e0b5;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.