Material Design - Responsive card

HTML

              
                <section class="container">
    <div class="page-header">
        <h1>Material cards demo<br>
            <small>See full features on <a href="https://github.com/marlenesco/material-cards" target="_blank">Github</a></small></h1>
    </div>
    <div class="row active-with-click">
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Red">
                <h2>
                    <span>Christopher Walken</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        The Deer Hunter
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-christopher-walken.jpg">
                    </div>
                    <div class="mc-description">
                        He has appeared in more than 100 films and television shows, including The Deer Hunter, Annie Hall, The Prophecy trilogy, The Dogs of War ...
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Pink">
                <h2>
                    <span>Sean Penn</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        Mystic River
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-sean-penn.jpg">
                    </div>
                    <div class="mc-description">
                        He has won two Academy Awards, for his roles in the mystery drama Mystic River (2003) and the biopic Milk (2008). Penn began his acting career in television with a brief appearance in a 1974 episode of Little House on the Prairie ...
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Purple">
                <h2>
                    <span>Clint Eastwood</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        Million Dollar Baby
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-clint-eastwood.jpg">
                    </div>
                    <div class="mc-description">
                        He rose to international fame with his role as the Man with No Name in Sergio Leone's Dollars trilogy of spaghetti Westerns during the 1960s ...
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Deep-Purple">
                <h2>
                    <span>Dustin Hoffman</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        Kramer vs. Kramer
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-dustin-hoffman.jpg">
                    </div>
                    <div class="mc-description">
                        He has been known for his versatile portrayals of antiheroes and vulnerable characters.[3] He won the Academy Award for Kramer vs. Kramer in 1979 ...
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Indigo">
                <h2>
                    <span>Edward Norton</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        American History X
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-edward-norton.jpg">
                    </div>
                    <div class="mc-description">
                        He has been nominated for three Academy Awards for his work in the films Primal Fear, American History X and Birdman. He also starred in other roles ...
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Blue">
                <h2>
                    <span>Michael Caine</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        Educated Rita
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-michael-caine.jpg">
                    </div>
                    <div class="mc-description">
                        English actor and author. Renowned for his distinctive working class cockney accent, Caine has appeared in over 115 films and is regarded as a British ...
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Light-Blue">
                <h2>
                    <span>Harvey Keitel</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        Pulp Fiction
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-harvey-keitel.jpg">
                    </div>
                    <div class="mc-description">
                        Some of his most notable starring roles were in Martin Scorsese's Mean Streets and Taxi Driver, Ridley Scott's The Duellists and Thelma & Louise, Quentin Tarantino ...
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Cyan">
                <h2>
                    <span>Jack Nicholson</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        The Shining
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-jack-nicholson.jpg">
                    </div>
                    <div class="mc-description">
                        Throughout his career, Nicholson has portrayed unique and challenging roles, many of which include dark portrayals of excitable, neurotic and psychopathic characters ...
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Teal">
                <h2>
                    <span>Jeff Bridges</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        The Big Lebowski
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-jeff-bridges.jpg">
                    </div>
                    <div class="mc-description">
                        He comes from a well-known acting family and began his televised acting in 1958 as a child with his father, Lloyd Bridges, and brother, Beau, on television's Sea Hunt ...
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Green">
                <h2>
                    <span>Joaquin Phoenix</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        Her
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-joaquin-phoenix.jpg">
                    </div>
                    <div class="mc-description">
                        is an American actor, producer, music video director, musician and activist. For his work as an artist, Phoenix has received a Grammy Award, a Golden Globe Award and three Academy ...
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Light-Green">
                <h2>
                    <span>Tom Hanks</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        Forrest Gump
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-tom-hanks.jpg">
                    </div>
                    <div class="mc-description">
                        He is known for his roles in Big (1988), Philadelphia (1993), Forrest Gump (1994), Apollo 13 (1995), Saving Private Ryan, You've Got Mail (both 1998), The Green Mile (1999), Cast Away (2000) ...
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Lime">
                <h2>
                    <span>Philip Seymour Hoffman</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        25th Hour
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-philip-seymour-hoffman.jpg">
                    </div>
                    <div class="mc-description">
                        Best known for his distinctive supporting and character roles – typically lowlifes, bullies, and misfits – Hoffman was a regular presence in films from the early 1990s until his death at age 46.
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Yellow">
                <h2>
                    <span>Paul Newman</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        The Color of Money
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-paul-newman.jpg">
                    </div>
                    <div class="mc-description">
                        He won numerous awards, including an Academy Award for his performance in the 1986 film The Color of Money,[3] a BAFTA Award, a Screen Actors Guild Award, a Cannes Film Festival Award, an Emmy Award ...
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Amber">
                <h2>
                    <span>Marlon Brando</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        The Godfather
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-marlon-brando.jpg">
                    </div>
                    <div class="mc-description">
                        He is hailed for bringing a gripping realism to film acting, and is frequently cited as the greatest and most influential actor of all time.[2] A cultural icon, Brando is most famous for his Academy ...
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Orange">
                <h2>
                    <span>Kevin Spacey</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        American Beauty
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-kevin-spacey.jpg">
                    </div>
                    <div class="mc-description">
                        He began his career as a stage actor during the 1980s, before being cast in supporting roles in film and television. He gained critical acclaim in the early 1990s, culminating in his first Academy Award ...
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Deep-Orange">
                <h2>
                    <span>Robert De Niro</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        Taxy Driver
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-robert-de-niro.jpg">
                    </div>
                    <div class="mc-description">
                        His first major film roles were in the sports drama Bang the Drum Slowly (1973) and Martin Scorsese's crime film Mean Streets (1973). In 1974, after being turned down for the role of Sonny Corleone in the crime ...
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Brown">
                <h2>
                    <span>Steve Mcqueen</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        Papillon
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-steve-mcqueen.jpg">
                    </div>
                    <div class="mc-description">
                        Called "The King of Cool", his "anti-hero" persona, developed at the height of the Vietnam War-era counterculture, made him a top box-office draw of the 1960s and 1970s. McQueen received an Academy Award nomination for his ...
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Grey">
                <h2>
                    <span>Rugter Hauer</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        Blade Runner
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-rugter-hauer.jpg">
                    </div>
                    <div class="mc-description">
                        Blonde, blue-eyed, tall and handsome Dutch actor Rutger Hauer has an international reputation for playing everything from romantic leads to action heroes to sinister villains. Hauer was born in Breukelen, a town in the province ...
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <article class="material-card Blue-Grey">
                <h2>
                    <span>Morgan Freeman</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        Glory
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="https://material-cards.s3-eu-west-1.amazonaws.com/thumb-morgan-freeman.jpg">
                    </div>
                    <div class="mc-description">
                        Freeman has received Academy Award nominations for his performances in Street Smart, Driving Miss Daisy, The Shawshank Redemption and Invictus ...
                    </div>
                </div>
                <a class="mc-btn-action">
                    <i class="fa fa-bars"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>
    </div>
