JGallardo
- 1.3k
- 2
- 13
- 30
I created this testimonial section as a prototype.
testimonial concept
HTML
<div class="testimonials">
<blockquote>
<p>This was pretty good.</p>
<cite>
<span class="author">– Bobby,</span> Jersey City, NJ
</cite>
</blockquote>
<blockquote>
<p>This is pizza is the most bearable thing I ever had in Joisey. But it still sucks, just like everyone from there.</p>
<cite>
<span class="author">– Vinny,</span> New York, NY
</cite>
</blockquote>
<blockquote>
<p>I really savored the smoky undertones of the imported sausage. The cheese had a wonderful texture. It paired well with my pinot noir in a dance of sensations.</p>
<cite>
<span class="author">– Alex,</span> San Francisco, CA
</cite>
</blockquote>
</div>
CSS
.testimonials {
width: 720px;
max-width: 96%;
margin: 0 auto;
}
.testimonials blockquote {
background-color: #fff;
border-left: 4px #61acca solid;
font-size: 21px;
line-height: 1.6;
}
.testimonials blockquote {
padding: 10px 20px;
}
.testimonials blockquote {
background-image: url('http://shared-assets.s3.amazonaws.com/codepen/img/elements/quotes/quote-999.jpg');
background-repeat:no-repeat;
background-size: 33px 45px;
background-position: 10px 5px;
}
.testimonials cite {
font-size: 0.7em;
font-style: normal;
}
.author {
font-weight: bold;
font-size: 1.3em;
margin: 0 6px 0 36px;
}
p { margin: 0 0 0 36px; }
<blockquote>
<p>I really savored the smoky undertones of the imported sausage. The cheese had a wonderful texture. It paired well with my pinot noir in a dance of sensations.</p>
<cite>
<span class="author">– Alex,</span> San Francisco, CA
</cite>
</blockquote>
</div>
I created this testimonial section as a prototype.
testimonial concept
HTML
<div class="testimonials">
<blockquote>
<p>This was pretty good.</p>
<cite>
<span class="author">– Bobby,</span> Jersey City, NJ
</cite>
</blockquote>
<blockquote>
<p>This is pizza is the most bearable thing I ever had in Joisey. But it still sucks, just like everyone from there.</p>
<cite>
<span class="author">– Vinny,</span> New York, NY
</cite>
</blockquote>
CSS
.testimonials {
width: 720px;
max-width: 96%;
margin: 0 auto;
}
.testimonials blockquote {
background-color: #fff;
border-left: 4px #61acca solid;
font-size: 21px;
line-height: 1.6;
}
.testimonials blockquote {
padding: 10px 20px;
}
.testimonials blockquote {
background-image: url('http://shared-assets.s3.amazonaws.com/codepen/img/elements/quotes/quote-999.jpg');
background-repeat:no-repeat;
background-size: 33px 45px;
background-position: 10px 5px;
}
.testimonials cite {
font-size: 0.7em;
font-style: normal;
}
.author {
font-weight: bold;
font-size: 1.3em;
margin: 0 6px 0 36px;
}
p { margin: 0 0 0 36px; }
<blockquote>
<p>I really savored the smoky undertones of the imported sausage. The cheese had a wonderful texture. It paired well with my pinot noir in a dance of sensations.</p>
<cite>
<span class="author">– Alex,</span> San Francisco, CA
</cite>
</blockquote>
</div>
I created this testimonial section as a prototype.
testimonial concept
HTML
<div class="testimonials">
<blockquote>
<p>This was pretty good.</p>
<cite>
<span class="author">– Bobby,</span> Jersey City, NJ
</cite>
</blockquote>
<blockquote>
<p>This is pizza is the most bearable thing I ever had in Joisey. But it still sucks, just like everyone from there.</p>
<cite>
<span class="author">– Vinny,</span> New York, NY
</cite>
</blockquote>
<blockquote>
<p>I really savored the smoky undertones of the imported sausage. The cheese had a wonderful texture. It paired well with my pinot noir in a dance of sensations.</p>
<cite>
<span class="author">– Alex,</span> San Francisco, CA
</cite>
</blockquote>
</div>
CSS
.testimonials {
width: 720px;
max-width: 96%;
margin: 0 auto;
}
.testimonials blockquote {
background-color: #fff;
border-left: 4px #61acca solid;
font-size: 21px;
line-height: 1.6;
}
.testimonials blockquote {
padding: 10px 20px;
}
.testimonials blockquote {
background-image: url('http://shared-assets.s3.amazonaws.com/codepen/img/elements/quotes/quote-999.jpg');
background-repeat:no-repeat;
background-size: 33px 45px;
background-position: 10px 5px;
}
.testimonials cite {
font-size: 0.7em;
font-style: normal;
}
.author {
font-weight: bold;
font-size: 1.3em;
margin: 0 6px 0 36px;
}
p { margin: 0 0 0 36px; }
Testimonial section CSS inheritance and proper use of HTML5 elements
I created this testimonial section as a prototype.
testimonial concept
HTML
<div class="testimonials">
<blockquote>
<p>This was pretty good.</p>
<cite>
<span class="author">– Bobby,</span> Jersey City, NJ
</cite>
</blockquote>
<blockquote>
<p>This is pizza is the most bearable thing I ever had in Joisey. But it still sucks, just like everyone from there.</p>
<cite>
<span class="author">– Vinny,</span> New York, NY
</cite>
</blockquote>
CSS
.testimonials {
width: 720px;
max-width: 96%;
margin: 0 auto;
}
.testimonials blockquote {
background-color: #fff;
border-left: 4px #61acca solid;
font-size: 21px;
line-height: 1.6;
}
.testimonials blockquote {
padding: 10px 20px;
}
.testimonials blockquote {
background-image: url('http://shared-assets.s3.amazonaws.com/codepen/img/elements/quotes/quote-999.jpg');
background-repeat:no-repeat;
background-size: 33px 45px;
background-position: 10px 5px;
}
.testimonials cite {
font-size: 0.7em;
font-style: normal;
}
.author {
font-weight: bold;
font-size: 1.3em;
margin: 0 6px 0 36px;
}
p { margin: 0 0 0 36px; }
<blockquote>
<p>I really savored the smoky undertones of the imported sausage. The cheese had a wonderful texture. It paired well with my pinot noir in a dance of sensations.</p>
<cite>
<span class="author">– Alex,</span> San Francisco, CA
</cite>
</blockquote>
</div>
default