JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

Font Size

+

-

Reset

Back to list of all examples

Useful Stuff About:

Variations on Quote Blocks

Here are some variations on quote blocks

"This can be a long or short quote. You can change color and font-size as needed."
~First Last

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vestibulum pharetra leo quis tempus. Pellentesque non auctor nibh. Donec vulputate pretium nisi, a suscipit tellus porta eu. Duis mattis dui purus, eu efficitur augue interdum ac. In varius, sem non rhoncus tempor, nisl mi interdum erat, sed sodales orci justo sed tortor. Morbi vestibulum elit velit, ut fermentum risus gravida eget. Mauris maximus libero nec nibh suscipit, nec lobortis enim tristique. Suspendisse facilisis sapien molestie metus vulputate scelerisque. Vivamus vehicula lectus sed lectus accumsan, non accumsan felis mollis. Donec nisi mi, egestas sit amet massa vitae, pretium imperdiet libero. Vestibulum volutpat augue ac congue volutpat. Etiam sodales metus convallis ex tincidunt rutrum. Suspendisse laoreet sed eros a tincidunt. Mauris eu odio ipsum. Etiam faucibus, magna sit amet gravida porta, odio nulla luctus enim, et convallis nibh sem non risus. Integer vitae erat mollis, finibus felis non, tempor arcu.

This is a somewhat longer quoted text from an interviewee
~First Last

Mauris in enim nisi. Proin et felis lobortis, eleifend lacus eu, scelerisque arcu. Mauris condimentum faucibus felis. Maecenas lacinia ac dolor sit amet maximus. Phasellus sagittis massa vel luctus eleifend. Duis id laoreet orci, id consequat magna. Nam at imperdiet velit. Etiam ullamcorper neque et dolor imperdiet, consectetur consequat purus ullamcorper. Vivamus dapibus, tortor ut ornare tristique, nulla mi egestas tortor, et laoreet lectus dolor rhoncus neque. Curabitur eleifend ligula vel pellentesque suscipit. Pellentesque vel sagittis ipsum. Nunc suscipit mollis mauris, eget blandit dolor mattis eget. Morbi elit justo, dapibus in orci dapibus, maximus tempor lorem. Nulla vitae rhoncus orci, vulputate semper tortor. Vestibulum sagittis ligula placerat egestas efficitur. Duis posuere congue massa.

Mauris in enim nisi. Proin et felis lobortis, eleifend lacus eu, scelerisque arcu. Mauris condimentum faucibus felis. Maecenas lacinia ac dolor sit amet maximus. Phasellus sagittis massa vel luctus eleifend. Duis id laoreet orci, id consequat magna. Nam at imperdiet velit. Etiam ullamcorper neque et dolor imperdiet, consectetur consequat purus ullamcorper. Vivamus dapibus, tortor ut ornare tristique, nulla mi egestas tortor, et laoreet lectus dolor rhoncus neque. Curabitur eleifend ligula vel pellentesque suscipit. Pellentesque vel sagittis ipsum. Nunc suscipit mollis mauris, eget blandit dolor mattis eget. Morbi elit justo, dapibus in orci dapibus, maximus tempor lorem. Nulla vitae rhoncus orci, vulputate semper tortor. Vestibulum sagittis ligula placerat egestas efficitur. Duis posuere congue massa.

This is a really longer quoted text from an interviewee. This is a really longer quoted text from an interviewee. This is a really longer quoted text from an interviewee.
~First Last

Mauris in enim nisi. Proin et felis lobortis, eleifend lacus eu, scelerisque arcu. Mauris condimentum faucibus felis. Maecenas lacinia ac dolor sit amet maximus. Phasellus sagittis massa vel luctus eleifend. Duis id laoreet orci, id consequat magna. Nam at imperdiet velit. Etiam ullamcorper neque et dolor imperdiet, consectetur consequat purus ullamcorper. Vivamus dapibus, tortor ut ornare tristique, nulla mi egestas tortor, et laoreet lectus dolor rhoncus neque. Curabitur eleifend ligula vel pellentesque suscipit. Pellentesque vel sagittis ipsum. Nunc suscipit mollis mauris, eget blandit dolor mattis eget. Morbi elit justo, dapibus in orci dapibus, maximus tempor lorem. Nulla vitae rhoncus orci, vulputate semper tortor. Vestibulum sagittis ligula placerat egestas efficitur. Duis posuere congue massa.

 

HTML

Copy and paste the type of quote block you want from the following HTML code - you MUST paste it ABOVE the target paragraph.


<div class="quoteBlock1 floatRightQuote">
&quot;
This is a quote!
&quot;<br><span class="quotee1">
~First Last
</span>
</div>

<div class="quoteBlock2 floatLeftQuote">
<div class="leftDoubleQuotes">&ldquo;</div>
This is a somewhat longer quoted text from an interviewee.
<br><span class="quotee1">
~First Last
</span>
</div>

<div class="quoteBlock3">
<div class="leftQuotes">&ldquo;</div><div class="rightQuotes">&rdquo;</div>
This is a really longer quoted text from an interviewee. This is a really longer quoted text from an interviewee. This is a really longer quoted text from an interviewee.
<br><span class="quotee1">
~First Last
</span>
</div>

 

CSS

Copy and paste the CSS you need for your quote block and modify as needed for your style.


@font-face {/* for the curly quotes */
font-family: JandaQuirkygirl;
src: url(/fonts/JandaQuirkygirl.ttf);
}
.floatRightQuote {
float: right;
margin: 0px 0px 20px 20px;
}
.floatLeftQuote {
float: left;
margin: 0px 20px 20px -80px;
}
/*-----for 1st quote block -------------*/
.quoteBlock1 {
border-left: 5px solid rgba(198,108,0,1.00);
color: rgba(0,0,0,1.00);
font-size: 2rem;
padding: 20px;
padding-right: 0px;
font-style: italic;
width: 100%;
max-width: 33%;
height: auto;
}
.quotee1 {
display: block;
font-size: 1.5rem;
color:rgba(85,58,1,1.00);
text-align: right;
}
/*------for 2nd block quote -------------*/
.quoteBlock2 {
border: 5px solid rgba(198,108,0,1.00);
border-left: none;
border-right: none;
font-size: 2rem;
padding: 20px;
position: relative;
font-style: italic;
margin-top: 30px;
z-index: 9000;
max-width: 30%;
background-color: rgba(204,184,0,1.00);
}
.leftDoubleQuotes {
font-family: JandaQuirkygirl;
font-size: 20rem;
margin-top: -170px;
margin-left: -70px;
margin-bottom: -270px;
position: relative;
}
/*-----for 3rd 80% quote block-------------*/
.quoteBlock3 {
border: none;
font-size: 2rem;
position: relative;
font-style: italic;
display: block;
padding: 50px;
width: 80%;
height: auto;
margin: 0 auto;
margin-bottom: 50px;
border-radius: 30px;
background-image: linear-gradient(307deg,rgba(255,255,255,1.00) 0%,rgba(255,116,0,1.00) 100%);
box-shadow: 5px 5px 20px 0px rgba(0,0,0,1.00);
}
.leftQuotes, .rightQuotes {
font-family: JandaQuirkygirl;
font-size: 10rem;
position: absolute;
top: -50px;
margin-left: -50px;
}
.leftQuotes {
left: 30px;
}
.rightQuotes {
right: 30px;
}