</section>

<a href="https://github.com/marlenesco/material-cards" class="github-corner" aria-label="View source on Github" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#f44336; color:#ECEFF1; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

CSS

              
                @gm-Red-50: #FFEBEE;
@gm-Red-100: #FFCDD2;
@gm-Red-200: #EF9A9A;
@gm-Red-300: #E57373;
@gm-Red-400: #EF5350;
@gm-Red-500: #F44336;
@gm-Red-600: #E53935;
@gm-Red-700: #D32F2F;
@gm-Red-800: #C62828;
@gm-Red-900: #B71C1C;
@gm-Red-A100: #FF8A80;
@gm-Red-A200: #FF5252;
@gm-Red-A400: #FF1744;
@gm-Red-A700: #D50000;
@gm-Pink-50: #FCE4EC;
@gm-Pink-100: #F8BBD0;
@gm-Pink-200: #F48FB1;
@gm-Pink-300: #F06292;
@gm-Pink-400: #EC407A;
@gm-Pink-500: #E91E63;
@gm-Pink-600: #D81B60;
@gm-Pink-700: #C2185B;
@gm-Pink-800: #AD1457;
@gm-Pink-900: #880E4F;
@gm-Pink-A100: #FF80AB;
@gm-Pink-A200: #FF4081;
@gm-Pink-A400: #F50057;
@gm-Pink-A700: #C51162;
@gm-Purple-50: #F3E5F5;
@gm-Purple-100: #E1BEE7;
@gm-Purple-200: #CE93D8;
@gm-Purple-300: #BA68C8;
@gm-Purple-400: #AB47BC;
@gm-Purple-500: #9C27B0;
@gm-Purple-600: #8E24AA;
@gm-Purple-700: #7B1FA2;
@gm-Purple-800: #6A1B9A;
@gm-Purple-900: #4A148C;
@gm-Purple-A100: #EA80FC;
@gm-Purple-A200: #E040FB;
@gm-Purple-A400: #D500F9;
@gm-Purple-A700: #AA00FF;
@gm-Deep-Purple-50: #EDE7F6;
@gm-Deep-Purple-100: #D1C4E9;
@gm-Deep-Purple-200: #B39DDB;
@gm-Deep-Purple-300: #9575CD;
@gm-Deep-Purple-400: #7E57C2;
@gm-Deep-Purple-500: #673AB7;
@gm-Deep-Purple-600: #5E35B1;
@gm-Deep-Purple-700: #512DA8;
@gm-Deep-Purple-800: #4527A0;
@gm-Deep-Purple-900: #311B92;
@gm-Deep-Purple-A100: #B388FF;
@gm-Deep-Purple-A200: #7C4DFF;
@gm-Deep-Purple-A400: #651FFF;
@gm-Deep-Purple-A700: #6200EA;
@gm-Indigo-50: #E8EAF6;
@gm-Indigo-100: #C5CAE9;
@gm-Indigo-200: #9FA8DA;
@gm-Indigo-300: #7986CB;
@gm-Indigo-400: #5C6BC0;
@gm-Indigo-500: #3F51B5;
@gm-Indigo-600: #3949AB;
@gm-Indigo-700: #303F9F;
@gm-Indigo-800: #283593;
@gm-Indigo-900: #1A237E;
@gm-Indigo-A100: #8C9EFF;
@gm-Indigo-A200: #536DFE;
@gm-Indigo-A400: #3D5AFE;
@gm-Indigo-A700: #304FFE;
@gm-Blue-50: #E3F2FD;
@gm-Blue-100: #BBDEFB;
@gm-Blue-200: #90CAF9;
@gm-Blue-300: #64B5F6;
@gm-Blue-400: #42A5F5;
@gm-Blue-500: #2196F3;
@gm-Blue-600: #1E88E5;
@gm-Blue-700: #1976D2;
@gm-Blue-800: #1565C0;
@gm-Blue-900: #0D47A1;
@gm-Blue-A100: #82B1FF;
@gm-Blue-A200: #448AFF;
@gm-Blue-A400: #2979FF;
@gm-Blue-A700: #2962FF;
@gm-Light-Blue-50: #E1F5FE;
@gm-Light-Blue-100: #B3E5FC;
@gm-Light-Blue-200: #81D4FA;
@gm-Light-Blue-300: #4FC3F7;
@gm-Light-Blue-400: #29B6F6;
@gm-Light-Blue-500: #03A9F4;
@gm-Light-Blue-600: #039BE5;
@gm-Light-Blue-700: #0288D1;
@gm-Light-Blue-800: #0277BD;
@gm-Light-Blue-900: #01579B;
@gm-Light-Blue-A100: #80D8FF;
@gm-Light-Blue-A200: #40C4FF;
@gm-Light-Blue-A400: #00B0FF;
@gm-Light-Blue-A700: #0091EA;
@gm-Cyan-50: #E0F7FA;
@gm-Cyan-100: #B2EBF2;
@gm-Cyan-200: #80DEEA;
@gm-Cyan-300: #4DD0E1;
@gm-Cyan-400: #26C6DA;
@gm-Cyan-500: #00BCD4;
@gm-Cyan-600: #00ACC1;
@gm-Cyan-700: #0097A7;
@gm-Cyan-800: #00838F;
@gm-Cyan-900: #006064;
@gm-Cyan-A100: #84FFFF;
@gm-Cyan-A200: #18FFFF;
@gm-Cyan-A400: #00E5FF;
@gm-Cyan-A700: #00B8D4;
@gm-Teal-50: #E0F2F1;
@gm-Teal-100: #B2DFDB;
@gm-Teal-200: #80CBC4;
@gm-Teal-300: #4DB6AC;
@gm-Teal-400: #26A69A;
@gm-Teal-500: #009688;
@gm-Teal-600: #00897B;
@gm-Teal-700: #00796B;
@gm-Teal-800: #00695C;
@gm-Teal-900: #004D40;
@gm-Teal-A100: #A7FFEB;
@gm-Teal-A200: #64FFDA;
@gm-Teal-A400: #1DE9B6;
@gm-Teal-A700: #00BFA5;
@gm-Green-50: #E8F5E9;
@gm-Green-100: #C8E6C9;
@gm-Green-200: #A5D6A7;
@gm-Green-300: #81C784;
@gm-Green-400: #66BB6A;
@gm-Green-500: #4CAF50;
@gm-Green-600: #43A047;
@gm-Green-700: #388E3C;
@gm-Green-800: #2E7D32;
@gm-Green-900: #1B5E20;
@gm-Green-A100: #B9F6CA;
@gm-Green-A200: #69F0AE;
@gm-Green-A400: #00E676;
@gm-Green-A700: #00C853;
@gm-Light-Green-50: #F1F8E9;
@gm-Light-Green-100: #DCEDC8;
@gm-Light-Green-200: #C5E1A5;
@gm-Light-Green-300: #AED581;
@gm-Light-Green-400: #9CCC65;
@gm-Light-Green-500: #8BC34A;
@gm-Light-Green-600: #7CB342;
@gm-Light-Green-700: #689F38;
@gm-Light-Green-800: #558B2F;
@gm-Light-Green-900: #33691E;
@gm-Light-Green-A100: #CCFF90;
@gm-Light-Green-A200: #B2FF59;
@gm-Light-Green-A400: #76FF03;
@gm-Light-Green-A700: #64DD17;
@gm-Lime-50: #F9FBE7;
@gm-Lime-100: #F0F4C3;
@gm-Lime-200: #E6EE9C;
@gm-Lime-300: #DCE775;
@gm-Lime-400: #D4E157;
@gm-Lime-500: #CDDC39;
@gm-Lime-600: #C0CA33;
@gm-Lime-700: #AFB42B;
@gm-Lime-800: #9E9D24;
@gm-Lime-900: #827717;
@gm-Lime-A100: #F4FF81;
@gm-Lime-A200: #EEFF41;
@gm-Lime-A400: #C6FF00;
@gm-Lime-A700: #AEEA00;
@gm-Yellow-50: #FFFDE7;
@gm-Yellow-100: #FFF9C4;
@gm-Yellow-200: #FFF59D;
@gm-Yellow-300: #FFF176;
@gm-Yellow-400: #FFEE58;
@gm-Yellow-500: #FFEB3B;
@gm-Yellow-600: #FDD835;
@gm-Yellow-700: #FBC02D;
@gm-Yellow-800: #F9A825;
@gm-Yellow-900: #F57F17;
@gm-Yellow-A100: #FFFF8D;
@gm-Yellow-A200: #FFFF00;
@gm-Yellow-A400: #FFEA00;
@gm-Yellow-A700: #FFD600;
@gm-Amber-50: #FFF8E1;
@gm-Amber-100: #FFECB3;
@gm-Amber-200: #FFE082;
@gm-Amber-300: #FFD54F;
@gm-Amber-400: #FFCA28;
@gm-Amber-500: #FFC107;
@gm-Amber-600: #FFB300;
@gm-Amber-700: #FFA000;
@gm-Amber-800: #FF8F00;
@gm-Amber-900: #FF6F00;
@gm-Amber-A100: #FFE57F;
@gm-Amber-A200: #FFD740;
@gm-Amber-A400: #FFC400;
@gm-Amber-A700: #FFAB00;
@gm-Orange-50: #FFF3E0;
@gm-Orange-100: #FFE0B2;
@gm-Orange-200: #FFCC80;
@gm-Orange-300: #FFB74D;
@gm-Orange-400: #FFA726;
@gm-Orange-500: #FF9800;
@gm-Orange-600: #FB8C00;
@gm-Orange-700: #F57C00;
@gm-Orange-800: #EF6C00;
@gm-Orange-900: #E65100;
@gm-Orange-A100: #FFD180;
@gm-Orange-A200: #FFAB40;
@gm-Orange-A400: #FF9100;
@gm-Orange-A700: #FF6D00;
@gm-Deep-Orange-50: #FBE9E7;
@gm-Deep-Orange-100: #FFCCBC;
@gm-Deep-Orange-200: #FFAB91;
@gm-Deep-Orange-300: #FF8A65;
@gm-Deep-Orange-400: #FF7043;
@gm-Deep-Orange-500: #FF5722;
@gm-Deep-Orange-600: #F4511E;
@gm-Deep-Orange-700: #E64A19;
@gm-Deep-Orange-800: #D84315;
@gm-Deep-Orange-900: #BF360C;
@gm-Deep-Orange-A100: #FF9E80;
@gm-Deep-Orange-A200: #FF6E40;
@gm-Deep-Orange-A400: #FF3D00;
@gm-Deep-Orange-A700: #DD2C00;
@gm-Brown-50: #EFEBE9;
@gm-Brown-100: #D7CCC8;
@gm-Brown-200: #BCAAA4;
@gm-Brown-300: #A1887F;
@gm-Brown-400: #8D6E63;
@gm-Brown-500: #795548;
@gm-Brown-600: #6D4C41;
@gm-Brown-700: #5D4037;
@gm-Brown-800: #4E342E;
@gm-Brown-900: #3E2723;
@gm-Grey-50: #FAFAFA;
@gm-Grey-100: #F5F5F5;
@gm-Grey-200: #EEEEEE;
@gm-Grey-300: #E0E0E0;
@gm-Grey-400: #BDBDBD;
@gm-Grey-500: #9E9E9E;
@gm-Grey-600: #757575;
@gm-Grey-700: #616161;
@gm-Grey-800: #424242;
@gm-Grey-900: #212121;
@gm-Blue-Grey-50: #ECEFF1;
@gm-Blue-Grey-100: #CFD8DC;
@gm-Blue-Grey-200: #B0BEC5;
@gm-Blue-Grey-300: #90A4AE;
@gm-Blue-Grey-400: #78909C;
@gm-Blue-Grey-500: #607D8B;
@gm-Blue-Grey-600: #546E7A;
@gm-Blue-Grey-700: #455A64;
@gm-Blue-Grey-800: #37474F;
@gm-Blue-Grey-900: #263238;

