Testimonial Section Layout

footer map

July 23, 2022

On Click Flip Effect

July 23, 2022

Published by Eshton at July 23, 2022

Our Happy Clients

What they say about us

Miko represents Nuit Solutions! He is the bridge, an interconnector between us and our clients. Miko, our Tech-Teddy is a very important member of our team as he creates strong brand awareness and a user-friendly environment.

Nina is the driving force of NUIT Solutions. Having 13 years of experience in Business Communication and Information Technology, she is an expert at conceptualizing new ideas and establishing business goals for clients to build up their online presence.

Uday is the Vita-M of our system, mentor and multivitamin, always around to boost our morale and mend our work pattern. He ensures efficiency and quick output, through training and evaluation, thus strengthening the head-and-hands of the web development team.

Loretta provides a clear vision for NUIT Initiatives and propels the ideas into action. She heads the Prayers and Petitions Team, as NUIT Solutions believes that working for man alone is not sufficient, but utilizing our skills for God's glory is what brings value and meaning to our work.

RLN is our financial advisor and oversees all records and transactions of the company. Being a veteran, with 35+ years of experience in Mahindra & Mahindra, he helps prepare our profit goals and monitors the growth of the company.

Miko

The Waymaker - Our Mascot

Nina

The Thinker

Uday

The Mentor

Loretta

The Reviewer

R. L. Narasimhan

The Evaluator

HTML

<!-- Testimonial section -->

<div class="ns_testimoinal_wrapper" id="ns_testimoinal_wrapper">
	<div class="ns_testimoinal_container">	

		<div class="ns_testimoinal_heading">	
			<h2 class="ns_testimoinal_title">Our Happy Clients</h2>
			<p class="ns_testimoinal_subtitle">What they say about us</p>
		</div>

		<div class="ns_testimoinal_accord">
			
			<div class="ns_testimoinal_accord_content">
		

			<!-- Testimonial box -->
			<div class="ns_testimoinal_accord_content_item" id="tab_5">
				<div class="ns_testimoinal_inner_content">
					<div class="ns_test_icon"><i class="fas fa-quote-left"></i></div>
					<div class="ns_test_content">
						<p>RLN is our financial advisor and oversees all records and transactions of the company. Being a veteran, with 35+ years of experience in Mahindra & Mahindra, he helps prepare our profit goals and monitors the growth of the company. </p>
					</div>
				</div>
			</div>
			<!-- Testimonial box End -->

			</div>


			<div class="ns_testimoinal_accord_tab owl-carousel owl-theme">

				<!-- Testimonial Tab Button -->
				<div class="item">
					<div class="ns_testimoinal_accord_tab_item" onclick="openCity(event, 'tab_5')">
						
						<div class="ns_test_image">
							<img src="image.jpg" alt="">
							<div class="ns_test_tab">
								<h4 class="ns_test_title">R. L. Narasimhan</h4>
								<p class="ns_test_subtitle">The Evaluator</p>
							</div>
						</div>

					</div>
				</div>
				<!-- Testimonial Tab Button End-->


			</div>

			

		</div>
	
	</div> <!-- container end -->
</div> <!-- wrapper end -->

<!-- Testimonial section End -->

CSS

.ns_testimoinal_wrapper {
	background-color: #c5e8ff;
	min-height: 100vh;
	display: grid;
	align-content: center;
	text-align: center;
}	

.ns_testimoinal_container {
	width: 90%;
	margin: auto;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.ns_test_subtitle {
	font-family: inherit;
    font-size: 16px;
}

.ns_test_title {
	font-family: inherit;
    font-size: 20px;
    font-weight: 600;
margin-bottom:5px;
}

#ns_testimoinal_wrapper .ns_test_image img {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: 50%;
}

.ns_test_image {
    width: 100%;
    display: flex;
    justify-content: center;
    column-gap: 1em;
    align-items: center;
}

.ns_testimoinal_accord_tab_item .ns_test_tab {
	display: none;
	text-align: left;
}

.ns_testimoinal_accord_tab_item.active .ns_test_tab {
	display: block;
}

.ns_testimoinal_accord_content {
	position: relative;
	z-index: 2;
}

.ns_testimoinal_accord_content_item {
    margin: 50px 0px;
    position: relative;
    z-index: 1;
}



.ns_testimoinal_accord_tab {
	width: 90%;
	margin: auto;
}

.ns_test_icon {
    font-size: 6vw;
    min-height: 150px;
    align-items: center;
    display: grid;
    border-right: solid #ddd 2px;
    color: #ddd;
}

