feature-portfolio-1920

Download a modern testimonial block, html & css code

  • 0

Thought i’d share the html & css i’ve used on my testimonial page, if you want to skip the code you can scroll to the bottom and download both the html & css files.

It uses a great trick I found on css-tricks to create the arrow so no images are required, not sure how it works but it works great.¬†You can see it in action here…www.css-tricks.com/snippets/css/css-triangle/ it also works great on responsive sites.

How it looks

“I don’t know who you are. I don’t know what you want. If you are looking for ransom, I can tell you I don’t have money. But what I do have are a very particular set of skills; skills I have acquired over a very long career. Skills that make me a nightmare for people like you. If you let my daughter go now, that’ll be the end of it. I will not look for you, I will not pursue you. But if you don’t, I will look for you, I will find you, and I will kill you.”
Bryan Mills Retired CIA Agent

Download the files

Download a zipped file of the html & css code, please share and leave a comment!!!
Download / Testimonial block (html & css)
Testimonial-Block.zip / 3 kB / Downloaded 443 times

The html markup

<div class="testimonial">"I don't know who you are. I don't know what you want. If you are looking for ransom, I can tell you I don't have money. But what I do have are a very particular set of skills; skills I have acquired over a very long career. Skills that make me a nightmare for people like you. If you let my daughter go now, that'll be the end of it. I will not look for you, I will not pursue you. But if you don't, I will look for you, I will find you, and I will kill you."</div>
<div class="author-wrapper">
<div class="arrow"></div>
<div class="testimonial-name">Bryan Mills <span>Retired CIA Agent</span></div>
</div>

The css code

/*Testimonial box and font style and colours*/
.testimonial {
padding: 20px 25px;
background-color: #f2f2f2; /*Change colour here and in .arrow-down*/
float: left;
font: italic 17px/22px Georgia, "Times New Roman", Times, serif;
color: #53646d;
text-shadow: 1px 1px 0 #ffffff;
/*Uncomment to add round corners*/
/* -moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px; */
}
/*Author section wrapper*/
.author-wrapper {
width: 100%;
margin-bottom: 20px;
float: left;
}
/*This creates the arrow with no need for an image, thanks to css-tricks.com*/
.arrow {
float: left;
margin-left: 25px;
width: 0;
height: 0;
border-top: 30px solid #f2f2f2; /*Change colour here to match .testimonial*/
border-left: 30px solid transparent;
border-right: 0px solid transparent; /*Make this 30px to create a triangle*/
}
/*Author Name*/
.testimonial-name {
float: left;
margin: 0 8px;
color: #1e4673;
padding-top: 5px;
font: bold 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
/*Author Job Title*/
.testimonial-name span {
color: #53646d;
font-weight: normal;
}

5 comments

Leave a Reply

Your email address will not be published.