.fa-spin-fast {
    -webkit-animation: fa-spin-fast .2s infinite linear;
    animation: fa-spin-fast .2s infinite linear;
}

@-webkit-keyframes fa-spin-fast {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes fa-spin-fast {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

.opacity(@opacity) {
    opacity: @opacity;
    @opacity-ie: (@opacity * 100);
    filter: ~"alpha(opacity=@{opacity-ie})";
}

.mc-transtition (@duration: .3s) {
    -webkit-transition: all @duration;
    -moz-transition: all @duration;
    -ms-transition: all @duration;
    -o-transition: all @duration;
    transition: all @duration;
}

.materializr(@colorVar; @accent: '500'; @type: background-color) {
    @colorCalc: %('gm-%s-%s', replace(@colorVar, ' ', '-'), replace(@accent, ' ', '-'));
    @{type}: @@colorCalc;
}


.material-card {
    position: relative;
    height: 0;
    padding-bottom: calc(~'100% - 16px');
    margin-bottom: 6.6em;
    h2 {
        position: absolute;
        top: calc(~'100% - 16px');
        left: 0;
        width: 100%;
        padding: 10px 16px;
        color: #fff;
        font-size: 1.4em;
        line-height: 1.6em;
        margin: 0;
        z-index: 10;
        .mc-transtition();
        span {
            display: block;
        }
        strong {
            font-weight: 400;
            display: block;
            font-size: .8em;
        }
        &:before,
        &:after {
            content: ' ';
            position: absolute;
            left: 0;
            top: -16px;
            width: 0;
            border: 8px solid;
            .mc-transtition();
        }
        &:after {
            top: auto;
            bottom: 0;
        }
    }
    &.mc-active {
        @media screen and (max-width: 767px) {
            padding-bottom: 0;
            height: auto;
        }
        h2 {
            top: 0;
            padding: 10px 16px 10px 90px;
            &:before {
                top: 0;
            }
            &:after {
                bottom: -16px;
            }
        }
    }
    .mc-content {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 16px;
        left: 16px;
        .mc-transtition();
    }
    .mc-btn-action {
        position: absolute;
        right: 16px;
        top: 15px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 5px solid;
        width: 54px;
        height: 54px;
        line-height: 44px;
        text-align: center;
        color: #fff;
        cursor: pointer;
        z-index: 20;
        .mc-transtition();
    }
    &.mc-active .mc-btn-action {
        top: 62px;
    }
    .mc-description {
        position: absolute;
        top: 100%;
        right: 30px;
        left: 30px;
        bottom: 54px;
        overflow: hidden;
        .opacity(0);
        .mc-transtition(1.2s);
    }
    .mc-footer {
        height: 0;
        overflow: hidden;
        .mc-transtition();
        h4 {
            position: absolute;
            top: 200px;
            left: 30px;
            padding: 0;
            margin: 0;
            font-size: 16px;
            font-weight: 700;
            .mc-transtition(1.4s);
        }
        a {
            display: block;
            float: left;
            position: relative;
            width: 52px;
            height: 52px;
            margin-left: 5px;
            margin-bottom: 15px;
            font-size: 28px;
            color: #fff;
            line-height: 52px;
            text-decoration: none;
            top: 200px;
            &:nth-child(1) {
                .mc-transtition (.5s)
            }
            &:nth-child(2) {
                .mc-transtition (.6s)
            }
            &:nth-child(3) {
                .mc-transtition (.7s)
            }
            &:nth-child(4) {
                .mc-transtition (.8s)
            }
            &:nth-child(5) {
                .mc-transtition (.9s)
            }
        }
    }
    .img-container {
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        .mc-transtition();
    }
    &.mc-active {
        .img-container {
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            left: 0;
            top: 12px;
            width: 60px;
            height: 60px;
            z-index: 20;
        }
        .mc-content {
            padding-top: 5.6em;
            @media screen and (max-width: 767px) {
                position: relative;
                margin-right: 16px;
            }
        }
        .mc-description {
            top: 50px;
            padding-top: 5.6em;
            .opacity(1);
            @media screen and (max-width: 767px) {
                position: relative;
                top: auto;
                right: auto;
                left: auto;
                padding: 50px 30px 70px 30px;
                bottom: 0;
            }
        }
        .mc-footer {
            overflow: visible;
            position: absolute;
            top: calc(~'100% - 16px');
            left: 16px;
            right: 0;
            height: 82px;
            padding-top: 15px;
            padding-left: 25px;
            a {
                top: 0;
            }
            h4 {
                top: -32px;
            }
        }
    }
}


.material-card-color (@color-palette) {
    .material-card.@{color-palette} {
        h2 {
            .materializr(@color-palette, '500');
            &:after {
                .materializr(@color-palette, '500', border-top-color);
                .materializr(@color-palette, '500', border-right-color);
                border-bottom-color: transparent;
                border-left-color: transparent;
            }
            &:before {
                border-top-color: transparent;
                .materializr(@color-palette, '900', border-right-color);
                .materializr(@color-palette, '900', border-bottom-color);
                border-left-color: transparent;
            }
        }
        &.mc-active {
            h2 {
                &:before {
                    border-top-color: transparent;
                    .materializr(@color-palette, '500', border-right-color);
                    .materializr(@color-palette, '500', border-bottom-color);
                    border-left-color: transparent;
                }
                &:after {
                    .materializr(@color-palette, '900', border-top-color);
                    .materializr(@color-palette, '900', border-right-color);
                    border-bottom-color: transparent;
                    border-left-color: transparent;
                }
            }
        }
        .mc-btn-action {
            .materializr(@color-palette, '500');
            &:hover {
                .materializr(@color-palette, '900');
            }
        }
        .mc-footer {
            h4 {
                .materializr(@color-palette, '900', color);
            }
            a {
                .materializr(@color-palette, '900');
            }
        }
        &.mc-active {
            .mc-content {
                .materializr(@color-palette, '50');
            }
            .mc-footer {
                .materializr(@color-palette, '100');
            }
            .mc-btn-action {
                .materializr(@color-palette, '50', border-color);
            }
        }
    }
}


.material-card-color(~"Red");
.material-card-color(~"Blue-Grey");
.material-card-color(~"Pink");
.material-card-color(~"Purple");
.material-card-color(~"Deep-Purple");
.material-card-color(~"Indigo");
.material-card-color(~"Blue");
.material-card-color(~"Light-Blue");
.material-card-color(~"Cyan");
.material-card-color(~"Teal");
.material-card-color(~"Green");
.material-card-color(~"Light-Green");
.material-card-color(~"Lime");
.material-card-color(~"Yellow");
.material-card-color(~"Amber");
.material-card-color(~"Orange");
.material-card-color(~"Deep-Orange");
.material-card-color(~"Brown");
.material-card-color(~"Grey");
.material-card-color(~"Blue-Grey");


@import (css) "https://fonts.googleapis.com/css?family=Raleway:400,300,200,500,600,700";
body {
  background-color: #ECEFF1;
  color: #37474F;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 16px;
}

h1, h2, h3 {
  font-weight: 200;
}

JS

              
                $(function() {
        $('.material-card > .mc-btn-action').click(function () {
            var card = $(this).parent('.material-card');
            var icon = $(this).children('i');
            icon.addClass('fa-spin-fast');

            if (card.hasClass('mc-active')) {
                card.removeClass('mc-active');

                window.setTimeout(function() {
                    icon
                        .removeClass('fa-arrow-left')
                        .removeClass('fa-spin-fast')
                        .addClass('fa-bars');

                }, 800);
            } else {
                card.addClass('mc-active');

                window.setTimeout(function() {
                    icon
                        .removeClass('fa-bars')
                        .removeClass('fa-spin-fast')
                        .addClass('fa-arrow-left');

                }, 800);
            }
        });
    });

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions