Designing Inspirational Quotes for the Web
I tried to discover, in the rumor of forests and waves, words that other men could not hear, and I pricked up my ears to listen to the revelation of their harmony. - Gustave Flaubert
In this post I'll share some work I made that involves my passion for design, web programming and beautiful inspirational or poetic quotes. This series is inspired by Jonathan Suh's 100 days of scriptures.
The idea is to create new unique design every day with a different inspiring or in other way appealing quote. But it all has to be done with web design tools - CSS, SVG, Javascript, animation... Without graphic design tools like Photoshop, After effects etc.
I've chosen 10 designs to present here along with HTML and SASS code. Feel free to try it yourself, just make sure to either compile the SASS or change it to simple CSS. Also don't forget the import the font for the specific design. They can all be found for free on Google fonts.
1.
We all have one foot in a fairytale, and the other in the abyss. - Paulo Coelho
// index.html
<div class="page quote-10">
<div class="left-half">
<span class="number">10</span>
<blockquote class="quote-wrapper">
<p class="quote">We all have one foot in a fairytale... </p>
</blockquote>
</div>
<div class="right-half">
<blockquote class="quote-wrapper">
<p class="quote">... and the other in the abyss.</p>
<cite class="author">Paulo Coelho</cite>
</blockquote>
</div>
img src="images/dragon.png" class="dragon" alt="dragon"
</div>
// settings.scss
/* Margins and fonts */
$base-font-size: 16px;
$baseline: $base-font-size * 1.5;
$general-margin: $baseline * 3;
$big-margin: $general-margin * 3;
// quotes.scss
.quote-10 {
background-color: #8B2635;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
padding: 0 !important;
flex-direction: row;
.left-half {
background-color: #000;
color: #8B2635;
height: 100%;
width: 50vw;
min-width: 50vw;
min-height: 100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: center;
justify-content: flex-end;
padding: $big-margin 0 $big-margin 0;
blockquote {
text-align: right;
position: relative;
top: -130px;
}
}
.right-half {
background-color: #8B2635;
color: #000;
height: 100%;
width: 50vw;
min-width: 50vw;
min-height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0;
flex: 1;
blockquote {
text-align: left;
position: relative;
top: 130px;
}
}
blockquote {
font-family: "Nosifer";
font-size: 2rem;
line-height: 2.5rem;
}
cite {
float: right;
font-size: 1.25rem;
position: absolute;
bottom: -50px;
right: 10%;
}
img.dragon {
width: 300px;
height: auto;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
}
}
2.
Have fun, even if it’s not the same kind of fun everyone else is having. - C.S. Lewis
// index.html
<div class="page quote-41">
<span class="number">41</span>
<blockquote class="quote-wrapper">
<p class="quote">
Have fun, even if it’s not the same kind of fun everyone else is having.
</p>
<cite class="author">C.S. Lewis</cite>
</blockquote>
<div id="board" class="board"></div>
</div>
// quotes.scss
.quote-41 {
background-color: #2f3e46;
color: #cad2c5;
position: relative;
/* variables */
$col: 16;
$row: $col;
$colWidth: 24px;
$space: 6px;
$boardWidth: $col * ($colWidth + $space);
$speed: 3s;
$_default: #354f52;
$_accent: #52796f;
blockquote {
font-size: 2.75em;
line-height: 1.2em;
position: relative;
z-index: 1;
font-family: "Aldrich";
width: $boardWidth;
text-align: justify;
color: white;
text-shadow: 2px 2px 2px black;
cite {
font-size: 2rem;
}
}
.board {
width: $boardWidth;
position: absolute;
left: 50%;
margin-left: -$boardWidth/2;
top: 50%;
margin-top: -$boardWidth/2;
z-index: 0;
}
.field {
display: inline-block;
width: $colWidth;
height: $colWidth;
background: #354f52;
margin: 0 $space / 2;
transition: background .2s ease-in-out;
&:hover {
background: #fff;
}
}
.board .field {
animation: line $speed linear infinite;
@for $i from 0 through $col {
&:nth-child(#{$col}n + #{$i}) {
animation-delay: $speed*($i / $row);
}
}
}
@keyframes line {
0%{
background: $_accent;
}
30%{
background: $_default;
}
}
}
3.
I hope you live a life you’re proud of. If you find you are not, I hope you have the strength to start all over again. - F. Scott Fitzgerald
// index.html
<div class="page quote-4">
<div class="top-half">
<span class="number">4</span>
<blockquote class="quote-wrapper">
<p class="quote">I hope you live a life you’re proud of.</p>
</blockquote>
</div>
<div class="bottom-half">
<blockquote class="quote-wrapper">
<p class="quote"> If you find you are not, I hope you have the strength to start all over again.</p>
<cite class="author">F. Scott Fitzgerald</cite>
</blockquote>
</div>
</div>
// quotes.scss
.quote-4 {
position: relative;
padding: 0;
.top-half {
background-color: #2b303a;
color: #0c7c59;
height: 50%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
padding-top: $big-margin;
padding-left: $general-margin;
padding-right: $general-margin;
blockquote {
margin-bottom: 0;
p {
margin-bottom: 0;
}
}
}
.bottom-half {
background-color: #0c7c59;
color: #2b303a;
height: 50%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding-bottom: $big-margin;
padding-left: $general-margin;
padding-right: $general-margin;
blockquote {
margin-top: 0;
p {
margin-top: 0;
}
}
}
blockquote {
font-family: "Montserrat Subrayada";
font-size: 2.5rem;
line-height: 2.75rem;
}
cite {
float: right;
font-size: 1.5rem;
&::before {
content: "";
margin-right: $baseline;
display: inline-block;
width: 100px;
height: 0;
position: relative;
top: -.5rem;
border-bottom: 2px solid #2b303a;
}
}
}
4.
It's like in the great stories, Mr. Frodo. The ones that really mattered. Full of darkness and danger they were. And sometimes you didn't want to know the end… because how could the end be happy? How could the world go back to the way it was when so much bad had happened? But in the end, it’s only a passing thing… this shadow. Even darkness must pass. A new day will come. And when the sun shines, it will shine out the clearer. - J.R.R. Tolkien
// index.html
<div class="page quote-47">
<span class="number">47</span>
<blockquote class="quote-wrapper">
<p class="quote">It's like in the great stories, Mr. Frodo. The ones that really mattered. Full of darkness and danger they were. And sometimes you didn't want to know the end… because how could the end be happy? How could the world go back to the way it was when so much bad had happened? But in the end, it’s only a passing thing… this shadow. Even darkness must pass. A new day will come. And when the sun shines, it will shine out the clearer.</p>
<cite class="author">J.R.R. Tolkien</cite>
</blockquote>
</div>
// quotes.scss
.quote-47 {
background-color: #2e2836;
background-image: linear-gradient(to right, #1c181e, #2e2836);
color: #e1aa7d;
blockquote {
font-size: 1.25em;
line-height: 1.5em;
max-width: 50%;
font-family: "Merriweather sans";
text-align: justify;
font-style: italic;
&::before {
content: "★ ★ ★";
font-style: normal;
display: block;
margin-bottom: $baseline;
width: 100%;
height: 50px;
text-align: center;
}
&::after {
content: "★ ★ ★";
font-style: normal;
display: block;
margin-top: $baseline;
width: 100%;
height: 50px;
text-align: center;
}
}
}
5.
Develop an interest in life as you see it; the people, things, literature, music - the world is so rich, simply throbbing with rich treasures, beautiful souls and interesting people. Forget yourself. - Henry Miller
// index.html
<div class="page quote-32">
<span class="number">32</span>
<blockquote class="quote-wrapper">
<p class="quote">
Develop an interest in life as you see it; the people, things, literature, music - the world is so rich, simply throbbing with rich treasures, beautiful souls and interesting people. Forget yourself.
</p>
<cite class="author">Henry Miller</cite>
</blockquote>
<div class="tetris-piece"></div>
<div class="tetris-piece-2"></div>
</div>
// quotes.scss
.quote-32 {
background-color: #ffe19c;
color: #3a3042;
background-image: url(../images/tetris.svg);
background-size: 1100px auto;
background-position: left bottom;
background-repeat: no-repeat;
blockquote {
font-size: 2em;
line-height: 1.2em;
font-family: "Caveat brush";
z-index: 2;
}
.tetris-piece {
width: 160px;
height: 82px;
display: block;
background-image: url(../images/tetris-piece.svg);
background-size: 100% 100%;
position: absolute;
top: -152px;
left: 273px;
animation: 5s tetris-piece-fall linear infinite 3s;
animation-fill-mode: forwards;
z-index: 0;
}
.tetris-piece-2 {
width: 65px;
height: 155px;
display: block;
background-image: url(../images/tetris-piece-2.svg);
background-size: 100% 100%;
position: absolute;
top: -208px;
left: 521px;
animation: 4s tetris-piece-2-fall linear infinite 6s;
animation-fill-mode: forwards;
z-index: 0;
}
}
@keyframes tetris-piece-fall {
0% { top: -150px; transform: rotate(90deg); }
28% { transform: rotate(90deg); }
30% { transform: rotate(0deg); }
99% { transform: rotate(0deg); }
50% { top: calc(100% - 117px); }
100% { top: calc(100% - 117px); }
}
@keyframes tetris-piece-2-fall {
0% { top: -200px; transform: rotate(90deg); }
28% { transform: rotate(90deg); }
30% { transform: rotate(0deg); }
99% { transform: rotate(0deg); }
50% { top: calc(100% - 155px); }
100% { top: calc(100% - 155px); }
}
6.
I need solitude. I need space. I need air. I need the empty fields round me; and my legs pounding along roads; and sleep; and animal existence. - Virginia Woolf
// index.html
<div class="page quote-21">
<span class="number">21</span>
<blockquote class="quote-wrapper">
<p class="quote">
<div class="first-line">I need solitude. I need space. I need air.</div><br/><div class="second-line">I need the empty fields round me;</div><br/><div class="third-line">and my legs pounding along roads;</div><br/><div class="fourth-line">and sleep;</div><br/><div class="fifth-line">and animal existence.</div>
</p>
<cite class="author">Virginia Woolf</cite>
</blockquote>
</div>
// quotes.scss
.quote-21 {
background-color: #AFC97E;
color: rgba(0,0,0,0.5);
padding: $general-margin;
align-items: flex-end;
blockquote {
font-family: "Frostys Winterland";
font-size: 3.75em;
line-height: 1.2em;
text-align: right;
div {
display: inline-block;
padding-left: .5em;
padding-right: .5em;
&.first-line {
background-image: linear-gradient(to right, transparent, #D4E6B5);
}
&.second-line {
background-image: linear-gradient(to right, transparent, #ffe066);
}
&.third-line {
background-image: linear-gradient(to right, transparent, #877B66);
}
&.fourth-line {
background-image: linear-gradient(to right, transparent, #c3e991);
}
&.fifth-line {
background-image: linear-gradient(to right, transparent, #6e7f50);
}
}
}
cite {
position: absolute;
bottom: 10%;
right: $general-margin;
padding-right: 40px;
font-size: 2rem;
}
}
@media screen and (max-width: 680px) {
.quote-21 {
padding: $general-margin 15px;
blockquote {
font-size: 1.5rem;
cite {
font-size: 1.25rem;
right: 55px;
padding-right: 0;
}
}
}
}
7.
Start now. Start where you are. Start with fear. Start with pain. Start with doubt. Start with hands shaking. Start with voice trembling but start. Start and don’t stop. Start where you are, with what you have. Just … start. - Ijeoma Umebinyuo
// index.html
<div class="page quote-1">
<span class="number">1</span>
<blockquote class="quote-wrapper">
<p class="quote">Start now. Start where you are. Start with fear. Start with pain. Start with doubt. Start with hands shaking. Start with voice trembling but start. Start and don’t stop. Start where you are, with what you have. Just <br/><span class="special">… start.</span></p>
<cite class="author">Ijeoma Umebinyuo</cite>
</blockquote>
</div>
// quotes.scss
.quote-1 {
background-image: linear-gradient(to right, #2f3e46, #84a98c);
background-color: #2f3e46;
background-size: cover;
justify-content: flex-start;
blockquote {
font-family: "Luckiest Guy";
color: white;
display: block;
perspective: 800px;
p {
font-size: 2.5em;
line-height: 3rem;
text-shadow: 0px 0px 30px #000, 0px 0px 30px #000, 0px 0px 30px #000;
transform: rotateY(-20deg);
padding: $baseline;
opacity: 0.6;
position: relative;
left: -10%;
}
cite {
text-shadow: 1px 1px 3px #000;
letter-spacing: 2px;
display: block;
transform: rotateY(-20deg);
float: right;
margin-right: $baseline;
color: white;
font-family: Verdana;
}
}
.special {
font-size: 4.5rem;
line-height: 5rem;
color: #2f3e46;
text-shadow: 0px 0px 3px #cad2c5, 0px 0px 3px #cad2c5, 0px 0px 3px #cad2c5;
}
}
8.
I think too much. I think ahead. I think behind. I think sideways. I think it all. If it exists, I’ve fucking thought of it. - Winona Ryder
//index.html
<div class="page quote-20">
<span class="number">20</span>
<blockquote class="quote-wrapper">
<p class="quote"><span class="think-1">I think too much.</span> <span class="think-2">I think ahead.</span> <span class="think-3">I think behind.</span> <span class="think-4">I think sideways.</span> <span class="think-5">I think it all.</span> <span class="think-6">If it exists, I’ve fucking thought of it.</span></p>
<cite class="author">Winona Ryder</cite>
</blockquote>
</div>
// quotes.scss
.quote-20 {
background-color: #0f0f0f;
background-image: url(../images/grid-pattern-grin.png);
background-size: 30px 30px;
min-height: 900px;
color: #81ff49;
blockquote {
text-transform: uppercase;
font-weight: bold;
letter-spacing: 3px;
span {
position: absolute;
&.think-1 {
top: 25%;
left: 10%;
animation: 1.3s ease-in-out .5s normal none infinite running shake;
}
&.think-2 {
top: 30%;
right: 15%;
animation: 1.2s ease-in-out .8s normal none infinite running shake;
}
&.think-3 {
top: 42%;
left: 20%;
animation: 1.5s ease-in-out .1s infinite shake-rotated;
}
&.think-4 {
top: 50%;
left: 40%;
animation: 1.1s ease-in-out .5s normal none infinite running shake;
}
&.think-5 {
top: 59%;
left: 65%;
animation: 1.3s ease-in-out .3s normal none infinite running shake;
}
&.think-6 {
top: 70%;
left: 42%;
animation: 1.8s ease-in-out .9s normal none infinite running shake;
}
}
}
cite {
position: absolute;
bottom: 10%;
left: 10%;
text-decoration: line-through;
}
}
@keyframes shake {
0% { transform: translateX(0px); opacity: 1; }
6% { transform: translateX(10px); opacity: 0.3; }
12% { transform: translateX(-10px); opacity: 0.5 }
16% { transform: translateX(10px); opacity: 0.7; font-size: 0.5rem; }
17% { transform: translateX(-5px); opacity: 0.5; font-size: 1em; }
26% { transform: translateX(5px); opacity: 0.3; }
34% { transform: translateX(0px); opacity: 1; }
100% { transform: translateX(0px); opacity: 1; }
}
@keyframes shake-rotated {
0% { transform: translateX(0px) rotateY(180deg); opacity: 1; }
6% { transform: translateX(10px) rotateY(180deg); opacity: 0.3; }
12% { transform: translateX(-10px) rotateY(180deg); opacity: 0.5 }
16% { transform: translateX(10px) rotateY(180deg); opacity: 0.7; font-size: 0.5rem; }
17% { transform: translateX(-5px) rotateY(180deg); opacity: 0.5; font-size: 1em; }
26% { transform: translateX(5px) rotateY(180deg); opacity: 0.3; }
34% { transform: translateX(0px) rotateY(180deg); opacity: 1; }
100% { transform: translateX(0px) rotateY(180deg); opacity: 1; }
}
Grid pattern image
9.
Faithless is he that says farewell when the road darkens. - J.R.R. Tolkien
// index.html
<div class="page quote-45">
<span class="number">45</span>
<blockquote class="quote-wrapper">
<p class="quote">Faithless is he that says farewell when the road darkens.</p>
<cite class="author">J.R.R. Tolkien</cite>
</blockquote>
</div>
// quotes.scss
.quote-45 {
background-color: #000;
color: #fff;
blockquote {
font-size: 2em;
font-size: 2.5vw;
line-height: 1.4em;
font-family: "Sin City", "Luckiest guy";
transform: rotate(-3deg);
&::after {
content: "";
display: block;
height: 10px;
background-image: linear-gradient(to right, transparent, #bd2635, transparent);
}
&::before {
content: "";
display: block;
height: 10px;
background-image: linear-gradient(to right, transparent, #bd2635, transparent);
}
cite {
font-size: 1.5rem;
font-size: 2vw;
color: #bd2635;
display: inline-block;
margin-bottom: $baseline;
}
}
.number {
border-color: #bd2635;
color: #bd2635;
}
}
10.
She is far, far away from me. She walks in starlight in another world. It was just a dream. - J.R.R. Tolkien
// index.html
<div class="page quote-35">
<span class="number">35</span>
<blockquote class="quote-wrapper">
<p class="quote">
She is far, far away from me. She walks in starlight in another world. It was just a dream.
</p>
<cite class="author">J.R.R. Tolkien</cite>
</blockquote>
(html comment removed: <div class="dark-sky"></div> )
<div class="mid-light"></div>
<div class="bottom-ground"></div>
<div class="lighthouse">
<div class="lighthouse-stripe"></div>
</div>
<div class="lighthouse-light"></div>
</div>
// quotes.scss
.quote-35 {
background-color: #000;
color: #fffee0;
position: relative;
display: block;
height: 900px;
padding: 0;
blockquote {
font-size: 1.25em;
line-height: 1.2em;
position: relative;
z-index: 2;
position: absolute;
right: 25%;
bottom: calc(30% + 210px);
color: black;
font-family: "Lora";
font-style: italic;
cite {
position: absolute;
color: #f28914;
}
}
.mid-light {
position: absolute;
left: 0;
top: 0%;
height: 70%;
width: 100%;
background-image: linear-gradient(to bottom, black, #690000, #df912c);
border-top-right-radius: 20px;
border-top-left-radius: 20px;
z-index: 0;
}
.bottom-ground {
position: absolute;
left: 0;
top: 70%;
height: 30%;
width: 100%;
background-color: #000;
z-index: 0;
box-shadow: 0px -20px 10px -20px black;
}
.lighthouse {
position: absolute;
bottom: 30%;
right: 10%;
background-color: #000;
height: 300px;
width: 40px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
&::after {
content: "";
position: absolute;
right: -20px;
bottom: 0;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 300px 0 0 20px;
border-color: transparent transparent transparent black;
}
&::before {
content: "";
position: absolute;
left: -20px;
bottom: 0;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 300px 20px;
border-color: transparent transparent black transparent;
}
}
.lighthouse-stripe {
position: absolute;
top: 80px;
left: 0;
width: 100%;
height: 30px;
background-image: linear-gradient(to right, #e8cc8b, black);
border-radius: 15px;
filter: blur(3px);
}
.lighthouse-light {
width: 0;
height: 0;
border-style: solid;
border-width: 115px 0 115px 2000px;
border-color: transparent transparent transparent rgba(255, 254, 224, 0.7);
position: absolute;
bottom: calc(30% + 175px);
right: 11%;
opacity: 0.4;
filter: blur(10px);
animation: 6s animateLight ease-in-out infinite;
}
@keyframes animateLight {
0% { opacity: 0.4; }
70% { opacity: 0.2; }
100% { opacity: 0.4; }
}
}
Thanks for reading! I hope you like some of the designs and quotes. Stay updated about my future posts by following @alcibiades.
beautiful quotes and lovely word art - you deserve a medal for the work that went into this. This is high quality content and certainly deserving of many votes. It's very helpful for those, like me, who find coding difficult
Thanks! I'm really glad you like it.
Awesome work. Some wonderful quotes, and another great tutorial. Thank you for sharing.
PS - I'm following you know.
Thank you! Following you back.
nice tutorial.....upvoted and followed
Thanks! Followed you back, awesome photography.