Skip to main content
Code Review

Return to Question

Had inserted the CSS in between my HTML. So I seperated them as it was meant.
Source Link
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; }
Source Link
JGallardo
  • 1.3k
  • 2
  • 13
  • 30

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

AltStyle によって変換されたページ (->オリジナル) /