Today, In this blog you’ll learn how we can create a user testimonials for websites. This testimonials design can be used if you’re selling a product on your website, customer testimonials can be a key content element because they are unbiased comments that prompt visitors to buy. By using testimonials in text formats on your site, you introduce content that will promote your product in convincing fashion.
Where Should You Put Customer Testimonials on a Website?
Many businesses include them on their homepages. Since lots of people find businesses through Google search and land on homepages, this strategy can work well.
Other excellent places to include customer testimonials include the following:
Landing pages
Sales pages
Exit-intent popups
Contact pages
Underneath blog posts
In the sidebar
However, you won’t know what area is most effective until you collect data.
You May Also Like:
- Strong Random Password Generator Using Javascript
- Take Image Snapshot from a webcam with Jquery and HTML
- How to decode JSON data and accessing the results in PHP
- Difference Between search() and indexOf() in Javascript
- Limit number of login attempt using PHP & MySQL
First of all, we create an HTML file
The HTML
[pastacode manual=”%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20lang%3D%22en%22%3E%0D%0A%0D%0A%3Chead%3E%0D%0A%20%20%20%20%3Cmeta%20charset%3D%22UTF-8%22%3E%0D%0A%20%20%20%20%3Ctitle%3ETestimonial%20Design%3C%2Ftitle%3E%0D%0A%20%20%20%20%3Clink%20rel%3D’stylesheet’%20href%3D’https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Ffont-awesome%2F5.10.2%2Fcss%2Fall.min.css’%3E%0D%0A%20%20%20%20%3Clink%20rel%3D’stylesheet’%20href%3D’style.css’%3E%0D%0A%3C%2Fhead%3E%0D%0A%0D%0A%3Cbody%20translate%3D%22no%22%3E%0D%0A%0D%0A%20%20%20%20%3Cdiv%20class%3D%22testimonials-container%22%3E%0D%0A%20%20%20%20%20%20%20%20%3Ci%20class%3D%22fas%20fa-quote-left%22%3E%3C%2Fi%3E%0D%0A%20%20%20%20%20%20%20%20%3Cp%20class%3D%22text%22%3E%3C%2Fp%3E%0D%0A%20%20%20%20%20%20%20%20%3Cstrong%20class%3D%22name%22%3E%3C%2Fstrong%3E%0D%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22authors-container%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22author%20selected%22%3E%3Cimg%20src%3D%22https%3A%2F%2Frandomuser.me%2Fapi%2Fportraits%2Fmen%2F41.jpg%22%20alt%3D%22%22%3E%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22author%22%3E%3Cimg%20src%3D%22https%3A%2F%2Frandomuser.me%2Fapi%2Fportraits%2Fwomen%2F50.jpg%22%20alt%3D%22%22%3E%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22author%22%3E%3Cimg%20src%3D%22https%3A%2F%2Frandomuser.me%2Fapi%2Fportraits%2Fwomen%2F22.jpg%22%20alt%3D%22%22%3E%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22author%22%3E%3Cimg%20src%3D%22https%3A%2F%2Frandomuser.me%2Fapi%2Fportraits%2Fwomen%2F76.jpg%22%20alt%3D%22%22%3E%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22author%22%3E%3Cimg%20src%3D%22https%3A%2F%2Frandomuser.me%2Fapi%2Fportraits%2Fmen%2F17.jpg%22%20alt%3D%22%22%3E%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%3C%2Fdiv%3E%0D%0A%0D%0A%20%20%20%20%3Cdiv%20class%3D%22social-panel-container%22%3E%0D%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22social-panel%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3ECreated%20with%20%3Ci%20class%3D%22fa%20fa-heart%22%3E%3C%2Fi%3E%20by%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20target%3D%22_blank%22%20href%3D%22https%3A%2F%2Fflorin-pop.com%22%3EFlorin%20Pop%3C%2Fa%3E%3C%2Fp%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22close-btn%22%3E%3Ci%20class%3D%22fas%20fa-times%22%3E%3C%2Fi%3E%3C%2Fbutton%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ch4%3EGet%20in%20touch%20on%3C%2Fh4%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cul%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22https%3A%2F%2Fwww.patreon.com%2Fflorinpop17%22%20target%3D%22_blank%22%3E%0D%0A%09%09%09%09%09%3Ci%20class%3D%22fab%20fa-discord%22%3E%3C%2Fi%3E%0D%0A%09%09%09%09%09%3C%2Fa%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fli%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Fflorinpop1705%22%20target%3D%22_blank%22%3E%0D%0A%09%09%09%09%09%3Ci%20class%3D%22fab%20fa-twitter%22%3E%3C%2Fi%3E%0D%0A%09%09%09%09%09%3C%2Fa%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fli%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22https%3A%2F%2Flinkedin.com%2Fin%2Fflorinpop17%22%20target%3D%22_blank%22%3E%0D%0A%09%09%09%09%09%3Ci%20class%3D%22fab%20fa-linkedin%22%3E%3C%2Fi%3E%0D%0A%09%09%09%09%09%3C%2Fa%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fli%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22https%3A%2F%2Ffacebook.com%2Fflorinpop17%22%20target%3D%22_blank%22%3E%0D%0A%09%09%09%09%09%3Ci%20class%3D%22fab%20fa-facebook%22%3E%3C%2Fi%3E%0D%0A%09%09%09%09%09%3C%2Fa%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fli%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22https%3A%2F%2Finstagram.com%2Fflorinpop17%22%20target%3D%22_blank%22%3E%0D%0A%09%09%09%09%09%3Ci%20class%3D%22fab%20fa-instagram%22%3E%3C%2Fi%3E%0D%0A%09%09%09%09%09%3C%2Fa%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fli%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ful%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%3C%2Fdiv%3E%0D%0A%3Cscript%20src%3D%22main.js%22%3E%3C%2Fscript%3E%0D%0A%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E” provider=”manual” lang=”default”/]
The CSS
[pastacode manual=”%20%20%20%20%20%20%20%20%40import%20url(‘https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DMuli%26display%3Dswap’)%3B%0D%0A%20%20%20%20%20%20%20%20%40import%20url(‘https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DRoboto%3A400%2C700%26display%3Dswap’)%3B%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20*%20%7B%0D%0A%20%20%20%20%20%20%20%20%09box-sizing%3A%20border-box%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20body%20%7B%0D%0A%20%20%20%20%20%20%20%20%09background%3A%20%23D3CCE3%3B%0D%0A%20%20%20%20%20%20%20%20%09background%3A%20-webkit-linear-gradient(to%20bottom%2C%20%23E9E4F0%2C%20%23D3CCE3)%3B%0D%0A%20%20%20%20%20%20%20%20%09background%3A%20linear-gradient(to%20bottom%2C%20%23E9E4F0%2C%20%23D3CCE3)%3B%0D%0A%20%20%20%20%20%20%20%20%09font-family%3A%20’Roboto’%2C%20sans-serif%3B%0D%0A%20%20%20%20%20%20%20%20%09display%3A%20flex%3B%0D%0A%20%20%20%20%20%20%20%20%09align-items%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09justify-content%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09min-height%3A%20100vh%3B%0D%0A%20%20%20%20%20%20%20%20%09margin%3A%200%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.testimonials-container%20%7B%0D%0A%20%20%20%20%20%20%20%20%09color%3A%20rgba(255%2C%20255%2C%20255%2C%200.8)%3B%0D%0A%20%20%20%20%20%20%20%20%09display%3A%20flex%3B%0D%0A%20%20%20%20%20%20%20%20%09flex-direction%3A%20column%3B%0D%0A%20%20%20%20%20%20%20%20%09align-items%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09padding%3A%2070px%20200px%2050px%3B%0D%0A%20%20%20%20%20%20%20%20%09transition%3A%20all%200.3s%20ease-in%3B%0D%0A%20%20%20%20%20%20%20%20%09max-width%3A%20100%25%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.fa-quote-left%20%7B%0D%0A%20%20%20%20%20%20%20%20%09color%3A%20rgba(0%2C%200%2C%200%2C%200.15)%3B%0D%0A%20%20%20%20%20%20%20%20%09font-size%3A%2050px%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.text%20%7B%0D%0A%20%20%20%20%20%20%20%20%09line-height%3A%2030px%3B%0D%0A%20%20%20%20%20%20%20%20%09margin%3A%2040px%200%2020px%3B%0D%0A%20%20%20%20%20%20%20%20%09min-height%3A%20150px%3B%0D%0A%20%20%20%20%20%20%20%20%09max-width%3A%20100%25%3B%0D%0A%20%20%20%20%20%20%20%20%09text-align%3A%20justify%3B%0D%0A%20%20%20%20%20%20%20%20%09word-spacing%3A%205px%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.name%20%7B%0D%0A%20%20%20%20%20%20%20%20%09align-self%3A%20flex-end%3B%0D%0A%20%20%20%20%20%20%20%20%09font-weight%3A%20bold%3B%0D%0A%20%20%20%20%20%20%20%20%09letter-spacing%3A%202px%3B%0D%0A%20%20%20%20%20%20%20%20%09text-transform%3A%20uppercase%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.authors-container%20%7B%0D%0A%20%20%20%20%20%20%20%20%09display%3A%20flex%3B%0D%0A%20%20%20%20%20%20%20%20%09flex-wrap%3A%20wrap%3B%0D%0A%20%20%20%20%20%20%20%20%09align-items%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09justify-content%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.author%20%7B%0D%0A%20%20%20%20%20%20%20%20%09margin%3A%2030px%2030px%200%3B%0D%0A%20%20%20%20%20%20%20%20%09cursor%3A%20pointer%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.author.selected%20img%20%7B%0D%0A%20%20%20%20%20%20%20%20%09box-shadow%3A%200%205px%2010px%20rgba(0%2C%200%2C%200%2C%200.5)%3B%0D%0A%20%20%20%20%20%20%20%20%09transform%3A%20scale(1.2)%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.author%20img%20%7B%0D%0A%20%20%20%20%20%20%20%20%09transition%3A%20all%200.3s%20ease-in%3B%0D%0A%20%20%20%20%20%20%20%20%09border-radius%3A%2050%25%3B%0D%0A%20%20%20%20%20%20%20%20%09width%3A%2050px%3B%0D%0A%20%20%20%20%20%20%20%20%09height%3A%2050px%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%2F*%20SOCIAL%20PANEL%20CSS%20*%2F%0D%0A%20%20%20%20%20%20%20%20.social-panel-container%20%7B%0D%0A%20%20%20%20%20%20%20%20%09position%3A%20fixed%3B%0D%0A%20%20%20%20%20%20%20%20%09right%3A%200%3B%0D%0A%20%20%20%20%20%20%20%20%09bottom%3A%2080px%3B%0D%0A%20%20%20%20%20%20%20%20%09transform%3A%20translateX(100%25)%3B%0D%0A%20%20%20%20%20%20%20%20%09transition%3A%20transform%200.4s%20ease-in-out%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel-container.visible%20%7B%0D%0A%20%20%20%20%20%20%20%20%09transform%3A%20translateX(-10px)%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20%7B%09%0D%0A%20%20%20%20%20%20%20%20%09background-color%3A%20%23fff%3B%0D%0A%20%20%20%20%20%20%20%20%09border-radius%3A%2016px%3B%0D%0A%20%20%20%20%20%20%20%20%09box-shadow%3A%200%2016px%2031px%20-17px%20rgba(0%2C31%2C97%2C0.6)%3B%0D%0A%20%20%20%20%20%20%20%20%09border%3A%205px%20solid%20%23001F61%3B%0D%0A%20%20%20%20%20%20%20%20%09display%3A%20flex%3B%0D%0A%20%20%20%20%20%20%20%20%09flex-direction%3A%20column%3B%0D%0A%20%20%20%20%20%20%20%20%09justify-content%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09align-items%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09font-family%3A%20’Muli’%3B%0D%0A%20%20%20%20%20%20%20%20%09position%3A%20relative%3B%0D%0A%20%20%20%20%20%20%20%20%09height%3A%20169px%3B%09%0D%0A%20%20%20%20%20%20%20%20%09width%3A%20370px%3B%0D%0A%20%20%20%20%20%20%20%20%09max-width%3A%20calc(100%25%20-%2010px)%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20button.close-btn%20%7B%0D%0A%20%20%20%20%20%20%20%20%09border%3A%200%3B%0D%0A%20%20%20%20%20%20%20%20%09color%3A%20%2397A5CE%3B%0D%0A%20%20%20%20%20%20%20%20%09cursor%3A%20pointer%3B%0D%0A%20%20%20%20%20%20%20%20%09font-size%3A%2020px%3B%0D%0A%20%20%20%20%20%20%20%20%09position%3A%20absolute%3B%0D%0A%20%20%20%20%20%20%20%20%09top%3A%205px%3B%0D%0A%20%20%20%20%20%20%20%20%09right%3A%205px%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20button.close-btn%3Afocus%20%7B%0D%0A%20%20%20%20%20%20%20%20%09outline%3A%20none%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20p%20%7B%0D%0A%20%20%20%20%20%20%20%20%09background-color%3A%20%23001F61%3B%0D%0A%20%20%20%20%20%20%20%20%09border-radius%3A%200%200%2010px%2010px%3B%0D%0A%20%20%20%20%20%20%20%20%09color%3A%20%23fff%3B%0D%0A%20%20%20%20%20%20%20%20%09font-size%3A%2014px%3B%0D%0A%20%20%20%20%20%20%20%20%09line-height%3A%2018px%3B%0D%0A%20%20%20%20%20%20%20%20%09padding%3A%202px%2017px%206px%3B%0D%0A%20%20%20%20%20%20%20%20%09position%3A%20absolute%3B%0D%0A%20%20%20%20%20%20%20%20%09top%3A%200%3B%0D%0A%20%20%20%20%20%20%20%20%09left%3A%2050%25%3B%0D%0A%20%20%20%20%20%20%20%20%09margin%3A%200%3B%0D%0A%20%20%20%20%20%20%20%20%09transform%3A%20translateX(-50%25)%3B%0D%0A%20%20%20%20%20%20%20%20%09text-align%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09width%3A%20235px%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20p%20i%20%7B%0D%0A%20%20%20%20%20%20%20%20%09margin%3A%200%205px%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20p%20a%20%7B%0D%0A%20%20%20%20%20%20%20%20%09color%3A%20%23FF7500%3B%0D%0A%20%20%20%20%20%20%20%20%09text-decoration%3A%20none%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20h4%20%7B%0D%0A%20%20%20%20%20%20%20%20%09margin%3A%2020px%200%3B%0D%0A%20%20%20%20%20%20%20%20%09color%3A%20%2397A5CE%3B%09%0D%0A%20%20%20%20%20%20%20%20%09font-family%3A%20’Muli’%3B%09%0D%0A%20%20%20%20%20%20%20%20%09font-size%3A%2014px%3B%09%0D%0A%20%20%20%20%20%20%20%20%09line-height%3A%2018px%3B%0D%0A%20%20%20%20%20%20%20%20%09text-transform%3A%20uppercase%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20ul%20%7B%0D%0A%20%20%20%20%20%20%20%20%09display%3A%20flex%3B%0D%0A%20%20%20%20%20%20%20%20%09list-style-type%3A%20none%3B%0D%0A%20%20%20%20%20%20%20%20%09padding%3A%200%3B%0D%0A%20%20%20%20%20%20%20%20%09margin%3A%200%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20ul%20li%20%7B%0D%0A%20%20%20%20%20%20%20%20%09margin%3A%200%2010px%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20ul%20li%20a%20%7B%0D%0A%20%20%20%20%20%20%20%20%09border%3A%201px%20solid%20%23DCE1F2%3B%0D%0A%20%20%20%20%20%20%20%20%09border-radius%3A%2050%25%3B%0D%0A%20%20%20%20%20%20%20%20%09color%3A%20%23001F61%3B%0D%0A%20%20%20%20%20%20%20%20%09font-size%3A%2020px%3B%0D%0A%20%20%20%20%20%20%20%20%09display%3A%20flex%3B%0D%0A%20%20%20%20%20%20%20%20%09justify-content%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09align-items%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09height%3A%2050px%3B%0D%0A%20%20%20%20%20%20%20%20%09width%3A%2050px%3B%0D%0A%20%20%20%20%20%20%20%20%09text-decoration%3A%20none%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20ul%20li%20a%3Ahover%20%7B%0D%0A%20%20%20%20%20%20%20%20%09border-color%3A%20%23FF6A00%3B%0D%0A%20%20%20%20%20%20%20%20%09box-shadow%3A%200%209px%2012px%20-9px%20%23FF6A00%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.floating-btn%20%7B%0D%0A%20%20%20%20%20%20%20%20%09border-radius%3A%2026.5px%3B%0D%0A%20%20%20%20%20%20%20%20%09background-color%3A%20%23001F61%3B%0D%0A%20%20%20%20%20%20%20%20%09border%3A%201px%20solid%20%23001F61%3B%0D%0A%20%20%20%20%20%20%20%20%09box-shadow%3A%200%2016px%2022px%20-17px%20%2303153B%3B%0D%0A%20%20%20%20%20%20%20%20%09color%3A%20%23fff%3B%0D%0A%20%20%20%20%20%20%20%20%09cursor%3A%20pointer%3B%0D%0A%20%20%20%20%20%20%20%20%09font-size%3A%2016px%3B%0D%0A%20%20%20%20%20%20%20%20%09line-height%3A%2020px%3B%0D%0A%20%20%20%20%20%20%20%20%09padding%3A%2012px%2020px%3B%0D%0A%20%20%20%20%20%20%20%20%09position%3A%20fixed%3B%0D%0A%20%20%20%20%20%20%20%20%09bottom%3A%2020px%3B%0D%0A%20%20%20%20%20%20%20%20%09right%3A%2020px%3B%0D%0A%20%20%20%20%20%20%20%20%09z-index%3A%20999%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.floating-btn%3Ahover%20%7B%0D%0A%20%20%20%20%20%20%20%20%09background-color%3A%20%23ffffff%3B%0D%0A%20%20%20%20%20%20%20%20%09color%3A%20%23001F61%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.floating-btn%3Afocus%20%7B%0D%0A%20%20%20%20%20%20%20%20%09outline%3A%20none%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.floating-text%20%7B%0D%0A%20%20%20%20%20%20%20%20%09background-color%3A%20%23001F61%3B%0D%0A%20%20%20%20%20%20%20%20%09border-radius%3A%2010px%2010px%200%200%3B%0D%0A%20%20%20%20%20%20%20%20%09color%3A%20%23fff%3B%0D%0A%20%20%20%20%20%20%20%20%09font-family%3A%20’Muli’%3B%0D%0A%20%20%20%20%20%20%20%20%09padding%3A%207px%2015px%3B%0D%0A%20%20%20%20%20%20%20%20%09position%3A%20fixed%3B%0D%0A%20%20%20%20%20%20%20%20%09bottom%3A%200%3B%0D%0A%20%20%20%20%20%20%20%20%09left%3A%2050%25%3B%0D%0A%20%20%20%20%20%20%20%20%09transform%3A%20translateX(-50%25)%3B%0D%0A%20%20%20%20%20%20%20%20%09text-align%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09z-index%3A%20998%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.floating-text%20a%20%7B%0D%0A%20%20%20%20%20%20%20%20%09color%3A%20%23FF7500%3B%0D%0A%20%20%20%20%20%20%20%20%09text-decoration%3A%20none%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%40media%20screen%20and%20(max-width%3A%20480px)%20%7B%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%09.social-panel-container.visible%20%7B%0D%0A%20%20%20%20%20%20%20%20%09%09transform%3A%20translateX(0px)%3B%0D%0A%20%20%20%20%20%20%20%20%09%7D%0D%0A%20%20%20%20%20%20%20%20%09%0D%0A%20%20%20%20%20%20%20%20%09.floating-btn%20%7B%0D%0A%20%20%20%20%20%20%20%20%09%09right%3A%2010px%3B%0D%0A%20%20%20%20%20%20%20%20%09%7D%0D%0A%20%20%20%20%20%20%20%20%7D” provider=”manual” lang=”default”/]
The JavaScript
[pastacode manual=”%20%20%20%20%20%20%20%20const%20authorsEl%20%3D%20document.querySelectorAll(‘.author’)%3B%0D%0A%20%20%20%20%20%20%20%20const%20container%20%3D%20document.querySelector(‘.testimonials-container’)%3B%0D%0A%20%20%20%20%20%20%20%20const%20nameEl%20%3D%20document.querySelector(‘.name’)%3B%0D%0A%20%20%20%20%20%20%20%20const%20textEl%20%3D%20document.querySelector(‘.text’)%3B%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20const%20testimonials%20%3D%20%5B%7B%0D%0A%20%20%20%20%20%20%20%20%20%20text%3A%20’%E2%80%9CI%20just%20wanted%20to%20share%20a%20quick%20note%20and%20let%20you%20know%20that%20you%20guys%20do%20a%20really%20good%20job.%20I%E2%80%99m%20glad%20I%20decided%20to%20work%20with%20you.%20It%E2%80%99s%20really%20great%20how%20easy%20your%20websites%20are%20to%20update%20and%20manage.%20I%20never%20have%20any%20problem%20at%20all.%20My%20new%20site%20is%20so%20much%20faster%20and%20easier%20to%20work%20with%20than%20my%20old%20site.%20It%20used%20to%20take%20me%20an%20hour%20or%20more%20to%20update%20a%20page%20and%20I%20would%20still%20sometimes%20screw%20things%20up.%20Now%20it%E2%80%99s%20almost%20like%20having%20a%20designer%20right%20here%20with%20me.%20I%20just%20choose%20the%20page%2C%20make%20the%20change%20and%20click%20save.%20It%E2%80%99s%20so%20simple.%20Thanks%2C%20guys!%E2%80%9D’%2C%0D%0A%20%20%20%20%20%20%20%20%20%20name%3A%20’Phoebe%20Kotliar’%2C%0D%0A%20%20%20%20%20%20%20%20%20%20color%3A%20’rgba(32%2C%20191%2C%20107%2C1.0)’%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20text%3A%20’%E2%80%9CYou%20made%20it%20so%20simple.%20My%20new%20site%20is%20so%20much%20faster%20and%20easier%20to%20work%20with%20than%20my%20old%20site.%20I%20just%20choose%20the%20page%2C%20make%20the%20change%20and%20click%20save.%20Thanks%2C%20guys!%E2%80%9D’%2C%0D%0A%20%20%20%20%20%20%20%20%20%20name%3A%20’Arthur%20Birnbaum’%2C%0D%0A%20%20%20%20%20%20%20%20%20%20color%3A%20’rgba(250%2C%20130%2C%2049%2C1.0)’%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20text%3A%20’Their%20work%20on%20our%20website%20and%20Internet%20marketing%20has%20made%20a%20significant%20different%20to%20our%20business.%20We%E2%80%99ve%20seen%20a%20425%25%20increase%20in%20quote%20requests%20from%20the%20website%20which%20has%20been%20pretty%20remarkable%20%E2%80%93%20but%20I%E2%80%99d%20always%20like%20to%20see%20more!’%2C%0D%0A%20%20%20%20%20%20%20%20%20%20name%3A%20’Louisa%20P.%20Huard’%2C%0D%0A%20%20%20%20%20%20%20%20%20%20color%3A%20’rgba(75%2C%20123%2C%20236%2C1.0)’%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20text%3A%20’When%20it%20comes%20to%20digital%20marketing%20there%20are%20loads%20of%20commentators%20that%20talk%20a%20good%20game%2C%20but%20Sonja%20and%20Sharon%20help%20you%20make%20it%20happen.%20They%20have%20enabled%20me%2C%20coached%20me%20and%20given%20me%20the%20confidence%20to%20share%20Wealth%20Horizon%E2%80%99s%20story%20widely.%20It%E2%80%99s%20engaging%20customers%20and%20industry%20commentators%20alike%2C%20and%20bringing%20our%20new%20business%20great%20results.’%2C%0D%0A%20%20%20%20%20%20%20%20%20%20name%3A%20’Cristina%20Aurmoogum’%2C%0D%0A%20%20%20%20%20%20%20%20%20%20color%3A%20’rgba(165%2C%2094%2C%20234%2C1.0)’%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20text%3A%20’I%20hired%20Florin%20Pop%20based%20on%20others%20positive%20experiences%2C%20and%20I%20understand%20why%20he%5C’s%20so%20highly%20rated.%20His%20code%20is%20very%20clean%2C%20he%20communicates%20well%2C%20and%20he%20likes%20to%20offer%20alternative%20solutions.’%2C%0D%0A%20%20%20%20%20%20%20%20%20%20name%3A%20’J.%20Kent%20Pepper’%2C%0D%0A%20%20%20%20%20%20%20%20%20%20color%3A%20’rgba(235%2C%2059%2C%2090%2C1.0)’%20%7D%5D%3B%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20addTestimonial(0)%3B%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20authorsEl.forEach((author%2C%20idx)%20%3D%3E%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20author.addEventListener(‘click’%2C%20e%20%3D%3E%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20addTestimonial(idx)%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20author.classList.add(‘selected’)%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%7D)%3B%0D%0A%20%20%20%20%20%20%20%20%7D)%3B%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20function%20addTestimonial(idx)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20const%20testimonial%20%3D%20testimonials%5Bidx%5D%3B%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20nameEl.innerHTML%20%3D%20testimonial.name%3B%0D%0A%20%20%20%20%20%20%20%20%20%20textEl.innerHTML%20%3D%20testimonial.text%3B%0D%0A%20%20%20%20%20%20%20%20%20%20container.style.background%20%3D%20testimonial.color%3B%0D%0A%20%20%20%20%20%20%20%20%20%20container.style.boxShadow%20%3D%20%600%2035px%2010px%20-20px%20%24%7Btestimonial.color.substring(0%2C%20testimonial.color.length%20-%204)%7D0.9)%60%3B%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20authorsEl.forEach(author%20%3D%3E%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20author.classList.remove(‘selected’)%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%7D)%3B%0D%0A%20%20%20%20%20%20%20%20%7D” provider=”manual” lang=”default”/]
View Demo
Thank you for reading this blog, share this blog as much as possible and also show it to your friends. If you have any questions, feel free to comment.