Color Scheme Cards

HTML
<div class="container"> <h1>Color Scheme Cards</h1> <p>These are great to use with style guides.</p> <div class="cardGroup" id="demo"> <div class="card cardGroup__card"> <div class="card__description cardGroup__cardDescription hvr" id="color-1">Primary </div> <div class="card__color"> <span>#F9ED69</span> <span>rgb(249,237,105)</span> <span>$primary</span> </div> </div> <div class="card cardGroup__card"> <div class="card__description cardGroup__cardDescription hvr" id="color-2">Secondary </div> <div class="card__color"> <span>#F08A5D</span> <span>rgb(240,138,93)</span> <span>$secondary</span> </div> </div> <div class="card cardGroup__card hvr-rectangle-in"> <div class="card__description cardGroup__cardDescription hvr" id="color-3">Alternative 1 </div> <div class="card__color"> <span>#B83B5E</span> <span>rgb(184,59,94)</span> <span>$alternative1</span> </div> </div> <div class="card cardGroup__card hvr-rectangle-in"> <div class="card__description cardGroup__cardDescription hvr" id="color-4">Alternative 2 </div> <div class="card__color"> <span>#6A2C70</span> <span>rgb(106,44,112)</span> <span>$alternative2</span> </div> </div> </div><!-- /card group --> </div><!-- /container -->
CSS
/*===================================================== Card Colors =====================================================*/ #color-1 { background: #F9ED69; color: #B4A500; } #color-2 { background: #F08A5D; color: #BE3A00; } #color-3 { background: #B83B5E; color: #FD81A4; } #color-4 { background: #6A2C70; color: #DC59E8; } /*===================================================== Card Group =====================================================*/ /* Hover Effect */ .hvr { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; } .hvr:before { content: ""; position: absolute; z-index: -1; left: 50%; right: 50%; top: 0; background: #0DE472; height: 4px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before { left: 0; right: 0; } #color-1.hvr:before { background: #B4A500; } #color-2.hvr:before { background: #BE3A00; } #color-3.hvr:before { background: #FD81A4; } #color-4.hvr:before { background: #DC59E8; } .card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; border: 0px solid #E0E0E0; border-radius: 4px; overflow: hidden; } .card__description { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 15px 0; height: 120px; } .card__color { text-align: center; color: #57727C; font-size: 15px; letter-spacing: 1px; padding: 5px 15px; border-top: 3px solid #E0E0E0; background-color: #FEFEFE; } .card__color span { display: block; padding: 5px 0; } .card--fixedWidth { max-width: 120px; } .cardGroup { display: -webkit-flex; display: -ms-flexbox; display: flex; border: 3px solid #E0E0E0; border-radius: 4px; overflow: hidden; } .cardGroup__card { -webkit-flex: 1 1 0%; -ms-flex: 1 1 0%; flex: 1 1 0%; border: none; border-radius: 0; } .cardGroup__card + .cardGroup__card { border-left: 3px solid #E0E0E0; } .cardGroup__cardDescription { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } /*===================================================== Demo =====================================================*/ .container { padding: 50px; overflow-x: auto; } #demo { margin: 100px; } h1 { font-size: 40px; font-weight: 700; color: #0DE472; text-align: center; } p { text-align: center; }
JAVASCRIPT
Expand for more options Login