/* FLip Area CSS */ .action-card { position: relative; width: 100%; text-align: center; padding-bottom: 100%; } .action-card .card-front, .action-card .card-back { bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: 0.7s; border: 1px solid #ebebeb; box-shadow: 0 0 5px 0 rgba(239, 239, 239, 0.6); } .action-card:hover .card-front { transform: rotateY(-180deg); } .action-card:hover .card-back { transform: rotateY(0); } .action-card .card-back { overflow: hidden; transform: rotateY(-180deg); background: #F8F8F8; } .flip-icon svg { width: auto; height: 80px; } .flip-icon svg circle, .flip-icon svg path { fill: #ffffff !important; } .card-back, .card-front { display: flex; flex-wrap: wrap !important; padding: 30px; align-content: center; align-items: center; justify-content: center; } .card-front { background: #fff; } .action-content { font-size: 16px; line-height: 1.5; text-align: left; } .action-button { margin-top: 30px; } .action-button a { padding: 8px 20px; color: #fff !important; border-radius: 5px; transition: .3s; border: 2px solid #fff !important; } .action-button a:hover { background: #ccc !important; } .card-front .action-icon { width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; border-radius: 100%; background: var(--purple-color); } h3.action-title { font-size: 23px; width: 100%; color: #666 !important; margin-bottom: 0; } .card-arrow { position: absolute; right: 30px; bottom: 20px; border: 1px solid var(--primary-color) !important; width: 30px; height: 30px; text-align: center; border-radius: 100% } .card-arrow:before { content: '\e88d'; font-family: entypo-fontello; color: var(--primary-color); position: absolute; left: 6px; font-size: 16px; line-height: 1.8; transition: .6s; } @media (min-width: 1251px) { .action-card { padding-bottom: 100%; } } @media (min-width: 768px) and (max-width: 1250px) { .action-card { padding-bottom: 150%; } } @media (max-width: 989px) { .flip-icon svg { height: 55px; } } /* Flip Area CSS Ends*/
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter