HTML
<p><a href="https://github.com/derekbtw/color-cards" target="_blank">Check out the project on GitHub!</a></p>
<div class="flex-grid">
<div class="palette" id="01">
<div class="wrapper">
<div class="colors">
<div class="color" style="background: #F9ED69"><span>#F9ED69</span></div>
<div class="color" style="background: #F08A5D"><span>#F08A5D</span></div>
<div class="color" style="background: #B83B5E"><span>#B83B5E</span></div>
<div class="color" style="background: #6A2C70"><span>#6A2C70</span></div>
</div>
<footer>First</footer>
</div>
</div>
<div class="palette" id="02">
<div class="wrapper">
<div class="colors">
<div class="color" style="background: #222831"><span>#222831</span></div>
<div class="color" style="background: #393e46"><span>#393e46</span></div>
<div class="color" style="background: #00adb5"><span>#00adb5</span></div>
<div class="color" style="background: #eeeeee"><span>#eeeeee</span></div>
</div>
<footer>Second</footer>
</div>
</div>
<div class="palette" id="03">
<div class="wrapper">
<div class="colors">
<div class="color" style="background: #08D9D6"><span>#08D9D6</span></div>
<div class="color" style="background: #252A34"><span>#252A34</span></div>
<div class="color" style="background: #FF2E63"><span>#FF2E63</span></div>
<div class="color" style="background: #EAEAEA"><span>#EAEAEA</span></div>
</div>
<footer>Third</footer>
</div>
</div>
<div class="palette" id="04">
<div class="wrapper">
<div class="colors">
<div class="color" style="background: #2B2E4A"><span>#2B2E4A</span></div>
<div class="color" style="background: #E84545"><span>#E84545</span></div>
<div class="color" style="background: #903749"><span>#903749</span></div>
<div class="color" style="background: #53354A"><span>#53354A</span></div>
</div>
<footer>Fourth</footer>
</div>
</div>
<div class="palette" id="05">
<div class="wrapper">
<div class="colors">
<div class="color" style="background: #2D4059"><span>#2D4059</span></div>
<div class="color" style="background: #EA5455"><span>#EA5455</span></div>
<div class="color" style="background: #F07B3F"><span>#F07B3F</span></div>
<div class="color" style="background: #FFD460"><span>#FFD460</span></div>
</div>
<footer>Fifth</footer>
</div>
</div>
<div class="palette" id="06">
<div class="wrapper">
<div class="colors">
<div class="color" style="background: #4285F4"><span>#4285F4</span></div>
<div class="color" style="background: #EA4335"><span>#EA4335</span></div>
<div class="color" style="background: #FBBC05"><span>#FBBC05</span></div>
<div class="color" style="background: #34A853"><span>#34A853</span></div>
</div>
<footer>Google</footer>
</div>
</div>
<div class="palette" id="07">
<div class="wrapper">
<div class="colors">
<div class="color" style="background: #FF0000"><span>#FF0000</span></div>
<div class="color" style="background: #FBB034"><span>#FBB034</span></div>
<div class="color" style="background: #FFDD00"><span>#FFDD00</span></div>
<div class="color" style="background: #00A4E4"><span>#00A4E4</span></div>
</div>
<footer>Adobe</footer>
</div>
</div>
<div class="palette" id="08">
<div class="wrapper">
<div class="colors">
<div class="color" style="background: #000000"><span>#000000</span></div>
<div class="color" style="background: #FF9900"><span>#FF9900</span></div>
<div class="color" style="background: #232F3E"><span>#232F3E</span></div>
</div>
<footer>Amazon</footer>
</div>
</div>
<div class="palette" id="09">
<div class="wrapper">
<div class="colors">
<div class="color" style="background: #0EBEFF"><span>#0EBEFF</span></div>
<div class="color" style="background: #47CF73"><span>#47CF73</span></div>
<div class="color" style="background: #AE63E4"><span>#AE63E4</span></div>
<div class="color" style="background: #FCD000"><span>#FCD000</span></div>
<div class="color" style="background: #FF3C41"><span>#FF3C41</span></div>
</div>
<footer>Codepen</footer>
</div>
</div>
<div class="palette" id="09">
<div class="wrapper">
<div class="colors">
<div class="color" style="background: #212121"><span>#212121</span></div>
<div class="color" style="background: #CB5452"><span>#CB5452</span></div>
<div class="color" style="background: #AE63E4"><span>#AE63E4</span></div>
<div class="color" style="background: #FCD000"><span>#FCD000</span></div>
<div class="color" style="background: #FF3C41"><span>#FF3C41</span></div>
</div>
<footer>Codepad</footer>
</div>
</div>
<div class="palette" id="09">
<div class="wrapper">
<div class="colors">
<div class="color" style="background: #0B648F"><span>#0B648F</span></div>
<div class="color" style="background: #E21737"><span>#E21737</span></div>
</div>
<footer>Domino's</footer>
</div>
</div>
<div class="palette" id="08">
<div class="wrapper">
<div class="colors">
<div class="color" style="background: #252637"><span>#252637</span></div>
<div class="color" style="background: #777777"><span>#777777</span></div>
<div class="color" style="background: #DCDCDC"><span>#DCDCDC</span></div>
</div>
<footer>Color Cards</footer>
</div>
</div>
</div>
SCSS
//-- demo ---------------------------------
@import url('https://fonts.googleapis.com/css?family=Reenie+Beanie');
body {
height: 100vh;
background: radial-gradient(#fff, #b2b2b2) 50% 100% / 100% 200%;
font-size: 18px;
p {
text-align: center;
a {
color: #333;
}
}
}
//-----------------------------------------
.flex-grid {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.palette {
width: 14em;
height: 20em;
background: #fff;
border-radius: 20px;
margin: 1em;
box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
text-align: center;
.wrapper {
border: 1px solid transparent;
border-radius: 20px;
margin: 1em;
height: 100%;
display: flex;
flex-flow: column;
.colors {
height: 100%;
display: flex;
flex-direction: column;
}
.color {
text-transform: lowercase;
height: 100%;
padding-top: 1.5em;
span {
opacity: 0;
background-color: rgba(225,225,225,0.5);
padding: .15em .25em;
border-radius: .25em;
color: #333;
transition: opacity ease-out .15s;
}
&:hover {
span {
opacity: 1;
}
}
&:first-child {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
&:last-child {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
}
footer {
font-family: 'Reenie Beanie', cursive;
font-size: 1.8em;
flex: 0 1 2em;
margin: .3em 0;
}
}
}
