Material Quotation Cards

index.html

<div class="container">
  <blockquote class="quote-card">
    <p>
      Scratch a dog and you'll find a permanent job. 
    </p>

    <cite>
      Franklin P. Jones
    </cite>
  </blockquote>

  <blockquote class="quote-card blue-card">
    <p>
      Our greatest glory is not in never falling, but in rising every time we fall.
    </p>

    <cite>
      Confucius
    </cite>
  </blockquote>

  <blockquote class="quote-card red-card">
    <p>
      A creative man is motivated by the desire to achieve, not by the desire to beat others.
    </p>

    <cite>
      Ayn Rand
    </cite>
  </blockquote>

  <blockquote class="quote-card yellow-card">
    <p>
      Life is one big road with lots of signs. So when you riding through the ruts, don't complicate your mind. Flee from hate, mischief and jealousy. Don't bury your thoughts, put your vision to reality. Wake Up and Live!
    </p>

    <cite>
      Bob Marley
    </cite>
  </blockquote>

  <p class="text-center credits">
    <a target="_blank" href="http://twitter.com/bharani91">
      bharanim
    </a>
  </p>
</div>

Material Quotation Cards.markdown

Material Quotation Cards

A Pen by Bharani Muthukumaraswamy on CodePen.

License.

style.css

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,200italic);


$background: #eee;
$black: #222222;
$white: #ffffff;

$default: #fff;
$defaultTextColor: #222222;
$defaultSecondaryTextColor: #eee;


$red: #D32F2F;
$redTextColor: $white;
$redSecondaryTextColor: #F44336;

$blue: #303F9F;
$blueTextColor: $white;
$blueSecondaryTextColor: #3F51B5;

$yellow: #F9A825;
$yellowTextColor: $black;
$yellowSecondaryTextColor: #FBC02D;


body {
  background: $background;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
}

.container {
  max-width: 800px;
  margin: 80px auto;
}
.text-center {
  text-align: center;
}

.quote-card {
  background: $default;
  color: $defaultTextColor;
  
  padding: 20px;
  padding-left: 50px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba($black, 0.12);
  
  position: relative;
  overflow: hidden;
  min-height: 120px;
  
  p {
    font-size: 22px;
    line-height: 1.5;
    margin: 0;
    max-width: 80%;
  }
  
  cite {
    font-size: 16px;
    margin-top: 10px;
    display: block;
    font-weight: 200;
    opacity: 0.8;
  }
  
  &:before {
    font-family: Georgia, serif;
    content: "“";
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 5em;
    color: rgba($defaultSecondaryTextColor, 0.8);
    font-weight: normal;
  }
  
  &:after {
    font-family: Georgia, serif;
    content: "”";
    position: absolute;
    bottom: -110px;
    line-height: 100px;
    right: -32px;
    font-size: 25em;
    color: rgba($defaultSecondaryTextColor, 0.8);
    font-weight: normal;
  }
  
  @media(max-width: 640px) {
    &:after {
      font-size: 22em;
      right: -25px;
    }
  }
  
  
  &.blue-card {
    background: $blue;
    color: $blueTextColor;
    box-shadow: 0 1px 2px rgba($black, 0.12), 0 2px 4px rgba($black, 0.24);
    
    &:before, &:after {
      color: $blueSecondaryTextColor;
    }
  }
  
  &.red-card {
    background: $red;
    color: $redTextColor;
    box-shadow: 0 1px 2px rgba($black, 0.12), 0 2px 4px rgba($black, 0.24);
    
    &:before, &:after {
      color: $redSecondaryTextColor;
    }
  }
  
  &.yellow-card {
    background: $yellow;
    color: $yellowTextColor;
    box-shadow: 0 1px 2px rgba($black, 0.12), 0 2px 4px rgba($black, 0.24);
    
    &:before, &:after {
      color: $yellowSecondaryTextColor;
    }
  }
}


.credits {
  margin-top: 80px;
  a {
    color: $black;
    text-decoration: none;
    text-shadow: 0 0 2px rgba($black, 0.24);
    padding-bottom: 1px;
    display: inline-block;
    border-bottom: 1px dashed rgba($black, 0.24);
    opacity: 0.6;
    
    transition: 0.3s all ease-in;
    
    
    &:hover {
      border-bottom-style: solid;
      opacity: 1;
    }
  }
}