.ns_testimoinal_inner_content {
	display: grid;
	grid-template-columns: 15% 85%;
	padding: 2em;
	background-color: #fff;
	border-radius: 10px;
}


.ns_test_content{
    padding-inline: 1.5em;
    text-align: left;
    min-height: 150px;
    display: grid;
    align-items: center;
    font-size: 18px;
    font-family: inherit;
    color: #000;
line-height:1.4;
}

.ns_testimoinal_title {
	font-family: inherit;
    color: #000;
    font-size: 48px;
    margin: 0;
line-height:1.2;
}

.ns_testimoinal_subtitle {
	font-weight: 600;
    font-size: 18px;
    padding: 15px 0;
    margin: 0;
    font-family: inherit;
}


.ns_testimoinal_accord_tab  .owl-stage-outer {
	overflow: visible;
}

.ns_testimoinal_accord_tab .owl-stage {
        display:flex;
        align-items:center;
}




.ns_testimoinal_accord_tab_item.active::before {
    content: "";
    width: 75px;
    height: 75px;
    position: absolute;
    top: -110px;
    left: 100px;
    background-color: #fff;
    transform: rotate(60deg);
    z-index: -1;
    box-shadow: 0px 0px 10px 0px #a3a3a3;
}

@media(max-width:768px) {
	.ns_testimoinal_accord_content_item::before {
    content: "";
    width: 75px;
    height: 75px;
    position: absolute;
    bottom: -5%;
    left: 50%;
    background-color: #fff;
    transform: rotate(60deg);
    z-index: -1;
    box-shadow: 0px 0px 10px 0px #a3a3a3;
	}

	.ns_testimoinal_accord_tab_item.active::before {
		content: none;
	}



	.ns_testimoinal_inner_content {
    grid-template-columns: 1fr;
    padding: 1.5em 1em;

	}

	.ns_test_icon {
    font-size: 100px;
    min-height: 125px;
    align-items: center;
    display: grid;
		border-right:none;
    border-bottom: solid #ddd 2px;
    color: #ddd;
    margin-bottom: 15px;
	}

}

JS / JQ / CDN

/* Links for head area */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HReXmSZXHEkpYoOA==" crossorigin="anonymous" referrerpolicy="no-referrer" />


/* Links for footer area */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> /* Add only if jquery.min.js is not present */

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<script type="text/javascript">
	
	function openCity(evt, tabName) {
  // Declare all variables
  var i, ns_testimoinal_accord_content_item, ns_testimoinal_accord_tab_item;

  // Get all elements with class="ns_testimoinal_accord_content_item" and hide them
  ns_testimoinal_accord_content_item = document.getElementsByClassName("ns_testimoinal_accord_content_item");
  for (i = 0; i < ns_testimoinal_accord_content_item.length; i++) {
    ns_testimoinal_accord_content_item[i].style.display = "none";
  }

  // Get all elements with class="ns_testimoinal_accord_tab_item" and remove the class "active"
  ns_testimoinal_accord_tab_item  = document.getElementsByClassName("ns_testimoinal_accord_tab_item");
  for (i = 0; i < ns_testimoinal_accord_tab_item .length; i++) {
    ns_testimoinal_accord_tab_item [i].className = ns_testimoinal_accord_tab_item [i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the link that opened the tab
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}


// hides all content data
jQuery('.ns_testimoinal_accord_content_item').hide();

// shows first content data
jQuery('.ns_testimoinal_accord_content .ns_testimoinal_accord_content_item:first-child').show();

// adds active class to first tab 
jQuery('.ns_testimoinal_accord_tab .item:first-child .ns_testimoinal_accord_tab_item').addClass('active');

// adds and removes active class
jQuery('.ns_testimoinal_accord_tab_item').click(function(){
    if ( jQuery(this).hasClass('active') ) {

        jQuery('.ns_testimoinal_accord_tab_item.active').removeClass('active');
        jQuery(this).addClass('active');    

    }
});



</script>

<script type="text/javascript">
	
jQuery('.ns_testimoinal_accord_tab.owl-carousel').owlCarousel({
    loop:true,
    center:true,
    margin:10,
    nav:false,
    dots:false,
    margin:10,
    responsive:{
        0:{
            items:1.5,
						stagePadding:20

        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})


</script>

Testimonial Section Layout

footer map

On Click Flip Effect

Our Happy Clients

Miko

Nina

Uday

Loretta

R. L. Narasimhan

HTML

CSS

JS / JQ / CDN

Eshton

Related posts

Team Slider Style 4

Testimonial layout-2

Map SVG Animation

Leave a Reply Cancel reply