Document * {
box-sizing: border-box;
} /* prevent vertical scroll bar glitch */
html {
overflow-y: scroll;
} /* .carousel {
background: #EEE;
} */
.fade.in
{
display: block !important;
}
.close:hover {
color: #FFFFFF !important;
}
.close
{
border: 2px solid white !important;
opacity: 1;
}
.modal-dialog{
width: 100%;
height: -webkit-fill-available;
margin-top: 0px;
margin-bottom: 0px;
}
.modal-header {
width: 100%;
height: 0px;
border: none !important;
}
.modal-header .close
{
margin-top: 0;
}
.carousel-cell {
width: 50%;
margin-right: 10px;
border-radius: 5px;
counter-increment: gallery-cell;
} /* cell number */
.carousel-cell:before {
display: block;
text-align: center;
line-height: 200px;
font-size: 80px;
color: white;
} @media (max-width: 767px) {
.carousel-cell {
width: 100%;
} .flickity-page-dots {
display: block;
} .slider-container {
width: 80% !important;
}
} .flickity-page-dots {
display: none;
} .flickity-enabled:focus {
outline: none;
}
/* external css: flickity.css */
* {
box-sizing: border-box;
} /* prevent vertical scroll bar glitch */
html {
overflow-y: scroll;
}
/* Customize Flickity pagination dots styles */
.flickity-page-dots {
display: flex;
justify-content: center;
margin-top: 10px; /* Adjust the margin as needed */
position: static !important;
margin-left: 5px !important;
margin-top: 5%;
} .cards {
height: 481px;
} .dot {
height: 10px;
width: 10px;
margin: 0 5px; /* Adjust the margin as needed */
background-color: #aaaaaa; /* Adjust the background color */
border-radius: 50%;
display: inline-block;
cursor: pointer;
} #g2-widget {
padding: 35px 0;
#g2-heading {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
font-weight: 700;
color: #1A1A1A;
margin: 0 30px 30px 30px;
font-size: 33px !important;
text-align: center;
} .slider {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Adjust this value as needed */
overflow: hidden;
} .flickity-viewport {
width: 100%;
overflow: hidden;
} .flickity-slider {
display: flex;
transition: transform 0.3s ease-in-out;
} transition: transform 0.5s ease-in-out;
cursor: grab
} .slider:active {
cursor: grabbing;
} .slide {
width: 100%;
flex: 0 0 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
flex-shrink: 0;
gap: 10px;
} .column {
box-sizing: border-box;
padding: 15px;
margin: 0px 100px;
margin-right: 10px;
border-radius: 5px;
} .dots {
display: flex;
justify-content: center;
margin-top: 10px;
} .dot {
height: 10px;
width: 10px;
margin: 15px 5px 5px 5px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
cursor: pointer;
} #g2-widget .customer-video-section .g2-review-play-button.hovered {
background-image: url(https://cdn.syncfusion.com/content/images/user-reviews/g2-review-play-button-hover.webp);
} .g2-subheading {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
font-size: 16px;
color: #1A1A1A;
text-align: center;
line-height: 27px;
margin: 0 30px 40px 30px;
} .g2-reward {
margin: 30px 0 30px 30px;
display: flex;
#g2-reward-section {
height: auto;
margin-right: 30px;
border: 1px solid #E9E9E9;
border-radius: 9px !important;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
transition: all .2s ease-out;
will-change: transform;
padding: 40px;
&:hover {
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.06);
transform: translateY(-10px);
text-decoration: none;
cursor: pointer;
} .boxed {
background-color: #fff;
padding: 35px;
} .g2-profile-image {
display: table-cell;
min-width: 70px;
img {
width: 70px;
height: 70px;
border-radius: 35px;
} } .g2-profile {
display: table-cell;
vertical-align: middle;
padding-left: 20px;
.name {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
font-size: 14px;
font-weight: 700;
color: #1A1A1A;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
} .designation {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
font-size: 12px;
color: #32952E;
padding-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
} .g2-rating-img {
width: 110px;
margin-top: 3px;
margin-left: -5px;
} } .g2-review {
margin-top: 30px;
.heading {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
height: 50px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #1A1A1A;
} .description {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
font-size: 14px;
line-height: 23px;
margin-top: 8px;
margin-bottom: 30px;
height: 135px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
color: #1A1A1A;
} .read-more {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
font-size: 14px;
font-weight: 600;
color: #0073dc !important;
&:hover {
opacity: 0.7 !important;
} }
}
}
} @media (max-width: 992px) {
#g2-widget {
#g2-heading {
font-size: 30px !important;
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
} .g2-subheading {
font-size: 14px;
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
line-height: 24px;
br {
display: none;
} } .g2-reward {
display: block;
margin-right: 30px;
#g2-reward-section {
width: 100%;
padding: 30px;
.g2-review {
.heading {
height: auto;
} .description {
height: auto;
margin-bottom: 20px;
} }
}
}
}
} #g2-widget {
padding: 35px 0px;
} #g2-widget #g2-heading {
font-weight: 700;
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
color: #0F172A;
margin: 0 30px 30px 30px;
text-align: center;
} #g2-widget .g2-subheading {
font-size: 16px;
color: #475569;
text-align: center;
line-height: 27px;
margin: 0 30px 30px 30px;
} .heading {
font-size: 22px;
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
font-weight: 700;
line-height: 26px;
color: #0F172A;
margin-top: 15px;
} .description {
font-size: 14px;
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
line-height: 24px;
margin: 8px 0px 100px 0px;
color: #475569;
font-weight: 600;
} .cards {
background: #F4F8FF;
border-radius: 10px;
padding: 24px 30px;
margin: 0px 10px 30px 10px;
position: relative;
} .slide {
display: flex;
/*gap: 30px;*/
} .g2-rating-img {
width: 110px;
margin: 0px 0px 0px -1px;
} .customer-video-caption {
font-size: 14px;
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
line-height: 24px;
margin: 15px 0px 0px 0px;
font-weight: 600;
} #g2-widget .name {
color: #0F172A;
font-size: 13px;
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
font-weight: 600;
line-height: 18px;
margin: 5px 0px 0px 14px;
} .designation {
color: #38475E;
font-size: 9px;
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
font-weight: 600;
letter-spacing: 0.5px;
} .doubleqoutes {
padding-bottom: 3px;
} /*.carousel-cell {*/
/* width: 50%;*/
/* margin-right: 10px;*/
/* border-radius: 5px;*/
/*}*/ .carousel.is-expanded {
width: 100%;
} .g2-profile-image {
display: inline-flex;
min-width: 70px;
} .g2-profile-image img {
width: 70px;
height: 70px;
border-radius: 35px;
} .flickity-page-dots {
bottom: -56px;
margin-left: -40px;
} .flickity-page-dots .dot {
margin: 0 2px;
background: #A;
} .flickity-page-dots .dot.is-selected {
background-color: #000000;
} .customer-video-section {
margin-top: 20px;
position: relative;
} .customer-video-section a {
pointer-events: none;
} .customer-video-section .g2-review-play-button {
position: absolute;
width: 90px;
background-size: cover;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90px;
background-image: url(https://cdn.syncfusion.com/content/images/user-reviews/g2-review-play-button.webp);
} .customer-video-section .g2-review-play-button.hovered {
background-image: url(https://cdn.syncfusion.com/content/images/user-reviews/g2-review-play-button-hover.webp);
} .customer-video-section .g2-review-play-button.active {
opacity: 60%;
} .customer-video-section .customer-detail-section {
position: absolute;
left: 21px;
display: flex;
bottom: 21px;
flex-direction: column;
} .customer-video-section .customer-detail-section .customer-name {
color: #FFF;
font-size: 14px;
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
font-weight: 700;
line-height: 22px;
letter-spacing: 0.5px;
} .customer-video-section .customer-detail-section .customer-designation {
color: #FFF;
font-size: 9px;
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
font-weight: 500;
line-height: 16px;
letter-spacing: 0.5px;
} .customer-video-section:hover {
cursor: pointer;
} .customer-video-section:hover img {
filter: brightness(70%) blur(0);
} #g2-widget .g2-author-section {
display: flex;
position: absolute;
left: 30px;
bottom: 30px;
} @media (max-width: 320px) {
.customer-video-section .g2-review-play-button {
width: 60px;
height: 60px;
} .customer-video-section .customer-detail-section {
left: 11px;
bottom: 8px;
} .customer-video-section .customer-detail-section .customer-name {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
font-size: 11px;
} .customer-video-section .customer-detail-section .customer-designation {
font-size: 8px;
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
}
} @media (min-width: 321px) and (max-width: 400px) {
.customer-video-section .g2-review-play-button {
width: 75px;
height: 75px;
}
} .common-reviews .description {
margin: 8px 0px 100px 0px !important;
} .common-reviews .name {
margin-left: 0px !important;
} /*@media (min-width: 991px) and (max-width: 1024px) {*/
/* .carousel {*/
/* margin: 0px 10% 0px 10%;*/
/* }*/
/*}*/ @media (min-width: 768px) and (max-width: 991px) {
.carousel {
margin: 0px 0% 0px 0%;
}
} @media (min-width: 768px) and (max-width: 1024px) {
.doubleqoutes {
padding-top: 20px;
}
} @media only screen and (min-width: 768px) and (max-width: 1023px) {
.cards {
margin: 0 10px !important;
}
} @media only screen and (min-width: 1024px) and (max-width: 1440px) {
.slider-container {
width: 69% !important;
}
} @media (min-width: 760px) and (max-width: 991px) {
.g2-widget-review .app-ratings {
width: 50.14px;
height: 18.12px;
margin-left: 5px;
font-size: 12px;
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
padding: 1px;
} .g2-widget-review .app-logos-section {
margin: 40px 4px !important;
} .g2-widget-review .star-rating {
height: 16.12px;
width: 100px;
} .g2-widget-review .app-ratings-link {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
font-size: 12px;
} .g2-widget-review .reviews-count {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
font-size: 12px;
} .g2-widget-review .app-logo {
height: 46px !important;
}
} @media (max-width: 527px) {
#g2-widget .cards {
margin: 0px 15px 30px;
}
} @media (max-width: 280px) {
.g2-author-section {
margin-left: 8px;
left: 12px;
} .cards {
padding: 24px 20px;
} .name {
font-size: 11px;
} .g2-rating-img {
width: 89px;
} .g2-widget-review .app-logos-section {
margin: 40px 6px !important;
}
} @media (max-width: 767px) {
#g2-widget .flickity-page-dots {
bottom: -15px;
} #g2-widget .flickity-page-dots .dot {
margin: 0px 3px;
} #g2-widget .carousel {
margin: 0 !important;
} #g2-widget .carousel-cell {
width: 100%;
} .cards {
height: 544px;
} .g2-widget-review .app-ratings {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
width: 57.14px;
height: 20px;
font-size: 12px;
padding: 2px;
} .g2-widget-review .star-rating {
height: 16.12px;
width: 100px;
} .common-reviews .cards {
margin: 0px 20px 45px 20px !important;
}
} .g2-widget-review {
padding: 35px 0px;
} .g2-widget-review #g2-rating {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
font-weight: 800;
color: #000000;
margin: 45px 30px 30px;
text-align: center;
} .g2-widget-review a::after {
content: "→";
} .g2-widget-review .app-logos-section {
margin: 40px 30px;
display: flex;
flex-direction: column;
align-items: center;
} .g2-widget-review .app-ratings {
background: #d0fae5;
border: 0.75px solid #a8ddc2;
border-radius: 38.5927px;
width: 56.14px;
height: 23.12px;
color: #075a40;
font-weight: 700;
text-align: center;
padding: 1px;
margin-left: 8px;
font-size: 14px;
} .g2-widget-review .star-rating {
height: 17.12px;
width: 104px;
background-size: contain;
} .g2-widget-review .reviews-count {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
padding: 11px;
font-weight: 600;
color: #666666;
} .g2-widget-review .app-logo {
width: 242px;
height: 49px;
} .g2-widget-review .app-ratings-link {
color: #006AFF;
font-weight: 600;
} .g2-widget-review .app-ratings-link:hover {
color: #0450C2 !important;
cursor: pointer;
} .modal-content {
opacity: 1;
z-index: 100001;
background: rgba(0, 0, 0, .5);
top: 0;
position: fixed;
top: 50;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
} .modal-content {
display: none;
} .close {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
float: right;
font-size: 17px;
width: 40px;
height: 40px;
font-weight: 100 !important;
line-height: 0;
left: 2;
margin-right: 14%;
background: transparent;
color: #ffffff;
border-radius: 75px;
border: 2px solid white;
padding: 19px 11px;
} .close:hover {
opacity: .5;
background: transparent;
} .modal-body {
display: flex;
height: 100%;
width: 100%;
} #video-frame {
width: 60%;
margin-left: 20%;
height: 60%;
margin-top: 60px;
} #wrong {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
font-size: 30px;
margin-left: -1px;
} .modal-header {
margin-top: 70px;
} @media only screen and (max-width: 767px) { .cards {
width: 100%;
}
} .slider-container {
width: 70%;
margin: auto;
} @media only screen and (min-width: 768px) and (max-width: 1023px) {
.slide {
display: flex;
gap: 30px;
}
} @media (max-width:1023px) {
.slider-container {
width: 80% !important;
}
} @media (min-width:768px) and (max-width:925px) {
.slider-container {
width: 90% !important;
} @media (max-width:500pxpx) {
.slider-container {
width: 90% !important;
}
} @media only screen and (min-width: 768px) and (max-width: 1024px) { .slide {
display: flex;
/*gap: 30px;*/
} .doubleqoutes {
margin-top: 20px
} .description {
margin: 8px 0px 150px 0px;
}
} .flickity-prev-next-button {
display: none;
} .image-width {
width: 100%;
} .customer-profile {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
}
Excellent experience with Syncfusion!
Syncfusion is a product that makes life easier! I use it to create Blazor applications (server
side and webassembly) and the controls speed up development a lot. Furthermore, if needed, it is
possible to ask for direct support that is never long in coming!
Andrea Scarpante,
Sydea srl
Cliff Agius
Medical IT Pty Ltd
It is flawless, simple code, and great docs.
Great support and comprehensive product suite
I use a lot of their DocIO toolkit. The support they provide for that is something to aspire to
- really great.
Ian Yates,
Medical IT Pty Ltd
Zach Grigor
Medical IT Pty Ltd
We have been using Syncfusion for a fair while now and it’s just, it’s so simple and it just
works.
The complete component set
It is the most complete component set available. Also very handy is the fact that there is a
community edition, this gives me the opportunity to test thing at home without buying a separate
license.
Johan Visser,
H and T Pawnbrokers
Shaun Lawrence
Medical IT Pty Ltd
We use the Image Editor and all things like that to really make our application much more
user-friendly.
$(document).ready(function () {
mobileTestimonial();
});
function mobileTestimonial() {
var flickityInstance = $('#slider').data('flickity');
var $carousel = $('#slider').flickity();
if ($(window).width() < 767) {
flickityInstance.options.groupCells = true;
flickityInstance.options.adaptiveHeight = true;
}
else {
flickityInstance.options.groupCells = 2;
flickityInstance.options.adaptiveHeight = false;
}
$carousel.flickity('resize');
}
function flickityResize() {
var g2ReviewCarousel = $('#slider').flickity();
g2ReviewCarousel.resize();
}
$(window).resize(function () {
mobileTestimonial();
}); function openModal() {
document.getElementById('modal-content').style.display = 'block';
document.getElementById('video-modal').style.setProperty('display', 'block', 'important');
var videoFrame = document.getElementById('video-frame'); } function closeModal() {
document.getElementById('modal-content').style.display = 'none';
document.getElementById('video-modal').style.setProperty('display', 'none', 'important');
var videoFrame = document.getElementById('video-frame');
var videoSrc = videoFrame.src;
videoFrame.src = videoSrc;
} // Wait for the document to be ready
document.addEventListener("DOMContentLoaded", function () {
// Get all elements with class "g2-review-play-button"
var playButtons = document.querySelectorAll(".g2-review-play-button"); // Add click event listener to each play button
playButtons.forEach(function (button) {
button.addEventListener("click", function () {
// Get the video URL from the "href" attribute
var videoUrl = button.parentElement.querySelector("a").getAttribute("href"); // Set the video frame source
document.getElementById("video-frame").src = videoUrl; // Show the modal
//$("#video-modal").modal("show");
});
});
}); $(".customer-video-section").hover(function () {
var e = $(this).find("img").attr("alt");
e = e.replace(" ", "-") + "-hover.webp"; $(this).find("div").addClass("hovered");
}, function () {
var e = $(this).find("img").attr("alt");
e = e.replace(" ", "-") + ".webp";
$(this).find("div").removeClass("hovered");
});
$('.customer-video-section').mousedown(function () {
$(this).find('div').addClass('active');
}).mouseup(function () {
$(this).find('div').removeClass('active');
}); document.querySelectorAll('.customer-video-section').forEach(function(element) {
element.addEventListener('click', function(event) {
event.preventDefault(); var playButton = this.querySelector('.g2-review-play-button');
if (playButton) {
playButton.click();
} });
});
