Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Material Quotation Cards
<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>
@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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.