Skip to content

Instantly share code, notes, and snippets.

@crbdev
Last active February 6, 2024 04:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save crbdev/7c8d4064c6d43c693e3924ad611555c9 to your computer and use it in GitHub Desktop.
Save crbdev/7c8d4064c6d43c693e3924ad611555c9 to your computer and use it in GitHub Desktop.
Styles used for the custom testimonial demo page
.gv-diy-container {
display:flex;
flex-wrap: wrap;
justify-content:center;
}
.gv-diy-view {
margin-right: 50px;
width: 330px;
margin-top:50px;
}
.gv-diy-view {margin-bottom:2em;}
.testimonial-card {
min-height: 400px;
width: 350px;
background-color: white;
border-radius: 10px;
box-shadow: 0 8px 30px rgba(0,0,0,.3);
display: flex;
flex-flow: column;
justify-content:space-between;
}
.person {
text-align:center;
color:#ffffff;
margin-top:5px;
}
.quote {
max-width:75px !important;
transform: rotate(10deg) translate(100px, -30px);
}
.text {
padding: 2.2em;
line-height: 1.7em;
position: relative;
font-size: 18px;
z-index:300;
}
.image {
max-height:120px;
max-width:120px;
border-radius:50%;
padding-bottom:10px;
margin:0 auto;
}
.gv-container img {
display: block;
margin: 0 auto;
padding: 0;
max-width: 100%;
max-height: 100%;
border-radius: 50%;
margin-top:-70px;
border: 5px solid white;
}
.testimonial-footer {
background: linear-gradient(90deg, #1a2B96 0%, #d22B96 100%);
height: 140px;
border-radius: 0 0 10px 10px;
position:relative;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment