Flexbox Color Cards

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; } } }
JAVASCRIPT
Expand for more options Login