<body class="align">
<div class="color-container">
<h2>Choose a color pattern!</h2>
<div class="color-palettes">
<div class="color-palette">
<h3>Strawberry</h3>
<div class="colors">
<span class="color c73102a"></span>
<span class="color ca6386b"></span>
<span class="color c3b574b"></span>
<span class="color c15bf5f"></span>
<span class="color c62bf54"></span>
</div>
</div>
<div class="color-palette">
<h3>Orange</h3>
<div class="colors">
<span class="color ce8b830"></span>
<span class="color ce48831"></span>
<span class="color cd84c35"></span>
<span class="color c9e3c2f"></span>
</div>
</div>
<div class="color-palette">
<h3>Winter</h3>
<div class="colors">
<span class="color c020c17"></span>
<span class="color c021325"></span>
<span class="color c00353d"></span>
<span class="color c006063"></span>
<span class="color c018687"></span>
</div>
</div>
<div class="color-palette">
<h3>Retro</h3>
<div class="colors">
<span class="color cadcd37"></span>
<span class="color cfa5735"></span>
<span class="color c37ac72"></span>
</div>
</div>
</div>
</div>
</body>@use postcss-preset-env {
stage: 0;
}
/* ---------- GENERAL ---------- */
* {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
background-color: #cbd0d4;
font-family: Open Sans, sans-serif;
line-height: 1.5;
margin: 0;
min-block-size: 100vh;
padding: 10vmin;
}
h2,
h3 {
margin: 0;
font: inherit;
}
.align {
display: grid;
place-items: center;
}
/* ---------- COLOR-PALETTE ---------- */
.color-container {
background-color: #1c252e;
border-radius: 5px;
padding: 32px;
position: relative;
width: 16em;
}
.color-container:before {
background: #1c252e;
content: "";
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
top: 0;
transform: rotate(45deg);
width: 8px;
}
.color-container h2 {
color: #9aa1a7;
font-size: 16px;
margin-bottom: 21px;
}
.color-palettes {
display: grid;
gap: 1.5em;
}
.color-palette h3 {
color: #9aa1a7;
font-size: 14px;
margin-bottom: 8px;
}
.colors {
display: flex;
height: 24px;
}
.color {
width: 100%;
}
.color:first-of-type {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.color:last-of-type {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
/* STRAWBERRY */
.c73102a { background-color: #73102a; }
.ca6386b { background-color: #a6386b; }
.c3b574b { background-color: #3b574b; }
.c15bf5f { background-color: #15bf5f; }
.c62bf54 { background-color: #62bf54; }
/* ORANGE */
.ce8b830 { background-color: #e8b830; }
.ce48831 { background-color: #e48831; }
.cd84c35 { background-color: #d84c35; }
.c9e3c2f { background-color: #9e3c2f; }
/* WINTER */
.c020c17 { background-color: #020c17; }
.c021325 { background-color: #021325; }
.c00353d { background-color: #00353d; }
.c006063 { background-color: #006063; }
.c018687 { background-color: #018687; }
/* RETRO */
.cadcd37 { background-color: #adcd37; }
.cfa5735 { background-color: #fa5735; }
.c37ac72 { background-color: #37ac72; }
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.